Virtual Cursor to handle text insertion at node boundary

[Benbinbin]

Implementing text insertion at node boundaries can be a challenging task for a rich text editor, I find a tweet relative to this problem, and want to figure out how to use Lexical to solve it.

And I find a pull requests #3434 relative to this problem, and the idea is fantastic!

I believe this "virtual cursor" concept can be applied to more scenarios involving node boundaries. For example, it can be used to add text before or after nodes like LinkNode and CodeNode, or prepend text to formatted TextNode.

[Benbinbin]

I really like the "Typing Affinity" feature in Bike Outliner which can precise control the caret at boundary, so we can insert text at the begining of a Link, which can't be done for most of the rich text editor nowadays.

SaveTwitter.Net_1649593165131943936.450p.mp4

video from @JohannesMutter at Twitter

I want to make something like that with Lexical, for example put the caret at the beginning of a Bold text, then type any text can be bold.

But I found some trouble, when I make a button to call the function selection.setTextNodeRange(anchorNode, 0, focusNode, 0) to move the caret at the begining of a Bold Text Node, and the anchorNode and focusNode is the same node, they are both the Bold Text Node (and a normal, not Bold Text Node in front of it).

But after I click the button and then typing some text, the insert text belong to the previous text node, not the Bold Text Node.

I think some normalization be applied when Lexical update under the hood, to change the selection offset from 0 to previous text node, so we can't access the offset 0 of a TextNode?

It's the browser default behavior? Can we hack to change this behavior?

[Benbinbin]

The same situation for LinkNode, I check out the source code and find out there are two properties about insert text before and after of this node, they all set to false for both

  canInsertTextBefore(): false {
    return false;
  }

  canInsertTextAfter(): false {
    return false;
  }

Even if I use the methods textNode.select(0, 0) or textNode.select(textNode.getTextContentSize(), textNode.getTextContentSize()) to move the cursor to the start or end of the text node (where textNode refers to the text node within the link node), and then type in some text, the newly typed content does not become part of the link node. Instead, it becomes part of the adjacent nodes that come before or after the link node.

[Benbinbin]

finally, make it also work with DecoratorNode

CustomLinkNode.mp4

[Benbinbin]

I use a nest editor insdie the DecoratorNode (CustomLinkNode) , then moving the cusor in-or-out by press ArrowLeft or ArrowRight key mostly can rely on the browser default behavior.

But moving up and down seems breakdown, the browser default behavior don't work well, maybe the nest editor trap the cursor. So I make a small trick, by register two commands, the KEY_ARROW_UP_COMMAND and KEY_ARROW_DOWN_COMMAND when press these key the DOM of the nest editor will be set to contenteditable="false"，after the cursor changed the contenteditable back to true (by register the SELECTION_CHANGE_COMMAND)

[KarthikRaju391]

This is awesome! I had tried doing something similar to this and had given up on it, I think I will give it another try now. Thank you!

[Benbinbin]

Thanks! I still wonder any other solution to solve this UX problem without using the nest edtior, but now this way maybe acceptable

[Benbinbin]

I use the Nuxt (which is based on Vue 3) to build this prototype, and refer to two resources:

• how to setup the DecoratorNode with Vue 3, I refer to the lexical-vue source code
• how to setup the nest editor inside the DecoratorNode I refer to the Lexical Playground source code, like the StickyNode (with StickyComponent), and the ImageNode (with ImageComponent)

and also check this simple example lexical-nested-editor

[Benbinbin]

More details about this method

Moving the cusor in-or-out the nest editor by pressing the ArrowLeft or ArrowRight key mostly can rely on the browser default behavior, so you can just set a higher priority command KEY_ARROW_LEFT_COMMAND and KEY_ARROW_RIGHT_COMMAND for the main editor, the key point inside these COMMAND Callback function is without doing nothing but only return true when the cursor is sit at the boundary (before or after) of the DecorationNode (to overwrite these commands at lexical-rich-text module)

Tip

you can use $getAdjacentNode() method to tell if the cursor is at the boundary of some special node

But moving up and down seems breakdown, the browser default behavior don't work well, maybe the nest editor trap the cursor. So I make a small trick, by register two commands, the KEY_ARROW_UP_COMMAND and KEY_ARROW_DOWN_COMMAND when press these key the DOM of the nest editor will be set to contenteditable="false" after the cursor changed the contenteditable back to true (by register the SELECTION_CHANGE_COMMAND)

Tip

using frontend framework, like React or Vue, can easily toggle the state of contenteditable value