feat: Text background highlight (#1754)

* #1196/feat: add text background highlight

* unify text color

* dark mode support
* unify text color and highlight

* dark mode support for color selector trigger

* fix see through in color selector dark mode

* fix selection highlight in dark mode

* brown color

* clean up

---------

Co-authored-by: sanua356 <sanek.pankratov356@gmail.com>

packages/editor-ext/src/index.ts

@@ -20,3 +20,4 @@ export * from "./lib/markdown";
 export * from "./lib/search-and-replace";
 export * from "./lib/embed-provider";
 export * from "./lib/subpages";
+export * from "./lib/highlight";

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

@@ -0,0 +1,40 @@
+import {
+  Highlight as TiptapHighlight,
+  type HighlightOptions,
+} from "@tiptap/extension-highlight";
+
+export const Highlight = TiptapHighlight.extend<HighlightOptions>({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      color: {
+        default: null,
+        parseHTML: (element) =>
+          element.getAttribute("data-color") || element.style.backgroundColor,
+        renderHTML: (attributes) => {
+          if (!attributes.color) {
+            return {};
+          }
+
+          return {
+            "data-color": attributes.color,
+            style: `background-color: ${attributes.color}; color: inherit`,
+          };
+        },
+      },
+      colorName: {
+        default: null,
+        parseHTML: (element) =>
+          element.getAttribute("data-highlight-color-name") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.colorName) {
+            return {};
+          }
+          return {
+            "data-highlight-color-name": attributes.colorName.toLowerCase(),
+          };
+        },
+      },
+    };
+  },
+});