0

The task is to replace existing material ui textFields with facebook's lexical plugin. I just want a bare-bones example of how to populate the rich text plugin with text.

I'm currently using this example

https://codesandbox.io/s/lexical-rich-text-example-5tncvy?file=/src/Editor.js

I've basically used this example as a separate react component. I want to be able to populate this component with a value prop so that the text in that value prop shows up as a regular paragraph.

Any subsequent saves can be stored as whatever object Lexical allows but for now, I want to be able to do is populate it with text.

I ultimately want to be able to use this rich text editor in my react app like this. How do I do it?

<MyLexicalRichTextEditor value={props.text} onChange={someOnChangeFunction}/>

Divyanth Jayaraj
  • 950
  • 4
  • 12
  • 29

2 Answers2

0

<RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={<Placeholder />}
            ErrorBoundary={LexicalErrorBoundary}
          />

You see the placeholder props here? What ever you put down as placeholder will end up being populated! Pass on the content here.

Secondly,

<OnChangePlugin onChange={onChange} /> is probably what you want to use to do subscription on the editors state change!

Reference doc for API: https://lexical.dev/docs/react/plugins#lexicalrichtextplugin

So basically

export default function MyLexicalRichTextEditor(props) {
  const onChangeDefault = () => { console.log("AYO! State changed!"); }
  const { text = 'Default test if props text was empty', onChange = onChangeDefault } = props; 

  return (
    <LexicalComposer initialConfig={editorConfig}>
      <div className="editor-container">
        <ToolbarPlugin />
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={text}
            ErrorBoundary={LexicalErrorBoundary}
          />
          <HistoryPlugin />
          <TreeViewPlugin />
          <AutoFocusPlugin />
          <CodeHighlightPlugin />
          <ListPlugin />
          <LinkPlugin />
          <AutoLinkPlugin />
          <ListMaxIndentLevelPlugin maxDepth={7} />
          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
        </div>
      </div>
      <OnChangePlugin onChange={onChange} />
    </LexicalComposer>
  );
}
Ahnaf Prio
  • 11
  • 2
  • Thanks for the attempt but what I'm looking for is not setting up a placeholder but rather, data that is already there. For example, if I were to edit a comment or an answer, the previously written comment / answer needs to be there – Divyanth Jayaraj Apr 27 '23 at 12:33
0

You can instantiate the editor state through the initialConfig

const Editor = ({value}) => {
  const initEditor = useCallback((editor: LexicalEditor) => {
    if (value) {
      // In the browser you can use the native DOMParser API to parse the HTML string.
      const parser = new DOMParser();
      const dom = parser.parseFromString(value, "text/html");

      // Once you have the DOM instance it's easy to generate LexicalNodes.
      const nodes = $generateNodesFromDOM(editor, dom);
      // Select the root
      const para = $createParagraphNode();
      para.append(...nodes);
      $getRoot().append(para);
    }
  }, []);

  const initialConfig = useMemo(
    () => ({
      editorState: initEditor,
      namespace: "MyEditor",
      theme: exampleTheme,
      onError,
    }),
    []
  );

  return <LexicalComposer initialConfig={initialConfig}>{...}</LexicalComposer>;
}
Adarsh Pastakia
  • 36
  • 2