How to Programmatically Update Editor State in verbum

[jordanleewei]

Hello verbum maintainers,

I am currently working with verbum in a React project and I have encountered a challenge with updating the editor state programmatically.

Goal: I need to update the editor state every 1 second with new content.

Issue: Based on my understanding, verbum does not seem to directly expose Lexical's editor.update() method or similar functionality, making it unclear how to update the editor state from outside the component.

Questions:

1. Is there a recommended way to programmatically update the editor state using verbum?
2. If direct manipulation of the editor state is not possible with verbum, could you suggest any alternative approaches or workarounds?

Any guidance or recommendations on this matter would be greatly appreciated.

Thank you for your time and assistance.

Best regards,
Jordan

[ozanyurtsever]

Hello @jordanleewei, you always have access to the current instance of editor via onChange method, here is a minimal example for you to understand how to update the editor state;

export const FullEditor = () => {
  const [editorInstance, setEditorInstance] = React.useState<LexicalEditor>();

  const onChange = (editorState: string, editorInstance?: LexicalEditor) => {
    setEditorInstance(editorInstance);
  };

  setInterval(() => {
    if (editorInstance) {
      editorInstance.update(() => {
        const root = $getRoot();
        const selection = $getSelection();
        const paragraphNode = $createParagraphNode();
        const textNode = $createTextNode('Hello world ' + Math.random());
        paragraphNode.append(textNode);
        
        root.append(paragraphNode);
      });
    }
  }, 1000);

  return (
    <EditorComposer initialEditorState={initialState}>
      <Editor onChange={onChange}>
        <ToolbarPlugin>
          <FontFamilyDropdown />
          <FontSizeDropdown />
          <Divider />
          <BoldButton />
          <ItalicButton />
          <UnderlineButton />
          <CodeFormatButton />
          <InsertLinkButton />
          <TextColorPicker />
          <BackgroundColorPicker />
          <TextFormatDropdown />
          <Divider />
          <InsertDropdown enableYoutube />
          <Divider />
          <AlignDropdown />
        </ToolbarPlugin>
      </Editor>
    </EditorComposer>
  );
};

We should definitely aim to make this process much simpler by abstracting the Lexical methods as much as possible while modifying the editor state, thus adding this to our roadmap as well!

[Genarito]

Hi, @ozanyurtsever! First of all, thanks for this library! 💯

Secondly, any news about this feature? I too would like to be able to use the Editor as a controlled component. If you don't have time to make the change I can try on my own to make a PR 😄