collabmd 0.1.43 → 0.1.45

package/src/client/application/mermaid-preview-hydrator.js

@@ -4,14 +4,15 @@ import {
 } from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
-  createMermaidPlaceholderCard,
   createMermaidPlaceholderCardWithMessage,
+  createDiagramErrorPlaceholderCard,
   MERMAID_BATCH_SIZE,
+  normalizeDiagramError,
   normalizeMermaidSvg,
 } from './preview-diagram-utils.js';
 
 export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
-  constructor(renderer, { fetchFn = null, loadFileSource = null } = {}) {
+  constructor(renderer, { loadFileSource = null } = {}) {
     super(renderer, {
       batchSize: MERMAID_BATCH_SIZE,
       datasetKeys: {
@@ -25,27 +26,22 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
         sourceLineEnd: 'sourceLineEnd',
         target: 'mermaidTarget',
       },
-      fetchFn,
       filePathLabel: 'Mermaid',
       loadFileSource,
       shellClassName: 'mermaid-shell',
       sourceClassName: 'mermaid-source',
     });
-    this.renderer = renderer;
     this.currentTheme = document.documentElement?.dataset.theme === 'light' ? 'light' : 'dark';
     this.diagramChrome = renderer.diagramChrome;
     this.loader = null;
     this.runtime = null;
   }
 
-  destroy() {
-    this.cancelHydration();
-    this.preservedShells.clear();
-  }
-
-  cancelHydration() {
+  cancelHydration({ preserveActiveShell = false } = {}) {
     super.cancelHydration();
-    this.diagramChrome?.cancelActiveShell?.('mermaid');
+    if (!preserveActiveShell) {
+      this.diagramChrome?.cancelActiveShell?.('mermaid');
+    }
   }
 
   applyTheme(theme) {
@@ -100,7 +96,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       return this.loader;
     }
 
-    this.loader = import('../mermaid-runtime.js')
+    this.loader = import('mermaid')
       .then((module) => {
         const mermaid = module?.default;
         if (!mermaid) {
@@ -147,11 +143,15 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     return renderHost;
   }
 
-  async hydrateShell(shell, mermaid) {
+  async hydrateShell(shell, mermaid, { hydrationToken, renderVersion } = {}) {
     if (!mermaid || !shell?.isConnected || this.isShellHydrated(shell)) {
       return;
     }
 
+    if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+      return;
+    }
+
     let sourceNode = shell.querySelector('.mermaid-source');
     if (!sourceNode) {
       sourceNode = document.createElement('span');
@@ -174,6 +174,11 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
         throw new Error(shell.dataset.mermaidTarget ? 'Mermaid file is empty' : 'Mermaid source is empty');
       }
 
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
+      const renderedSource = source;
       source = this.prepareSource(source);
 
       shell.querySelector('.mermaid-placeholder-card')?.remove();
@@ -195,24 +200,41 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       try {
         renderHost.appendChild(diagram);
         await mermaid.run({ nodes: [diagram] });
-        if (!diagram.isConnected || diagram.parentElement !== renderHost || !shell.isConnected) {
+        if (
+          !this.isHydrationCurrent(renderVersion, shell, hydrationToken)
+          || !diagram.isConnected
+          || diagram.parentElement !== renderHost
+        ) {
           return;
         }
 
-        this.enhanceDiagram(shell, diagram);
+        this.enhanceDiagram(shell, diagram, renderedSource);
         this.markShellHydrated(shell);
       } finally {
         renderHost.remove();
       }
     } catch (error) {
       console.warn('[preview] Mermaid render failed:', error);
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
+      if (this.markShellError(shell, error)) {
+        return;
+      }
+
+      this.diagramChrome?.destroyShell?.(shell);
       shell.querySelector(':scope > .mermaid-toolbar')?.remove();
       shell.querySelector(':scope > .mermaid-frame')?.remove();
       shell.querySelector(':scope > .mermaid-render-node')?.remove();
       if (!shell.querySelector('.mermaid-placeholder-card')) {
-        sourceNode?.after(createMermaidPlaceholderCardWithMessage(shell.dataset.mermaidKey || 'mermaid', {
+        const key = shell.dataset.mermaidKey || 'mermaid';
+        const message = normalizeDiagramError(error);
+        sourceNode?.after(createDiagramErrorPlaceholderCard({
+          key,
+          kind: 'mermaid',
           label: shell.dataset.mermaidLabel || 'Mermaid diagram',
-          message: error instanceof Error ? error.message : 'Render failed',
+          message,
         }));
       }
     }
@@ -281,12 +303,12 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
 
     hydratedShells.forEach((shell) => {
       this.diagramChrome?.destroyShell?.(shell);
-      shell.removeAttribute('data-mermaid-hydrated');
+      this.clearShellOutput(shell);
       shell.querySelector(':scope > .mermaid-toolbar')?.remove();
       shell.querySelector(':scope > .mermaid-frame')?.remove();
       shell.querySelector(':scope > .mermaid-render-node')?.remove();
       if (!shell.querySelector('.mermaid-placeholder-card')) {
-        shell.querySelector('.mermaid-source')?.after(createMermaidPlaceholderCard(shell.dataset.mermaidKey || 'mermaid'));
+        shell.querySelector('.mermaid-source')?.after(createMermaidPlaceholderCardWithMessage(shell.dataset.mermaidKey || 'mermaid'));
       }
       this.enqueueShell(shell, { prioritize: true });
     });
@@ -295,14 +317,16 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   async renderExportSvgMarkup(shell) {
     const mermaid = await this.ensureMermaid();
     try {
-      const source = shell.querySelector('.mermaid-source')?.textContent ?? '';
+      const source = shell._diagramRenderedSource
+        ?? shell.querySelector('.mermaid-source')?.textContent
+        ?? '';
       return await renderMermaidExportSvgMarkup(mermaid, source);
     } finally {
       this.configureMermaid(mermaid);
     }
   }
 
-  enhanceDiagram(shell, renderedDiagram) {
+  enhanceDiagram(shell, renderedDiagram, renderedSource = '') {
     const svg = renderedDiagram.querySelector('svg');
     if (!svg) {
       renderedDiagram.remove();
@@ -326,12 +350,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       kind: 'mermaid',
       sourceSelector: '.mermaid-source',
     });
+    shell._diagramRenderedSource = renderedSource;
   }
 
-  scheduleActiveRefit() {
-    this.diagramChrome?.scheduleActiveRefit?.({
-      kind: 'mermaid',
-      root: this.renderer.previewElement,
-    });
-  }
 }

package/src/client/application/plantuml-preview-hydrator.js

@@ -4,9 +4,11 @@ import {
 } from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
+  createDiagramErrorPlaceholderCard,
   createPlantUmlPlaceholderCard,
   getSvgSize,
   PLANTUML_BATCH_SIZE,
+  normalizeDiagramError,
   sanitizeSvgMarkup,
 } from './preview-diagram-utils.js';
 
@@ -30,25 +32,17 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       shellClassName: 'plantuml-shell',
       sourceClassName: 'plantuml-source',
     });
-    this.renderer = renderer;
     this.diagramChrome = renderer.diagramChrome;
     this.renderClient = renderClient;
     this.svgCache = new Map();
     this.svgInflightRequests = new Map();
   }
 
-  destroy() {
-    this.cancelHydration();
-    this.preservedShells.clear();
-  }
-
-  cancelHydration() {
+  cancelHydration({ preserveActiveShell = false } = {}) {
     super.cancelHydration();
-    this.diagramChrome?.cancelActiveShell?.('plantuml');
-  }
-
-  scheduleActiveRefit() {
-    this.diagramChrome?.scheduleActiveRefitOnNextFrame?.();
+    if (!preserveActiveShell) {
+      this.diagramChrome?.cancelActiveShell?.('plantuml');
+    }
   }
 
   handleReconcile({ restoredMaximizedShell }) {
@@ -58,11 +52,15 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     this.diagramChrome?.syncActiveShell?.();
   }
 
-  async hydrateShell(shell) {
+  async hydrateShell(shell, _batchContext, { hydrationToken, renderVersion } = {}) {
     if (!shell?.isConnected || this.isShellHydrated(shell)) {
       return;
     }
 
+    if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+      return;
+    }
+
     let sourceNode = shell.querySelector('.plantuml-source');
     if (!sourceNode) {
       sourceNode = document.createElement('span');
@@ -87,9 +85,13 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
         throw new Error(shell.dataset.plantumlTarget ? 'PlantUML file is empty' : 'PlantUML source is empty');
       }
 
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
       const svgMarkup = await this.fetchSvg(source);
 
-      if (!shell.isConnected) {
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
         return;
       }
 
@@ -97,13 +99,25 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       this.markShellHydrated(shell);
     } catch (error) {
       console.warn('[preview] PlantUML render failed:', error);
+      if (!this.isHydrationCurrent(renderVersion, shell, hydrationToken)) {
+        return;
+      }
+
+      if (this.markShellError(shell, error)) {
+        return;
+      }
+
+      const key = shell.dataset.plantumlKey || 'plantuml';
+      const message = normalizeDiagramError(error);
       shell.querySelector(':scope > .plantuml-toolbar')?.remove();
       shell.querySelector(':scope > .plantuml-frame')?.remove();
       if (!shell.querySelector('.plantuml-placeholder-card')) {
-        sourceNode?.after(createPlantUmlPlaceholderCard(
-          shell.dataset.plantumlKey || 'plantuml',
-          error instanceof Error ? error.message : 'Render failed',
-        ));
+        sourceNode?.after(createDiagramErrorPlaceholderCard({
+          key,
+          kind: 'plantuml',
+          label: shell.dataset.plantumlLabel || 'PlantUML diagram',
+          message,
+        }));
       }
     }
   }
@@ -141,7 +155,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
 
     this.diagramChrome?.destroyShell?.(shell);
 
-    shell.removeAttribute('data-plantuml-hydrated');
+    this.clearShellOutput(shell);
     shell.removeAttribute('data-plantuml-instance-id');
     shell.removeAttribute('data-plantuml-queued');
     shell.classList.remove('is-maximized');

package/src/client/application/preview-diagram-utils.js

@@ -1,47 +1,42 @@
-export const MERMAID_ZOOM = {
-  default: 1,
-  animationDurationMs: 160,
-  max: 3,
-  min: 0.5,
-  step: 0.1,
-};
-
-export const PLANTUML_ZOOM = {
-  default: 1,
-  animationDurationMs: 160,
-  max: 3,
-  min: 0.1,
-  step: 0.1,
-};
-
 export const IDLE_RENDER_TIMEOUT_MS = 500;
 export const MERMAID_BATCH_SIZE = 2;
 export const PLANTUML_BATCH_SIZE = 2;
 
-export function requestIdleRender(callback, timeout) {
-  if (typeof window.requestIdleCallback === 'function') {
-    return window.requestIdleCallback(callback, { timeout });
-  }
+export {
+  cancelIdleRender,
+  isNearViewport,
+  requestIdleRender,
+} from '../browser-utils.js';
 
-  return window.setTimeout(() => {
-    callback({
-      didTimeout: false,
-      timeRemaining: () => 0,
-    });
-  }, 1);
+export function encodeSvgDataUrl(svgMarkup) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
 }
 
-export function cancelIdleRender(id) {
-  if (id === null) {
-    return;
-  }
+export function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.decoding = 'async';
+    image.addEventListener('load', () => resolve(image), { once: true });
+    image.addEventListener('error', () => reject(new Error(`Failed to load image: ${src}`)), { once: true });
+    image.src = src;
+  });
+}
 
-  if (typeof window.cancelIdleCallback === 'function') {
-    window.cancelIdleCallback(id);
-    return;
-  }
+export function resolveSvgDimensions(svgElement) {
+  const widthAttr = Number.parseFloat(svgElement.getAttribute('width') || '');
+  const heightAttr = Number.parseFloat(svgElement.getAttribute('height') || '');
+  const viewBoxParts = (svgElement.getAttribute('viewBox') || '')
+    .split(/\s+/u)
+    .map((value) => Number.parseFloat(value));
 
-  window.clearTimeout(id);
+  return {
+    height: Number.isFinite(heightAttr) && heightAttr > 0
+      ? heightAttr
+      : (Number.isFinite(viewBoxParts[3]) && viewBoxParts[3] > 0 ? viewBoxParts[3] : 800),
+    width: Number.isFinite(widthAttr) && widthAttr > 0
+      ? widthAttr
+      : (Number.isFinite(viewBoxParts[2]) && viewBoxParts[2] > 0 ? viewBoxParts[2] : 1200),
+  };
 }
 
 export function syncAttribute(target, source, name) {
@@ -98,10 +93,8 @@ export function normalizeMermaidSvg(svg) {
 export function getFrameViewportSize(frame) {
   const styles = window.getComputedStyle(frame);
   const paddingX = Number.parseFloat(styles.paddingLeft || '0') + Number.parseFloat(styles.paddingRight || '0');
-  const paddingY = Number.parseFloat(styles.paddingTop || '0') + Number.parseFloat(styles.paddingBottom || '0');
 
   return {
-    height: Math.max(frame.clientHeight - paddingY, 0),
     width: Math.max(frame.clientWidth - paddingX, 0),
   };
 }
@@ -110,13 +103,6 @@ export function easeOutCubic(progress) {
   return 1 - ((1 - progress) ** 3);
 }
 
-export function createMermaidPlaceholderCard(key) {
-  return createMermaidPlaceholderCardWithMessage(key, {
-    label: 'Mermaid diagram',
-    message: 'Loads when visible',
-  });
-}
-
 export function createMermaidPlaceholderCardWithMessage(key, { label = 'Mermaid diagram', message = 'Loads when visible' } = {}) {
   const card = document.createElement('div');
   card.className = 'mermaid-placeholder-card';
@@ -165,6 +151,72 @@ export function createPlantUmlPlaceholderCard(key, message = 'Renders server-sid
   return card;
 }
 
+export function getDiagramErrorLocation(message = '') {
+  const text = String(message ?? '');
+  const line = text.match(/\bline(?:\s+number)?\s*[:#]?\s*(\d+)\b/i)?.[1] ?? '';
+  const column = text.match(/\bcol(?:umn)?(?:\s+number)?\s*[:#]?\s*(\d+)\b/i)?.[1] ?? '';
+
+  return [
+    line ? `Line ${line}` : '',
+    column ? `column ${column}` : '',
+  ].filter(Boolean).join(', ');
+}
+
+export function normalizeDiagramError(error, fallback = 'Render failed') {
+  const message = error instanceof Error ? error.message : String(error ?? '');
+  return message.trim() || fallback;
+}
+
+export function createDiagramErrorPlaceholderCard({
+  key,
+  kind,
+  label = 'Diagram',
+  message = 'Render failed',
+  subtitle = 'The current source could not be rendered.',
+} = {}) {
+  const card = document.createElement('div');
+  card.className = `${kind}-placeholder-card diagram-preview-placeholder-card diagram-preview-error-card`;
+  card.setAttribute('role', 'alert');
+  card.setAttribute('aria-live', 'assertive');
+
+  const copy = document.createElement('div');
+  copy.className = 'diagram-preview-placeholder-copy';
+
+  const title = document.createElement('strong');
+  title.textContent = `${label} needs attention`;
+
+  const subtitleNode = document.createElement('span');
+  subtitleNode.textContent = subtitle;
+
+  const location = getDiagramErrorLocation(message);
+  let locationNode = null;
+  if (location) {
+    locationNode = document.createElement('span');
+    locationNode.textContent = location;
+  }
+
+  const details = document.createElement('details');
+  const summary = document.createElement('summary');
+  summary.textContent = 'Details';
+  const detailMessage = document.createElement('code');
+  detailMessage.textContent = message;
+  details.append(summary, detailMessage);
+
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = `${kind}-placeholder-btn diagram-preview-placeholder-btn`;
+  button.dataset[`${kind}Key`] = key;
+  button.textContent = 'Retry';
+
+  copy.append(title, subtitleNode);
+  if (locationNode) {
+    copy.append(locationNode);
+  }
+  copy.append(details);
+  card.append(copy, button);
+  return card;
+}
+
 const SHOW_COMMENT_NODE = 128;
 
 function removeSvgComments(rootElement) {
@@ -247,17 +299,3 @@ export function shouldPreserveHydratedDiagram({ nextSource = '', nextTarget = ''
 
   return false;
 }
-
-export function isNearViewport(element, root, marginPx) {
-  if (!element || !root) {
-    return false;
-  }
-
-  const rootRect = root.getBoundingClientRect();
-  const elementRect = element.getBoundingClientRect();
-
-  return (
-    elementRect.bottom >= (rootRect.top - marginPx)
-    && elementRect.top <= (rootRect.bottom + marginPx)
-  );
-}

package/src/client/application/preview-render-compiler.js

@@ -2,8 +2,11 @@ import markdownIt from 'markdown-it';
 import hljs from 'highlight.js';
 
 import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
-import { escapeHtml, resolveVaultRelativePath, resolveWikiTarget } from '../domain/vault-utils.js';
-import { extractYamlFrontmatter, renderFrontmatterBlock } from './markdown-frontmatter.js';
+import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
+import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
+import { escapeHtml } from '../domain/vault-utils.js';
+import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
+import { renderFrontmatterBlock } from './markdown-frontmatter.js';
 import { analyzeMarkdownComplexity } from './preview-render-profile.js';
 
 const DIRECT_VIDEO_MIME_TYPES = Object.freeze({
@@ -407,7 +410,7 @@ function renderInlineWikiText(content, {
     } else {
       const target = match[4].trim();
       const display = (match[5] || match[4]).trim();
-      const resolved = resolveWikiTarget(target, fileList);
+      const resolved = resolveWikiTargetPath(target, fileList);
       const classes = resolved ? 'wiki-link' : 'wiki-link wiki-link-new';
       const title = resolved
         ? normalizePreviewTypography(display)

package/src/client/application/preview-render-profile.js

@@ -3,6 +3,7 @@ export const LARGE_DOCUMENT_MERMAID_THRESHOLD = 20;
 export const LARGE_DOCUMENT_EXCALIDRAW_THRESHOLD = 8;
 export const LARGE_DOCUMENT_DRAWIO_THRESHOLD = 8;
 export const LARGE_DOCUMENT_PLANTUML_THRESHOLD = 12;
+export const DIAGRAM_RENDER_DEBOUNCE_MS = 300;
 
 function countMatches(source, pattern) {
   return source.match(pattern)?.length ?? 0;
@@ -53,7 +54,14 @@ export function getRenderProfile(markdownText = '') {
     };
   }
 
-  if (hasMermaid || hasDrawioEmbed || hasExcalidrawEmbed || hasPlantUml) {
+  if (hasMermaid || hasPlantUml) {
+    return {
+      debounceMs: DIAGRAM_RENDER_DEBOUNCE_MS,
+      deferUntilIdle: false,
+    };
+  }
+
+  if (hasDrawioEmbed || hasExcalidrawEmbed) {
     return {
       debounceMs: 0,
       deferUntilIdle: false,