I use the Lexical library from Facebook as a WYSIWYG component but I don't know how to create the initial value? After searching for a long time, I took the initiative to throw it on this forum, hopefully someone can help.
this my code:
import ExampleTheme from "./themes/ExampleTheme";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import TreeViewPlugin from "./plugins/TreeViewPlugin";
import ToolbarPlugin from "./plugins/ToolbarPlugin";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
import { ListItemNode, ListNode } from "@lexical/list";
import { CodeHighlightNode, CodeNode } from "@lexical/code";
import { AutoLinkNode, LinkNode } from "@lexical/link";
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
import { TRANSFORMERS } from "@lexical/markdown";
import ImagesPlugin from "./plugins/ImagesPlugin";
import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
import React, { useEffect, useState, useRef } from "react";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { ImageNode } from "./nodes/ImageNode";
function Placeholder() {
return <div className="editor-placeholder">Enter some rich text...</div>;
}
const loadContent = async () => {
// read from database, local storage, etc.
const value =
'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
return value;
};
const editorConfig = {
// The editor theme
theme: ExampleTheme,
// Handling of errors during update
onError(error) {
throw error;
},
// Any custom nodes go here
nodes: [
HeadingNode,
ListNode,
ListItemNode,
QuoteNode,
CodeNode,
CodeHighlightNode,
TableNode,
TableCellNode,
TableRowNode,
AutoLinkNode,
LinkNode,
ImageNode,
],
};
export default function Editor() {
const initial = {
root: {
children: [
{
children: [
{
detail: 0,
format: 0,
mode: "normal",
style: "color: #f5a623;",
text: "Hello World!",
type: "text",
version: 1,
},
],
direction: "ltr",
format: "",
indent: 0,
type: "paragraph",
version: 1,
},
],
direction: "ltr",
format: "",
indent: 0,
type: "root",
version: 1,
},
};
const [editorState, setEditorState] = useState(JSON.stringify(initial));
const [value, setValue] = useState(null);
const OnChangePlugin = ({ onChange }) => {
const [editor] = useLexicalComposerContext();
useEffect(() => {
return editor.registerUpdateListener(({ editorState }) => {
onChange(editorState);
});
}, [editor, onChange]);
};
const onChange = (state) => {
// Call toJSON on the EditorState object, which produces a serialization safe string
const editorStateJSON = state.toJSON();
setEditorState(JSON.stringify(editorStateJSON));
};
console.log(editorState); // show value before parse to html
return (
<>
<LexicalComposer initialConfig={editorConfig}>
<div className="editor-container">
<ToolbarPlugin />
<div className="editor-inner">
<RichTextPlugin
contentEditable={<ContentEditable className="editor-input" />}
placeholder={<Placeholder />}
ErrorBoundary={LexicalErrorBoundary}
/>
<HistoryPlugin />
<TreeViewPlugin setValue={(val) => setValue(val)} />
<AutoFocusPlugin />
<CodeHighlightPlugin />
<ListPlugin />
<LinkPlugin />
<AutoLinkPlugin />
<ImagesPlugin />
<OnChangePlugin onChange={onChange} />
<ListMaxIndentLevelPlugin maxDepth={7} />
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</div>
</div>
</LexicalComposer>
<div dangerouslySetInnerHTML={{ __html: value }} />
</>
)
}
the documentation is very minimal and I don't understand it, what should be done to modify it? and is there a tutorial or answer regarding this?
You can pass an editorState
in the initialConfig
as described in the documentation
Be aware this can not just be a plain text object but has to be in the lexical form
In your case you could extend your editorConfig
like:
<LexicalComposer initialConfig={{
...editorConfig,
editorState: editorState // Set the initial state to your editorState
}}>