fix(lexical): implement splitText on FontColorNode

webiny · Jul 2, 2024 · 67615b1 · 67615b1
1 parent b6e515a
commit 67615b1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/packages/lexical-editor/src/plugins/FontColorPlugin/FontColorPlugin.tsx b/packages/lexical-editor/src/plugins/FontColorPlugin/FontColorPlugin.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { ADD_FONT_COLOR_COMMAND, FontColorPayload } from "@webiny/lexical-nodes";
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from "lexical";
+import { ADD_FONT_COLOR_COMMAND, FontColorPayload } from "@webiny/lexical-nodes";
 import { useRichTextEditor } from "~/hooks";
 import { applyColorToSelection } from "./applyColorToSelection";
 

diff --git a/packages/lexical-editor/src/plugins/FontColorPlugin/applyColorToNode.ts b/packages/lexical-editor/src/plugins/FontColorPlugin/applyColorToNode.ts
@@ -1,21 +1,9 @@
-import { $isRootOrShadowRoot, TextNode } from "lexical";
-import { $wrapNodeInElement } from "@lexical/utils";
-import {
-    $applyStylesToNode,
-    $createFontColorNode,
-    $createParagraphNode,
-    ThemeColorValue
-} from "@webiny/lexical-nodes";
+import { TextNode } from "lexical";
+import { $applyStylesToNode, $createFontColorNode, ThemeColorValue } from "@webiny/lexical-nodes";
 
 export function applyColorToNode(textNode: TextNode, color: ThemeColorValue) {
     const fontColorNode = $createFontColorNode(textNode.getTextContent(), color);
     $applyStylesToNode(fontColorNode, textNode);
 
-    textNode.replace(fontColorNode);
-
-    if ($isRootOrShadowRoot(fontColorNode.getParentOrThrow())) {
-        $wrapNodeInElement(fontColorNode, $createParagraphNode).selectEnd();
-    }
-
-    return fontColorNode;
+    return textNode.replace(fontColorNode);
 }
diff --git a/packages/lexical-nodes/src/FontColorNode.ts b/packages/lexical-nodes/src/FontColorNode.ts
@@ -1,4 +1,6 @@
 import {
+    $getSelection,
+    $isRangeSelection,
     createCommand,
     EditorConfig,
     LexicalNode,
@@ -88,12 +90,35 @@ export class FontColorNode extends TextNode {
     override splitText(...splitOffsets: Array<number>): Array<FontColorNode> {
         const newNodes = super.splitText(...splitOffsets);
 
+        const selection = $getSelection();
+
         // After splitting, we need to re-apply styling to the new TextNodes.
-        const fontColorNodes = newNodes.map(textNode => {
-            const fontColorNode = $createFontColorNode(textNode.getTextContent(), this.__color);
+        const fontColorNodes = newNodes.map(node => {
+            if (node instanceof FontColorNode) {
+                return node;
+            }
+
+            const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);
             $applyStylesToNode(fontColorNode, this);
 
-            return textNode.replace(fontColorNode);
+            const newNode = node.replace(fontColorNode);
+
+            // Since we're replacing the existing node, we need to update the selection keys.
+            // This is very important to not break the editor functionality!
+            if ($isRangeSelection(selection)) {
+                const anchor = selection.anchor;
+                const focus = selection.focus;
+
+                if (anchor.key === node.getKey()) {
+                    anchor.key = newNode.getKey();
+                }
+
+                if (focus.key === node.getKey()) {
+                    focus.key = newNode.getKey();
+                }
+            }
+
+            return newNode;
         });
 
         return fontColorNodes as Array<FontColorNode>;