@markdstage/markdstage 3.4.0 → 3.8.0

package/shared/renderer/renderer.js

@@ -6,10 +6,13 @@ import { sceneToPptxElements } from "./scene-pptx.mjs";
 import { attachArchitectureEditor } from "./architecture-editor.mjs";
 import {
   DEFAULT_THEME,
+  mermaidC4ThemeVariables,
   mermaidThemeVariables,
   normalizeTheme,
   parseFrontMatter,
+  resolveThemeBackground,
 } from "./theme.mjs";
+import { parseSlideBackground } from "./slide-background.mjs";
 import {
   extractSpeakerNotes,
   speakerNotesToPlainText,
@@ -583,13 +586,19 @@ function runMermaid(scope, deckEl, token, revealWhenDone = true) {
     return Promise.resolve();
   }
   try {
-    const themeVariables = mermaidThemeVariables(getComputedStyle(deckEl));
+    const sources = [...nodes].map((node) => node.textContent || "");
+    const themeVariables = mermaidThemeVariables(
+      getComputedStyle(deckEl),
+      (value) => resolveModelColor(value, deckEl),
+    );
+    const c4ThemeVariables = mermaidC4ThemeVariables(themeVariables);
     const serializedThemeVariables = JSON.stringify(themeVariables);
     if (serializedThemeVariables !== lastMermaidThemeVariables) {
       window.mermaid.initialize({
         startOnLoad: false,
         theme: "base",
         themeVariables,
+        c4: c4ThemeVariables,
         securityLevel: "strict",
       });
       lastMermaidThemeVariables = serializedThemeVariables;
@@ -601,11 +610,60 @@ function runMermaid(scope, deckEl, token, revealWhenDone = true) {
           const source = host.querySelector("svg");
           if (!source || source.hasAttribute("data-scene-backend")) continue;
           try {
+            repairC4ThemeDefaults(source, sources[index], themeVariables);
             renderMermaidScene(source, deckEl, index);
           } catch (e) {
             console.error("Mermaid scene render failed", e);
           }
         }
+
+        // Mermaid 11.15.0 does not expose theme variables for C4 boundary/relation
+        // paint or its arrow markers. Repair only those known renderer defaults, and
+        // leave diagrams with explicit C4 style updates untouched so source colors
+        // remain authoritative.
+        function repairC4ThemeDefaults(svg, source, themeVariables) {
+          if (svg.getAttribute("aria-roledescription") !== "c4") return;
+          const commands = source.replace(/^\s*%%.*$/gm, "");
+          const hasElementStyles = /\bUpdateElementStyle\s*\(/i.test(commands);
+          const hasRelationStyles = /\bUpdateRelStyle\s*\(/i.test(commands);
+          const boundaryGroups = new Set(
+            [...svg.querySelectorAll('rect[stroke-dasharray="7.0,7.0"], rect[fill="none"]')]
+              .map((element) => element.parentElement),
+          );
+          const relationGroups = new Set(
+            [...svg.querySelectorAll("[marker-end], [marker-start]")].map((element) => element.parentElement),
+          );
+          const boundaryPaint = new Set(["#444", "#444444", "rgb(68, 68, 68)"]);
+          const relationPaint = new Set(["#444", "#444444", "rgb(68, 68, 68)"]);
+          const setDefaultPaint = (element, property, defaults, value) => {
+            const current = element.getAttribute(property)?.trim().toLowerCase();
+            if (!defaults.has(current)) return;
+            element.setAttribute(property, value);
+            if (element.style?.getPropertyValue(property)) {
+              element.style.setProperty(property, value);
+            }
+          };
+
+          for (const element of svg.querySelectorAll("rect, line, path, text")) {
+            const parent = element.parentElement;
+            if (!hasElementStyles && boundaryGroups.has(parent)) {
+              setDefaultPaint(element, "stroke", boundaryPaint, themeVariables.lineColor);
+              setDefaultPaint(element, "fill", boundaryPaint, themeVariables.textColor);
+            }
+            if (!hasRelationStyles && relationGroups.has(parent)) {
+              setDefaultPaint(element, "stroke", relationPaint, themeVariables.lineColor);
+              setDefaultPaint(element, "fill", relationPaint, themeVariables.textColor);
+            }
+          }
+          if (!hasRelationStyles) {
+            for (const marker of svg.querySelectorAll("marker")) {
+              for (const element of marker.querySelectorAll("path, polygon, line")) {
+                setDefaultPaint(element, "stroke", new Set(["black", "#000", "#000000", "rgb(0, 0, 0)"]), themeVariables.lineColor);
+                setDefaultPaint(element, "fill", new Set([undefined, "black", "#000", "#000000", "rgb(0, 0, 0)"]), themeVariables.lineColor);
+              }
+            }
+          }
+        }
       })
       .finally(reveal);
   } catch (e) {
@@ -615,26 +673,28 @@ function runMermaid(scope, deckEl, token, revealWhenDone = true) {
   }
 }
 
+function withoutMermaidLoadingVeil(callback) {
+  const loading = document.body.classList.contains("mermaid-loading");
+  if (loading) document.body.classList.remove("mermaid-loading");
+  try {
+    return callback();
+  } finally {
+    if (loading) document.body.classList.add("mermaid-loading");
+  }
+}
+
 function renderMermaidScene(svg, deck, blockIndex) {
-  const result = mermaidSvgToScene(svg, {
-    path: `mermaid[${blockIndex}]`,
-    deck,
-    includeSourceElements: true,
-    resolveColor: (value) => resolveModelColor(value, deck),
-  });
+  const result = withoutMermaidLoadingVeil(() =>
+    mermaidSvgToScene(svg, {
+      path: `mermaid[${blockIndex}]`,
+      deck,
+      includeSourceElements: true,
+      resolveColor: (value) => resolveModelColor(value, deck),
+    }),
+  );
   let { scene } = result;
-  const computedStyle = (element) => {
-    const style = getComputedStyle(element);
-    return {
-      getPropertyValue(property) {
-        // The loading veil is inherited by every SVG descendant, not diagram style.
-        if (property === "visibility" && document.body.classList.contains("mermaid-loading")) {
-          return element.style?.visibility || element.getAttribute("visibility") || "";
-        }
-        return style.getPropertyValue(property);
-      },
-    };
-  };
+  const capture = (element, options) =>
+    withoutMermaidLoadingVeil(() => captureSvgTree(element, options));
   const slots = new Map();
   try {
     for (const [index, node] of scene.nodes.entries()) {
@@ -657,7 +717,7 @@ function renderMermaidScene(svg, deck, blockIndex) {
         node.meta = { ...node.meta, svgOwner: slots.get(source) };
         continue;
       }
-      node.meta = { ...node.meta, svg: captureSvgTree(source, { computedStyle }) };
+      node.meta = { ...node.meta, svg: capture(source) };
       slots.set(source, index);
     }
     for (const [source, index] of slots) {
@@ -676,14 +736,14 @@ function renderMermaidScene(svg, deck, blockIndex) {
       kind: "fallback", sourcePath: "svg", z: 0,
       bounds: { x: 0, y: 0, width: scene.width, height: scene.height },
       capability: { pptx: "fallback", reason }, reason,
-      meta: { svg: captureSvgTree(svg, { computedStyle }) },
+      meta: { svg: capture(svg) },
     }] };
     slots.clear();
     slots.set(svg, 0);
   }
   const template = slots.has(svg)
     ? { sceneNode: slots.get(svg) }
-    : captureSvgTree(svg, { slots, computedStyle });
+    : capture(svg, { slots });
   scene.meta = { ...scene.meta, svgRoot: template };
   svg.replaceWith(sceneToSvg(scene, { document, template }));
 }
@@ -698,7 +758,12 @@ function moveLeadingSlideTitle(header, bodyEl, specialLayout) {
   return title;
 }
 
-function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
+function createSlide(
+  markdown,
+  fallbackTheme,
+  themeLocked = deckThemeLocked,
+  { backgroundImage: backgroundOverride } = {},
+) {
   const placeholder = !nonEmpty(markdown);
   const md = placeholder ? PLACEHOLDER : markdown;
   const { meta, body: rawBody } = splitFrontMatter(md);
@@ -721,6 +786,11 @@ function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
   // as well as <html> so print mode can render differently themed pages together.
   const theme = normalizeTheme(themeLocked ? fallbackTheme : meta.theme || fallbackTheme);
   const themeMetadata = theme === "custom" ? customThemeMeta : null;
+  const backgroundImage = parseSlideBackground(backgroundOverride ?? meta["background-image"]);
+  const backgroundUrl = backgroundImage
+    ? localAssetUrl(backgroundImage.replace(/^\/assets\//, "/background-assets/")
+        .split("/").map(encodeURIComponent).join("/"))
+    : "";
 
   const deck = document.createElement("div");
   deck.className = "deck";
@@ -732,13 +802,18 @@ function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
   if (placeholder) deck.classList.add("markdstage-placeholder");
   if (sizeMode !== "auto") setSizeLevel(deck, sizeMode);
 
+  const background = themeImage(
+    backgroundUrl
+      ? { image: backgroundUrl }
+      : resolveThemeBackground(themeMetadata, layout),
+    titleSlide ? "slide-background theme-cover-background" : "slide-background",
+    { decorative: true },
+  );
+  if (background) {
+    deck.classList.add("has-slide-background");
+    deck.appendChild(background);
+  }
   if (titleSlide) {
-    const background = themeImage(
-      themeMetadata?.cover?.background,
-      "theme-cover-background",
-      { decorative: true },
-    );
-    if (background) deck.appendChild(background);
     const logo = themeImage(themeMetadata?.cover?.logo, "theme-cover-logo");
     if (logo) deck.appendChild(logo);
   }
@@ -870,6 +945,7 @@ function createSlide(markdown, fallbackTheme, themeLocked = deckThemeLocked) {
     deck,
     bodyEl,
     theme,
+    backgroundImage,
     sizeMode,
     titleSlide,
     sectionSlide,
@@ -917,9 +993,15 @@ function renderSlide(markdown) {
   // that the slide is fully painted, and PDF export and the visual regression
   // suite rely on it. Revealing while an architecture icon under `assets/` is
   // still loading would capture a half-drawn slide.
-  const images = waitForImages(slide.deck).then(() => {
-    if (token === renderToken) scheduleLayoutRefresh();
-  });
+  const images = waitForImages(slide.deck)
+    .then(() => {
+      if (token === renderToken) scheduleLayoutRefresh();
+    })
+    .catch((error) => {
+      if (token !== renderToken) return;
+      console.error(error.message);
+      showExportNotification("error", error.message);
+    });
   const mermaid = runMermaid(slide.bodyEl, slide.deck, token, false).finally(() => {
     if (token === renderToken) scheduleLayoutRefresh();
   });
@@ -961,7 +1043,14 @@ function waitForImages(root) {
       }),
     );
   }
-  return Promise.all(pending);
+  return Promise.all(pending).then(() => {
+    const failedBackground = [...root.querySelectorAll("img.slide-background")].find(
+      (image) => !image.naturalWidth,
+    );
+    if (failedBackground) {
+      throw new Error(`Could not load slide background: ${failedBackground.getAttribute("src")}`);
+    }
+  });
 }
 
 async function reportOutputStatus(token, status, error = "", layout = null) {
@@ -2033,7 +2122,7 @@ function markMermaidNativeElements(svg, mappedElements, pathPrefix, sourceElemen
       source = sourceElements.get(ownerPath);
     }
     if (source && !source.hasAttribute("data-pptx-native")) {
-      const nativeKind = element.type === "shape" ? "shape" : element.type;
+      const nativeKind = element.mermaid?.nativeMask || (element.type === "shape" ? "shape" : element.type);
       source.setAttribute("data-pptx-native", nativeKind);
     }
     if (!sourceElements && element.type === "connector") {
@@ -2098,10 +2187,17 @@ function collectMermaidObjects(element, deck, blockIndex) {
       mermaidElementForSourcePath(svg, sourcePath) ||
       mermaidFallbackElementForBounds(svg, deck, fallback) ||
       svg;
-    const sourceBounds = source.getBoundingClientRect();
-    const padding = ["path", "line", "polyline"].includes(source.localName)
-      ? Math.max(1, (fallback.width - sourceBounds.width) / 2, (fallback.height - sourceBounds.height) / 2)
-      : 0;
+    const sourceBounds = fallbackBounds(source, deck, 0, true);
+    const inferredPadding = Math.max(
+      0,
+      (fallback.width - sourceBounds.width) / 2,
+      (fallback.height - sourceBounds.height) / 2,
+    );
+    const geometryPadding = ["path", "line", "polyline"].includes(source.localName)
+      ? Math.max(1, inferredPadding)
+      : inferredPadding;
+    const effectPadding = subtreeEffectPaintPadding(source);
+    const padding = Math.max(geometryPadding, effectPadding);
     const captured = pptxFallback("mermaid", source, deck, fallback.reason, {
       captureElement: source,
       includeDescendants: true,
@@ -2113,10 +2209,14 @@ function collectMermaidObjects(element, deck, blockIndex) {
       path: fallback.path,
       sourcePath,
       reason: fallback.reason,
-      x: fallback.x,
-      y: fallback.y,
-      width: fallback.width,
-      height: fallback.height,
+      ...(effectPadding
+        ? {}
+        : {
+            x: fallback.x,
+            y: fallback.y,
+            width: fallback.width,
+            height: fallback.height,
+          }),
       zOrder: fallback.zOrder,
       ...(node?.id ? { id: node.id } : {}),
       ...(fallback.artwork === false ? { artwork: false } : {}),
@@ -2125,7 +2225,7 @@ function collectMermaidObjects(element, deck, blockIndex) {
   return { elements: mapped.elements, fallbacks };
 }
 
-async function collectPptxSlide(slide, index) {
+async function collectPptxSlide(slide, index, options = {}) {
   const { deck } = slide;
   assignPptxPaintOrder(deck);
   const elements = [];
@@ -2232,6 +2332,12 @@ async function collectPptxSlide(slide, index) {
   for (const [blockIndex, element] of [...deck.querySelectorAll("pre.mermaid")].entries()) {
     const covered = [...fallbackRoots].some((root) => root === element || root.contains(element));
     if (covered) continue;
+    if (options.mermaidImageFallback === true) {
+      // The scroll container clips the diagram; SVG definitions have no painted bounds.
+      // The capture pipeline trims transparent space inside this safe envelope.
+      addFallback("mermaid", element, "mermaid-rendered-as-artwork");
+      continue;
+    }
     try {
       const mermaid = collectMermaidObjects(element, deck, blockIndex);
       elements.push(...mermaid.elements);
@@ -2496,7 +2602,7 @@ async function collectPptxSlide(slide, index) {
   for (const image of deck.querySelectorAll("img")) {
     if (
       image.closest(".architecture-diagram") ||
-      image.classList.contains("theme-cover-background") ||
+      image.classList.contains("slide-background") ||
       image.classList.contains("theme-cover-logo") ||
       insideFallback(image)
     ) {
@@ -2597,20 +2703,20 @@ async function collectPptxSlide(slide, index) {
   };
 }
 
-function createPptxLayoutTemplate(theme, layout) {
+function createPptxLayoutTemplate(theme, layout, id = `${theme}:${layout}`, backgroundImage) {
   const markdown = `---
 layout: ${layout}
 theme: ${theme}
 ---
 `;
-  const slide = createSlide(markdown, theme, true);
+  const slide = createSlide(markdown, theme, true, { backgroundImage });
   if (layout === "backcover") {
     slide.deck
       .querySelectorAll(".theme-backcover-logo, .theme-backcover-copyright")
       .forEach((element) => element.remove());
   }
   slide.deck.classList.add("pptx-layout-template");
-  slide.deck.dataset.pptxLayoutId = `${theme}:${layout}`;
+  slide.deck.dataset.pptxLayoutId = id;
   return slide;
 }
 
@@ -2620,6 +2726,7 @@ async function renderPptxDeck(
   customCss = "",
   themeMetadata = null,
   themeLocked = false,
+  options = {},
 ) {
   deckTheme = normalizeTheme(theme);
   deckThemeLocked = Boolean(themeLocked);
@@ -2655,7 +2762,7 @@ async function renderPptxDeck(
 
   const pptxSlides = [];
   for (const [index, slide] of rendered.entries()) {
-    pptxSlides.push(await collectPptxSlide(slide, index));
+    pptxSlides.push(await collectPptxSlide(slide, index, options));
   }
   const themes = [...new Set(rendered.map((slide) => slide.theme))];
   const layoutTemplates = themes.flatMap((slideTheme) =>
@@ -2666,6 +2773,26 @@ async function renderPptxDeck(
       slide: createPptxLayoutTemplate(slideTheme, layout),
     })),
   );
+  // Per-slide overrides need their own layout artwork, not a background shared
+  // with every slide of the same theme and layout.
+  const backgroundLayouts = new Map();
+  for (const [index, slide] of rendered.entries()) {
+    if (!slide.backgroundImage) continue;
+    const model = pptxSlides[index];
+    const key = JSON.stringify([slide.theme, model.layout, slide.backgroundImage]);
+    let id = backgroundLayouts.get(key);
+    if (!id) {
+      id = `${model.layoutId}:background-${backgroundLayouts.size + 1}`;
+      backgroundLayouts.set(key, id);
+      layoutTemplates.push({
+        id,
+        name: model.layout,
+        theme: slide.theme,
+        slide: createPptxLayoutTemplate(slide.theme, model.layout, id, slide.backgroundImage),
+      });
+    }
+    model.layoutId = id;
+  }
   stage.append(...layoutTemplates.map((layout) => layout.slide.deck));
   await waitForImages(stage);
   await afterLayout();
@@ -2683,7 +2810,7 @@ async function renderPptxDeck(
     masters: themes.map((slideTheme) => ({
       id: slideTheme,
       theme: slideTheme,
-      layoutIds: PPTX_LAYOUT_NAMES.map((layout) => `${slideTheme}:${layout}`),
+      layoutIds: pptxLayouts.filter((layout) => layout.theme === slideTheme).map((layout) => layout.id),
     })),
     layouts: pptxLayouts,
     slides: pptxSlides,
@@ -2721,6 +2848,7 @@ async function initPptx(params) {
       data.customThemeCss,
       data.customThemeMeta,
       data.themeLocked,
+      { mermaidImageFallback: data.mermaidImageFallback === true },
     );
     await reportOutputStatus(token, "ready", "", output.layout);
   } catch (error) {
@@ -3681,9 +3809,45 @@ function showExportNotification(state, message, path = "") {
   resumeExportNotification();
 }
 
-async function exportFromCanvas(format) {
+let pptxOptionsPending = false;
+
+async function requestPptxExport() {
+  const dialog = document.getElementById("pptxExportDialog");
+  if (exportPending || pptxOptionsPending || dialog.open || !pptxExportAvailable) return;
+  pptxOptionsPending = true;
+  let hasMermaid;
+  try {
+    const response = await fetch("./deck", { cache: "no-store" });
+    if (!response.ok) throw new Error(`Could not load the export deck (${response.status}).`);
+    const data = await response.json();
+    if (!Array.isArray(data?.slides) || !data.slides.every((slide) => typeof slide === "string")) {
+      throw new Error("The export deck is invalid.");
+    }
+    const slides = [...data.slides];
+    if (navMode === "adhoc") slides[Math.max(0, Math.min(navIndex, slides.length - 1))] = lastMarkdown;
+    hasMermaid = slides.some((markdown) => {
+      const { body } = splitFrontMatter(markdown);
+      const content = document.createElement("div");
+      content.innerHTML = window.DOMPurify.sanitize(window.marked.parse(stripSpeakerNotes(body)));
+      return codeBlocksForLanguage(content, "mermaid").length > 0 || Boolean(content.querySelector(".mermaid"));
+    });
+  } catch (error) {
+    showExportNotification("error", `Could not save PowerPoint. ${error.message}`);
+    return;
+  } finally {
+    pptxOptionsPending = false;
+  }
+  if (hasMermaid) {
+    document.getElementById("pptxExportForm").reset();
+    dialog.showModal();
+  } else {
+    await exportFromCanvas("pptx");
+  }
+}
+
+async function exportFromCanvas(format, { mermaidImageFallback = false } = {}) {
   const isPdf = format === "pdf";
-  if (exportPending || !(isPdf ? pdfExportAvailable : pptxExportAvailable)) return;
+  if (exportPending || pptxOptionsPending || !(isPdf ? pdfExportAvailable : pptxExportAvailable)) return;
   exportPending = true;
   const label = isPdf ? "PDF" : "PowerPoint";
   const pdfButton = document.getElementById("navExport");
@@ -3700,7 +3864,11 @@ async function exportFromCanvas(format) {
   try {
     const response = await fetch(isPdf ? "./export" : "./export-pptx", {
       method: "POST",
-      headers: { Accept: "application/json" },
+      headers: {
+        Accept: "application/json",
+        ...(isPdf ? {} : { "Content-Type": "application/json" }),
+      },
+      ...(isPdf ? {} : { body: JSON.stringify({ mermaidImageFallback }) }),
       cache: "no-store",
     });
     const data = await response.json();
@@ -4175,7 +4343,7 @@ function wireControls() {
   bind("navPresenterView", openPresenterView, { closeMore: true });
   bind("navFixedPreview", toggleFixedPreviewMode, { closeMore: true });
   bind("navExport", () => exportFromCanvas("pdf"), { closeMore: true });
-  bind("navExportPptx", () => exportFromCanvas("pptx"), { closeMore: true });
+  bind("navExportPptx", requestPptxExport, { closeMore: true });
   bind("navImport", toggleImportPicker, { closeMore: true });
   bind("navSourceMode", toggleSourceMode, { closeMore: true });
   bind("overviewClose", closeOverview);
@@ -4187,6 +4355,29 @@ function wireControls() {
   bind("presenterToggleButton", togglePresenterWindow);
   bind("presenterReturnButton", closePresenterView);
 
+  const pptxDialog = document.getElementById("pptxExportDialog");
+  pptxDialog.addEventListener("keydown", (event) => {
+    if (event.key !== "Tab") return;
+    const controls = [...pptxDialog.querySelectorAll("input:checked, button:not(:disabled)")];
+    const first = controls[0];
+    const last = controls.at(-1);
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  });
+  document.getElementById("pptxExportCancel").addEventListener("click", () => pptxDialog.close());
+  pptxDialog.addEventListener("close", () => document.getElementById("navMore").focus());
+  document.getElementById("pptxExportForm").addEventListener("submit", (event) => {
+    event.preventDefault();
+    const mermaidImageFallback = new FormData(event.currentTarget).get("mermaidOutput") === "images";
+    pptxDialog.close();
+    exportFromCanvas("pptx", { mermaidImageFallback });
+  });
+
   const exportNotification = document.getElementById("exportNotification");
   document.getElementById("exportNotificationClose").addEventListener("click", dismissExportNotification);
   exportNotification.addEventListener("pointerenter", pauseExportNotification);
@@ -4242,6 +4433,7 @@ function wireControls() {
 
   document.addEventListener("keydown", (e) => {
     if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+    if (pptxDialog.open) return;
     const t = e.target;
     // Keep Esc active while an input has focus; otherwise filtering in the import
     // dialog could leave the user unable to close it.