Feature: Readonly editor with state updates & listeners

I have a usecase where:

1. I don’t want the editor to be editable by the user
2. I want the capability to receive editor updates and subscribe to commands like click, drag, etc.

So far, I haven’t been able to find a clean solution that achieves both. Setting the editor to readonly in the initialConfig ‘freezes’ the editor thereby achieving (1) but not (2). It would be nice to have an editor that is non-editable but can still hooked up to the in-built listeners. For react, having a prop that can override isReadOnly in the LexicalContentEditable seems to be one way to achieve this.

[yudori]

@pguduguntla The solution I went with is to leave the global lexical editor readonly state as false and instead use a custom ‘readonly’ contenteditable in the text plugin.

Custom ReadOnlyContentEditable.ts

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import React, { useCallback } from 'react';

export type Props = {
    id?: string,
};

export default function ReadOnlyContentEditable(props: Props): JSX.Element {
    const [editor] = useLexicalComposerContext();
    const ref = useCallback(
        (rootElement: null | HTMLElement) => {
            editor.setRootElement(rootElement);
        },
        [editor]
    );

    return (
        <div
            contentEditable={false}
            id={props.id}
            ref={ref}
        />
    );
}

Usage in LexicalPlainTextPlugin

<LexicalPlainTextPlugin
  contentEditable={<ReadOnlyContentEditable />}
  ...
/>

[pguduguntla]

@yudori Oh sweet! That works for my use case, thanks so much man!