Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-08-24 15:22:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): add multicolor highlight with auto-contrast text (#3110)

Browse Source 
* feat(editor): add multicolor highlight with auto-contrast text

Enable the Tiptap Highlight extension in multicolor mode, replacing the
single-color yellow toggle with a full color picker (16 presets + custom).
When the chosen highlight color is perceptually dark, text inside the mark
automatically renders white for readability.

Changes span the full pipeline:
- Editor: ColorPicker UI, extended renderHTML for contrast detection
- PDF: normalizeMarkElements preserves data-color as inline style
- DOCX: mergeStyle reads actual background-color from <mark>
- Utils: new isDarkColor() luminance helper

Backward-compatible: legacy <mark> without data-color still renders yellow.

Resolves #3109

* fix: handle multicolor highlight edge cases

---------

Co-authored-by: Amruth Pillai <im.amruth@gmail.com>
This commit is contained in:
JamesGoslings
2026-06-01 14:58:15 +02:00
committed by GitHub
co-authored by Amruth Pillai
parent 1507d869c7
commit e96a51f31c
63 changed files with 565 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docx/src/html-to-docx.ts
+7 -3
View File
@@ -1,6 +1,6 @@
import type { IShadingAttributesProperties, ISpacingProperties } from "docx";
import { ExternalHyperlink, HeadingLevel, Paragraph, TextRun } from "docx";
import { parseColorString } from "@reactive-resume/utils/color";
import { isDarkColor, parseColorString } from "@reactive-resume/utils/color";
import { toSafeDocxLink } from "./link-utils";
export interface HtmlStyleConfig {
@@ -65,9 +65,13 @@ function mergeStyle(parent: InlineStyle, tag: string, element?: HTMLElement): In
case "CODE":
next.font = "Courier New";
break;
case "MARK":
next.shading = { fill: "FFFF00" };
case "MARK": {
const bgColor = (element as HTMLElement | undefined)?.style.backgroundColor;
const fill = bgColor ? toDocxColorValue(bgColor) : null;
next.shading = { fill: fill ?? "FFFF00" };
if (bgColor && isDarkColor(bgColor)) next.color = "FFFFFF";
break;
}
}
const colorValue = (element as HTMLElement | undefined)?.style.color;