prefill html content inside lexical/react editor

[harish-sethuraman]

import {$generateNodesFromDOM} from '@lexical/html';

// In the browser you can use the native DOMParser API to parse the HTML string.
const parser = new DOMParser();
const dom = parser.parseFromString(htmlString, textHtmlMimeType);

// In a headless environment you can use a package such as JSDom to parse the HTML string.
const dom = new JSDOM(htmlString);

// Once you have the DOM instance it's easy to generate LexicalNodes.
const nodes = $generateNodesFromDOM(editor, dom);

// Once you've generated LexicalNodes from your HTML you can now initialize an editor instance with the parsed nodes.
const editor = createEditor({ ...config, nodes });

// Or insert them at a selection.
const selection = $getSelection();
selection.insertNodes(nodes);

I see that we need the editor instance to generateNodesfromDOM how ever I'm using lexical/react and would Like to set the initialEditorState from HTML string. How do I do so? Can we somehow pre populate HTML string as editor content in lexical/html.

PS: Im using LexicalRichTextPlugin

[harish-sethuraman]

Hey bumping this in case it was missed

[harish-sethuraman]

Now Im getting this error Error: replace: cannot be called on root nodes when I used the code provided in the doc. Made a sandbox to make things easier.

https://codesandbox.io/embed/elated-keller-uolbew?fontsize=14&hidenavigation=1&theme=dark

[harish-sethuraman]

Any idea on this ? following up ;)

[harish-sethuraman]

I was getting Error: replace: cannot be called on root nodes

So I created a empty paragraph node and then selected it instead of selecting the root like given in the example.

  function prepopulatedRichText(editor) {
    editor.update(() => {
      const parser = new DOMParser();
      const dom = parser.parseFromString(htmlString, textHtmlMimeType);
      const nodes = $generateNodesFromDOM(editor, dom);
      const emptypara = $createParagraphNode();
      emptypara.append($createTextNode(""));
      $getRoot().append(emptypara);
      emptypara.select();
      const selection = $getSelection();
      selection?.insertNodes(nodes);
    });
  }

[tejas-hosamani]

Hey @harish-sethuraman, your solution works. However, I can't create h1 elements inside paragraphs(it's against the standards, I believe.)

But my question is, instead of creating a paragraph node, is it possible to create a 'div' node or something similar?

[tejas-hosamani]

Also, is it possible to add an object URL formatted image with this method?

[maltesa]

I wrote this Plugin that loads my legacy HTML Content. Maybe that helps:

import type { IRichText } from '@/components/RichTextEditor/types'
import { $generateNodesFromDOM } from '@lexical/html'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { $getRoot, CLEAR_HISTORY_COMMAND } from 'lexical'
import { useEffect } from 'react'

interface Props {
  state?: string | IRichText
}

export function RestoreEditorStatePlugin({ state }: Props) {
  const [editor] = useLexicalComposerContext()

  useEffect(() => {
    if (typeof state === 'string') {
      // Restore from HTML (Quilljs legacy)
      editor.update(() => {
        const parser = new DOMParser()
        const dom = parser.parseFromString(state, 'text/html')
        const nodes = $generateNodesFromDOM(editor, dom)

        const selection = $getRoot().select()
        selection.insertNodes(nodes)

        editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined)
      })
    } else if (state?.editorState) {
      // Restore from SerializedEditorState
      const editorState = editor.parseEditorState(state.editorState)
      editor.setEditorState(editorState)
      editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined)
    }
  }, [])

  return null
}

[maltesa]

Ah, I didn't know that you can pass a callback to useState :)
I thought rules of hooks just say that they must not be used conditionally and in loops.
Adding editor to the dependency array should not hurt. state would be better named defaultState. Hence, I wouldn't add it to the array to avoid overriding content changed by the user.

Concerning semantics, I like useEffect more because imo useState is for state and not for sideeffects. But I guess that's up to personal preference.

[lwhiteley]

I thought you had intentionally left the array empty, thats why i asked. If your goal is to only let it run once, then adding anything into the dependency array will run the effect again if any dependency reference changes.
It gets even weirder in dev mode if the project uses StrictMode

i use the rules of hooks linter so the useEffect approach didnt work for me, hence why i ended up with useState

[maltesa]

yes, I wanted it to run once, that's why I left it empty. However, adding the editor to the array should not hurt, as I assume the editor reference will not change. And in case the reference changes you may want to reset the editor content.

You can disable the linter warning with // eslint-disable-next-line react-hooks/exhaustive-deps.

[lwhiteley]

No that's fine, I'll leave it as is. For me it makes more sense semantically to use the useState hook as I consider it just initializing the editor state for my use case and not really an effect that will run if anything changes.

[shammahk]

Thanks for the solution @maltesa, it helped.
I encountered an issue where nodes were duplicated, this was fixed by adding

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

before inserting the nodes.

I hope this helps anyone who has such issues in the future.