lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Bug: TextNode.splitText incorrectly changes editor state

Open Adwin120 opened this issue 2 years ago • 1 comments

The nodes returned by .splitText have correct text content but nodes that end up in editor state after calling it do not.

  • If the input node is in segmented mode it is replaced by the same node, no splitting happens.

  • If the input node is in token mode it will be always splitted in two parts, no matter how many indices you pass to the method.

Lexical version: 0.12.0

Steps To Reproduce

  1. In lexical playground with TreeView split a TextNode in more than 2 parts using .splitText
  2. see the results for both token and segmented mode

code example:

function SplitNodePlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    editor.update(() => {
      const node = $createTextNode("Hello world");
      $insertNodes([node]);

      const parts = node.setMode("token").splitText(6, 8);
      console.log(parts.map((part) => part.getTextContent()));
    });
  });

  return null;
}

link to codesandbox

The current behavior

The results of splitting TextNode with "Hello World" on indices 6 and 8 (Hello |wo|rld) shown by TreeView component:

input node in token mode:

root   └ (1) paragraph
    ├ (2) text "Hello " { mode: token }     └ (3) text "world"

input node in segmented mode:

root   └ (1) paragraph
    └ (3) text "Hello world"

The expected behavior

input node being replaced by 3 nodes in both modes.

expected structure:

root   └ (1) paragraph
    ├ (2) text "Hello "     ├ (3) text "wo"     └ (4) text "rld"

Adwin120 avatar Aug 30 '23 20:08 Adwin120

After the split

const result = textNode.splitText(...punctuations)

for (const node of result) {
    if (!node.isUnmergeable()) {
        node.toggleUnmergeable()
    }
}

sep2 avatar Oct 15 '24 15:10 sep2