fix: correctly render admonitions and accordions

Assisted-by: Cursor

Author: nicolethoen

packages/module/package.json

@@ -66,7 +66,7 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^13.4.0",
     "@types/dompurify": "^3.0.5",
     "@types/enzyme": "^3.10.7",
     "@types/enzyme-adapter-react-16": "^1.0.6",

packages/module/src/ConsoleInternal/components/markdown-view.tsx

@@ -25,7 +25,7 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
       return node;
     }
 
-    // add PF content classes
+    // add PF content classes to standard elements (details blocks get handled separately)
     if (node.nodeType === 1) {
       const contentElements = [
         'ul',
@@ -85,23 +85,100 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
   );
   const markdownWithSubstitutedCodeFences = reverseString(reverseMarkdownWithSubstitutedCodeFences);
 
-  const parsedMarkdown = await marked.parse(markdownWithSubstitutedCodeFences);
+  // Fix malformed HTML entities early in the process
+  let preprocessedMarkdown = markdownWithSubstitutedCodeFences;
+  preprocessedMarkdown = preprocessedMarkdown.replace(/&nbsp([^;])/g, ' $1').replace(/ /g, ' ');
+  preprocessedMarkdown = preprocessedMarkdown.replace(/&nbsp(?![;])/g, ' ');
+
+  // Process content in segments to ensure markdown parsing continues after HTML blocks
+  const htmlBlockRegex = /(<(?:details|div|section|article)[^>]*>[\s\S]*?<\/(?:details|div|section|article)>)/g;
+  
+  let parsedMarkdown = '';
+  
+  // Check if there are any HTML blocks
+  if (htmlBlockRegex.test(preprocessedMarkdown)) {
+    // Reset regex for actual processing
+    htmlBlockRegex.lastIndex = 0;
+    
+    let lastIndex = 0;
+    let match;
+    
+    while ((match = htmlBlockRegex.exec(preprocessedMarkdown)) !== null) {
+      // Process markdown before the HTML block
+      const markdownBefore = preprocessedMarkdown.slice(lastIndex, match.index).trim();
+      if (markdownBefore) {
+        const parsed = await marked.parse(markdownBefore);
+        parsedMarkdown += parsed;
+      }
+      
+      // Process the HTML block: parse markdown content inside while preserving HTML structure
+      let htmlBlock = match[1];
+      
+      // Find and process markdown content inside HTML tags
+      const contentRegex = />(\s*[\s\S]*?)\s*</g;
+      const contentMatches = [];
+      let contentMatch;
+      
+             while ((contentMatch = contentRegex.exec(htmlBlock)) !== null) {
+         const content = contentMatch[1];
+         // Only process content that has markdown formatting but no extension syntax
+         if (content.trim() && !content.includes('{{') && (content.includes('**') || content.includes('- ') || content.includes('\n'))) {
+           // This looks like markdown content without extensions - parse it as block content
+           const parsedContent = await marked.parse(content.trim());
+           // Remove wrapping <p> tags if they exist since we're inside HTML already
+           const cleanedContent = parsedContent.replace(/^<p[^>]*>([\s\S]*)<\/p>[\s]*$/g, '$1');
+           contentMatches.push({
+             original: contentMatch[0],
+             replacement: `>${cleanedContent}<`
+           });
+         }
+       }
+      
+      // Apply the content replacements
+      contentMatches.forEach(({ original, replacement }) => {
+        htmlBlock = htmlBlock.replace(original, replacement);
+      });
+      
+      // Apply extensions (like admonitions) to the processed HTML block
+      if (extensions) {
+        extensions.forEach(({ regex, replace }) => {
+          if (regex) {
+            htmlBlock = htmlBlock.replace(regex, replace);
+          }
+        });
+      }
+      
+      parsedMarkdown += htmlBlock;
+      lastIndex = htmlBlockRegex.lastIndex;
+    }
+    
+    // Process any remaining markdown after the last HTML block
+    const markdownAfter = preprocessedMarkdown.slice(lastIndex).trim();
+    if (markdownAfter) {
+      const parsed = await marked.parse(markdownAfter);
+      parsedMarkdown += parsed;
+    }
+  } else {
+    // No HTML blocks found, process normally
+    parsedMarkdown = await marked.parse(preprocessedMarkdown);
+  }
   // Swap the temporary tokens back to code fences before we run the extensions
   let md = parsedMarkdown.replace(/@@@/g, '```');
 
   if (extensions) {
     // Convert code spans back to md format before we run the custom extension regexes
     md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
 
-    extensions.forEach(({ regex, replace }) => {
+    extensions.forEach(({ regex, replace }, index) => {
       if (regex) {
         md = md.replace(regex, replace);
       }
     });
 
     // Convert any remaining backticks back into code spans
     md = md.replace(/`(.*)`/g, '<code>$1</code>');
-  }
+   }
+  
   return DOMPurify.sanitize(md);
 };
 
@@ -210,7 +287,7 @@ const InlineMarkdownView: FC<InnerSyncMarkdownProps> = ({
   const id = useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
-      <div dangerouslySetInnerHTML={{ __html: markup }} />
+      <div style={{ marginBlockEnd: 'var(--pf-t-global--spacer--md)' }} dangerouslySetInnerHTML={{ __html: markup }} />
       {renderExtension && (
         <RenderExtension renderExtension={renderExtension} selector={`#${id}`} markup={markup} />
       )}