Add initial data to Lexical editor

[rkeerthient]

Hi,

In the below code, I'm trying to show the value in my richTextPlugin on load, but I am unable to see it. Please lemme know where I'm going wrong. I'm looking for a solution without using useLexicalComposerContext

 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
import { EditorState } from "lexical";
import { CodeHighlightNode, CodeNode } from "@lexical/code";
import { AutoLinkNode, LinkNode } from "@lexical/link";
import { ListItemNode, ListNode } from "@lexical/list";
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import * as React from "react";
import exampleTheme from "./themes/ExampleTheme";
import ToolbarPlugin from "./plugins/ToolbarPlugin";
import { $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
interface CustomEditorProps {
  content: any;
  onSave: (newValue: string) => void;
}
const CustomEditor = ({ onSave }: CustomEditorProps) => {
  const value =
    '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';

  const editorConfig: any = {
    editorState: () => value,
    onError(error: Error) {
      throw error;
    },
    theme: exampleTheme,
    nodes: [
      HeadingNode,
      ListNode,
      ListItemNode,
      QuoteNode,
      CodeNode,
      CodeHighlightNode,
      AutoLinkNode,
      LinkNode,
    ],
  };

  function Placeholder() {
    return <div className="editor-placeholder">Enter some rich text...</div>;
  }

  const onChange = (editorState: EditorState) => {
    editorState.read(() => {
      const markdown = $convertToMarkdownString(TRANSFORMERS);
      onSave(markdown);
    });
  };

  return (
    <div className="border">
      <LexicalComposer initialConfig={editorConfig}>
        <div className="editor-container">
          <ToolbarPlugin />
          <div className="editor-inner">
            <RichTextPlugin
              contentEditable={<ContentEditable className="editor-input" />}
              placeholder={<Placeholder />}
              ErrorBoundary={LexicalErrorBoundary}
            />
            <OnChangePlugin onChange={onChange} />
          </div>
        </div>
      </LexicalComposer>
    </div>
  );
};

export default CustomEditor;

Thanks,
Sunny

[JavoByte]

I tried out your code and seems that the problem is that editorState in editorConfig should be a string and not a function, so changing to this does the trick

const editorConfig: any = {
    editorState: () => value,
    onError(error: Error) {
      throw error;
    },
    theme: exampleTheme,
    nodes: [
      HeadingNode,
      ListNode,
      ListItemNode,
      QuoteNode,
      CodeNode,
      CodeHighlightNode,
      AutoLinkNode,
      LinkNode,
    ],
  };

also, your example state seems to be empty. I tried another one to test

{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"This is a test","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}

[rkeerthient]

Thanks @JavoByte 🙏, This is awesome.