HTML import/export two modes: verbose (with only inline styles) and concise (with mainly CSS classes)

[vadimkantorov]

Hi!

As I understood, currently JSON is not intended to be a very stable serialization format for Lexical content.

I'm then interested in using HTML with Lexical in two modes:

1. Export/import fully self-contained verbose HTML (for exchange between editors and viewing HTML in browser without specifying a stylesheet). For this regime I'd like all styles to be fully specified and duplicated inline as style="..." for all nodes, especially for text formatting. Also this regime needs to support permissive import: Handling unknown / unregistered node types #7212 (comment) to not choke (and maybe skip unknown tags if configured) on unknown HTML nodes. So that e.g. I could export my legacy WordPress posts to HTML and being able to edit them using Lexical. Also would be interesting to be able to ingest WordPress markup: https://developer.wordpress.org/block-editor/getting-started/fundamentals/markup-representation-block/ . It contains an HTML comment opening line before WordPress block begins, and a closing one as well. These comments are preserved by DOMParser, so a recipe to have them taken into account during parsing would be cool (then probably Lexical can be used to edit WordPress documents with core blocks). Example:

     <!-- wp:image {"sizeSlug":"large"} -->
     <figure class="wp-block-image size-large">
       <img src="source.jpg" alt="" />
     </figure>
     <!-- /wp:image -->

2. Rendering mode: I'd like to be able to export/import concise HTML: use CSS classes for specifying node types and for formatting styles (like heading1, heading2 etc). Then this HTML can be used for rendering, and CSS class definitions would be added separately.

It appears that https://github.com/facebook/lexical/blob/main/examples/react-rich/src/App.tsx example does something to achieve these goals. But I'm currently not fully understanding what it does (removing inline styles at export? and parsing inline styles at import?)

Maybe an extension to https://lexical.dev/docs/packages/lexical-html or https://lexical.dev/docs/concepts/serialization with discussion of export/import of two HTML modes (verbose and concise) and more comments in the react-rich example would solve my question.

Thanks!

Probably related:

• https://lexical.dev/docs/packages/lexical-html
• hook/transforms { export: ..., import: ...} in EditorConfig
• Feature: Middleware-style exportDOM/importDOM #7259
• https://lexical.dev/docs/concepts/serialization

---

My current impl of HTML export/import:

const handleHtmlToggle = useCallback(() => {
    editor.update(() => {
      const root = $getRoot();
      const firstChild = root.getFirstChild();
      
      if ($isCodeNode(firstChild) && firstChild.getLanguage() === 'html') {
        const parser = new DOMParser();
        const dom = parser.parseFromString(firstChild.getTextContent(), "text/html");
        const nodes = $generateNodesFromDOM(editor, dom);
        root.clear();
        root.select();
        $insertNodes(nodes);
      }
      else {
        const html = $generateHtmlFromNodes(editor, $selectAll());
        const codeNode = $createCodeNode('html');
        codeNode.append($createTextNode(html));
        root.clear().append(codeNode);
        if (html.length === 0) {
          codeNode.select();
        }
      }
    });
  }, [editor]);

Currently its problem is that if I have an image src exported correctly as <img src="/images/blah.jpg" ... />, but when I import it back the current host gets added (and I don't need this, as I have a custom resolver for image source paths to prepend another correct host/prefix)