Merge branch 'main' into custom-doc-layout-components

e2e/fixtures/inline-markdown/doc/inline/all.mdx

@@ -15,3 +15,5 @@
 ## *emphasis*
 
 ## ~~delete~~
+
+## `This is a long string to test regex performance`

e2e/tests/inline-markdown.test.ts

@@ -140,6 +140,7 @@ test.describe('Inline markdown test', async () => {
         'bold',
         'emphasis',
         'delete',
+        'This is a long string to test regex performance',
       ].join(','),
     );
     const aInnerHtml = await Promise.all(a.map(element => element.innerHTML()));
@@ -152,6 +153,7 @@ test.describe('Inline markdown test', async () => {
       '<strong>bold</strong>',
       '<em>emphasis</em>',
       '<del>delete</del>',
+      '<code>This is a long string to test regex performance</code>',
     ];
     for (const [index, html] of aInnerHtml.entries()) {
       expect(html).toContain(expectedAInnerHtml[index]);
@@ -177,6 +179,7 @@ test.describe('Inline markdown test', async () => {
         'bold',
         'emphasis',
         'delete',
+        'This is a long string to test regex performance',
       ].join(','),
     );
     const asidesInnerHtml = await Promise.all(
@@ -192,6 +195,7 @@ test.describe('Inline markdown test', async () => {
         '<strong>bold</strong>',
         '<em>emphasis</em>',
         '<del>delete</del>',
+        '<code>This is a long string to test regex performance</code>',
       ].join(','),
     );
   });

packages/theme-default/src/logic/utils.ts

@@ -38,12 +38,12 @@ export function renderHtmlOrText(str?: string | number | null) {
   }
 
   // Parse the HTML to check for validity
-  // Regular Expression: The regex /<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s*\/>)/i is designed to match basic HTML tags, including self-closing tags.
+  // Regular Expression: match basic HTML tags, including self-closing tags.
   // <([a-z]+): Matches the opening tag and captures the tag name.
-  // ([^<]+)*: Matches any attributes within the tag.
-  // (?:>(.*)<\/\1>|\s*\/>): Matches either a closing tag with content or a self-closing tag.
+  // ([^<]*): Matches any attributes within the tag.
+  // (?:>(.*?)<\/\1>|\s*\/>): Matches either a closing tag with content or a self-closing tag.
   // i Flag: Makes the regex case-insensitive, allowing it to match tags like <IMG> as well as <img>.
-  const hasValidHtmlElements = /<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s*\/>)/i.test(
+  const hasValidHtmlElements = /<([a-z]+)([^<]*)(?:>(.*?)<\/\1>|\s*\/>)/i.test(
     str,
   );