How to save and load editor state from localStorage with React?

[transitive-bullshit]

From the examples:

const initialEditorState = await loadContent();
const editorStateRef = useRef();

<LexicalComposer ...>
  <LexicalRichTextPlugin initialEditorState={initialEditorState} />
  <LexicalOnChangePlugin onChange={editorState => editorStateRef.current = editorState} />
  <Button label="Save" onPress={() => {
    if (editorStateRef.current) {
      saveContent(editorStateRef.current.toJSON())
    }
  }} />
</LexicalComposer>

This makes sense, except for how loadContent is supposed to work...

I'd like to pass initialEditorState to restore the previous editor state from localStorage, but the problem I'm running into is that I don't have an Editor instance to call editor.parseEditorState() since it doesn't exist yet. It also doesn't look like I can create an Editor instance manually and pass it into LexicalComposer since that seems to have been deprecated (editor__DEPRECATED prop).

I would've expected parseEditorState to be a standalone function that's not dependent on an existing editor.

What's the best way to solve this problem at the moment?

Thanks 🙏

[zurfyx]

It's not obvious but initialEditorState can take many shapes:

1. null -> empty editor
2. string -> Will call editor.parseEditorState then editor.setEditorState
3. EditorState -> will call editor.setStateEditor
4. () => void -> will call the passed function inside editor.update

type InitialEditorStateType = null | string | EditorState | (() => void);

Does passing the JSON.stringifed version work for you?

[transitive-bullshit]

Thanks, @zurfyx. Passing the JSON.stringified version wasn't working for me. I'll paste the solution I ended up going with below.

[Wallman]

I prefer this solution with string since its a lot simpler

[transitive-bullshit]

This is what I ended up going with. I'd love for it to work on first render, though I couldn't seem to get that working.

import { useLocalStorage } from 'react-use'
import OnChangePlugin from '@lexical/react/LexicalOnChangePlugin'

function RestoreFromLocalStoragePlugin() {
  const [editor] = useLexicalComposerContext()
  const [serializedEditorState, setSerializedEditorState] = useLocalStorage<
    string | null
  >('my-editor-state-example-key', null)
  const [isFirstRender, setIsFirstRender] = React.useState(true)

  React.useEffect(() => {
    if (isFirstRender) {
      setIsFirstRender(false)

      if (serializedEditorState) {
        const initialEditorState = editor.parseEditorState(serializedEditorState)
        editor.setEditorState(initialEditorState)
      }
    }
  }, [isFirstRender, serializedEditorState, editor])

  const onChange = React.useCallback(
    (editorState: EditorState) => {
      setSerializedEditorState(JSON.stringify(editorState.toJSON()))
    },
    [setSerializedEditorState]
  )

  // TODO: add ignoreSelectionChange
  return <OnChangePlugin onChange={onChange} />
}

[qt-pixels]

Thanks for this, it works well!

Instead of using state to manage "isFirstRender" I used a Ref as it's lighter; ie:

const isFirstRender = React.useRef(true);

React.useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      ...
    }
  }, [isFirstRender.current, ...])

[milaabl]

Where did you get the type EditorState? Please let me know

[SukhbatMashbat]

@milaabl EditorState class is exported from package "lexical".

You can import it like this: import {EditorState} from 'lexical';

[auronsan]

easier if just make another plugins I think the concept similar like make readOnly
and add useEffect when some props changes

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import React, { useEffect } from 'react'

export default function FormPlugins({ value, readOnly }): React.ReactElement {
  const [editor] = useLexicalComposerContext()

  useEffect(() => {
    if (value && editor && readOnly) {
      const initialEditorState = editor.parseEditorState(value)
      editor.setEditorState(initialEditorState)
    }
  }, [value, editor, readOnly])

  return <></>
}

attach onChange with handlers

 const onChangeLocal = (editorState: EditorState): void =>
    onChange(JSON.stringify(editorState.toJSON()))

<LexicalComposer initialConfig={{ ...editorConfig, readOnly: readOnly }}>
      <div className="editor-container">
        <RichTextPlugin
          contentEditable={<ContentEditable className="editor-input" />}
          placeholder={
            <div className="editor-placeholder">Enter some plain text...</div>
          }
        />
        <OnChangePlugin onChange={onChangeLocal} />
        <FormPlugins value={value} readOnly={readOnly} />
      </div>
    </LexicalComposer>

[ly3xqhl8g9]

The loadContent function could simply return a string obtained from serializing theeditorState after onChange fires. The documentation example could be somewhat clearer:

const loadContent = async () => {
  // read from database, local storage, etc.

  // 'empty' editor
  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 initialEditorState = await loadContent();
const initialConfig = {
  namespace: 'Editor',
  theme: {},
  onError: (error) => console.log(error),
  editorState: initialEditorState,
};

<LexicalComposer initialConfig={initialConfig}>
  <LexicalRichTextPlugin 
    contentEditable={<LexicalContentEditable />}
    placeholder=""
  />
  <LexicalOnChangePlugin 
    onChange={editorState => {
      editorState.read(() => {
        // write to database, local storage, etc.
        const value = JSON.stringify(editorState); // or JSON.stringify(editorState.toJSON())
        console.log(value);
      });
    }} 
  />
</LexicalComposer>

[ly3xqhl8g9]

Just a clarification of the initialEditorState data type should be enough, I guess, as in #2989

[afreeland]

Super helpful!! I didn't realize it needed to still be serialized when passed into the initialConfig. Was seeing editorState.isEmpty is not a function lexical and then that led me to play with createEditor which didnt seem to solve it either. Simply passing in the stringified ast worked perfectly!

[ostaplisovyj]

how is it possible to execute await loadContent(); in a React component?

[milaabl]

@ostaplisovyj , by running await loadContent in a useEffect hook subscribed to the [editor] state variable? (You can get [editor] by using the lexical's context composer hook).

[ostaplisovyj]

@milaabl yes, I understand, though the code snippet above does not include that and if you were to change the initialConfig after it's declared inside the useEffect hook, it won't work. My point was to provide a qualified code snippets rather than pseudo-code which is confusing. BTW, using lexical's context composer hook inside the actual component likely won't work either because there is no Lexical context in the component itself, but rather in the child component of <LexicalComposer> component (i.e. Lexical plugins)

[skobow]

If you need to avoid the onChange handler of being triggered initially this is possible by explicitly setting the editorState property to null for the initialConfig prop value. Using undefined will not have this effect and trigger the handler!

Using isFirstRender condition may not be needed then.

const editorConfig = {
  namespace: 'my-editor',
  theme: DefaultTheme,
  onError(error: Error) {
    throw error;
  },
  editorState: null, <---
  nodes: [
    HeadingNode,
    ImageNode,
    ListNode,
    ListItemNode,
    QuoteNode,
    CodeNode,
    CodeHighlightNode,
    TableNode,
    TableCellNode,
    TableRowNode,
    AutoLinkNode,
    LinkNode,
    HorizontalRuleNode
  ]
};

...

<LexicalComposer initialConfig={editorConfig}>
  ...
</LexicalComposer>

[aq1]

didn't read. this worked for me in Next.js

function LocalStoragePlugin() {
  const [editor] = useLexicalComposerContext()

  useEffect(() => {
    const state = editor.parseEditorState(
      localStorage?.editor || editor.getEditorState()
    )
    editor.setEditorState(state)
  }, [editor])

  return null
}

[Jufrench]

In React using TypeScript, getting the editorState from props worked like this for me. I have the editorState coming from props because the editor content is being supplied to another component that will display the content, instead of having 2 different editors where one is readOnly. I was getting the editorState.isEmpty is not a function error. It was resolved after I wrapped props.widget?.data?.editorState inside JSON.stringify()

Variable declaration -> const initialEditorState: string = JSON.stringify(props.widget?.data?.editorState);

Then I was able to pass it into the config object like so.

const initialConfig = {
    namespace: 'EditorWidget',
    theme,
    onError,
    nodes: [
      HeadingNode
    ],
    editorState: initialEditorState,
  };

[sep2]

Just roll your own composer, it's simple.

The default one sometimes does not get executed then you get an empty state:

lexical/packages/lexical-react/src/LexicalComposer.tsx

Line 141 in 00a8d87

if (root.isEmpty()) {

I have to replace the default LexicalComposer with SimpleLexicalComposer:

import type { InitialConfigType } from '@lexical/react/LexicalComposer'
import type { LexicalComposerContextType } from '@lexical/react/LexicalComposerContext'
import {
    LexicalComposerContext,
    createLexicalComposerContext
} from '@lexical/react/LexicalComposerContext'
import { type LexicalEditor, createEditor } from 'lexical'
import type * as React from 'react'
import { useLayoutEffect, useMemo } from 'react'

export type SimpleInitialConfigType = Omit<InitialConfigType, 'editorState'> & {
    initialState: string | ((editor: LexicalEditor) => void)
}

type SimpleLexicalComposerProps = React.PropsWithChildren<{
    initialConfig: SimpleInitialConfigType
}>

export function SimpleLexicalComposer({
    initialConfig,
    children
}: SimpleLexicalComposerProps): JSX.Element {
    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    const composerContext: [LexicalEditor, LexicalComposerContextType] = useMemo(
        () => {
            const { theme, namespace, nodes, onError, initialState, html } = initialConfig

            const context: LexicalComposerContextType = createLexicalComposerContext(null, theme)

            const editor = createEditor({
                editable: initialConfig.editable,
                html,
                namespace,
                nodes,
                onError: (error) => onError(error, editor),
                theme
            })

            // Any initialization put here
            initializeEditor(editor, initialState)

            return [editor, context]
        },

        // We only do this for init
        // eslint-disable-next-line react-hooks/exhaustive-deps
        []
    )

    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    useLayoutEffect(() => {
        const isEditable = initialConfig.editable
        const [editor] = composerContext
        editor.setEditable(isEditable !== undefined ? isEditable : true)

        // We only do this for init
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <LexicalComposerContext.Provider value={composerContext}>
            {children}
        </LexicalComposerContext.Provider>
    )
}

const HISTORY_MERGE_OPTIONS = { tag: 'history-merge' }

function initializeEditor(
    editor: LexicalEditor,
    initialEditorState: SimpleInitialConfigType['initialState']
): void {
    switch (typeof initialEditorState) {
        case 'string': {
            const parsedEditorState = editor.parseEditorState(initialEditorState)
            editor.setEditorState(parsedEditorState, HISTORY_MERGE_OPTIONS)
            break
        }
        case 'function': {
            // Roll here any initialization
            initialEditorState(editor)
            break
        }
        default: {
            console.error('Invalid initial state', initialEditorState)
        }
    }
}

Also the prop name editorState is somewhat misleading, I changed to initialState in the above code.

[Udayendu]

I am trying to create a LexicalViewer so that once I will pass any stored content by Lexical editor in JSON format, it should be rendered properly.

import React, { useEffect, useState } from "react";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import PlaygroundNodes from "../../../lexical-playground/nodes/PlaygroundNodes";
import PlaygroundEditorTheme from "../../../lexical-playground/themes/PlaygroundEditorTheme";

const DEFAULT_EDITOR_STATE = {
  root: {
    children: [
      {
        children: [],
        direction: null,
        format: "",
        indent: 0,
        type: "paragraph",
        version: 1,
      },
    ],
    direction: null,
    format: "",
    indent: 0,
    type: "root",
    version: 1,
  },
};

export default function LexicalViewer({ content }) {
  const [editorStateJSON, setEditorStateJSON] = useState(DEFAULT_EDITOR_STATE);

  useEffect(() => {
    if (content) {
      try {
        const parsedContent =
          typeof content === "string" ? JSON.parse(content) : content;
        if (parsedContent?.root?.children) {
          setEditorStateJSON(parsedContent);
        } else {
          setEditorStateJSON(DEFAULT_EDITOR_STATE);
        }
      } catch (error) {
        setEditorStateJSON(DEFAULT_EDITOR_STATE);
      }
    }
  }, [content]);

  const initialConfig = {
    namespace: "LexicalViewer",
    nodes: [...PlaygroundNodes],
    theme: PlaygroundEditorTheme,
    editable: false,
    onError: (error) => console.error(error),
    editorState: (editor) => {
      try {
        editor.setEditorState(
          editor.parseEditorState(JSON.stringify(editorStateJSON))
        );
      } catch (e) {
        editor.setEditorState(
          editor.parseEditorState(JSON.stringify(DEFAULT_EDITOR_STATE))
        );
      }
    },
  };

  return (
    <div className="lexical-viewer-container">
      <LexicalComposer initialConfig={initialConfig}>
        <RichTextPlugin
          contentEditable={
            <ContentEditable
              className="lexical-content-editable"
              style={{
                outline: "none",
                padding: "1rem",
                border: "1px solid #ddd",
                borderRadius: "4px",
                minHeight: "100px",
              }}
              readOnly={true}
            />
          }
        />
      </LexicalComposer>
    </div>
  );
}

Some how I can see the data in the console but in the UI its not showing anything. Any suggestion ?

[sep2]

See my comment above.