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.