How to Programmatically Update Editor State in verbum
Opened this issue · 2 comments
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:
- Is there a recommended way to programmatically update the editor state using
verbum
? - 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
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!
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 😄