How to add a default value to the editor from text/html

[yaman3bd]

import * as React from "react";
import { useEffect } from "react";

import { $generateNodesFromDOM } from "@lexical/html";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $getRoot, $insertNodes, CLEAR_EDITOR_COMMAND } from "lexical";

export default function LexicalDefaultValuePlugin({
  value = ""
}: {
  value?: string;
}) {
  const [editor] = useLexicalComposerContext();
  const [updated, setUpdated] = React.useState<boolean>(false);
  const [doUpdate, setDoUpdate] = React.useState<boolean>(false);
  const [controlledValue, setControlledValue] = React.useState<string>(value);
  const update = () => {
    const parser = new DOMParser();
    const dom = parser.parseFromString(value, "text/html");

    const nodes = $generateNodesFromDOM(editor, dom);

    $getRoot().select();

    $insertNodes(nodes);
  };
  useEffect(() => {
    setControlledValue((prev) => {
      setDoUpdate(prev !== value);
      return prev !== value ? value : prev;
    });
  }, [value]);

  useEffect(() => {
    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);

    editor.update(() => {
      if (doUpdate) {
        update();
      }
    });
  }, [doUpdate, controlledValue]);

  editor.update(() => {
    if (updated) return;
    update();
    setUpdated(true);
  });
  return null;
}

I want to set the default value of the editor from the preserved HTML after I get the value from the API response,
the code works only if I set the value statically,
I saw the examples, and setting the editor state does not work because I have to the HTML string in the database,
any help with the plugin?

[harrypotter48]

try this

    theme: defaultTheme,
    onError(error) {
      throw error;
    },
    nodes: [  ],
    editorState: (editor) => {
      const parser = new DOMParser();
      const dom = parser.parseFromString(initialValue, 'text/html');
      const nodes = $generateNodesFromDOM(editor, dom);
      const root = $getRoot();
      root.clear();

      const paragraphNode = $createParagraphNode();

      nodes.forEach((n) => paragraphNode.append(n));

      root.append(paragraphNode);
    },
  };

[yaman3bd]

I was trying multiple ways to implement this, and ended up doing smth like this:
I got help from discord

    const updateHTML = (editor: LexicalEditor, value: string, clear: boolean) => {
      const root = $getRoot();
      const parser = new DOMParser();
      const dom = parser.parseFromString(value, "text/html");
      const nodes = $generateNodesFromDOM(editor, dom);
      if (clear) {
        root.clear();
      }
      root.append(...nodes);
    };

    const prepopulatedRichText = (editor: LexicalEditor) => {
      if (!defaultValue) return undefined;
      updateHTML(editor, defaultValue ?? "", true);
    };

    const initialConfig = {
      editorState: prepopulatedRichText,
      namespace: "Playground",
      nodes: [...DefaultNodes],
      onError: (error: Error) => {
        throw error;
      },
      theme: DefaultTheme
    };

but I had a case where I have to wait for the API response, and add the value to the editor from one I saved in my DB so I edited the plugin I made to:

import * as React from "react";
import { useEffect } from "react";

import { $generateNodesFromDOM } from "@lexical/html";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $getRoot, LexicalEditor } from "lexical";

export default function LexicalDefaultValuePlugin({ value = "" }: { value?: string | null }) {
  const [editor] = useLexicalComposerContext();

  const updateHTML = (editor: LexicalEditor, value: string, clear: boolean) => {
    const root = $getRoot();
    const parser = new DOMParser();
    const dom = parser.parseFromString(value, "text/html");
    const nodes = $generateNodesFromDOM(editor, dom);
    if (clear) {
      root.clear();
    }
    root.append(...nodes);
  };

  useEffect(() => {
    if (editor && value) {
      editor.update(() => {
        updateHTML(editor, value, true);
      });
    }
  }, [value]);

  return null;
}

it will only change the editor value if the prop value changes,
IDK if what I am doing is the best practice or not, but it is working for my application without any errors and I get the expected behavior