nested-markdown 0.0.8 → 0.0.10

package/dist/index.js

@@ -28174,6 +28174,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(
@@ -28183,29 +28224,38 @@ 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
 import { useEffect as useEffect2, useState as useState2, useId } from "react";
-import mermaid from "mermaid";
 import { jsx as jsx2 } from "react/jsx-runtime";
-mermaid.initialize({
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "loose"
-});
 var Mermaid = ({ chart, theme }) => {
   const id = useId().replace(/:/g, "");
   const [svg5, setSvg] = useState2("");
+  const [hydrated, setHydrated] = useState2(false);
   useEffect2(() => {
+    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";
+          }
         }
         mermaid.initialize({
           startOnLoad: false,
@@ -28214,18 +28264,28 @@ var Mermaid = ({ chart, theme }) => {
           suppressErrorRendering: true
         });
         const { svg: svg6 } = await mermaid.render(`mermaid-${id}`, chart);
-        setSvg(svg6);
+        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__ */ jsx2("pre", { className: "mermaid", children: chart });
+  }
   return /* @__PURE__ */ jsx2("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg5 } });
 };
 
@@ -28334,12 +28394,19 @@ var NestedMarkdown = ({
   defaultShow,
   ...reactMarkdownProps
 }) => {
-  const [expandedMarkdown, setExpandedMarkdown] = useState3("");
+  const markdownSource = content3 ?? children2 ?? "";
+  const [expandedMarkdown, setExpandedMarkdown] = useState3(() => {
+    try {
+      return expandNestedMarkdownSync(markdownSource, { defaultShow });
+    } catch (err) {
+      console.error("Markdown expansion error:", err);
+      return markdownSource;
+    }
+  });
   useEffect3(() => {
     let mounted = true;
     const process = async () => {
       try {
-        const markdownSource = content3 ?? children2 ?? "";
         const expanded = await expandNestedMarkdown(markdownSource, {
           defaultShow
         });
@@ -28426,8 +28493,8 @@ var NestedMarkdown = ({
     "--nmd-muted": "#a0a0a0",
     "--nmd-border": "#3e3e3e",
     "--nmd-bg": "#1e1e1e",
-    "--nmd-code-bg": "#2d2d2d",
-    "--nmd-code-border": "#3e3e3e",
+    "--nmd-code-bg": "rgba(255, 255, 255, 0.06)",
+    "--nmd-code-border": "rgba(255, 255, 255, 0.18)",
     "--nmd-quote-bg": "#252526",
     "--nmd-link": "#3794ff",
     "--nmd-link-hover": "#5ea6ff",
@@ -28445,8 +28512,8 @@ var NestedMarkdown = ({
       "--nmd-muted": "#475569",
       "--nmd-border": "rgba(15, 23, 42, 0.12)",
       "--nmd-bg": "#ffffff",
-      "--nmd-code-bg": "rgba(2, 6, 23, 0.06)",
-      "--nmd-code-border": "rgba(15, 23, 42, 0.12)",
+      "--nmd-code-bg": "rgba(2, 6, 23, 0.04)",
+      "--nmd-code-border": "rgba(15, 23, 42, 0.10)",
       "--nmd-quote-bg": "rgba(2, 6, 23, 0.04)",
       "--nmd-link": "#2563eb",
       "--nmd-link-hover": "#1d4ed8",
@@ -28548,7 +28615,7 @@ var NestedMarkdown = ({
       padding: "0.857em 1.5em",
       borderRadius: "0.714em",
       border: "1px solid var(--nmd-code-border)",
-      backgroundColor: "var(--nmd-bg)",
+      backgroundColor: "var(--nmd-code-bg)",
       overflowX: "auto",
       fontSize: "0.9em",
       lineHeight: "1.55",