Skip to content

feat(mdxish): introduce new HTMLBlock micromark tokenizer #1439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
maximilianfalco wants to merge 14 commits into from
Closed

feat(mdxish): introduce new HTMLBlock micromark tokenizer #1439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
27c7a48
feat: add new htmlblock tokenizer
maximilianfalco Apr 16, 2026
f9788a0
feat: integrate new tokenizer into mdxish pipeline
maximilianfalco Apr 16, 2026
631aebd
fix: simplify mdxishHtmlBlocks transformer
maximilianfalco Apr 16, 2026
3001457
fix: preserve trailing text after closing tag
maximilianfalco Apr 16, 2026
fb6450e
fix: allow htmlblock opening tag to span multiple lines
maximilianfalco Apr 16, 2026
d804324
chore: add tests
maximilianfalco Apr 16, 2026
18a081d
fix: preserve trailing text after closing tag
maximilianfalco Apr 16, 2026
47b87b1
Merge branch 'next' of https://github.com/readmeio/markdown into falc…
maximilianfalco Apr 16, 2026
26f1124
Merge branch 'next' of https://github.com/readmeio/markdown into falc…
maximilianfalco Apr 17, 2026
69def82
chore: removed as State casts
maximilianfalco Apr 17, 2026
10d4f91
chore: add stricter and more robust test expectations
maximilianfalco Apr 17, 2026
24390a9
chore: add htmlblock transformer tests
maximilianfalco Apr 17, 2026
012ebb8
chore: move transformer tests in to the transformer test file
maximilianfalco Apr 17, 2026
989aa8f
chore: tweak nested html block test
maximilianfalco Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 1 addition & 147 deletions __tests__/compilers/html-block.test.ts
View file
Open in desktop
Comment thread
maximilianfalco marked this conversation as resolved.

@eaglethrost eaglethrost Apr 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More tests suggestion:

  • HTMLBlock that spans multiple lines and have text before & after it, and having some random amount of empty spaces in between. E.g.
Hello <HTMLBlock>{\`
<p><strong">Hello</strong>, World!</p>

\`}</HTMLBlock>

there
  • Nested HTMLBlocks
<HTMLBlock>{`<HTMLBlock>{inner}</HTMLBlock>`}</HTMLBlock>

@maximilianfalco maximilianfalco Apr 17, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More tests suggestion:

  • HTMLBlock that spans multiple lines and have text before & after it, and having some random amount of empty spaces in between. E.g.
Hello <HTMLBlock>{\`
<p><strong">Hello</strong>, World!</p>

\`}</HTMLBlock>

there

i dont think we should cover this case tho, even MDX themselve dont support this so i think this is just plain malformed and wrong syntax

  • Nested HTMLBlocks
<HTMLBlock>{`<HTMLBlock>{inner}</HTMLBlock>`}</HTMLBlock>

added this one with a bit of a tweak!

Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@
import type { Element } from 'hast';

import { mdast, mdx, mdxish } from '../../index';

function findHTMLBlock(element: Element): Element | undefined {
if (element.tagName === 'HTMLBlock' || element.tagName === 'html-block') {
return element;
}
return element.children
.filter((child): child is Element => child.type === 'element')
.reduce<Element | undefined>((found, child) => found || findHTMLBlock(child), undefined);
}
import { mdast, mdx } from '../../index';

describe('html-block compiler', () => {
it('compiles html blocks within containers', () => {
Expand Down Expand Up @@ -51,138 +40,3 @@ const foo = () => {
expect(mdx(mdast(markdown)).trim()).toBe(expected.trim());
});
});

describe('mdxish html-block compiler', () => {
it('compiles html blocks within containers', () => {
const markdown = `
> 🚧 It compiles!
>
> <HTMLBlock>{\`
> <strong style="color: olive">Hello, World!</strong>
> \`}</HTMLBlock>
`;

const hast = mdxish(markdown.trim());
const callout = hast.children[0] as Element;

expect(callout.type).toBe('element');
expect(callout.tagName).toBe('Callout');

// Find HTMLBlock within the callout
const htmlBlock = findHTMLBlock(callout);
expect(htmlBlock).toBeDefined();
expect(htmlBlock?.tagName).toBe('html-block');
});

it('compiles html blocks preserving newlines', () => {
const markdown = `
<HTMLBlock>{\`
<pre><code>
const foo = () => {
const bar = {
baz: 'blammo'
}

return bar
}
</code></pre>
\`}</HTMLBlock>
`;

const hast = mdxish(markdown.trim());
const paragraph = hast.children[0] as Element;

expect(paragraph.type).toBe('element');
const htmlBlock = findHTMLBlock(paragraph);
expect(htmlBlock).toBeDefined();
expect(htmlBlock?.tagName).toBe('html-block');
});

it('adds newlines for readability', () => {
const markdown = '<HTMLBlock>{`<p><strong">Hello</strong>, World!</p>`}</HTMLBlock>';

const hast = mdxish(markdown);
const paragraph = hast.children[0] as Element;

expect(paragraph.type).toBe('element');
const htmlBlock = findHTMLBlock(paragraph);
expect(htmlBlock).toBeDefined();
expect(htmlBlock?.tagName).toBe('html-block');
});

it('unescapes backticks in HTML content', () => {
const markdown = '<HTMLBlock>{`<code>\\`example\\`</code>`}</HTMLBlock>';

const hast = mdxish(markdown);
const paragraph = hast.children[0] as Element;

expect(paragraph.type).toBe('element');
const htmlBlock = findHTMLBlock(paragraph);
expect(htmlBlock).toBeDefined();
expect(htmlBlock?.tagName).toBe('html-block');

// Verify that escaped backticks \` are unescaped to ` in the HTML
const htmlProp = htmlBlock?.properties?.html as string;
expect(htmlProp).toBeDefined();
expect(htmlProp).toContain('<code>`example`</code>');
expect(htmlProp).not.toContain('\\`');
});

it('passes safeMode property correctly', () => {
// Test with both JSX expression and string syntax
const markdown = '<HTMLBlock safeMode={true}>{`<script>alert("XSS")</script><p>Content</p>`}</HTMLBlock>';

const hast = mdxish(markdown);
const paragraph = hast.children[0] as Element;

expect(paragraph.type).toBe('element');
const htmlBlock = findHTMLBlock(paragraph);
expect(htmlBlock).toBeDefined();

const allProps = htmlBlock?.properties;
expect(allProps).toBeDefined();

const safeMode = allProps?.safeMode;
expect(safeMode).toBe('true');

// Verify that html property is still present (for safeMode to render as escaped text)
const htmlProp = allProps?.html as string;
expect(htmlProp).toBeDefined();
expect(htmlProp).toContain('<script>alert("XSS")</script>');
expect(htmlProp).toContain('<p>Content</p>');
});

it('should handle template literal with variables', () => {
// eslint-disable-next-line quotes
const markdown = `<HTMLBlock>{\`<code>const x = \${variable}</code>\`}</HTMLBlock>`;

const hast = mdxish(markdown);
const paragraph = hast.children[0] as Element;

expect(paragraph.type).toBe('element');
const htmlBlock = findHTMLBlock(paragraph);
expect(htmlBlock).toBeDefined();
// eslint-disable-next-line no-template-curly-in-string
expect(htmlBlock?.properties?.html).toBe('<code>const x = ${variable}</code>');
});

it('should handle nested template literals', () => {
// Use a regular string to avoid nested template literal syntax error
// The content should be: <pre>```javascript\nconst x = 1;\n```</pre>
const markdown = '<HTMLBlock>{`<pre>\\`\\`\\`javascript\\nconst x = 1;\\n\\`\\`\\`</pre>`}</HTMLBlock>';

const hast = mdxish(markdown);
const paragraph = hast.children[0] as Element;

expect(paragraph.type).toBe('element');
const htmlBlock = findHTMLBlock(paragraph);
expect(htmlBlock).toBeDefined();

// Verify that the HTML content is preserved correctly with newlines
const htmlProp = htmlBlock?.properties?.html as string;
expect(htmlProp).toBeDefined();

// The expected content should have triple backticks
expect(htmlProp).toBe('<pre>```javascript\nconst x = 1;\n```</pre>');
});
});
Loading
Loading