fix: color extension not working on issue description and published page (#5852)

* fix: color extension not working

* chore: update types

packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx

@@ -16,8 +16,8 @@ type Props = {
 export const BubbleMenuColorSelector: FC<Props> = (props) => {
   const { editor, isOpen, setIsOpen } = props;
 
-  const activeTextColor = COLORS_LIST.find((c) => editor.getAttributes("textStyle").color === c.key);
-  const activeBackgroundColor = COLORS_LIST.find((c) => editor.getAttributes("textStyle").backgroundColor === c.key);
+  const activeTextColor = COLORS_LIST.find((c) => TextColorItem(editor).isActive(c.key));
+  const activeBackgroundColor = COLORS_LIST.find((c) => BackgroundColorItem(editor).isActive(c.key));
 
   return (
     <div className="relative h-full">

packages/editor/src/core/components/menus/menu-items.ts

@@ -211,7 +211,7 @@ export const ImageItem = (editor: Editor) =>
 export const TextColorItem = (editor: Editor): EditorMenuItem => ({
   key: "text-color",
   name: "Color",
-  isActive: (color) => editor.getAttributes("textStyle").color === color,
+  isActive: (color) => editor.isActive("customColor", { color }),
   command: (color: string) => toggleTextColor(color, editor),
   icon: Palette,
 });
@@ -219,7 +219,7 @@ export const TextColorItem = (editor: Editor): EditorMenuItem => ({
 export const BackgroundColorItem = (editor: Editor): EditorMenuItem => ({
   key: "background-color",
   name: "Background color",
-  isActive: (color) => editor.getAttributes("textStyle").backgroundColor === color,
+  isActive: (color) => editor.isActive("customColor", { backgroundColor: color }),
   command: (color: string) => toggleBackgroundColor(color, editor),
   icon: Palette,
 });

packages/editor/src/core/extensions/core-without-props.ts

@@ -16,8 +16,7 @@ import { IssueWidgetWithoutProps } from "./issue-embed/issue-embed-without-props
 import { CustomMentionWithoutProps } from "./mentions/mentions-without-props";
 import { CustomQuoteExtension } from "./quote";
 import { TableHeader, TableCell, TableRow, Table } from "./table";
-import { CustomTextColorExtension } from "./custom-text-color";
-import { CustomBackgroundColorExtension } from "./custom-background-color";
+import { CustomColorExtension } from "./custom-color";
 
 export const CoreEditorExtensionsWithoutProps = [
   StarterKit.configure({
@@ -85,8 +84,7 @@ export const CoreEditorExtensionsWithoutProps = [
   TableCell,
   TableRow,
   CustomMentionWithoutProps(),
-  CustomTextColorExtension,
-  CustomBackgroundColorExtension,
+  CustomColorExtension,
 ];
 
 export const DocumentEditorExtensionsWithoutProps = [IssueWidgetWithoutProps()];

packages/editor/src/core/extensions/custom-background-color.ts

@@ -1,78 +0,0 @@
-import { Extension } from "@tiptap/core";
-// constants
-import { COLORS_LIST } from "@/constants/common";
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    backgroundColor: {
-      /**
-       * Set the background color
-       * @param color The color to set
-       * @example editor.commands.setBackgroundColor('red')
-       */
-      setBackgroundColor: (color: string) => ReturnType;
-
-      /**
-       * Unset the background color
-       * @example editor.commands.unsetBackgroundColor()
-       */
-      unsetBackgroundColor: () => ReturnType;
-    };
-  }
-}
-
-export const CustomBackgroundColorExtension = Extension.create({
-  name: "customBackgroundColor",
-
-  addOptions() {
-    return {
-      types: ["textStyle"],
-    };
-  },
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          backgroundColor: {
-            default: null,
-            parseHTML: (element: HTMLElement) => element.getAttribute("data-background-color"),
-            renderHTML: (attributes: { backgroundColor: string }) => {
-              const { backgroundColor } = attributes;
-              if (!backgroundColor) {
-                return {};
-              }
-
-              let elementAttributes: Record<string, string> = {
-                "data-background-color": backgroundColor,
-              };
-
-              if (!COLORS_LIST.find((c) => c.key === backgroundColor)) {
-                elementAttributes = {
-                  ...elementAttributes,
-                  style: `background-color: ${backgroundColor}`,
-                };
-              }
-
-              return elementAttributes;
-            },
-          },
-        },
-      },
-    ];
-  },
-
-  addCommands() {
-    return {
-      setBackgroundColor:
-        (backgroundColor: string) =>
-        ({ chain }) =>
-          chain().setMark("textStyle", { backgroundColor }).run(),
-      unsetBackgroundColor:
-        () =>
-        ({ chain }) =>
-          chain().setMark("textStyle", { backgroundColor: null }).run(),
-    };
-  },
-});

packages/editor/src/core/extensions/custom-color.ts

@@ -0,0 +1,133 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    color: {
+      /**
+       * Set the text color
+       * @param {string} color The color to set
+       * @example editor.commands.setTextColor('red')
+       */
+      setTextColor: (color: string) => ReturnType;
+
+      /**
+       * Unset the text color
+       * @example editor.commands.unsetTextColor()
+       */
+      unsetTextColor: () => ReturnType;
+      /**
+       * Set the background color
+       * @param {string} backgroundColor The color to set
+       * @example editor.commands.setBackgroundColor('red')
+       */
+      setBackgroundColor: (backgroundColor: string) => ReturnType;
+
+      /**
+       * Unset the background color
+       * @example editor.commands.unsetBackgroundColorColor()
+       */
+      unsetBackgroundColor: () => ReturnType;
+    };
+  }
+}
+
+export const CustomColorExtension = Mark.create({
+  name: "customColor",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute("data-text-color"),
+        renderHTML: (attributes: { color: string }) => {
+          const { color } = attributes;
+          if (!color) {
+            return {};
+          }
+
+          let elementAttributes: Record<string, string> = {
+            "data-text-color": color,
+          };
+
+          if (!COLORS_LIST.find((c) => c.key === color)) {
+            elementAttributes = {
+              ...elementAttributes,
+              style: `color: ${color}`,
+            };
+          }
+
+          return elementAttributes;
+        },
+      },
+      backgroundColor: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute("data-background-color"),
+        renderHTML: (attributes: { backgroundColor: string }) => {
+          const { backgroundColor } = attributes;
+          if (!backgroundColor) {
+            return {};
+          }
+
+          let elementAttributes: Record<string, string> = {
+            "data-background-color": backgroundColor,
+          };
+
+          if (!COLORS_LIST.find((c) => c.key === backgroundColor)) {
+            elementAttributes = {
+              ...elementAttributes,
+              style: `background-color: ${backgroundColor}`,
+            };
+          }
+
+          return elementAttributes;
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (node) => node.getAttribute("data-text-color") && null,
+      },
+      {
+        tag: "span",
+        getAttrs: (node) => node.getAttribute("data-background-color") && null,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setTextColor:
+        (color: string) =>
+        ({ chain }) =>
+          chain().setMark(this.name, { color }).run(),
+      unsetTextColor:
+        () =>
+        ({ chain }) =>
+          chain().setMark(this.name, { color: null }).run(),
+      setBackgroundColor:
+        (backgroundColor: string) =>
+        ({ chain }) =>
+          chain().setMark(this.name, { backgroundColor }).run(),
+      unsetBackgroundColor:
+        () =>
+        ({ chain }) =>
+          chain().setMark(this.name, { backgroundColor: null }).run(),
+    };
+  },
+});

packages/editor/src/core/extensions/custom-text-color.ts

@@ -1,78 +0,0 @@
-import { Extension } from "@tiptap/core";
-// constants
-import { COLORS_LIST } from "@/constants/common";
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    color: {
-      /**
-       * Set the text color
-       * @param color The color to set
-       * @example editor.commands.setColor('red')
-       */
-      setTextColor: (color: string) => ReturnType;
-
-      /**
-       * Unset the text color
-       * @example editor.commands.unsetColor()
-       */
-      unsetTextColor: () => ReturnType;
-    };
-  }
-}
-
-export const CustomTextColorExtension = Extension.create({
-  name: "customTextColor",
-
-  addOptions() {
-    return {
-      types: ["textStyle"],
-    };
-  },
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          color: {
-            default: null,
-            parseHTML: (element: HTMLElement) => element.getAttribute("data-text-color"),
-            renderHTML: (attributes: { color: string }) => {
-              const { color } = attributes;
-              if (!color) {
-                return {};
-              }
-
-              let elementAttributes: Record<string, string> = {
-                "data-text-color": color,
-              };
-
-              if (!COLORS_LIST.find((c) => c.key === color)) {
-                elementAttributes = {
-                  ...elementAttributes,
-                  style: `color: ${color}`,
-                };
-              }
-
-              return elementAttributes;
-            },
-          },
-        },
-      },
-    ];
-  },
-
-  addCommands() {
-    return {
-      setTextColor:
-        (color: string) =>
-        ({ chain }) =>
-          chain().setMark("textStyle", { color }).run(),
-      unsetTextColor:
-        () =>
-        ({ chain }) =>
-          chain().setMark("textStyle", { color: null }).run(),
-    };
-  },
-});

packages/editor/src/core/extensions/extensions.tsx

@@ -8,17 +8,16 @@ import StarterKit from "@tiptap/starter-kit";
 import { Markdown } from "tiptap-markdown";
 // extensions
 import {
-  CustomBackgroundColorExtension,
   CustomCodeBlockExtension,
   CustomCodeInlineExtension,
   CustomCodeMarkPlugin,
+  CustomColorExtension,
   CustomHorizontalRule,
   CustomImageExtension,
   CustomKeymap,
   CustomLinkExtension,
   CustomMention,
   CustomQuoteExtension,
-  CustomTextColorExtension,
   CustomTypographyExtension,
   DropHandlerExtension,
   ImageExtension,
@@ -155,7 +154,6 @@ export const CoreEditorExtensions = (args: TArguments) => {
       includeChildren: true,
     }),
     CharacterCount,
-    CustomTextColorExtension,
-    CustomBackgroundColorExtension,
+    CustomColorExtension,
   ];
 };

packages/editor/src/core/extensions/index.ts

@@ -10,9 +10,8 @@ export * from "./slash-commands";
 export * from "./table";
 export * from "./typography";
 export * from "./core-without-props";
-export * from "./custom-background-color";
 export * from "./custom-code-inline";
-export * from "./custom-text-color";
+export * from "./custom-color";
 export * from "./drop";
 export * from "./enter-key-extension";
 export * from "./extensions";

packages/editor/src/core/extensions/read-only-extensions.tsx

@@ -21,8 +21,7 @@ import {
   CustomMention,
   HeadingListExtension,
   CustomReadOnlyImageExtension,
-  CustomTextColorExtension,
-  CustomBackgroundColorExtension,
+  CustomColorExtension,
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
@@ -123,8 +122,7 @@ export const CoreReadOnlyEditorExtensions = (props: Props) => {
       readonly: true,
     }),
     CharacterCount,
-    CustomTextColorExtension,
-    CustomBackgroundColorExtension,
+    CustomColorExtension,
     HeadingListExtension,
   ];
 };