@barzhsieh/nuxt-content-mermaid 2.1.2 → 2.1.3

package/README.md

@@ -1,5 +1,7 @@
 [English](./README.md) | [中文](./README.zh-TW.md)
 
+[![nuxt-content-social-card](https://raw.githubusercontent.com/andy820621/nuxt-content-mermaid/main/src/assets/nuxt-content-mermaid.webp)](https://www.npmjs.com/package/@barzhsieh/nuxt-content-mermaid)
+
 # nuxt-content-mermaid
 
 [![npm version][npm-version-src]][npm-version-href]

package/README.zh-TW.md

@@ -1,4 +1,6 @@
-[English](./README.md) | [中文](./README.zh-TW.md)
+[中文](./README.zh-TW.md) | [English](./README.md) 
+
+[![nuxt-content-social-card](https://raw.githubusercontent.com/andy820621/nuxt-content-mermaid/main/src/assets/nuxt-content-mermaid.webp)](https://www.npmjs.com/package/@barzhsieh/nuxt-content-mermaid)
 
 # nuxt-content-mermaid
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.20.1 || ^4.1.0"
   },
-  "version": "2.1.2",
+  "version": "2.1.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -2,8 +2,8 @@ import { defineNuxtModule, useLogger, createResolver, addVitePlugin, addPlugin,
 import { defu } from 'defu';
 import { DEFAULT_MERMAID_CONFIG, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_FRONTMATTER_CONFIG_KEY } from '../dist/runtime/constants.js';
 
-const MERMAID_BLOCK = /```mermaid([\s\S]*?)```/gi;
 const SANITIZE_URL_PACKAGE = "@braintree/sanitize-url";
+const MERMAID_FENCE_RE = /^[ \t]*(?:`{3,}|~{3,})[ \t]*mermaid(?:$|[ \t{[])/im;
 const DEFAULTS = {
   enabled: true,
   loader: {
@@ -106,7 +106,7 @@ export {}
     nuxt.hook("content:file:beforeParse", (ctx) => {
       const { file } = ctx;
       if (!file.id?.endsWith(".md")) return;
-      if (!file.body.toLowerCase().includes("```mermaid")) return;
+      if (!MERMAID_FENCE_RE.test(file.body)) return;
       file.body = transformMermaidCodeBlocks(
         file.body,
         baseMermaidComponentName
@@ -115,12 +115,106 @@ export {}
   }
 });
 function transformMermaidCodeBlocks(body, componentName, frontmatterConfigKey = DEFAULT_FRONTMATTER_CONFIG_KEY) {
-  return body.replace(MERMAID_BLOCK, (_, rawCode = "") => {
+  const newline = body.includes("\r\n") ? "\r\n" : "\n";
+  const lines = body.split(newline);
+  const output = [];
+  let inFence = false;
+  let fenceChar = null;
+  let fenceLength = 0;
+  const isClosingFence = (line) => {
+    if (!fenceChar) return false;
+    const trimmed = line.trim();
+    if (trimmed.length < fenceLength) return false;
+    for (const char of trimmed) {
+      if (char !== fenceChar) return false;
+    }
+    return true;
+  };
+  const isFenceMarkerChar = (char) => char === "`" || char === "~";
+  const parseFence = (line) => {
+    let index = 0;
+    while (index < line.length && (line[index] === " " || line[index] === "	"))
+      index++;
+    const indent = line.slice(0, index);
+    const markerChar = line[index];
+    if (!isFenceMarkerChar(markerChar))
+      return null;
+    let markerEnd = index;
+    while (markerEnd < line.length && line[markerEnd] === markerChar)
+      markerEnd++;
+    const markerLength = markerEnd - index;
+    if (markerLength < 3)
+      return null;
+    return {
+      indent,
+      markerChar,
+      markerLength,
+      info: line.slice(markerEnd).trim()
+    };
+  };
+  const isMermaidFence = (info) => {
+    if (!info) return false;
+    const lower = info.toLowerCase();
+    if (!lower.startsWith("mermaid")) return false;
+    const next = lower.slice("mermaid".length, "mermaid".length + 1);
+    return next === "" || /\s/.test(next) || next === "{" || next === "[";
+  };
+  const buildComponentTag = (encoded) => `<${componentName} :config="${frontmatterConfigKey}" code="${encoded}"></${componentName}>`;
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
+    if (inFence) {
+      output.push(line);
+      if (isClosingFence(line)) {
+        inFence = false;
+        fenceChar = null;
+        fenceLength = 0;
+      }
+      continue;
+    }
+    const fence = parseFence(line);
+    if (!fence) {
+      output.push(line);
+      continue;
+    }
+    if (!isMermaidFence(fence.info)) {
+      inFence = true;
+      fenceChar = fence.markerChar;
+      fenceLength = fence.markerLength;
+      output.push(line);
+      continue;
+    }
+    let closingIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+      const trimmed = lines[j].trim();
+      if (trimmed.length < fence.markerLength) continue;
+      let isFence = true;
+      for (const char of trimmed) {
+        if (char !== fence.markerChar) {
+          isFence = false;
+          break;
+        }
+      }
+      if (isFence) {
+        closingIndex = j;
+        break;
+      }
+    }
+    if (closingIndex === -1) {
+      output.push(line);
+      continue;
+    }
+    const rawCode = lines.slice(index + 1, closingIndex).join(newline);
     const code = rawCode.trim();
-    if (!code) return _;
+    if (!code) {
+      output.push(...lines.slice(index, closingIndex + 1));
+      index = closingIndex;
+      continue;
+    }
     const encoded = encodeURIComponent(code);
-    return `<${componentName} :config="${frontmatterConfigKey}" code="${encoded}"></${componentName}>`;
-  });
+    output.push(`${fence.indent}${buildComponentTag(encoded)}`);
+    index = closingIndex;
+  }
+  return output.join(newline);
 }
 
 export { module$1 as default, transformMermaidCodeBlocks };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barzhsieh/nuxt-content-mermaid",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A Nuxt module designed for integrating Mermaid with `@nuxt/content`. It automatically converts `mermaid` code blocks in Markdown into responsive chart components, and supports lazy loading and dark/light theme switching.",
   "keywords": [
     "nuxt",