feat: add color action to heading and paragraph toolbar

webiny · adrians5j · Apr 22, 2023 · Mar 1, 2023 · Mar 1, 2023 · Mar 1, 2023
commit 59e5ea92cb046f2d55814506573141cf0013b13e
diff --git a/packages/lexical-editor/package.json b/packages/lexical-editor/package.json
@@ -18,6 +18,7 @@
     "@lexical/selection": "0.8.1",
     "@lexical/utils": "0.8.1",
     "@webiny/react-composition": "0.0.0",
+    "@webiny/ui": "0.0.0",
     "lexical": "0.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

diff --git a/packages/lexical-editor/src/components/ColorPicker/ColorPicker.tsx b/packages/lexical-editor/src/components/ColorPicker/ColorPicker.tsx
@@ -0,0 +1,5 @@
+export interface ColorPicker {
+    onChange: (color: string) => void;
+    color: string;
+    open: boolean;
+}
diff --git a/packages/lexical-editor/src/components/Toolbar/Toolbar.css b/packages/lexical-editor/src/components/Toolbar/Toolbar.css
@@ -194,6 +194,9 @@ i.chevron-down {
   background-color: rgb(223, 232, 250);
 }
 
+i.font-color {
+  background-image: url("../../images/icons/font-color.svg");
+}
 
 .floating-text-format-popup button.toolbar-item {
   border: 0;

diff --git a/packages/lexical-editor/src/components/ToolbarActions/FontColorAction.tsx b/packages/lexical-editor/src/components/ToolbarActions/FontColorAction.tsx
@@ -0,0 +1,86 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+    $getSelection,
+    $isRangeSelection,
+    COMMAND_PRIORITY_CRITICAL,
+    SELECTION_CHANGE_COMMAND
+} from "lexical";
+import { $getSelectionStyleValueForProperty, $patchStyleText } from "@lexical/selection";
+import { DropDown } from "~/ui/DropDown";
+import { makeComposable } from "@webiny/react-composition";
+import { ColorPicker } from "@webiny/ui/ColorPicker";
+
+interface FontColorPicker {
+    onChange: (value: string) => void;
+}
+
+export const FontColorPicker = makeComposable(
+    "FontColorPicker",
+    ({ onChange }: FontColorPicker): JSX.Element => {
+        return (
+            <DropDown
+                buttonClassName="toolbar-item font-color"
+                buttonLabel={"value"}
+                buttonAriaLabel={"Formatting options for font size"}
+            >
+                <div className="color-picker-wrapper" style={{ width: "auto" }}>
+                    <ColorPicker onChange={onChange} />
+                    Some color picker thing
+                </div>
+            </DropDown>
+        );
+    }
+);
+
+export const FontColorAction = () => {
+    const [editor] = useLexicalComposerContext();
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [fontColor, setFontColor] = useState<string>("#000");
+
+    const updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+        }
+    }, [activeEditor]);
+
+    useEffect(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            setFontColor($getSelectionStyleValueForProperty(selection, "color", fontColor));
+        }
+    }, [activeEditor]);
+
+    const applyStyleText = useCallback(
+        (styles: Record<string, string>) => {
+            activeEditor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $patchStyleText(selection, styles);
+                }
+            });
+        },
+        [activeEditor]
+    );
+
+    const onFontColorSelect = useCallback(
+        (value: string) => {
+            applyStyleText({ color: value });
+        },
+        [applyStyleText]
+    );
+
+    useEffect(() => {
+        return editor.registerCommand(
+            SELECTION_CHANGE_COMMAND,
+            (_payload, newEditor) => {
+                updateToolbar();
+                setActiveEditor(newEditor);
+                return false;
+            },
+            COMMAND_PRIORITY_CRITICAL
+        );
+    }, [editor, updateToolbar]);
+
+    return <FontColorPicker onChange={onFontColorSelect} />;
+};
diff --git a/packages/lexical-editor/src/components/ToolbarPresets/HeadingToolbarPreset.tsx b/packages/lexical-editor/src/components/ToolbarPresets/HeadingToolbarPreset.tsx
@@ -7,11 +7,13 @@ import { CodeHighlightAction } from "~/components/ToolbarActions/CodeHighlightAc
 import { LinkAction } from "~/components/ToolbarActions/LinkAction";
 import { FontSizeAction } from "~/components/ToolbarActions/FontSizeAction";
 import { Divider } from "~/ui/Divider";
+import { FontColorAction } from "~/components/ToolbarActions/FontColorAction";
 
 export const HeadingToolbarPreset = () => {
     return (
         <>
             <AddToolbarAction element={<FontSizeAction />} type={"heading"} />
+            <AddToolbarAction element={<FontColorAction />} type={"heading"} />
             <AddToolbarAction element={<Divider />} type={"heading"} />
             <AddToolbarAction element={<BoldAction />} type={"heading"} />
             <AddToolbarAction element={<ItalicAction />} type={"heading"} />

diff --git a/packages/lexical-editor/src/components/ToolbarPresets/ParagraphToolbarPreset.tsx b/packages/lexical-editor/src/components/ToolbarPresets/ParagraphToolbarPreset.tsx
@@ -10,11 +10,13 @@ import { Divider } from "~/ui/Divider";
 import { NumberedListAction } from "~/components/ToolbarActions/NumberedListAction";
 import { BulletListAction } from "~/components/ToolbarActions/BulletListAction";
 import { QuoteAction } from "~/components/ToolbarActions/QuoteAction";
+import { FontColorAction } from "~/components/ToolbarActions/FontColorAction";
 
 export const ParagraphToolbarPreset = () => {
     return (
         <>
             <AddToolbarAction element={<FontSizeAction />} type={"paragraph"} />
+            <AddToolbarAction element={<FontColorAction />} type={"paragraph"} />
             <AddToolbarAction element={<Divider />} type={"paragraph"} />
             <AddToolbarAction element={<BoldAction />} type={"paragraph"} />
             <AddToolbarAction element={<ItalicAction />} type={"paragraph"} />

diff --git a/packages/lexical-editor/src/images/icons/font-color.svg b/packages/lexical-editor/src/images/icons/font-color.svg
diff --git a/packages/lexical-editor/tsconfig.build.json b/packages/lexical-editor/tsconfig.build.json
@@ -1,7 +1,10 @@
 {
   "extends": "../../tsconfig.build.json",
   "include": ["src"],
-  "references": [{ "path": "../react-composition/tsconfig.build.json" }],
+  "references": [
+    { "path": "../react-composition/tsconfig.build.json" },
+    { "path": "../ui/tsconfig.build.json" }
+  ],
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist",

diff --git a/packages/lexical-editor/tsconfig.json b/packages/lexical-editor/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src", "__tests__/**/*.ts"],
-  "references": [{ "path": "../react-composition" }],
+  "references": [{ "path": "../react-composition" }, { "path": "../ui" }],
   "compilerOptions": {
     "rootDirs": ["./src", "./__tests__"],
     "outDir": "./dist",
@@ -10,7 +10,9 @@
       "~/*": ["./src/*"],
       "~tests/*": ["./__tests__/*"],
       "@webiny/react-composition/*": ["../react-composition/src/*"],
-      "@webiny/react-composition": ["../react-composition/src"]
+      "@webiny/react-composition": ["../react-composition/src"],
+      "@webiny/ui/*": ["../ui/src/*"],
+      "@webiny/ui": ["../ui/src"]
     },
     "baseUrl": "."
   }

diff --git a/yarn.lock b/yarn.lock
@@ -15173,6 +15173,7 @@ __metadata:
     "@webiny/cli": ^5.33.1
     "@webiny/project-utils": ^5.33.1
     "@webiny/react-composition": 0.0.0
+    "@webiny/ui": 0.0.0
     lexical: 0.8.1
     react: ^17.0.2
     react-dom: ^17.0.2