fix: avoid evaluating JSX-like expressions inside inline code in heading

withastro · Jun 2, 2022 · 45dbd17 · 45dbd17
1 parent 33d987b
commit 45dbd17
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/lazy-humans-invent.md b/.changeset/lazy-humans-invent.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': minor
+---
+
+Fix cases for JSX-like expressions in code blocks of headings
diff --git a/packages/markdown/remark/package.json b/packages/markdown/remark/package.json
@@ -27,6 +27,7 @@
     "@astrojs/prism": "^0.4.1",
     "assert": "^2.0.0",
     "github-slugger": "^1.4.0",
+    "hast-util-to-html": "^8.0.3",
     "mdast-util-mdx-expression": "^1.2.0",
     "mdast-util-mdx-jsx": "^1.2.0",
     "mdast-util-to-string": "^3.1.0",

diff --git a/packages/markdown/remark/src/rehype-collect-headers.ts b/packages/markdown/remark/src/rehype-collect-headers.ts
@@ -1,4 +1,5 @@
 import { visit } from 'unist-util-visit';
+import { toHtml } from 'hast-util-to-html';
 import Slugger from 'github-slugger';
 
 import type { MarkdownHeader, RehypePlugin } from './types.js';
@@ -17,22 +18,18 @@ export default function createCollectHeaders() {
 				if (!level) return;
 				const depth = Number.parseInt(level);
 
-				let raw = '';
 				let text = '';
 				let isJSX = false;
-				visit(node, (child) => {
-					if (child.type === 'element') {
+				visit(node, (child, _, parent) => {
+					if (child.type === 'element' || ['code', 'pre'].some((tag) => parent?.tagName === tag)) {
 						return;
 					}
 					if (child.type === 'raw') {
-						// HACK: serialized JSX from internal plugins, ignore these for slug
 						if (child.value.startsWith('\n<') || child.value.endsWith('>\n')) {
-							raw += child.value.replace(/^\n|\n$/g, '');
 							return;
 						}
 					}
 					if (child.type === 'text' || child.type === 'raw') {
-						raw += child.value;
 						text += child.value;
 						isJSX = isJSX || child.value.includes('{');
 					}
@@ -41,6 +38,10 @@ export default function createCollectHeaders() {
 				node.properties = node.properties || {};
 				if (typeof node.properties.id !== 'string') {
 					if (isJSX) {
+						// HACK: serialized JSX from internal plugins, ignore these for slug
+						const raw = toHtml(node.children, { allowDangerousHtml: true })
+							.replace(/\n(<)/g, '<')
+							.replace(/(>)\n/g, '>');
 						// HACK: for ids that have JSX content, use $$slug helper to generate slug at runtime
 						node.properties.id = `$$slug(\`${text.replace(/\{/g, '${')}\`)`;
 						(node as any).type = 'raw';