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

* 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
+7 -3
View File
@@ -8,7 +8,7 @@ msgstr ""
"Language: uk\n"
"Project-Id-Version: reactive-resume\n"
"Report-Msgid-Bugs-To: \n"
"PO-Revision-Date: 2026-06-01 11:26\n"
"PO-Revision-Date: 2026-06-01 12:55\n"
"Last-Translator: \n"
"Language-Team: Ukrainian\n"
"Plural-Forms: nplurals=4; plural=((n%10==1 && n%100!=11) ? 0 : ((n%10 >= 2 && n%10 <=4 && (n%100 < 12 || n%100 > 14)) ? 1 : ((n%10 == 0 || (n%10 >= 5 && n%10 <=9)) || (n%100 >= 11 && n%100 <= 14)) ? 2 : 3));\n"
@@ -653,6 +653,7 @@ msgstr "Китайська (традиційна)"
msgid "Choose a model and resume draft."
msgstr "Виберіть модель та чернетку резюме."
#. Preset or custom shade refer to the color picker
#. Preset or custom shade refer to the color picker
#: src/components/input/rich-input.tsx
msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Виберіть існуючу розмову на бічній пан
msgid "Circle"
msgstr "Кругле"
#. Clear the highlight color
#. Clear the text color
#: src/components/input/rich-input.tsx
msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Високий"
msgid "Highlight"
msgstr "Виділити"
#: src/components/input/rich-input.tsx
msgid "Highlight Color"
msgstr ""
#: src/libs/locale.ts
msgid "Hindi"
msgstr "Гінді"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
msgstr "Угорська"
#: src/components/level/combobox.tsx
#: src/dialogs/resume/sections/custom.tsx
#: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
msgid "Icon"
msgstr "Іконка"
@@ -3996,4 +4001,3 @@ msgstr "Зменшити"
#: src/libs/locale.ts
msgid "Zulu"
msgstr "Зулу"