nested-markdown 0.0.9 → 0.0.11

package/dist/index.cjs

@@ -28185,6 +28185,47 @@ async function expandNestedMarkdownInternal(markdown, depth, recursionLimit, def
   }
   return result;
 }
+function expandNestedMarkdownInternalSync(markdown, depth, recursionLimit, defaultShow) {
+  if (depth > recursionLimit) return markdown;
+  let result = markdown;
+  const blocks = [...findFencedBlocks(result), ...findCommentBlocks(result)];
+  const reversedBlocks = blocks.sort((a, b) => b.startIndex - a.startIndex);
+  for (const block2 of reversedBlocks) {
+    const expandedBody = expandNestedMarkdownInternalSync(
+      block2.nestedMarkdown,
+      depth + 1,
+      recursionLimit,
+      defaultShow
+    );
+    const isInlineBlock = !isAtLineStart(result, block2.startIndex);
+    const resolvedShow = defaultShow || block2.attributes.show || "preview";
+    const canInlineRender = isInlineBlock && resolvedShow === "preview";
+    const renderedHTML = canInlineRender ? marked.parseInline(expandedBody) : marked.parse(expandedBody);
+    let wrapperHTML = generateWrapperHTML({
+      attributes: block2.attributes,
+      nestedMarkdown: block2.nestedMarkdown,
+      renderedHTML,
+      inline: canInlineRender,
+      defaultShow
+    });
+    if (!isInlineBlock) {
+      const currentBlock = result.slice(block2.startIndex, block2.endIndex);
+      const indentation = currentBlock.match(/^[ \t]*/)?.[0] || "";
+      if (indentation) {
+        wrapperHTML = indentation + wrapperHTML;
+      }
+    }
+    const after = result.slice(block2.endIndex);
+    if (isAtLineStart(result, block2.startIndex)) {
+      const trailing = countTrailingNewlines(wrapperHTML);
+      const leading = countLeadingNewlines(after);
+      const needed = Math.max(0, 2 - (trailing + leading));
+      if (needed > 0) wrapperHTML += "\n".repeat(needed);
+    }
+    result = result.slice(0, block2.startIndex) + wrapperHTML + after;
+  }
+  return result;
+}
 async function expandNestedMarkdown(markdown, options2) {
   const recursionLimit = options2?.recursionLimit ?? DEFAULT_RECURSION_LIMIT;
   return expandNestedMarkdownInternal(
@@ -28194,51 +28235,76 @@ async function expandNestedMarkdown(markdown, options2) {
     options2?.defaultShow
   );
 }
+function expandNestedMarkdownSync(markdown, options2) {
+  const recursionLimit = options2?.recursionLimit ?? DEFAULT_RECURSION_LIMIT;
+  return expandNestedMarkdownInternalSync(
+    markdown,
+    0,
+    recursionLimit,
+    options2?.defaultShow
+  );
+}
 
 // src/Mermaid.tsx
 var import_react2 = require("react");
-var import_mermaid = __toESM(require("mermaid"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-import_mermaid.default.initialize({
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "loose"
-});
-var Mermaid = ({ chart, theme }) => {
+var MermaidClient = ({ chart, theme }) => {
   const id = (0, import_react2.useId)().replace(/:/g, "");
   const [svg5, setSvg] = (0, import_react2.useState)("");
+  const [hydrated, setHydrated] = (0, import_react2.useState)(false);
   (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    setHydrated(true);
     const renderChart = async () => {
       try {
+        const { default: mermaid } = await import("mermaid");
         let mermaidTheme = "default";
         if (theme === "dark") {
           mermaidTheme = "dark";
         } else if (theme === "light") {
           mermaidTheme = "default";
         } else {
-          mermaidTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
+          if (typeof window !== "undefined") {
+            mermaidTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "default";
+          }
         }
-        import_mermaid.default.initialize({
+        mermaid.initialize({
           startOnLoad: false,
           theme: mermaidTheme,
           securityLevel: "loose",
           suppressErrorRendering: true
         });
-        const { svg: svg6 } = await import_mermaid.default.render(`mermaid-${id}`, chart);
-        setSvg(svg6);
+        const { svg: svg6 } = await mermaid.render(`mermaid-${id}`, chart);
+        if (!cancelled) {
+          setSvg(svg6);
+        }
       } catch (error) {
         console.error("Failed to render mermaid chart:", error);
-        setSvg(
-          `<pre class="mermaid-error" style="color: var(--nmd-error, #ef4444); padding: 8px; background: var(--nmd-error-bg, #fee2e2); border-radius: 4px;">Mermaid syntax error</pre>`
-        );
+        if (!cancelled) {
+          setSvg(
+            `<pre class="mermaid-error" style="color: var(--nmd-error, #ef4444); padding: 8px; background: var(--nmd-error-bg, #fee2e2); border-radius: 4px;">Mermaid syntax error</pre>`
+          );
+        }
       }
     };
     if (chart) {
       renderChart();
     }
+    return () => {
+      cancelled = true;
+    };
   }, [chart, id, theme]);
+  if (!hydrated) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "mermaid", children: chart });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg5 } });
 };
+var Mermaid = ({ chart, theme }) => {
+  if (typeof window === "undefined") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "mermaid", children: chart });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MermaidClient, { chart, theme });
+};
 
 // src/NestedMarkdown.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -28345,12 +28411,19 @@ var NestedMarkdown = ({
   defaultShow,
   ...reactMarkdownProps
 }) => {
-  const [expandedMarkdown, setExpandedMarkdown] = (0, import_react3.useState)("");
+  const markdownSource = content3 ?? children2 ?? "";
+  const [expandedMarkdown, setExpandedMarkdown] = (0, import_react3.useState)(() => {
+    try {
+      return expandNestedMarkdownSync(markdownSource, { defaultShow });
+    } catch (err) {
+      console.error("Markdown expansion error:", err);
+      return markdownSource;
+    }
+  });
   (0, import_react3.useEffect)(() => {
     let mounted = true;
     const process = async () => {
       try {
-        const markdownSource = content3 ?? children2 ?? "";
         const expanded = await expandNestedMarkdown(markdownSource, {
           defaultShow
         });
@@ -28384,13 +28457,18 @@ var NestedMarkdown = ({
       const match = /language-(\w+)/.exec(className2 || "");
       const isMermaid = match && match[1] === "mermaid";
       if (!inline2 && isMermaid) {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          Mermaid,
-          {
-            chart: String(children3).replace(/\n$/, ""),
-            theme: theme === "auto" ? void 0 : theme
-          }
-        );
+        const chart = String(children3).replace(/\n$/, "");
+        if (typeof window === "undefined") {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "nmd-pre", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "code",
+            {
+              ...props,
+              className: [className2, "nmd-code"].filter(Boolean).join(" "),
+              children: chart
+            }
+          ) });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Mermaid, { chart, theme: theme === "auto" ? void 0 : theme });
       }
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "code",