I’m trying to build a rich text editor for my blog using LEXICAL to keep track of what I’ve learned and used. And I found out that it’s a new open source library for editors and developed by the great FACEBOOK team, and since I’ve been using REACT since I learned to code, I have high hopes for this library. The important thing is that it works almost out of the box (that’s why I left slate, it’s not for newbies).

I followed the tutorial to complete a fully functional rich text editor: https://lexical.dev/docs/concepts/editor-state

but while I was learning this, I had no idea how to insert code into an existing editor to make it work.

How should I change it so that it loads the content from the parent component correctly and passes the changed content to the parent component to be used as a form submission?

This is the code I have after learning:

export default function MyEditor(props: any) {
    
    const EMPTY_CONTENT = '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
    const initialConfig: any = {
        editorState: EMPTY_CONTENT,
    }
    const editorStateRef: any = useRef();
    return (
        <>
            <LexicalComposer initialConfig={initialConfig}>
                <div className="editor-container">
                    <ToolbarPlugin />
                    <div className="editor-inner">
                        <RichTextPlugin
                            contentEditable={<ContentEditable className="editor-input" />}
                            placeholder={<Placeholder />}
                            ErrorBoundary={LexicalErrorBoundary}
                        />
                        <OnChangePlugin onChange={editorState => editorStateRef.current = editorState} />
                        <HistoryPlugin />
                        <AutoFocusPlugin />
                        <CodeHighlightPlugin />
                        <ListPlugin />
                        <LinkPlugin />
                        <AutoLinkPlugin />
                        <ListMaxIndentLevelPlugin maxDepth={7} />
                        <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
                    </div>
                </div>
            </LexicalComposer>
        </>
    );
}

Thank you all in advance and my sincere respect to the great FACEBOOK engineers. Because I believe lexical will become another great front-end library like react. It will help newbie like me to accomplish features that would otherwise be out of their reach.