In CKEditor 5 we are considering rewriting our markdown-gfm feature to use the unifiedjs ecosystem. Since the editor runs in the browser, we want to use packages that rely on native DOM APIs instead of external HTML parsers to reduce the bundle size. However, this becomes difficult when I need to add support for HTML inside Markdown because all the out-of-the-box solutions that support this rely on parse5.

Let's use the following Markdown as an example:

test with <keep>html</keep> and <notkeep>not html</notkeep>

Now let's use rehype-dom-stringify to stringify this:

import { unified } from 'unified';
import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-dom-stringify';

unified()
  .use( remarkParse )
  .use( remarkGfm )
  .use( remarkRehype, { allowDangerousHtml: true } )
  .use( rehypeStringify )
  .processSync( markdown )
  .toString();

In return, I get the following HTML:

<p>test with</p><div></div>html<div></div>and<div></div>not html<div></div><p></p>

There are two ways to fix this using OOTB solutions:

1. Use rehype-stringify with allowDangerousHtml: true option (instead of rehype-dom-stringify which does not support this option).
2. Use rehype-raw before rehypeStringify.

Both of them will produce the desired output:

<p>test with <keep>html</keep> and <notkeep>not html</notkeep></p>

Unfortunately, both of these also rely on parse5, which we want to avoid. Below is a solution that uses native browser APIs. However, I'd like to get your opinion on the best approach. Is there an existing solution I may have missed? Does the solution below have any obvious issues?

import { visit } from 'unist-util-visit';
import { toHtml } from 'hast-util-to-html';
import { fromDom } from 'hast-util-from-dom';

export default function rehypeDomRaw() {
  return tree => {
    visit( tree, [ 'root', 'element' ], node => {
      if ( !node.children ) {
        return;
      }

      // Only act on nodes with at least one raw child.
      if ( !node.children.some( child => child.type === 'raw' ) ) {
        return;
      }

      const template = document.createElement( 'template' );

      // Serialize all children to an HTML fragment.
      template.innerHTML = toHtml(
        { type: 'root', children: node.children },
        { allowDangerousHtml: true }
      );

      // Convert each parsed DOM node back into HAST and replace the original children.
      node.children = Array
        .from( template.content.childNodes )
        .map( domNode => fromDom( domNode ) );
    } );
  };
}