astro-mermaid 1.1.0 → 1.2.0

package/astro-mermaid-integration.js

@@ -1,5 +1,20 @@
 import { resolve } from 'import-meta-resolve';
 
+/**
+ * Helper function to HTML-escape text content
+ * This ensures HTML tags in mermaid diagrams are preserved as text
+ */
+function escapeHtml(text) {
+  const htmlEntities = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  };
+  return text.replace(/[&<>"']/g, char => htmlEntities[char]);
+}
+
 /**
  * Remark plugin to transform mermaid code blocks at the markdown level
  */
@@ -13,10 +28,10 @@ function remarkMermaidPlugin(options = {}) {
       if (node.lang === 'mermaid') {
         mermaidCount++;
 
-        // Transform to html node with pre.mermaid
+        // Transform to html node with pre.mermaid, escaping HTML content
         const htmlNode = {
           type: 'html',
-          value: `<pre class="mermaid">${node.value}</pre>`
+          value: `<pre class="mermaid">${escapeHtml(node.value)}</pre>`
         };
 
         // Replace the code node with html node
@@ -36,6 +51,49 @@ function remarkMermaidPlugin(options = {}) {
   };
 }
 
+/**
+ * Helper function to serialize HAST nodes back to HTML text
+ * This preserves HTML tags within the mermaid content
+ */
+function serializeHastChildren(children) {
+  let result = '';
+
+  for (const child of children) {
+    if (child.type === 'text') {
+      result += child.value;
+    } else if (child.type === 'element') {
+      // Reconstruct the HTML tag
+      const tagName = child.tagName;
+      const selfClosing = ['br', 'hr', 'img', 'input', 'meta', 'link'].includes(tagName);
+
+      result += `<${tagName}`;
+
+      // Add attributes if any
+      if (child.properties) {
+        for (const [key, value] of Object.entries(child.properties)) {
+          if (key !== 'className') {
+            result += ` ${key}="${value}"`;
+          } else if (Array.isArray(value)) {
+            result += ` class="${value.join(' ')}"`;
+          }
+        }
+      }
+
+      if (selfClosing) {
+        result += '/>';
+      } else {
+        result += '>';
+        if (child.children && child.children.length > 0) {
+          result += serializeHastChildren(child.children);
+        }
+        result += `</${tagName}>`;
+      }
+    }
+  }
+
+  return result;
+}
+
 /**
  * Rehype plugin to transform mermaid code blocks
  * Converts ```mermaid code blocks to <pre class="mermaid">
@@ -43,7 +101,6 @@ function remarkMermaidPlugin(options = {}) {
 function rehypeMermaidPlugin(options = {}) {
   return async function transformer(tree, file) {
     const { visit } = await import('unist-util-visit');
-    const { toString } = await import('mdast-util-to-string');
 
     let mermaidCount = 0;
 
@@ -59,8 +116,8 @@ function rehypeMermaidPlugin(options = {}) {
 
         if (Array.isArray(className) && className.includes('language-mermaid')) {
           mermaidCount++;
-          // Get the mermaid diagram content
-          const diagramContent = toString(codeNode);
+          // Get the mermaid diagram content, preserving HTML tags
+          const diagramContent = serializeHastChildren(codeNode.children || []);
 
           // Transform to <pre class="mermaid">
           node.properties = {
@@ -68,9 +125,10 @@ function rehypeMermaidPlugin(options = {}) {
             className: ['mermaid']
           };
 
+          // Escape HTML to preserve it as text content
           node.children = [{
             type: 'text',
-            value: diagramContent
+            value: escapeHtml(diagramContent)
           }];
 
           if (options.logger) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-mermaid",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "An Astro integration for rendering Mermaid diagrams with automatic theme switching and client-side rendering",
   "type": "module",
   "main": "./astro-mermaid-integration.js",
@@ -39,15 +39,30 @@
     }
   },
   "dependencies": {
+    "@anthropic-ai/claude-code": "^1.0.128",
     "import-meta-resolve": "^4.2.0",
     "mdast-util-to-string": "^4.0.0",
     "unist-util-visit": "^5.0.0"
   },
+  "scripts": {
+    "claude": "claude",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
   "devDependencies": {
     "@types/hast": "^3.0.4",
+    "@vitest/ui": "^3.2.4",
     "astro": "^5.0.0",
+    "hast-util-from-html": "^2.0.3",
     "mermaid": "^11.0.0",
-    "typescript": "^5.0.0"
+    "rehype-parse": "^9.0.1",
+    "rehype-stringify": "^10.0.1",
+    "remark-mermaid": "^0.2.0",
+    "remark-parse": "^11.0.0",
+    "typescript": "^5.0.0",
+    "unified": "^11.0.5",
+    "vitest": "^3.2.4"
   },
   "repository": {
     "type": "git",
@@ -57,4 +72,4 @@
   "bugs": {
     "url": "https://github.com/joesaby/astro-mermaid/issues"
   }
-}
+}