I'm expected to convert html editorState to JSON, but couldn't get it working.

[OttlikG]

Source code

https://codesandbox.io/p/sandbox/lexical-plain-text-example-forked-7j24ys?file=%2Fsrc%2FEditor.js

I have a MyLexicalPlugin where I load a html into the editorState. And I'm expected to get back the Menu in the editor State.

For some reason the only thing I get back is an empty children.

Could you help me get this working and give me a Menu paragraph as the root's children.

A bit of summary what I want to achieve:

I'm building an inline website editor. So you can inline edit the text. I parse the editor state to HTML send it to ChatGPT for translation, get back the translated text in the right HTML structure. Parse it on the fly (and this is the important bit, without creating another LexicalComposer instance) to JSON and append the JSON to my website structure.

I read the initial hungarien text under

{
   children: {Lexical JSON}
}

and I want to append to:

{
   children: {Lexical JSON},
   languages: {
       eng: {LexicalJSON}
   }
}

And then later on the user able to toggle the language states from the header.

Initially I've got to a point where I got the const nodes = $generateNodesFromDOM(editor, dom);
and I recursively walked the children. And manually constructed a root and appended the nodes. Unfortunately this structure sometimes crashed the app so I wanted to programatically get the whole JSON information from the editorState. So as you can see I played around with many ways in CodeSandbox. But nothing really worked. I get back empty children state from the parsed html.
Although when I get the toJSON from the rendered editor with the hungarien text it works as expected.

[2wheeh]

your sandbox is not found

Error: Error: (404) Not found
Version: 0.0.332
Environment: production

[2wheeh]

exportJSON call returns an empty array as children.

lexical/packages/lexical/src/nodes/LexicalRootNode.ts

Line 110 in 3bd1351

children: [],

It seems exportJSON is called in higher abstractions where push nodes to children array:

lexical/packages/lexical-clipboard/src/clipboard.ts

Line 246 in 3bd1351

function $appendNodesToJSON(

what is the goal here though? if you just want to get json of the editorState, try something like this:

 editor.update(
    () => {
      const parser = new DOMParser();
      const htmlString = `<h4 class="editor-heading-h4 forum_f685f544-module__YJs25G__className" dir="ltr"><span style="color: rgb(255, 255, 255); white-space: pre-wrap;">Menu</span></h4>`;
      const dom = parser.parseFromString(htmlString, "text/html");

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

      // Select the root
      $getRoot().select();

      // Insert them at a selection.
      $insertNodes(nodes);
    },
    {
      onUpdate: () => {
        const json = editor.getEditorState().toJSON();
        console.log(json);
      },
    }
  );

[OttlikG]

Thanks for your quick reply.
Yeah but at the moment I have the hungarien words and don't want to display the english version. I just will append to the underlying structure without modifying the current editor state.

[2wheeh]

Sorry didn't check updated lines

[2wheeh]

Just a question, don't languages just need text strings for replacement?

[OttlikG]

Yeah, this is what I'm experimenting with now. Just grab the text property of the parsable object and translate that.