Load pre-existing html into Editor via React custom hook

[tolkienfan2]

I am trying to load pre-existing html into my editor using a React hook in like this:

export const useInitialContent = (initialContent: string) => {
	const parser = new DOMParser();
	const dom = parser.parseFromString(initialContent, "text/html");
	const editor = createEditor();
	const paragraphNode = $createParagraphNode();
	const [editorState, setEditorState] = React.useState<EditorState|string>("");

	React.useEffect(() => {
		if (!initialContent) { return; }
		editor.update(() => {
			const nodes = $generateNodesFromDOM(editor, dom);
			nodes.forEach(n => paragraphNode.append(n));
			$getRoot().append(paragraphNode);
		});
		const newState = editor.getEditorState();
		setEditorState(newState);
	}, [initialContent, editor]);

	return editorState;
};

It isn't working. I would like to be able to pass in the returned value into the editorState parameter for the LexicalComposer initialConfig prop.

[chalecki]

I faced the same challenge. I had to connect Lexical Editor as a Formik field. I end up creating a custom plugin 😎

import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { CLEAR_HISTORY_COMMAND, $getRoot } from 'lexical';
import { useLayoutEffect } from 'react';

export const SetInitialValuePlugin: React.FC<{ initHtml: string }> = ({ initHtml = '' }) => {
  const [editor] = useLexicalComposerContext();

  useLayoutEffect(() => {
    if (editor && initHtml) {
      editor.update(() => {
        const content = $generateHtmlFromNodes(editor, null);

        if (!!initHtml && content !== initHtml) {
          const parser = new DOMParser();
          const dom = parser.parseFromString(initHtml, 'text/html');
          const nodes = $generateNodesFromDOM(editor, dom);

          const root = $getRoot();
          root.clear();

          const selection = root.select();
          selection.removeText();
          selection.insertNodes(nodes);
          editor.dispatchCommand(CLEAR_HISTORY_COMMAND, null);
        }
      });
    }
  }, [initHtml]);

  return null;
};