Lexical: How to make nodes uneditable

[tomaszferens]

I created my own node in Lexical and applied it some styles.

It uses the "token" mode: node.setMode("token");

I would like to disable displaying caret inside the node, just like on this image:

Ideally, when user clicks on the node, the caret would stay where it stays.

Here is a demo: codesandbox

[tomaszferens]

This is what I ended up with:

interface Props {
    node: Klass<LexicalNode>;
}

export function UneditableTokenPlugin(props: Props) {
    const isArrowRight = React.useRef(false);
    const isArrowLeft = React.useRef(false);
    const [editor] = useLexicalComposerContext();

    React.useEffect(() => {
        return mergeRegister(
            editor.registerCommand(
                KEY_ARROW_RIGHT_COMMAND,
                () => {
                    isArrowRight.current = true;
                    isArrowLeft.current = false;
                    return false;
                },
                COMMAND_PRIORITY_LOW,
            ),
            editor.registerCommand(
                SELECTION_CHANGE_COMMAND,
                () => {
                    const selection = $getSelection();

                    if (!$isRangeSelection(selection)) {
                        return false;
                    }

                    const node = getSelectedNode(selection);

                    if (selection.anchor.offset === 0) {
                        return false;
                    }

                    if (!(node instanceof props.node)) {
                        return false;
                    }

                    if ($isAtNodeEnd(selection.anchor)) {
                        return false;
                    }

                    if (isArrowLeft.current) {
                        node.selectPrevious();
                    } else {
                        node.selectNext(0, 0);
                    }

                    isArrowRight.current = false;
                    isArrowLeft.current = false;

                    return false;
                },
                COMMAND_PRIORITY_LOW,
            ),

            editor.registerCommand(
                KEY_ARROW_LEFT_COMMAND,
                () => {
                    isArrowRight.current = false;
                    isArrowLeft.current = true;

                    return false;
                },
                COMMAND_PRIORITY_LOW,
            ),
        );
    }, [editor]);

    return <></>;
}

Can someone verify that this is correct? 🤔

[ivailop7]

Can you check if 'segmented' true/false was allowing for the cursor to jump start/end of the text. Don't remember how I did it some time ago.

[tomaszferens]

@ivailop7 The segmented mode didn't help.

From docs:

segmented - its content deleted by segments (one word at a time), it is editable although node becomes non-segmented once its content is updated

[Mohamad-Golden]

I have the same problem could find a solution for this? if so can you please share it.
also if the current snippet that you provided works, can you share the complete plugin. the codesanbox link you provided does not load