fix text color and highlight

packages/editor-ext/src/index.ts

@@ -23,6 +23,7 @@ export * from "./lib/embed-provider";
 export * from "./lib/subpages";
 export * from "./lib/transclusion";
 export * from "./lib/highlight";
+export * from "./lib/text-color";
 export * from "./lib/indent";
 export * from "./lib/heading/heading";
 export * from "./lib/unique-id";

packages/editor-ext/src/lib/highlight.ts

@@ -16,9 +16,11 @@ export const Highlight = TiptapHighlight.extend<HighlightOptions>({
             return {};
           }
 
+          // --mark-bg lets CSS derive a legible dark-mode variant for
+          // arbitrary (imported) colors.
           return {
             "data-color": attributes.color,
-            style: `background-color: ${attributes.color}; color: inherit`,
+            style: `background-color: ${attributes.color}; --mark-bg: ${attributes.color}; color: inherit`,
           };
         },
       },

packages/editor-ext/src/lib/text-color.ts

@@ -0,0 +1,35 @@
+import { getStyleProperty } from "@tiptap/core";
+import { Color as TiptapColor } from "@tiptap/extension-color";
+
+export const Color = TiptapColor.extend({
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (element) => {
+              const value =
+                element.getAttribute("data-text-color") ??
+                getStyleProperty(element, "color") ??
+                element.style.color;
+              return value?.replace(/['"]+/g, "") || null;
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.color) {
+                return {};
+              }
+              // --text-color lets CSS derive a legible dark-mode variant for
+              // arbitrary (imported) colors.
+              return {
+                "data-text-color": attributes.color,
+                style: `color: ${attributes.color}; --text-color: ${attributes.color}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+});