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>

packages/docx/src/html-to-docx.test.ts

@@ -55,4 +55,17 @@ describe("htmlToParagraphs", () => {
 		const result = htmlToParagraphs("<!--c--><script>x</script><p>Hello</p>");
 		expect(result.length).toBeGreaterThanOrEqual(1);
 	});
+
+	it("applies default yellow shading for <mark> without background-color", () => {
+		const result = htmlToParagraphs("<p><mark>highlighted</mark></p>");
+		const json = JSON.stringify(result[0]);
+		// TextRun with shading should contain "FFFF00" in serialized output
+		expect(json).toContain("FFFF00");
+	});
+
+	it("reads custom background-color from <mark> style for shading fill", () => {
+		const result = htmlToParagraphs('<p><mark style="background-color: rgba(204, 255, 204, 1)">green</mark></p>');
+		const json = JSON.stringify(result[0]);
+		expect(json).toContain("CCFFCC");
+	});
 });