fix(mdx): handle malformed tags with quotes in preprocessMdxTags

[hkdeman]

Fixes issue #51 where MDX build would fail when encountering malformed component tags containing single quotes in attribute names.

The fix adds a second processing pass to detect and wrap malformed tags in backticks, converting them to literal text while preserving valid component syntax.

Generated with Claude Code

[jazzberry-ai]

Bug Report

Name: Regular Expression Denial of Service (ReDoS) vulnerability in hasMatchingClosingTag function
Severity: High
Example test case: Create an MDX document with a tag that contains special regular expression characters, such as <.*>. Include a large amount of text after the tag. Process the MDX document using the preprocessMdxTags function.
Description: The hasMatchingClosingTag function uses regular expressions to search for matching closing tags. If the tag name contains special regular expression characters, these characters will be interpreted as regular expression metacharacters, which could lead to a ReDoS attack. An attacker could craft an MDX document that exploits this vulnerability to cause the regular expression engine to take a very long time to process the input, leading to a denial of service.

_{Comments? Email us.}

[hkdeman]

@claude the mdx compiler seems to be the one that is replacing quotes - can you check?

[claude]

Claude finished @hkdeman's task —— View job

---

Analysis Complete: MDX Compiler vs Preprocessing Function

• Read the current sanitize.ts implementation
• Examine MDX compilation setup in the codebase
• Check if MDX compiler has built-in quote handling
• Determine the actual source of quote replacement
• Provide findings and recommendations

Key Findings

The MDX compiler is NOT replacing quotes. Your preprocessing function is working exactly as intended. Here's why:

1. Processing Order Matters

// vite.config.ts line 13-19
plugins: [
  preprocessMdxTags(),  // ← Runs FIRST (Vite plugin with enforce: 'pre')
  preact(),
  mdx({                 // ← MDX compiler runs AFTER preprocessing
    providerImportSource: '@mdx-js/preact',
    remarkPlugins: [remarkGfm, remarkSafeVars],
  }),

2. MDX Compiler Behavior

• Uses @mdx-js/rollup v3.1.0 which has no built-in quote replacement
• MDX compiler would fail completely when encountering malformed syntax like <AccordionNo Documents'">
• It expects valid JSX syntax or properly escaped content

3. Your Fix is Correct

The second pass in preprocessMdxTags (lines 118-144) correctly identifies malformed tags:

// Targets malformed content like <AccordionNo Documents'">
processed = processed.replace(/<([a-z][a-z0-9]*)\s+[^>]*['"][^>]*>/gi, (match, _tag, offset) => {
  // ... validation logic ...
  if (!hasProperAttributes) {
    return `\`${match}\``;  // Wrap as literal text
  }

4. Why This Approach Works

• Prevention: Protects MDX compiler from parsing errors
• Preservation: Keeps malformed content as literal text instead of failing the build
• Precision: Only affects truly malformed tags, not valid JSX

Recommendation

The current implementation is correct. The preprocessing function is doing exactly what it should:

1. Detecting malformed component-like syntax
2. Converting it to literal text (wrapped in backticks)
3. Preventing MDX compilation failures

The "quote replacement" you're seeing is actually quote preservation - the malformed content gets wrapped as literal text so users can see exactly what was in their original content, rather than having the build fail entirely.

[hkdeman]

@claude when converted it becomes this:

<Accordion title="Cache Creation Fails with "No Documents"">

not <AccordionNo Documents'">

[claude]

Claude finished @hkdeman's task —— View job

---

Analyzing Quote Conversion Issue

• Read current sanitize.ts implementation
• Analyze the preprocessing pipeline
• Examine the quote handling logic
• Check example usage in docs files
• Reproduce the exact issue
• Identify root cause of quote conversion
• Fix if needed

Analysis Results

I've examined the preprocessMdxTags function and the issue appears to be NOT in the preprocessing code itself. Here's why:

Current Logic is Correct

// Line 120: Regex matches tags with quotes (single OR double)
processed = processed.replace(/<([a-z][a-z0-9]*)\s+[^>]*['"][^>]*>/gi, (match, _tag, offset) => {
  // ...
  if (!hasProperAttributes) {
    return `\`${match}\``;  // Preserves original match exactly
  }

The match variable contains the exact original text from the regex match. If input is <AccordionNo Documents'">, then match is exactly that string.

Proper Accordion Usage (from docs/features.mdx)

<Accordion title="First Section" icon="DocumentIcon">

Your malformed tag <AccordionNo Documents'"> lacks proper attribute syntax and should be wrapped as literal text.

Where Quote Conversion Could Happen

1. Browser HTML normalization - Browsers normalize quotes when displaying HTML
2. DevTools inspection - Browser dev tools may show normalized HTML
3. MDX compiler output - The final compiled output might have normalized quotes
4. Build process - Something after preprocessing

Need Reproduction Steps

To identify the exact source, please provide:

1. Create a minimal test file (test.mdx):

   # Test
   <AccordionNo Documents'">

2. Show the output at each stage:

   • Raw file content
   • After preprocessing (before MDX compilation)
   • Final built HTML
   • What you see in browser/devtools

This will help pinpoint exactly where the quote conversion occurs.

---