Lexical editor not refreshing when passing editor content as props - suggested solution

[wickandpiper]

Challenge

I am writing an editor that changes it's content based on an external user interaction (a user clicks on a row of documents and it loads the respective content). The way I have implemented this is the data is passed as a prop to a component when the user clicks the external document row. However, the Lexical editor content was not refreshing or loading (as initialConfig: editorState is only run once I presume) . I was struggling with this for a while until I saw a similar but unrelated post here #2583.
Note: I used to use Draftjs and this was accomplished by setting a new EditorState i.e. EditorState.createWithContent(newDataPassedAsPropsAndConvertedFromRaw)

Solution

My solution was to write a Lexical React Plugin () that listens for updates from the props, and sets the content using editor.parseEditorState(), editor.setEditorState() and CLEAR_HISTORY_COMMAND.

LexicalEditor.js pseudo code

function LexicalEditor ({initialEditorState}) {
  const initialConfig = {
    namespace: 'Editor',
    editorState: initialEditorState,
  }
}
return (
  <LexicalComposer initialConfig={initialConfig}>
    <RichTextPlugin contentEditable={<ContentEditable />} placeholder={<span className='editor-placeholder'>Start typing...</span>} />
    <RefreshContentBasedOnActiveDoc initialEditorState={initialEditorState} />
  </LexicalComposer>
)

RefreshContentBasedOnActiveDoc.js pseudo code

import { useEffect } from "react";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
import { CLEAR_HISTORY_COMMAND } from "lexical"

export function RefreshContentBasedOnActiveDoc({initialEditorState}) {
  const [editor] = useLexicalComposerContext()
  useEffect(() => {
    if (editor) {
      const newState = editor.parseEditorState(initialEditorState)
      editor.setEditorState(newState)
      editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined)
    }
  },[editor,initialEditorState])
}

Any suggestions

Just getting to grips with Lexical after spending a year on Draftjs. Perhaps there's a better way of implementing the above - happy to hear.
Great work on the library core team.

[shawncao]

I'm using exactly the same approach, but it works for me, not sure if the dispatch command and setEditorState inference each other. ?

FYI - my snippet:

  // change current editor content
  useEffect(() => {
    if (doc && editor) {
      if (!doc.content) {
        editor.dispatchCommand(CLEAR_EDITOR_COMMAND, null);
      } else {
        const newState = editor.parseEditorState(doc.content);
        editor.setEditorState(newState);
      }
    }
  }, [doc]);

[wickandpiper]

Thanks for the response. This approach works for me too, but only as a plugin. Did you write this useEffect as part of the lexical component itself? Just to be clear, I'm no longer blocked, but wondered if the above would be helpful to others or if the there was a better way of accomplishing the outcome.

…

On Tue, 8 Nov 2022, 22:18 Shawn Cao, ***@***.***> wrote: I'm using exactly the same approach, *but it works for me*, not sure if the dispatch command and setEditorState inference each other. ? FYI - my snippet: // change current editor content useEffect(() => { if (doc && editor) { if (!doc.content) { editor.dispatchCommand(CLEAR_EDITOR_COMMAND, null); } else { const newState = editor.parseEditorState(doc.content); editor.setEditorState(newState); } } }, [doc]); — Reply to this email directly, view it on GitHub <#3335 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOFJ7YVM3MMF2U5NG2NTTPDWHLGRHANCNFSM6AAAAAAR2TDDOA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[GermanJablo]

In case anyone has this same problem, I think a better solution is to add key={someId} to LexicalComposer.

[David-Sungkyu-Kim]

👍👍👍

[KISGP]

nice👍

[andyjessop]

What is someId here? Can anyone provide a full working example?

[etrepum]

It's a string or number that changes whenever you want to recreate the editor (or really, any React component) instead of trying to update the props in-place (which LexicalComposer will generally ignore).

[andyjessop]

Thanks for clarifying. So, just as an example and for posterity, this is what I've done (which works ✅):

export function Editor({ onSubmit }: EditorProps) {
	const [nextId, setNextId] = useState("");
	const [content, setContent] = useState("");

	return (
		<form onSubmit={(e) => e.preventDefault()}>
			<Editable key={nextId} onChange={setContent} />
			<ActionIcon
				onClick={handleClick}
				size="xl"
				disabled={!content.length}
				type="submit"
			>
				<IconSend2 />
			</ActionIcon>
		</form>
	);

	function handleClick() {
		onSubmit(content);
		setNextId(Date.now().toString());
	}
}

Where Editable is a wrapper around my Editor:

export function Editable({
	key,
	isEnabled = true,
	onChange,
	onError = handleError,
}: EditableProps) {
	const initialConfig = {
		namespace: "MyEditor",
		editable: isEnabled,
		theme,
		onError,
		nodes: [
			AutoLinkNode,
			HorizontalRuleNode,
			CodeNode,
			CodeHighlightNode,
			LinkNode,
			ListNode,
			ListItemNode,
			HeadingNode,
			QuoteNode,
		],
	};

	return (
		<LexicalComposer key={key} initialConfig={initialConfig}>
			<CodeHighlightPlugin />
			<CodeBlockLanguageNamePlugin />
			<RichTextPlugin
				contentEditable={<ContentEditable />}
				ErrorBoundary={LexicalErrorBoundary}
			/>
			<OnChangePlugin onChange={handleOnChange} />
			<HistoryPlugin />
			<AutoFocusPlugin />
		</LexicalComposer>
	);
}

So, when the submit button is clicked, it creates a new key, which will re-render the Editable component, forcing it to use the initial state.

[Maarondesigns]

This was driving me crazy and I finally figured out my issue. My lexical editor was inside a parent component that could optionally be an <a> tag or a <div>. When the editor was being edited, the parent component would always render the <div> so that clicking inside the editor wouldn't go to the <a> tags href path.

Apparently, changing the parent element after the editor initialized caused the state to essentially be lost and saving the updates wouldn't work. No combination of useMemo, useCallback, useRef, setting unique keys, etc. solved the issue, so eventually I changed the logic to set the <a> tags attributes as empty instead of changing the actual element being rendered. I feel like there is a better way this could be done, but anyway, I thought maybe this could be helpful to someone in the future.

TLDR; the lexical editor's initial state gets "lost" if it's parent element changes to render a different html element/component/wrapper.