collabmd 0.1.54 → 0.1.56

package/src/client/application/app-shell/workspace-feature.js

@@ -1,6 +1,7 @@
 import {
   getVaultFileKind,
   isBaseFilePath,
+  isCanvasFilePath,
   isDrawioFilePath,
   isExcalidrawFilePath,
   isImageAttachmentFilePath,
@@ -13,6 +14,7 @@ import {
 
 export const workspaceFeature = {
   isBaseFile: isBaseFilePath,
+  isCanvasFile: isCanvasFilePath,
   isDrawioFile: isDrawioFilePath,
   isExcalidrawFile: isExcalidrawFilePath,
   isImageFile: isImageAttachmentFilePath,
@@ -75,6 +77,7 @@ export const workspaceFeature = {
   },
 
   handleLayoutViewRequest(view) {
+    if (this.isCanvasFile?.(this.currentFilePath)) return view === 'preview';
     if (!this.currentFilePath || !this.isDrawioFile(this.currentFilePath)) {
       return true;
     }
@@ -129,50 +132,21 @@ export const workspaceFeature = {
     );
   },
 
-  schedulePreviewLayoutSync({ delayMs = 120 } = {}) {
-    this.workspacePreviewController.schedulePreviewLayoutSync({
-      delayMs,
-      hydrationPaused: this._previewHydrationPaused,
-      previewLayoutSyncTimer: this._previewLayoutSyncTimer,
-      setPendingPreviewLayoutSync: (value) => {
-        this._pendingPreviewLayoutSync = value;
-      },
-      setPreviewLayoutSyncTimer: (value) => {
-        this._previewLayoutSyncTimer = value;
-      },
-    });
+  schedulePreviewLayoutSync(options) {
+    this.workspacePreviewController.schedulePreviewLayoutSync(options);
   },
 
   handleEditorScrollActivityChange(isActive) {
-    this.workspacePreviewController.handleEditorScrollActivityChange({
-      isActive,
-      pendingPreviewLayoutSync: this._pendingPreviewLayoutSync,
-      previewLayoutSyncTimer: this._previewLayoutSyncTimer,
-      setHydrationPaused: (value) => {
-        this._previewHydrationPaused = value;
-      },
-      setPendingPreviewLayoutSync: (value) => {
-        this._pendingPreviewLayoutSync = value;
-      },
-      setPreviewLayoutSyncTimer: (value) => {
-        this._previewLayoutSyncTimer = value;
-      },
-    });
+    this.workspacePreviewController.handleEditorScrollActivityChange(isActive);
   },
 
   showEmptyState() {
-    clearTimeout(this._previewLayoutSyncTimer);
-    this._previewLayoutSyncTimer = null;
-    this._pendingPreviewLayoutSync = false;
-    this._previewHydrationPaused = false;
+    this.workspacePreviewController.resetPreviewLayoutSync();
     this.workspaceRouteController.showEmptyState();
   },
 
   showDiffState() {
-    clearTimeout(this._previewLayoutSyncTimer);
-    this._previewLayoutSyncTimer = null;
-    this._pendingPreviewLayoutSync = false;
-    this._previewHydrationPaused = false;
+    this.workspacePreviewController.resetPreviewLayoutSync();
     this.workspaceRouteController.showDiffState();
   },
 

package/src/client/application/diagram-chrome.js

@@ -90,13 +90,14 @@ export class DiagramChrome {
     this.maximizedRoots.forEach((root) => root.remove());
     this.maximizedRoots.clear();
     this.activeMaximizedShell = null;
+    this.syncBodyMaximizedClasses();
   }
 
   destroyAllShells() {
     this.resizeObservers.forEach((observer) => observer.disconnect());
     this.resizeObservers.clear();
     this.activeMaximizedShell = null;
-    this.document.body.classList.remove('mermaid-maximized-open', 'plantuml-maximized-open');
+    this.syncBodyMaximizedClasses();
   }
 
   destroyShell(shell) {
@@ -147,7 +148,7 @@ export class DiagramChrome {
         root.hidden = true;
       }
     });
-    this.document.body.classList.remove('mermaid-maximized-open', 'plantuml-maximized-open');
+    this.syncBodyMaximizedClasses();
   }
 
   syncActiveShell() {
@@ -189,13 +190,10 @@ export class DiagramChrome {
       return existing;
     }
 
-    let root = this.document.body.querySelector(`[data-${kind}-maximized-root="true"]`);
-    if (!root) {
-      root = this.document.createElement('div');
-      root.dataset[config.maximizedRootDatasetKey] = 'true';
-      root.className = config.maximizedRootClassName;
-      this.document.body.appendChild(root);
-    }
+    const root = this.document.createElement('div');
+    root.dataset[config.maximizedRootDatasetKey] = 'true';
+    root.className = config.maximizedRootClassName;
+    this.document.body.appendChild(root);
 
     this.maximizedRoots.set(kind, root);
     return root;
@@ -235,11 +233,10 @@ export class DiagramChrome {
   }
 
   syncBodyMaximizedClasses() {
-    const activeShell = this.syncActiveShell();
     for (const [kind, config] of Object.entries(DIAGRAM_CHROME_KIND_CONFIG)) {
       this.document.body.classList.toggle(
         config.bodyClassName,
-        Boolean(activeShell?.classList?.contains(`${kind}-shell`)),
+        Boolean(this.document.querySelector?.(`.${kind}-shell.is-maximized`)),
       );
     }
   }

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

@@ -4,6 +4,7 @@ import {
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import { getVaultPathLeaf } from '../domain/vault-paths.js';
+import { prepareMermaidRenderSource } from '../domain/mermaid-source.js';
 import {
   encodeSvgDataUrl,
   loadImage,
@@ -166,7 +167,7 @@ export function exportTrimmedSvgMarkupFromElement(svgElement, options = {}) {
 }
 
 function prepareMermaidExportSource(source) {
-  let text = String(source ?? '').replace(MERMAID_INIT_DIRECTIVE_PATTERN, '');
+  let text = prepareMermaidRenderSource(String(source ?? '').replace(MERMAID_INIT_DIRECTIVE_PATTERN, ''));
 
   text = `%%{init: ${JSON.stringify(LIGHT_EXPORT_MERMAID_CONFIG)}}%%\n${text}`;
 

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

@@ -93,12 +93,12 @@ export class DiagramPreviewHydrator {
       return [];
     }
 
-    const documentShells = previewElement.ownerDocument?.querySelectorAll?.(this.shellSelector);
-    if (documentShells) {
-      return Array.from(documentShells);
+    const shells = Array.from(previewElement.querySelectorAll(this.shellSelector));
+    const maximizedShell = this.renderer.diagramChrome?.syncActiveShell?.();
+    if (maximizedShell?.classList.contains(this.shellClassName) && !shells.includes(maximizedShell)) {
+      shells.push(maximizedShell);
     }
-
-    return Array.from(previewElement.querySelectorAll(this.shellSelector));
+    return shells;
   }
 
   getPreservationIdentity(shell) {

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

@@ -3,6 +3,7 @@ import {
   renderMermaidExportSvgMarkup,
 } from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
+import { prepareMermaidRenderSource } from '../domain/mermaid-source.js';
 import {
   createMermaidPlaceholderCardWithMessage,
   createDiagramErrorPlaceholderCard,
@@ -217,7 +218,6 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
 
       const diagram = document.createElement('div');
       diagram.className = 'mermaid mermaid-render-node';
-      diagram.id = shell.dataset.mermaidKey || `mermaid-${Date.now()}`;
       const sourceLine = shell.getAttribute('data-source-line');
       const sourceLineEnd = shell.getAttribute('data-source-line-end');
       if (sourceLine) {
@@ -231,7 +231,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
       const renderHost = this.createRenderHost();
       try {
         renderHost.appendChild(diagram);
-        await mermaid.run({ nodes: [diagram] });
+        const { svg, bindFunctions } = await mermaid.render(`mermaid-${crypto.randomUUID()}`, source, diagram);
         if (
           !this.isHydrationCurrent(renderVersion, shell, hydrationToken)
           || !diagram.isConnected
@@ -240,6 +240,8 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
           return;
         }
 
+        diagram.innerHTML = svg;
+        bindFunctions?.(diagram);
         this.enhanceDiagram(shell, diagram, renderedSource, renderCacheKey);
         this.markShellHydrated(shell);
       } finally {
@@ -273,7 +275,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   }
 
   prepareSource(source) {
-    let text = String(source ?? '');
+    let text = prepareMermaidRenderSource(source);
 
     if (!/%%\{[\s\S]*?\binit\s*:/m.test(text)) {
       const initConfig = this.getPreviewInitConfig(text);

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

@@ -12,6 +12,8 @@ import {
   sanitizeSvgMarkup,
 } from './preview-diagram-utils.js';
 
+const SVG_CACHE_LIMIT = 30;
+
 export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
   constructor(renderer, { loadFileSource = null, renderClient = null } = {}) {
     super(renderer, {
@@ -135,6 +137,10 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     const request = this.renderClient.renderSvg(source)
       .then((svgMarkup) => {
         const sanitized = sanitizeSvgMarkup(svgMarkup);
+        this.svgCache.delete(cacheKey);
+        while (this.svgCache.size >= SVG_CACHE_LIMIT) {
+          this.svgCache.delete(this.svgCache.keys().next().value);
+        }
         this.svgCache.set(cacheKey, sanitized);
         return sanitized;
       })

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

@@ -8,6 +8,7 @@ import {
   resolveWikiTargetWithIndex,
 } from '../../domain/wiki-link-resolver.js';
 import { classifyPublicVideoEmbed } from '../../domain/video-embed.js';
+import { assignHeadingIds, findMarkdownSection } from '../domain/markdown-headings.js';
 import { highlightFence } from '../domain/highlight-runtime.js';
 import { escapeHtml } from '../domain/vault-utils.js';
 import { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
@@ -42,96 +43,6 @@ function escapePreviewText(content = '') {
   return escapeHtml(normalizePreviewTypography(content));
 }
 
-function createHeadingSlug(content = '') {
-  return String(content ?? '')
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-|-$/g, '')
-    || 'section';
-}
-
-function createHeadingId(baseId = '', headingIdCounts = new Map()) {
-  const normalizedBaseId = String(baseId ?? '').trim() || 'section';
-  const occurrenceIndex = headingIdCounts.get(normalizedBaseId) ?? 0;
-  headingIdCounts.set(normalizedBaseId, occurrenceIndex + 1);
-  return occurrenceIndex === 0 ? normalizedBaseId : `${normalizedBaseId}-${occurrenceIndex}`;
-}
-
-function createContextualHeadingBaseId(headingInfo, groupedHeadingInfos = []) {
-  if (!headingInfo?.slug) {
-    return 'section';
-  }
-
-  if (groupedHeadingInfos.length <= 1) {
-    return headingInfo.slug;
-  }
-
-  for (let depth = 1; depth <= headingInfo.parentSlugs.length; depth += 1) {
-    const candidate = [
-      ...headingInfo.parentSlugs.slice(-depth),
-      headingInfo.slug,
-    ].join('-');
-
-    const isUniqueWithinGroup = groupedHeadingInfos.every((otherInfo) => {
-      if (otherInfo === headingInfo) {
-        return true;
-      }
-
-      const otherCandidate = [
-        ...otherInfo.parentSlugs.slice(-depth),
-        otherInfo.slug,
-      ].join('-');
-      return otherCandidate !== candidate;
-    });
-
-    if (isUniqueWithinGroup) {
-      return candidate;
-    }
-  }
-
-  return headingInfo.slug;
-}
-
-function assignHeadingIds(state) {
-  const headingInfos = [];
-  const parentSlugs = [];
-
-  state.tokens.forEach((token, index) => {
-    if (token.type !== 'heading_open' || token.attrGet('id')) {
-      return;
-    }
-
-    const level = Number.parseInt(token.tag.slice(1), 10);
-    if (!Number.isFinite(level) || level < 1) {
-      return;
-    }
-
-    parentSlugs.length = Math.max(level - 1, 0);
-    const inlineToken = state.tokens[index + 1];
-    const slug = createHeadingSlug(inlineToken?.type === 'inline' ? inlineToken.content : '');
-    headingInfos.push({
-      parentSlugs: parentSlugs.filter(Boolean),
-      slug,
-      token,
-    });
-    parentSlugs[level - 1] = slug;
-  });
-
-  const headingsBySlug = new Map();
-  headingInfos.forEach((headingInfo) => {
-    const group = headingsBySlug.get(headingInfo.slug) ?? [];
-    group.push(headingInfo);
-    headingsBySlug.set(headingInfo.slug, group);
-  });
-
-  const headingIdCounts = new Map();
-  headingInfos.forEach((headingInfo) => {
-    const baseId = createContextualHeadingBaseId(headingInfo, headingsBySlug.get(headingInfo.slug) ?? []);
-    headingInfo.token.attrSet('id', createHeadingId(baseId, headingIdCounts));
-  });
-}
-
 function renderSafeInlineBreaks(content = '') {
   const parts = String(content).split(/<br\s*\/?>/i);
   if (parts.length === 1) {
@@ -276,7 +187,7 @@ function renderInlineWikiText(content, {
   baseEmbedCounts,
   drawioEmbedCounts,
   excalidrawEmbedCounts,
-  wikiTargetIndex,
+  getWikiTargetIndex,
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
   sourceFilePath = '',
@@ -349,7 +260,7 @@ function renderInlineWikiText(content, {
     } else {
       const target = match[4].trim();
       const display = (match[5] || match[4]).trim();
-      const resolved = resolveWikiTargetWithIndex(target, wikiTargetIndex);
+      const resolved = resolveWikiTargetWithIndex(target, getWikiTargetIndex());
       const classes = resolved ? 'wiki-link' : 'wiki-link wiki-link-new';
       const title = resolved
         ? normalizePreviewTypography(display)
@@ -421,7 +332,8 @@ function createMarkdownRenderer(fileList = [], {
   const plantUmlCounts = new Map();
   const plantUmlEmbedCounts = new Map();
   const videoEmbedCounts = new Map();
-  const wikiTargetIndex = createWikiTargetIndex(fileList);
+  let wikiTargetIndex;
+  const getWikiTargetIndex = () => (wikiTargetIndex ??= createWikiTargetIndex(fileList));
 
   const fallbackFence = markdown.renderer.rules.fence;
   const fallbackImage = markdown.renderer.rules.image;
@@ -505,7 +417,7 @@ function createMarkdownRenderer(fileList = [], {
         baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
-        wikiTargetIndex,
+        getWikiTargetIndex,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
@@ -519,7 +431,7 @@ function createMarkdownRenderer(fileList = [], {
         baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
-        wikiTargetIndex,
+        getWikiTargetIndex,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
         sourceFilePath,
@@ -532,7 +444,7 @@ function createMarkdownRenderer(fileList = [], {
       baseEmbedCounts: baseCounts,
       drawioEmbedCounts,
       excalidrawEmbedCounts,
-      wikiTargetIndex,
+      getWikiTargetIndex,
       mermaidEmbedCounts,
       plantUmlEmbedCounts,
       sourceFilePath,
@@ -591,6 +503,7 @@ export function compilePreviewDocument({
   frontmatterInteractive = false,
   markdownText = '',
   sourceFilePath = '',
+  subpath = '',
   wikiLinkAutoCreate = true,
 } = {}) {
   const normalizedMarkdown = String(markdownText);
@@ -601,13 +514,36 @@ export function compilePreviewDocument({
     wikiLinkAutoCreate,
   });
   const renderedMarkdown = frontmatter ? frontmatter.bodyMarkdown : normalizedMarkdown;
-  const frontmatterHtml = renderFrontmatterBlock(frontmatter, {
+  const env = {};
+  let tokens = renderer.parse(renderedMarkdown, env);
+  if (subpath) {
+    const section = subpath.startsWith('#') && findMarkdownSection(tokens, subpath.slice(1));
+    if (!section) {
+      return {
+        html: `<p>${subpath.startsWith('#^')
+          ? 'Block previews are not supported. Open the file to view it.'
+          : 'Heading not found in this file. Choose another heading or clear the field to show the whole file.'}</p>`,
+        stats: analyzeMarkdownComplexity(''),
+      };
+    }
+    // Keep enclosing blocks balanced, original heading IDs and full-document reference definitions.
+    const includedBlocks = [];
+    tokens = tokens.filter((token) => {
+      if (token.nesting === -1) return includedBlocks.pop();
+      const included = token.map
+        ? token.map[1] > section.startLine && (section.endLine === undefined || token.map[0] < section.endLine)
+        : includedBlocks.at(-1);
+      if (token.nesting === 1) includedBlocks.push(included);
+      return included;
+    });
+  }
+  const frontmatterHtml = subpath ? '' : renderFrontmatterBlock(frontmatter, {
     collapsed: frontmatterCollapsed,
     interactive: frontmatterInteractive,
   });
 
   return {
-    html: `${frontmatterHtml}${renderer.render(renderedMarkdown)}`,
+    html: `${frontmatterHtml}${renderer.renderer.render(tokens, renderer.options, env)}`,
     stats: analyzeMarkdownComplexity(normalizedMarkdown),
   };
 }

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

@@ -80,6 +80,7 @@ export class PreviewRenderExecutor {
   async compile(markdownText, renderVersion, {
     frontmatterCollapsed = false,
     frontmatterInteractive = false,
+    subpath = '',
   } = {}) {
     const worker = this.ensureWorker();
 
@@ -102,6 +103,7 @@ export class PreviewRenderExecutor {
           markdownText,
           renderVersion,
           sourceFilePath: this.getSourceFilePath?.() ?? '',
+          subpath,
           wikiLinkAutoCreate: this.getWikiLinkAutoCreate?.() ?? true,
         });
       });
@@ -115,6 +117,7 @@ export class PreviewRenderExecutor {
       frontmatterInteractive,
       markdownText,
       sourceFilePath: this.getSourceFilePath?.() ?? '',
+      subpath,
       wikiLinkAutoCreate: this.getWikiLinkAutoCreate?.() ?? true,
     });
   }

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

@@ -9,6 +9,7 @@ self.onmessage = (event) => {
     markdownText,
     renderVersion,
     sourceFilePath,
+    subpath,
     wikiLinkAutoCreate,
   } = event.data ?? {};
 
@@ -20,6 +21,7 @@ self.onmessage = (event) => {
       frontmatterInteractive,
       markdownText,
       sourceFilePath,
+      subpath,
       wikiLinkAutoCreate,
     });
     self.postMessage({

package/src/client/application/preview-renderer.js

@@ -11,6 +11,7 @@ export class PreviewRenderer {
     getFileList,
     getPreviewVisible = null,
     getSourceFilePath,
+    getSubpath = null,
     getTheme = null,
     getWikiLinkAutoCreate = null,
     loadFileSource = null,
@@ -28,6 +29,7 @@ export class PreviewRenderer {
     this.getFileList = getFileList;
     this.getPreviewVisible = getPreviewVisible;
     this.getSourceFilePath = getSourceFilePath;
+    this.getSubpath = getSubpath;
     this.getTheme = getTheme;
     this.getWikiLinkAutoCreate = getWikiLinkAutoCreate;
     this.loadFileSource = loadFileSource;
@@ -234,7 +236,9 @@ export class PreviewRenderer {
     this.renderScheduler.queue({
       markdownText,
       onRenderRequested: (queuedText, renderVersion) => {
-        void this._deferredPreviewStylesPromise.then(() => this.render(queuedText, renderVersion));
+        void this._deferredPreviewStylesPromise.then(() => {
+          if (renderVersion === this.pendingRenderVersion) return this.render(queuedText, renderVersion);
+        });
       },
       renderVersion: scheduledVersion,
     });
@@ -250,6 +254,7 @@ export class PreviewRenderer {
       const result = await this.renderExecutor.compile(markdownText, renderVersion, {
         frontmatterCollapsed: this.frontmatterCollapsed,
         frontmatterInteractive: true,
+        subpath: this.getSubpath?.() ?? '',
       });
       if (renderVersion !== this.pendingRenderVersion) {
         return;
@@ -266,6 +271,7 @@ export class PreviewRenderer {
   }
 
   destroy() {
+    this.pendingRenderVersion += 1;
     this.renderScheduler.destroy();
     this.diagramChrome.destroy();
     this.mermaidHydrator.destroy();
@@ -321,8 +327,6 @@ export class PreviewRenderer {
 
     this.mermaidHydrator.cancelHydration({ preserveActiveShell: true });
     this.plantUmlHydrator.cancelHydration({ preserveActiveShell: true });
-    document.body.classList.remove('mermaid-maximized-open');
-    document.body.classList.remove('plantuml-maximized-open');
     this.mermaidHydrator.preserveHydratedShellsForCommit();
     this.plantUmlHydrator.preserveHydratedShellsForCommit();
 
@@ -339,7 +343,7 @@ export class PreviewRenderer {
     if (this.previewContainer) this.previewContainer.scrollTop = scrollTop;
     this.setPhase('base');
 
-    this.outlineController.refresh();
+    this.outlineController?.refresh();
     this.onAfterRenderCommit?.(this.previewElement, {
       ...stats,
       isLargeDocument: this.isLargeDocument,
@@ -379,7 +383,7 @@ export class PreviewRenderer {
   }
 
   handleFrontmatterLayoutChange() {
-    this.outlineController.refresh();
+    this.outlineController?.refresh();
     this.onPreviewLayoutChange?.({
       isLargeDocument: this.isLargeDocument,
       renderVersion: this.activeRenderVersion,

package/src/client/application/workspace-coordinator.js

@@ -28,6 +28,7 @@ export class WorkspaceCoordinator {
     getStoredUserName,
     getTheme,
     isBaseFile,
+    isCanvasFile,
     isDrawioFile,
     isExcalidrawFile,
     isImageFile,
@@ -51,6 +52,7 @@ export class WorkspaceCoordinator {
     onSessionAssigned = null,
     onFileOpenMetric = null,
     onRenderBasePreview,
+    onRenderCanvasPreview,
     onRenderExcalidrawPreview,
     onRenderDrawioPreview,
     onRenderHtmlPreview,
@@ -82,6 +84,7 @@ export class WorkspaceCoordinator {
     this.getStoredUserName = getStoredUserName;
     this.getTheme = getTheme;
     this.isBaseFile = isBaseFile ?? (() => false);
+    this.isCanvasFile = isCanvasFile ?? (() => false);
     this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
@@ -105,6 +108,7 @@ export class WorkspaceCoordinator {
     this.onSessionAssigned = onSessionAssigned;
     this.onFileOpenMetric = onFileOpenMetric;
     this.onRenderBasePreview = onRenderBasePreview;
+    this.onRenderCanvasPreview = onRenderCanvasPreview;
     this.onRenderDrawioPreview = onRenderDrawioPreview;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
     this.onRenderHtmlPreview = onRenderHtmlPreview;
@@ -182,6 +186,7 @@ export class WorkspaceCoordinator {
 
   finalizeFileOpen({
     isBase = false,
+    isCanvas = false,
     isDrawio = false,
     filePath,
     isExcalidraw = false,
@@ -190,6 +195,7 @@ export class WorkspaceCoordinator {
     isPdf = false,
     supportsBacklinks,
   }) {
+    if (isCanvas) this.onRenderCanvasPreview(filePath);
     if (isExcalidraw) this.onRenderExcalidrawPreview(filePath);
     if (isBase || isBaseFilePath(filePath)) this.onRenderBasePreview(filePath);
     if (isDrawio) this.onRenderDrawioPreview(filePath);
@@ -221,6 +227,7 @@ export class WorkspaceCoordinator {
     const currentDrawioMode = this.stateStore.currentDrawioMode ?? null;
     const isDrawio = this.isDrawioFile(filePath) && drawioMode !== 'text' && this.shouldUseDrawioPreview(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isCanvas = this.isCanvasFile(filePath);
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isPdf = this.isPdfFile(filePath);
@@ -232,7 +239,7 @@ export class WorkspaceCoordinator {
     if (
       filePath === this.stateStore.currentFilePath
       && normalizedDrawioMode === currentDrawioMode
-      && (this.session || isDrawio || isExcalidraw || isImage || isPdf)
+      && (this.session || isDrawio || isExcalidraw || isCanvas || isImage || isPdf)
     ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
@@ -249,7 +256,7 @@ export class WorkspaceCoordinator {
     });
     this.reportFileOpenMetric('open_started', loadToken, { filePath });
 
-    if (isDrawio || isExcalidraw || isImage || isPdf) {
+    if (isDrawio || isExcalidraw || isCanvas || isImage || isPdf) {
       this.onSessionAssigned?.(null);
 
       if (loadToken !== this.stateStore.sessionLoadToken) {
@@ -260,6 +267,7 @@ export class WorkspaceCoordinator {
       this.finalizeFileOpen({
         filePath,
         isBase,
+        isCanvas,
         isDrawio,
         isExcalidraw,
         isImage,
@@ -291,6 +299,9 @@ export class WorkspaceCoordinator {
       : Promise.resolve(null);
 
     const EditorSession = await this.loadEditorSessionClass();
+    if (loadToken !== this.stateStore.sessionLoadToken) {
+      return false;
+    }
     const session = this.createEditorSession(EditorSession, {
       filePath,
       getFileList: this.getFileList,
@@ -427,15 +438,13 @@ export class WorkspaceCoordinator {
       await initializePromise;
 
       if (loadToken !== this.stateStore.sessionLoadToken) {
-        session.destroy();
-        return;
+        return false;
       }
 
       await Promise.all([liveSyncPromise, bootstrapVisibilityPromise]);
 
       if (loadToken !== this.stateStore.sessionLoadToken) {
-        session.destroy();
-        return;
+        return false;
       }
 
       if (!fileOpenReady) {
@@ -444,6 +453,9 @@ export class WorkspaceCoordinator {
       }
       return true;
     } catch (error) {
+      if (loadToken !== this.stateStore.sessionLoadToken) {
+        return false;
+      }
       console.error('[app] Failed to initialize editor:', error);
       session.destroy();
       this.attachEditorScroller(null);
@@ -451,10 +463,6 @@ export class WorkspaceCoordinator {
         this.session = null;
       }
 
-      if (loadToken !== this.stateStore.sessionLoadToken) {
-        return;
-      }
-
       this.onFileOpenError({ code: 'load-failed', filePath });
       return false;
     }