@limcpf/everything-is-a-markdown 0.6.4 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@limcpf/everything-is-a-markdown",
-	"version": "0.6.4",
+	"version": "0.6.5",
 	"license": "MIT",
 	"private": false,
 	"type": "module",

package/src/runtime/app.css

@@ -67,6 +67,8 @@
   --content-heading-accent-soft: rgba(136, 57, 239, 0.32);
   --content-heading-subtle: var(--latte-subtext1);
   --content-visual-max-width: 720px;
+  --mermaid-wide-max-width: 640px;
+  --mermaid-tall-max-height: 560px;
   --desktop-sidebar-default: 420px;
   --desktop-sidebar-min: 320px;
   --desktop-viewer-min: 680px;
@@ -1102,6 +1104,9 @@ body.mobile-toggle-left .mobile-menu-toggle {
 .viewer-content .mermaid-block {
   margin: 1.5rem 0;
   padding: 16px 18px;
+  max-width: min(100%, var(--content-visual-max-width));
+  margin-left: auto;
+  margin-right: auto;
   border-radius: 12px;
   border: 1px solid var(--latte-surface0);
   background: linear-gradient(180deg, var(--latte-base), var(--latte-mantle));
@@ -1142,6 +1147,14 @@ body.mobile-toggle-left .mobile-menu-toggle {
   margin: 0 auto;
 }
 
+.viewer-content .mermaid-block.is-wide pre.mermaid[data-mermaid-rendered="true"] svg {
+  max-width: min(100%, var(--mermaid-wide-max-width));
+}
+
+.viewer-content .mermaid-block.is-tall pre.mermaid[data-mermaid-rendered="true"] svg {
+  max-height: min(var(--mermaid-tall-max-height), 68vh);
+}
+
 .viewer-content .mermaid-block .mermaid-render-error {
   margin: 12px 0 0;
   padding: 10px 12px;

package/src/runtime/app.js

@@ -22,6 +22,10 @@ const MERMAID_SELECTOR = "pre.mermaid";
 const MERMAID_ERROR_CLASS = "mermaid-render-error";
 const MERMAID_THEME_VALIDATION_RE = /^[a-zA-Z][a-zA-Z0-9._-]*$/;
 const MERMAID_URL_VALIDATION_RE = /^(https?:\/\/|\/|\.{1,2}\/)[^\s"'<>]+$/;
+const MERMAID_WIDE_RATIO = 2.4;
+const MERMAID_TALL_RATIO = 0.85;
+const MERMAID_BLOCK_WIDE_CLASS = "is-wide";
+const MERMAID_BLOCK_TALL_CLASS = "is-tall";
 const mermaidRuntime = {
   initialized: false,
   loadingPromise: null,
@@ -109,16 +113,47 @@ function normalizeRenderedMermaidSvg(block) {
     return;
   }
 
+  const container = block.parentElement instanceof HTMLElement ? block.parentElement : null;
   const svg = block.querySelector("svg");
   if (!(svg instanceof SVGElement)) {
     return;
   }
 
+  if (container) {
+    container.classList.remove(MERMAID_BLOCK_WIDE_CLASS, MERMAID_BLOCK_TALL_CLASS);
+  }
+
   svg.style.display = "block";
   svg.style.width = "auto";
   svg.style.height = "auto";
   svg.style.margin = "0 auto";
   svg.style.maxWidth = "min(100%, var(--content-visual-max-width, 720px))";
+  svg.style.removeProperty("max-height");
+
+  const viewBox = svg.viewBox?.baseVal;
+  const intrinsicWidth =
+    viewBox && Number.isFinite(viewBox.width) && viewBox.width > 0
+      ? viewBox.width
+      : Number.parseFloat(svg.getAttribute("width") ?? "");
+  const intrinsicHeight =
+    viewBox && Number.isFinite(viewBox.height) && viewBox.height > 0
+      ? viewBox.height
+      : Number.parseFloat(svg.getAttribute("height") ?? "");
+
+  if (!(intrinsicWidth > 0) || !(intrinsicHeight > 0)) {
+    return;
+  }
+
+  const aspectRatio = intrinsicWidth / intrinsicHeight;
+  if (container && aspectRatio >= MERMAID_WIDE_RATIO) {
+    container.classList.add(MERMAID_BLOCK_WIDE_CLASS);
+    svg.style.maxWidth = "min(100%, var(--mermaid-wide-max-width, 640px))";
+  }
+
+  if (container && aspectRatio <= MERMAID_TALL_RATIO) {
+    container.classList.add(MERMAID_BLOCK_TALL_CLASS);
+    svg.style.maxHeight = "min(var(--mermaid-tall-max-height, 560px), 68vh)";
+  }
 }
 
 function parseMermaidNodes() {
@@ -134,6 +169,7 @@ function resetMermaidNodes(nodes) {
   for (const node of nodes) {
     node.removeAttribute("data-mermaid-rendered");
     if (node.parentElement instanceof HTMLElement) {
+      node.parentElement.classList.remove(MERMAID_BLOCK_WIDE_CLASS, MERMAID_BLOCK_TALL_CLASS);
       removeMermaidErrorMessage(node.parentElement);
     }
   }