fix(mdxish): Unclosed curly brace and callout fail to render on MDXish (#1333)

Jadenzzz · eaglethrost · web-flow · commit dbca5fa9ca30 · 2026-02-15T19:56:08.000+07:00
[![PR App][icn]][demo] | Fix RM-XYZ :-------------------:|:----------: ## 🧰 Changes The `escapeUnbalancedBraces()` function in `preprocess-jsx-expressions.ts` had an edge case where it can't handle multi-byte characters such as emoji This change converts the content to an array of unicode code points once at the start to ensure multi-byte characters are handled properly Describe your changes in detail. ## 🧬 QA & Testing - [Broken on production][prod]. - [Working in this PR app][demo]. [demo]: https://markdown-pr-PR_NUMBER.herokuapp.com [prod]: https://SUBDOMAIN.readme.io [icn]: https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg --------- Co-authored-by: Dimas Putra Anugerah <63914983+eaglethrost@users.noreply.github.com>
diff --git a/__tests__/lib/mdxish/mdxish.test.ts b/__tests__/lib/mdxish/mdxish.test.ts
@@ -35,6 +35,24 @@ describe('mdxish should render', () => {
       const md2 = 'This is an api: /param1/{param2 that has a unclosed curly brace';
       expect(() => mdxish(md2)).not.toThrow();
     });
+
+    it('should render unclosed curly braces in content with emojis', () => {
+      // Regression test for bug where emojis prevented brace escaping
+      const md = `> 📘 Note
+>
+> Content with unclosed brace: {`;
+      expect(() => mdxish(md)).not.toThrow();
+      
+      // Also test the exact bug report case
+      const bugReportCase = `test
+
+> 📘 Enter an optional title
+>
+> test
+>
+> test {`;
+      expect(() => mdxish(bugReportCase)).not.toThrow();
+    });
   });
 
   it('should render content in new lines', () => {
diff --git a/__tests__/transformers/preprocess-jsx-expressions.test.ts b/__tests__/transformers/preprocess-jsx-expressions.test.ts
@@ -187,6 +187,93 @@ describe('preprocessJSXExpressions', () => {
       });
     });
 
+    it('should escape unclosed braces in content with emojis', () => {
+      // Regression test: emojis are multi-byte Unicode that used to break position tracking
+      const content = '📘 test {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('📘 test \\{');
+    });
+
+    it('should escape unclosed braces in blockquote with emoji', () => {
+      const content = '> 📘 test {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('> 📘 test \\{');
+    });
+
+    it('should escape unclosed braces in multi-line callout with emoji', () => {
+      const content = `> 📘 Title
+>
+> test {`;
+      const result = preprocessJSXExpressions(content);
+      expect(result).toContain('\\{');
+      expect(() => mdxish(result)).not.toThrow();
+    });
+
+    it('should escape unclosed braces in content with Mandarin characters', () => {
+      // Regression test: multi-byte Unicode characters (Chinese) should not break position tracking
+      const content = '汉字 test {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('汉字 test \\{');
+    });
+
+    it('should escape unclosed braces in blockquote with Mandarin characters', () => {
+      const content = '> 吉 test {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('> 吉 test \\{');
+    });
+
+    it('should escape unclosed braces in content with math notation symbols', () => {
+      // Regression test: math Unicode symbols should not break position tracking
+      const content = '∑∫∞ test {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('∑∫∞ test \\{');
+    });
+
+    it('should escape unclosed braces in content with square root and math symbols', () => {
+      const content = '√2 + ∆x {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('√2 + ∆x \\{');
+    });
+
+    it('should escape unclosed braces in blockquote with math notation', () => {
+      const content = '> π ≈ 3.14 {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('> π ≈ 3.14 \\{');
+    });
+
+    it('should escape unclosed braces with mixed Unicode characters', () => {
+      const content = '汉字 📘 ∑ test {';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('汉字 📘 ∑ test \\{');
+    });
+
+    it('should escape unmatched closing brace with Mandarin characters', () => {
+      const content = '汉字 test }';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('汉字 test \\}');
+    });
+
+    it('should escape unmatched closing brace with math symbols', () => {
+      const content = '∞ test }';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe('∞ test \\}');
+    });
+
+    it('should handle balanced braces with mixed Unicode characters', () => {
+      const content = '汉字 {name} 📘 {amount} ∑';
+      const result = preprocessJSXExpressions(content);
+      expect(result).toBe(content);
+    });
+
+    it('should escape unclosed braces in multi-line callout with Mandarin and math symbols', () => {
+      const content = `> 汉字 Title
+>
+> ∑∫ test {`;
+      const result = preprocessJSXExpressions(content);
+      expect(result).toContain('\\{');
+      expect(() => mdxish(result)).not.toThrow();
+    });
+
     it('should handle string literals inside expressions', () => {
       // The closing brace inside the string should not close the expression
       const content = '{"}"}';
diff --git a/processor/transform/mdxish/preprocess-jsx-expressions.ts b/processor/transform/mdxish/preprocess-jsx-expressions.ts
@@ -140,8 +140,11 @@ function escapeUnbalancedBraces(content: string): string {
   let strDelim: string | null = null;
   let strEscaped = false;
 
-  for (let i = 0; i < content.length; i += 1) {
-    const ch = content[i];
+  // Convert to array of Unicode code points to handle emojis and multi-byte characters correctly
+  const chars = Array.from(content);
+
+  for (let i = 0; i < chars.length; i += 1) {
+    const ch = chars[i];
 
     // Track strings inside expressions to ignore braces within them
     if (opens.length > 0) {
@@ -162,7 +165,7 @@ function escapeUnbalancedBraces(content: string): string {
     // Skip already-escaped braces (count preceding backslashes)
     if (ch === '{' || ch === '}') {
       let bs = 0;
-      for (let j = i - 1; j >= 0 && content[j] === '\\'; j -= 1) bs += 1;
+      for (let j = i - 1; j >= 0 && chars[j] === '\\'; j -= 1) bs += 1;
       if (bs % 2 === 1) {
         // eslint-disable-next-line no-continue
         continue;
@@ -179,7 +182,7 @@ function escapeUnbalancedBraces(content: string): string {
   opens.forEach(pos => unbalanced.add(pos));
   if (unbalanced.size === 0) return content;
 
-  return Array.from(content)
+  return chars
     .map((ch, i) => (unbalanced.has(i) ? `\\${ch}` : ch))
     .join('');
 }
