fix: properly extract titles with backticks in MDX headings (#350)

Co-authored-by: copilot-pull-request-reviewer[bot] <175728472+copilot-pull-request-reviewer[bot]@users.noreply.github.com>

Author: kentcdodds

packages/workshop-utils/src/compile-mdx.server.ts

@@ -5,7 +5,7 @@ import path from 'path'
 import { rehypeCodeBlocksShiki } from '@kentcdodds/md-temp'
 import { type Element, type Root as HastRoot } from 'hast'
 import lz from 'lz-string'
-import { type Root as MdastRoot } from 'mdast'
+import { type Root as MdastRoot, type PhrasingContent } from 'mdast'
 import { type MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
 import { bundleMDX } from 'mdx-bundler'
 import PQueue from 'p-queue'
@@ -231,9 +231,25 @@ async function compileMdxImpl(file: string): Promise<{
 						visit(tree, 'heading', (node) => {
 							if (title) return
 							if (node.depth === 1) {
-								visit(node, 'text', (textNode) => {
-									title = textNode.value.trim()
-								})
+								// Extract plain text content, preserving inline code but stripping other formatting
+								const extractText = (nodes: Array<PhrasingContent>): string => {
+									return nodes.map((childNode: PhrasingContent) => {
+										if (childNode.type === 'text') {
+											return childNode.value
+										} else if (childNode.type === 'inlineCode') {
+											return `\`${childNode.value}\``
+										} else if (childNode.type === 'strong' || childNode.type === 'emphasis') {
+											// For formatting like bold/italic, just extract the text content
+											return extractText(childNode.children || [])
+										} else if ('children' in childNode && childNode.children) {
+											// For other nodes with children, recursively extract text
+											return extractText(childNode.children || [])
+										}
+										return ''
+									}).join('')
+								}
+								
+								title = extractText(node.children || []).trim()
 							}
 						})
 						title = title ? title.replace(/^\d+\. /, '').trim() : null

packages/workshop-utils/src/compile-mdx.test.ts

@@ -0,0 +1,67 @@
+import fs from 'fs'
+import os from 'os'
+import path from 'path'
+import { describe, it, expect } from 'vitest'
+import { compileMdx } from './compile-mdx.server.js'
+
+// Disposable object for temporary files
+function createTempFile(name: string, content: string) {
+	const tempDir = os.tmpdir()
+	const testFile = path.join(tempDir, name)
+	fs.writeFileSync(testFile, content)
+	
+	return {
+		path: testFile,
+		[Symbol.dispose]() {
+			try {
+				fs.unlinkSync(testFile)
+			} catch {
+				// Ignore cleanup errors
+			}
+		}
+	}
+}
+
+describe('compileMdx title parsing', () => {
+	it('should extract title with backticks correctly', async () => {
+		// Create a temporary MDX file with backticks in title
+		const testMdxContent = `# Title with \`something\` highlighted
+
+This is some content.
+`
+		
+		using tempFile = createTempFile('test-backtick-title.mdx', testMdxContent)
+		
+		const result = await compileMdx(tempFile.path)
+		
+		// The title should be extracted correctly, preserving the full text
+		expect(result.title).toBe('Title with `something` highlighted')
+	})
+
+	it('should extract title with multiple backticks correctly', async () => {
+		const testMdxContent = `# \`Code\` and \`more code\` in title
+
+This is some content.
+`
+		
+		using tempFile = createTempFile('test-multiple-backticks.mdx', testMdxContent)
+		
+		const result = await compileMdx(tempFile.path)
+		
+		expect(result.title).toBe('`Code` and `more code` in title')
+	})
+
+	it('should extract title with mixed markdown correctly', async () => {
+		const testMdxContent = `# Title with \`code\` and **bold** text
+
+This is some content.
+`
+		
+		using tempFile = createTempFile('test-mixed-markdown.mdx', testMdxContent)
+		
+		const result = await compileMdx(tempFile.path)
+		
+		// Bold formatting should be stripped, but backticks preserved
+		expect(result.title).toBe('Title with `code` and bold text')
+	})
+})