feat(mdxish): introduce new HTMLBlock micromark tokenizer

components/HTMLBlock/index.tsx

@@ -25,10 +25,7 @@ const HTMLBlock = ({ children = '', html: htmlProp, runScripts, safeMode: safeMo
   let html: string = '';
   if (htmlProp !== undefined) {
     html = htmlProp;
-  } else {
-    if (typeof children !== 'string') {
-      throw new TypeError('HTMLBlock: children must be a string');
-    }
+  } else if (typeof children === 'string') {
     html = children;
   }
 

lib/mdast-util/html-block-component/index.ts

@@ -0,0 +1,54 @@
+import type { Html } from 'mdast';
+import type { CompileContext, Extension as FromMarkdownExtension, Handle, Token } from 'mdast-util-from-markdown';
+
+const contextMap = new WeakMap<Token, { chunks: string[]; lastEndLine: number }>();
+
+function findHtmlBlockComponentToken(this: CompileContext): Token | undefined {
+  const events = this.tokenStack;
+  for (let i = events.length - 1; i >= 0; i -= 1) {
+    if (events[i][0].type === 'htmlBlockComponent') return events[i][0];
+  }
+  return undefined;
+}
+
+// Produces an MDAST `html` node, mdxishHtmlBlocks then transforms it into an `html-block` node
+function enterHtmlBlockComponent(this: CompileContext, token: Parameters<Handle>[0]): void {
+  contextMap.set(token, { chunks: [], lastEndLine: token.start.line });
+  this.enter({ type: 'html', value: '' } as Html, token);
+}
+
+function exitHtmlBlockComponentData(this: CompileContext, token: Parameters<Handle>[0]): void {
+  const componentToken = findHtmlBlockComponentToken.call(this);
+  if (!componentToken) return;
+  const ctx = contextMap.get(componentToken);
+  if (ctx) {
+    const gap = token.start.line - ctx.lastEndLine;
+    if (ctx.chunks.length > 0 && gap > 0) {
+      ctx.chunks.push('\n'.repeat(gap));
+    }
+    ctx.chunks.push(this.sliceSerialize(token));
+    ctx.lastEndLine = token.end.line;
+  }
+}
+
+function exitHtmlBlockComponent(this: CompileContext, token: Parameters<Handle>[0]): void {
+  const ctx = contextMap.get(token);
+  const node = this.stack[this.stack.length - 1] as Html;
+  if (ctx) {
+    node.value = ctx.chunks.join('');
+    contextMap.delete(token);
+  }
+  this.exit(token);
+}
+
+export function htmlBlockComponentFromMarkdown(): FromMarkdownExtension {
+  return {
+    enter: {
+      htmlBlockComponent: enterHtmlBlockComponent,
+    },
+    exit: {
+      htmlBlockComponentData: exitHtmlBlockComponentData,
+      htmlBlockComponent: exitHtmlBlockComponent,
+    },
+  };
+}

lib/mdxish.ts

@@ -58,11 +58,13 @@ import tailwindTransformer from '../processor/transform/tailwind';
 
 import { emptyTaskListItemFromMarkdown } from './mdast-util/empty-task-list-item';
 import { gemojiFromMarkdown } from './mdast-util/gemoji';
+import { htmlBlockComponentFromMarkdown } from './mdast-util/html-block-component';
 import { jsxTableFromMarkdown } from './mdast-util/jsx-table';
 import { legacyVariableFromMarkdown } from './mdast-util/legacy-variable';
 import { magicBlockFromMarkdown } from './mdast-util/magic-block';
 import { mdxComponentFromMarkdown } from './mdast-util/mdx-component';
 import { gemoji } from './micromark/gemoji';
+import { htmlBlockComponent } from './micromark/html-block-component';
 import { jsxComment } from './micromark/jsx-comment';
 import { jsxTable } from './micromark/jsx-table';
 import { legacyVariable } from './micromark/legacy-variable';
@@ -158,8 +160,9 @@ export function mdxishAstProcessor(mdContent: string, opts: MdxishOpts = {}) {
     text: mdxExprExt.text,
   };
 
-  const micromarkExts = [jsxTable(), magicBlock(), mdxComponent(), gemoji(), legacyVariable(), looseHtmlEntity()];
+  const micromarkExts = [htmlBlockComponent(), jsxTable(), magicBlock(), mdxComponent(), gemoji(), legacyVariable(), looseHtmlEntity()];
   const fromMarkdownExts = [
+    htmlBlockComponentFromMarkdown(),
     jsxTableFromMarkdown(),
     magicBlockFromMarkdown(),
     mdxComponentFromMarkdown(),

lib/micromark/html-block-component/index.ts

@@ -0,0 +1 @@
+export { htmlBlockComponent } from './syntax';