Help to convert to HTML with exportDOM and $generateHTMLFromNodes

[GuyoST]

Hello every one,

I need to convert the document to HTML.
I read the doc and started to use $generateHTLMFromNodes that is working for commons tags like h1 h2, span...
I tried to use the playground and I could see there are a lot of nodes, like the YouTubeNode.

As far as I understood I need to implement exportDOM in YouTube node to allow the $generateHTMLFromNodes function to include it.

So I tried to add this in YouTubeNode : (it's working)

  exportDOM(editor: LexicalEditor): DOMExportOutput {
    const iframe: HTMLIFrameElement = document.createElement("iframe")
    iframe.setAttribute("width", "560")
    iframe.setAttribute("height", "315")
    iframe.setAttribute("src", `https://www.youtube.com/embed/${this.__id}`)
    iframe.setAttribute("frameBorder", "0")
    iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture")
    iframe.setAttribute("allowFullScreen", "true")
    iframe.setAttribute("title", "YouTube video")


    return {element: iframe}
  }

But as I can see in the component for the editor :

function YouTubeComponent({
  className,
  format,
  nodeKey,
  videoID,
}: YouTubeComponentProps) {
  return (
    <BlockWithAlignableContents
      className={className}
      format={format}
      nodeKey={nodeKey}>
      <iframe
        width="560"
        height="315"
        src={`https://www.youtube.com/embed/${videoID}`}
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen={true}
        title="YouTube video"
      />
    </BlockWithAlignableContents>
  );
}

We can see the script is embedded with a BlockWithAlignableContents to allow to center the video for example.

I would like to know, is there a way to get the div of this "parent" element in which I could then add the iframe tag as a children ?
Can I call the exportDOM function of this parent ?

Thank you for your help.

In addition of that I was wondering why the exportDOM function was not included in this node and others nodes we can find on the playground. Is it a bad practice to add this function for some kind of component ? Is there another better was to convert to HTML ?

FYI I need to convert to HTML to display the content in read only mode without loading the Lexical Editor component for 2 reasons :

• It's too heavy to load just to read
• I couldn't make it work from remix to render it server side (nothing appears)

So I think the best and fastest way is to get directly the HTML version.

Thank you for your help 🙂

[GuyoST]

I finally did it manually, just let me know if there is better way to do it :)

  exportDOM(editor: LexicalEditor): DOMExportOutput {
    const div = document.createElement("div")
    div.style.textAlign = this.__format
    const iframe: HTMLIFrameElement = document.createElement("iframe")
    iframe.setAttribute("width", "560")
    iframe.setAttribute("height", "315")
    iframe.setAttribute("src", `https://www.youtube.com/embed/${this.__id}`)
    iframe.setAttribute("frameBorder", "0")
    iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture")
    iframe.setAttribute("allowFullScreen", "true")
    iframe.setAttribute("title", "YouTube video")
    div.appendChild(iframe)
    return {element: iframe}
  }

[acywatson]

I couldn't make it work from remix to render it server side (nothing appears)

Did you try @lexical/headless?

Otherwise, what you did seems fine.

[WanYingT]

Do you mind provide example on how to initialize HeadlessEditor with some editorStates? (like how to use $generateHtmlFromNodes in headless environment)