Bug: TextNode.splitText incorrectly changes editor state
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
- In lexical playground with TreeView split a TextNode in more than 2 parts using .splitText
- 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;
}
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"
After the split
const result = textNode.splitText(...punctuations)
for (const node of result) {
if (!node.isUnmergeable()) {
node.toggleUnmergeable()
}
}