@barzhsieh/nuxt-content-mermaid 2.1.1 → 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.1",
+  "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/dist/runtime/components/Mermaid.vue

@@ -298,6 +298,7 @@ watch(decodedCode, (newCode) => {
     <div
       v-else
       class="mermaid-wrapper"
+      :class="{ 'ncm-is-loading': isLoading && !hasRenderedOnce }"
     >
       <div ref="mermaidContainer">
         <!-- Initially show the slot's <pre><code> for SSR; client-side rendering will replace it with the mermaid SVG -->
@@ -337,5 +338,5 @@ watch(decodedCode, (newCode) => {
 </template>
 
 <style scoped>
-.mermaid-wrapper{position:relative;text-align:center}.mermaid-wrapper :deep(code),.mermaid-wrapper :deep(pre){margin:0;max-height:160px;opacity:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mermaid-wrapper :deep(svg){display:inline-block;vertical-align:middle}.mermaid-error-default{text-align:center}.mermaid:not([data-processed]){color:transparent;min-height:10px}.mermaid-wrapper :deep(.edgeLabel),.mermaid-wrapper :deep(.label),.mermaid-wrapper :deep(.nodeLabel){overflow:visible!important;white-space:normal!important}.mermaid-wrapper :deep(foreignObject){overflow:visible!important}
+.mermaid-wrapper{--ncm-loading-min-height:160px;position:relative;text-align:center}.mermaid-wrapper.ncm-is-loading{min-height:var(--ncm-loading-min-height,160px)}.mermaid-wrapper :deep(code),.mermaid-wrapper :deep(pre){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;clip-path:inset(50%);white-space:nowrap}.mermaid-wrapper :deep(svg){display:inline-block;vertical-align:middle}.mermaid-error-default{text-align:center}.mermaid:not([data-processed]){color:transparent;min-height:10px}.mermaid-wrapper :deep(.edgeLabel),.mermaid-wrapper :deep(.label),.mermaid-wrapper :deep(.nodeLabel){overflow:visible!important;white-space:normal!important}.mermaid-wrapper :deep(foreignObject){overflow:visible!important}
 </style>

package/dist/runtime/components/Spinner.vue

@@ -1,15 +1,19 @@
 <template>
   <svg
-    class="spinner"
+    class="ncm-spinner"
     viewBox="0 0 50 50"
   >
     <circle
-      class="path"
+      class="ncm-spinner__path"
       cx="25"
       cy="25"
       r="20"
       fill="none"
       stroke-width="5"
+      stroke="rgb(197, 197, 197)"
+      stroke-linecap="round"
+      stroke-dasharray="1 150"
+      stroke-dashoffset="0"
     />
   </svg>
 </template>
@@ -20,6 +24,6 @@ export default {
 };
 </script>
 
-<style>
-.spinner{--radius:20px;animation:rotate 2s linear infinite;height:calc(var(--radius)*2);left:50%;margin:calc(var(--radius)*-1) 0 0 calc(var(--radius)*-1);position:absolute;top:50%;width:calc(var(--radius)*2);z-index:2}.spinner .path{animation:dash 1.5s ease-in-out infinite;stroke:#c5c5c5;stroke-linecap:round}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
+<style scoped>
+.ncm-spinner{--radius:20px;animation:rotate 2s linear infinite;height:calc(var(--radius)*2);left:50%;margin:calc(var(--radius)*-1) 0 0 calc(var(--radius)*-1);position:absolute;top:50%;transform-origin:50% 50%;width:calc(var(--radius)*2);z-index:2}.ncm-spinner__path{animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barzhsieh/nuxt-content-mermaid",
-  "version": "2.1.1",
+  "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",