From 6209aeec0bf30a77cfe0913504acbb4d37a915d3 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Thu, 17 Oct 2024 13:26:23 +0530 Subject: [PATCH] fix: color extension not working on issue description and published page (#5852) * fix: color extension not working * chore: update types --- .../menus/bubble-menu/color-selector.tsx | 4 +- .../src/core/components/menus/menu-items.ts | 4 +- .../src/core/extensions/core-without-props.ts | 6 +- .../extensions/custom-background-color.ts | 78 ---------- .../src/core/extensions/custom-color.ts | 133 ++++++++++++++++++ .../src/core/extensions/custom-text-color.ts | 78 ---------- .../editor/src/core/extensions/extensions.tsx | 6 +- packages/editor/src/core/extensions/index.ts | 3 +- .../core/extensions/read-only-extensions.tsx | 6 +- 9 files changed, 144 insertions(+), 174 deletions(-) delete mode 100644 packages/editor/src/core/extensions/custom-background-color.ts create mode 100644 packages/editor/src/core/extensions/custom-color.ts delete mode 100644 packages/editor/src/core/extensions/custom-text-color.ts diff --git a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx index 12495213d6..b48070775e 100644 --- a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx +++ b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx @@ -16,8 +16,8 @@ type Props = { export const BubbleMenuColorSelector: FC = (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 (
diff --git a/packages/editor/src/core/components/menus/menu-items.ts b/packages/editor/src/core/components/menus/menu-items.ts index 0469fb9e00..5c420832ac 100644 --- a/packages/editor/src/core/components/menus/menu-items.ts +++ b/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, }); diff --git a/packages/editor/src/core/extensions/core-without-props.ts b/packages/editor/src/core/extensions/core-without-props.ts index b04625eb7b..10d4df2026 100644 --- a/packages/editor/src/core/extensions/core-without-props.ts +++ b/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()]; diff --git a/packages/editor/src/core/extensions/custom-background-color.ts b/packages/editor/src/core/extensions/custom-background-color.ts deleted file mode 100644 index 15746c4031..0000000000 --- a/packages/editor/src/core/extensions/custom-background-color.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Extension } from "@tiptap/core"; -// constants -import { COLORS_LIST } from "@/constants/common"; - -declare module "@tiptap/core" { - interface Commands { - 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 = { - "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(), - }; - }, -}); diff --git a/packages/editor/src/core/extensions/custom-color.ts b/packages/editor/src/core/extensions/custom-color.ts new file mode 100644 index 0000000000..dc966816c5 --- /dev/null +++ b/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 { + 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 = { + "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 = { + "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(), + }; + }, +}); diff --git a/packages/editor/src/core/extensions/custom-text-color.ts b/packages/editor/src/core/extensions/custom-text-color.ts deleted file mode 100644 index 1135ad58ce..0000000000 --- a/packages/editor/src/core/extensions/custom-text-color.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Extension } from "@tiptap/core"; -// constants -import { COLORS_LIST } from "@/constants/common"; - -declare module "@tiptap/core" { - interface Commands { - 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 = { - "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(), - }; - }, -}); diff --git a/packages/editor/src/core/extensions/extensions.tsx b/packages/editor/src/core/extensions/extensions.tsx index dff2792d55..f4edfdb5c9 100644 --- a/packages/editor/src/core/extensions/extensions.tsx +++ b/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, ]; }; diff --git a/packages/editor/src/core/extensions/index.ts b/packages/editor/src/core/extensions/index.ts index d9f9b973c9..5fe19760f2 100644 --- a/packages/editor/src/core/extensions/index.ts +++ b/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"; diff --git a/packages/editor/src/core/extensions/read-only-extensions.tsx b/packages/editor/src/core/extensions/read-only-extensions.tsx index 8bfa0509a0..cd3bbb38f4 100644 --- a/packages/editor/src/core/extensions/read-only-extensions.tsx +++ b/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, ]; };