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>

apps/web/src/components/input/rich-input.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { resolveHighlightToolbarState } from "./rich-input";
+
+describe("resolveHighlightToolbarState", () => {
+	it("shows legacy colorless highlights as default yellow and clearable", () => {
+		expect(resolveHighlightToolbarState(true, null)).toEqual({
+			visibleHighlightColor: "rgba(255, 255, 0, 1)",
+			canClearHighlight: true,
+		});
+	});
+
+	it("does not show or clear a highlight when no highlight mark is active", () => {
+		expect(resolveHighlightToolbarState(false, null)).toEqual({
+			visibleHighlightColor: undefined,
+			canClearHighlight: false,
+		});
+	});
+});