collabmd 0.1.54 → 0.1.55

package/src/client/application/workspace-preview-controller.js

@@ -1,5 +1,6 @@
 import {
   isBaseFilePath,
+  isCanvasFilePath,
   isDiagramFilePath,
   isHtmlFilePath,
   isMarkdownFilePath,
@@ -39,6 +40,7 @@ export class WorkspacePreviewController {
   constructor({
     backlinksPanel,
     basesPreview = null,
+    canvasEmbed = null,
     drawioEmbed,
     elements,
     excalidrawEmbed,
@@ -55,13 +57,13 @@ export class WorkspacePreviewController {
     outlineController,
     previewRenderer,
     pdfPreview = null,
-    schedulePreviewLayoutSync,
     scrollSyncController,
     structurizrPreview = null,
     videoEmbed,
   }) {
     this.backlinksPanel = backlinksPanel;
     this.basesPreview = basesPreview ?? { reconcileEmbeds() {}, renderStandalone() {} };
+    this.canvasEmbed = canvasEmbed;
     this.drawioEmbed = drawioEmbed ?? {
       detachForCommit() {},
       hydrateVisibleEmbeds() {},
@@ -94,7 +96,9 @@ export class WorkspacePreviewController {
     this.outlineController = outlineController;
     this.previewRenderer = previewRenderer;
     this.pdfPreview = pdfPreview ?? { cancel() {}, render() {} };
-    this.schedulePreviewLayoutSyncCallback = schedulePreviewLayoutSync;
+    this.previewHydrationPaused = false;
+    this.pendingPreviewLayoutSync = false;
+    this.previewLayoutSyncTimer = null;
     this.scrollSyncController = scrollSyncController;
     this.structurizrPreview = structurizrPreview ?? {
       queueSync() {},
@@ -142,11 +146,13 @@ export class WorkspacePreviewController {
   }
 
   resetPreviewMode() {
+    this.canvasEmbed?.unmount();
     this.setHtmlPreviewMaximized(false);
     this.htmlPreviewShell = null;
     this.pdfPreview.cancel();
     this.elements.previewContent?.classList.remove('is-drawio-file-preview');
     this.elements.previewContent?.classList.remove('is-excalidraw-file-preview');
+    this.elements.previewContent?.classList.remove('is-canvas-file-preview');
     this.elements.previewContent?.classList.remove('is-base-file-preview');
     this.elements.previewContent?.classList.remove('is-image-file-preview');
     this.elements.previewContent?.classList.remove('is-pdf-file-preview');
@@ -160,6 +166,7 @@ export class WorkspacePreviewController {
   syncFileChrome(filePath, { drawioMode = null, preferPreviewForBase = false } = {}) {
     const isDrawio = this.isDrawioFile(filePath);
     const isExcalidraw = this.isExcalidrawFile(filePath);
+    const isCanvas = isCanvasFilePath(filePath);
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
     const isPdf = this.isPdfFile(filePath);
@@ -169,11 +176,14 @@ export class WorkspacePreviewController {
     const isPlantUml = this.isPlantUmlFile(filePath);
     const isStructurizr = isStructurizrFilePath(filePath);
     const isDiagramFile = isDiagramFilePath(filePath);
-    const usesHeaderBacklinks = isExcalidraw || (isDrawio && drawioMode !== 'text');
+    const usesHeaderBacklinks = isExcalidraw || isCanvas || (isDrawio && drawioMode !== 'text');
 
     this.backlinksPanel.setDisplayMode?.(usesHeaderBacklinks ? 'header' : 'dock');
 
     this.elements.editorFindButton?.classList.toggle('hidden', !isMarkdown);
+    this.elements.toolbarViewToggle?.classList.toggle('hidden', isCanvas);
+    this.elements.mobileViewToggle?.classList.toggle('hidden', isCanvas);
+    this.elements.toggleWrapButton?.classList.toggle('hidden', isCanvas);
     syncFormatDocumentButton(this.elements.editorFormatButton, filePath, isPlantUml);
     this.elements.markdownToolbar?.classList.toggle('hidden', !isMarkdown);
     this.elements.exportMenuGroup?.classList.toggle('hidden', !isMarkdown);
@@ -188,7 +198,7 @@ export class WorkspacePreviewController {
       this.backlinksPanel.clear();
     }
 
-    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isHtml || isImage || isPdf || (isBase && preferPreviewForBase)) {
+    if ((isDrawio && drawioMode !== 'text') || isExcalidraw || isCanvas || isHtml || isImage || isPdf || (isBase && preferPreviewForBase)) {
       this.layoutController.setView('preview', { persist: false });
       this.outlineController.close();
       this.backlinksPanel.clear();
@@ -201,19 +211,47 @@ export class WorkspacePreviewController {
     }
   }
 
-  renderExcalidrawFilePreview(filePath) {
+  prepareFilePreview(className) {
     const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
+    if (!previewElement) return null;
 
     this.videoEmbed?.detachForCommit();
     this.drawioEmbed.detachForCommit();
     this.excalidrawEmbed.detachForCommit();
     this.resetPreviewMode();
-    previewElement.classList.add('is-excalidraw-file-preview');
+    if (className) previewElement.classList.add(className);
     const renderHost = this.previewRenderer.ensureRenderHost();
     this.previewRenderer.normalizePreviewChildren(renderHost);
+    return { previewElement, renderHost };
+  }
+
+  commitFilePreview(renderHost, content) {
+    if (renderHost) {
+      renderHost.replaceChildren(content);
+      renderHost.style.minHeight = '';
+    }
+  }
+
+  renderCanvasFilePreview(filePath) {
+    const preview = this.prepareFilePreview('is-canvas-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
+
+    if (renderHost) renderHost.style.minHeight = '';
+    this.canvasEmbed?.mount(filePath, renderHost);
+    previewElement.dataset.renderPhase = 'ready';
+    this.outlineController.close();
+    this.scrollSyncController.setLargeDocumentMode(false);
+    this.scrollSyncController.invalidatePreviewBlocks();
+    this.videoEmbed?.reconcileEmbeds(previewElement);
+    this.drawioEmbed.reconcileEmbeds(previewElement);
+    this.excalidrawEmbed.reconcileEmbeds(previewElement, { isLargeDocument: false });
+  }
+
+  renderExcalidrawFilePreview(filePath) {
+    const preview = this.prepareFilePreview('is-excalidraw-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
 
     const placeholder = document.createElement('div');
     placeholder.className = 'excalidraw-embed-placeholder';
@@ -224,10 +262,7 @@ export class WorkspacePreviewController {
     loadingShell.className = 'preview-shell';
     loadingShell.textContent = 'Loading Excalidraw preview…';
     placeholder.appendChild(loadingShell);
-    if (renderHost) {
-      renderHost.replaceChildren(placeholder);
-      renderHost.style.minHeight = '';
-    }
+    this.commitFilePreview(renderHost, placeholder);
 
     previewElement.dataset.renderPhase = 'ready';
     this.outlineController.refresh();
@@ -238,22 +273,13 @@ export class WorkspacePreviewController {
     this.excalidrawEmbed.reconcileEmbeds(previewElement, { isLargeDocument: false });
     this.drawioEmbed.hydrateVisibleEmbeds();
     this.excalidrawEmbed.hydrateVisibleEmbeds();
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   renderDrawioFilePreview(filePath) {
-    const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
-
-    this.videoEmbed?.detachForCommit();
-    this.drawioEmbed.detachForCommit();
-    this.excalidrawEmbed.detachForCommit();
-    this.resetPreviewMode();
-    previewElement.classList.add('is-drawio-file-preview');
-    const renderHost = this.previewRenderer.ensureRenderHost();
-    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const preview = this.prepareFilePreview('is-drawio-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
 
     const placeholder = document.createElement('div');
     placeholder.className = 'drawio-embed-placeholder';
@@ -266,10 +292,7 @@ export class WorkspacePreviewController {
     loadingShell.textContent = 'Loading draw.io preview…';
     placeholder.appendChild(loadingShell);
 
-    if (renderHost) {
-      renderHost.replaceChildren(placeholder);
-      renderHost.style.minHeight = '';
-    }
+    this.commitFilePreview(renderHost, placeholder);
 
     previewElement.dataset.renderPhase = 'ready';
     this.outlineController.refresh();
@@ -278,22 +301,13 @@ export class WorkspacePreviewController {
     this.videoEmbed?.reconcileEmbeds(previewElement);
     this.drawioEmbed.reconcileEmbeds(previewElement);
     this.drawioEmbed.hydrateVisibleEmbeds();
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   renderImageFilePreview(filePath) {
-    const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
-
-    this.videoEmbed?.detachForCommit();
-    this.drawioEmbed.detachForCommit();
-    this.excalidrawEmbed.detachForCommit();
-    this.resetPreviewMode();
-    previewElement.classList.add('is-image-file-preview');
-    const renderHost = this.previewRenderer.ensureRenderHost();
-    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const preview = this.prepareFilePreview('is-image-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
 
     const shell = document.createElement('figure');
     shell.className = 'image-file-preview-shell';
@@ -304,32 +318,20 @@ export class WorkspacePreviewController {
     image.src = resolveApiUrl(`/attachment?path=${encodeURIComponent(filePath)}`);
     shell.appendChild(image);
 
-    if (renderHost) {
-      renderHost.replaceChildren(shell);
-      renderHost.style.minHeight = '';
-    }
+    this.commitFilePreview(renderHost, shell);
 
     previewElement.dataset.renderPhase = 'ready';
     this.outlineController.refresh();
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
     this.videoEmbed?.reconcileEmbeds(previewElement);
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   renderPdfFilePreview(filePath) {
-    const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
-
-    this.videoEmbed?.detachForCommit();
-    this.drawioEmbed.detachForCommit();
-    this.excalidrawEmbed.detachForCommit();
-    this.resetPreviewMode();
-    previewElement.classList.add('is-pdf-file-preview');
-    const renderHost = this.previewRenderer.ensureRenderHost();
-    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const preview = this.prepareFilePreview('is-pdf-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
 
     if (renderHost) {
       this.pdfPreview.render({
@@ -345,23 +347,14 @@ export class WorkspacePreviewController {
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
     this.videoEmbed?.reconcileEmbeds(previewElement);
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   renderHtmlFilePreview({ content = '' } = {}) {
-    const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
-
     const wasMaximized = this.htmlPreviewShell?.classList.contains('is-maximized') ?? false;
-    this.videoEmbed?.detachForCommit();
-    this.drawioEmbed.detachForCommit();
-    this.excalidrawEmbed.detachForCommit();
-    this.resetPreviewMode();
-    previewElement.classList.add('is-html-file-preview');
-    const renderHost = this.previewRenderer.ensureRenderHost();
-    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const preview = this.prepareFilePreview('is-html-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
 
     const source = String(content ?? '');
     const iframe = document.createElement('iframe');
@@ -397,32 +390,20 @@ export class WorkspacePreviewController {
     this.htmlPreviewShell = shell;
     this.setHtmlPreviewMaximized(wasMaximized);
 
-    if (renderHost) {
-      renderHost.replaceChildren(shell);
-      renderHost.style.minHeight = '';
-    }
+    this.commitFilePreview(renderHost, shell);
 
     previewElement.dataset.renderPhase = 'ready';
     this.outlineController.close();
     this.backlinksPanel.clear();
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   async renderBaseFilePreview(filePath, { source = null } = {}) {
-    const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
-
-    this.videoEmbed?.detachForCommit();
-    this.drawioEmbed.detachForCommit();
-    this.excalidrawEmbed.detachForCommit();
-    this.resetPreviewMode();
-    previewElement.classList.add('is-base-file-preview');
-    const renderHost = this.previewRenderer.ensureRenderHost();
-    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const preview = this.prepareFilePreview('is-base-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
 
     if (renderHost) {
       renderHost.style.minHeight = '';
@@ -441,22 +422,13 @@ export class WorkspacePreviewController {
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
     this.videoEmbed?.reconcileEmbeds(previewElement);
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   async renderStructurizrFilePreview(filePath, { source = null } = {}) {
-    const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
-
-    this.videoEmbed?.detachForCommit();
-    this.drawioEmbed.detachForCommit();
-    this.excalidrawEmbed.detachForCommit();
-    this.resetPreviewMode();
-    previewElement.classList.add('is-structurizr-file-preview');
-    const renderHost = this.previewRenderer.ensureRenderHost();
-    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const preview = this.prepareFilePreview('is-structurizr-file-preview');
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
     if (renderHost) {
       renderHost.style.minHeight = '';
     }
@@ -473,21 +445,13 @@ export class WorkspacePreviewController {
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
     this.videoEmbed?.reconcileEmbeds(previewElement);
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   renderTextFilePreview({ content = '' } = {}) {
-    const previewElement = this.elements.previewContent;
-    if (!previewElement) {
-      return;
-    }
-
-    this.videoEmbed?.detachForCommit();
-    this.drawioEmbed.detachForCommit();
-    this.excalidrawEmbed.detachForCommit();
-    this.resetPreviewMode();
-    const renderHost = this.previewRenderer.ensureRenderHost();
-    this.previewRenderer.normalizePreviewChildren(renderHost);
+    const preview = this.prepareFilePreview();
+    if (!preview) return;
+    const { previewElement, renderHost } = preview;
 
     const shell = document.createElement('div');
     shell.className = 'preview-shell';
@@ -497,10 +461,7 @@ export class WorkspacePreviewController {
     pre.appendChild(code);
     shell.appendChild(pre);
 
-    if (renderHost) {
-      renderHost.replaceChildren(shell);
-      renderHost.style.minHeight = '';
-    }
+    this.commitFilePreview(renderHost, shell);
 
     previewElement.dataset.renderPhase = 'ready';
     this.outlineController.close();
@@ -508,7 +469,7 @@ export class WorkspacePreviewController {
     this.scrollSyncController.setLargeDocumentMode(false);
     this.scrollSyncController.invalidatePreviewBlocks();
     this.videoEmbed?.reconcileEmbeds(previewElement);
-    this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+    this.schedulePreviewLayoutSync({ delayMs: 0 });
   }
 
   createResizeHandler(restoreSidebarState) {
@@ -517,7 +478,7 @@ export class WorkspacePreviewController {
       clearTimeout(resizeTimer);
       resizeTimer = setTimeout(() => {
         restoreSidebarState?.();
-        this.schedulePreviewLayoutSyncCallback({ delayMs: 0 });
+        this.schedulePreviewLayoutSync({ delayMs: 0 });
       }, 100);
     };
   }
@@ -534,22 +495,23 @@ export class WorkspacePreviewController {
     return observer;
   }
 
-  schedulePreviewLayoutSync({
-    hydrationPaused,
-    previewLayoutSyncTimer,
-    setPendingPreviewLayoutSync,
-    setPreviewLayoutSyncTimer,
-    delayMs = 120,
-  }) {
-    if (hydrationPaused) {
-      setPendingPreviewLayoutSync(true);
+  resetPreviewLayoutSync() {
+    clearTimeout(this.previewLayoutSyncTimer);
+    this.previewLayoutSyncTimer = null;
+    this.pendingPreviewLayoutSync = false;
+    this.previewHydrationPaused = false;
+  }
+
+  schedulePreviewLayoutSync({ delayMs = 120 } = {}) {
+    if (this.previewHydrationPaused) {
+      this.pendingPreviewLayoutSync = true;
       return;
     }
 
-    clearTimeout(previewLayoutSyncTimer);
+    clearTimeout(this.previewLayoutSyncTimer);
 
-    const nextTimer = setTimeout(() => {
-      setPreviewLayoutSyncTimer(null);
+    this.previewLayoutSyncTimer = setTimeout(() => {
+      this.previewLayoutSyncTimer = null;
 
       const hasSession = Boolean(this.getSession());
       const isDrawioPreview = this.elements.previewContent?.classList?.contains?.('is-drawio-file-preview') ?? false;
@@ -562,8 +524,8 @@ export class WorkspacePreviewController {
         return;
       }
 
-      if (hydrationPaused) {
-        setPendingPreviewLayoutSync(true);
+      if (this.previewHydrationPaused) {
+        this.pendingPreviewLayoutSync = true;
         return;
       }
 
@@ -586,40 +548,25 @@ export class WorkspacePreviewController {
         },
       });
     }, delayMs);
-
-    setPreviewLayoutSyncTimer(nextTimer);
   }
 
-  handleEditorScrollActivityChange({
-    isActive,
-    pendingPreviewLayoutSync,
-    previewLayoutSyncTimer,
-    setHydrationPaused,
-    setPendingPreviewLayoutSync,
-    setPreviewLayoutSyncTimer,
-  }) {
+  handleEditorScrollActivityChange(isActive) {
     const nextPaused = Boolean(isActive);
-    setHydrationPaused(nextPaused);
+    this.previewHydrationPaused = nextPaused;
     this.previewRenderer.setHydrationPaused(nextPaused);
     this.drawioEmbed.setHydrationPaused(nextPaused);
     this.excalidrawEmbed.setHydrationPaused(nextPaused);
 
     if (nextPaused) {
-      clearTimeout(previewLayoutSyncTimer);
-      setPreviewLayoutSyncTimer(null);
-      setPendingPreviewLayoutSync(true);
+      clearTimeout(this.previewLayoutSyncTimer);
+      this.previewLayoutSyncTimer = null;
+      this.pendingPreviewLayoutSync = true;
       return;
     }
 
-    if (pendingPreviewLayoutSync) {
-      setPendingPreviewLayoutSync(false);
-      this.schedulePreviewLayoutSync({
-        delayMs: 0,
-        hydrationPaused: false,
-        previewLayoutSyncTimer: null,
-        setPendingPreviewLayoutSync,
-        setPreviewLayoutSyncTimer,
-      });
+    if (this.pendingPreviewLayoutSync) {
+      this.pendingPreviewLayoutSync = false;
+      this.schedulePreviewLayoutSync({ delayMs: 0 });
     }
   }
 }

package/src/client/application/workspace-route-controller.js

@@ -1,6 +1,7 @@
 export class WorkspaceRouteController {
   constructor({
     backlinksPanel,
+    canvasEmbed = null,
     clearInitialFileBootstrap,
     clearStaticPreviewDocument = null,
     closeSidebarOnMobile,
@@ -38,6 +39,7 @@ export class WorkspaceRouteController {
     layoutController,
   }) {
     this.backlinksPanel = backlinksPanel;
+    this.canvasEmbed = canvasEmbed;
     this.clearInitialFileBootstrap = clearInitialFileBootstrap;
     this.clearStaticPreviewDocument = clearStaticPreviewDocument;
     this.closeSidebarOnMobile = closeSidebarOnMobile;
@@ -83,8 +85,7 @@ export class WorkspaceRouteController {
     }
 
     const route = this.navigation.getHashRoute();
-    const nextFilePath = route.type === 'file' ? route.filePath : null;
-    const canLeave = await this.prepareActiveExcalidrawDisconnect(nextFilePath);
+    const canLeave = route.type === 'file' || await this.prepareActiveEmbedDisconnect();
     if (!canLeave) {
       return;
     }
@@ -171,11 +172,6 @@ export class WorkspaceRouteController {
     this.elements.emptyState?.classList.remove('hidden');
     this.elements.editorPage?.classList.add('hidden');
     this.elements.diffPage?.classList.add('hidden');
-    if (this.elements.previewContent) {
-      this.elements.previewContent.innerHTML = '';
-      this.elements.previewContent.dataset.renderPhase = 'ready';
-    }
-    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
     this.resetPreviewSurface();
 
     this.renderAvatars();
@@ -187,8 +183,7 @@ export class WorkspaceRouteController {
     }
   }
 
-  showDiffState() {
-    this.fileHistoryView?.hide?.();
+  prepareGitView(filePath = null) {
     this.setSessionLoadToken(this.getSessionLoadToken() + 1);
     this.clearInitialFileBootstrap();
     this.clearStaticPreviewDocument?.();
@@ -196,18 +191,18 @@ export class WorkspaceRouteController {
     this.setSession(null);
     this.resetPreviewMode();
     this.layoutController.reset();
-    this.setCurrentFilePath(null);
+    this.setCurrentFilePath(filePath);
     this.lobby.setCurrentFile(null);
-    this.fileExplorer.setActiveFile(null);
+    this.fileExplorer.setActiveFile(filePath);
+  }
+
+  showDiffState() {
+    this.fileHistoryView?.hide?.();
+    this.prepareGitView();
 
     this.elements.emptyState?.classList.add('hidden');
     this.elements.editorPage?.classList.add('hidden');
     this.elements.diffPage?.classList.remove('hidden');
-    if (this.elements.previewContent) {
-      this.elements.previewContent.innerHTML = '';
-      this.elements.previewContent.dataset.renderPhase = 'ready';
-    }
-    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
     this.resetPreviewSurface();
 
     this.elements.outlineToggle?.classList.add('hidden');
@@ -220,25 +215,11 @@ export class WorkspaceRouteController {
 
   showFileHistoryState(filePath) {
     this.gitDiffView.hide();
-    this.setSessionLoadToken(this.getSessionLoadToken() + 1);
-    this.clearInitialFileBootstrap();
-    this.clearStaticPreviewDocument?.();
-    this.workspaceCoordinator.cleanupSession();
-    this.setSession(null);
-    this.resetPreviewMode();
-    this.layoutController.reset();
-    this.setCurrentFilePath(filePath);
-    this.lobby.setCurrentFile(null);
-    this.fileExplorer.setActiveFile(filePath);
+    this.prepareGitView(filePath);
 
     this.elements.emptyState?.classList.add('hidden');
     this.elements.editorPage?.classList.add('hidden');
     this.elements.diffPage?.classList.remove('hidden');
-    if (this.elements.previewContent) {
-      this.elements.previewContent.innerHTML = '';
-      this.elements.previewContent.dataset.renderPhase = 'ready';
-    }
-    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
     this.resetPreviewSurface();
 
     this.elements.outlineToggle?.classList.add('hidden');
@@ -252,25 +233,11 @@ export class WorkspaceRouteController {
   showPreviewOnlyState(filePath) {
     this.gitDiffView.hide();
     this.fileHistoryView?.hide?.();
-    this.setSessionLoadToken(this.getSessionLoadToken() + 1);
-    this.clearInitialFileBootstrap();
-    this.clearStaticPreviewDocument?.();
-    this.workspaceCoordinator.cleanupSession();
-    this.setSession(null);
-    this.resetPreviewMode();
-    this.layoutController.reset();
-    this.setCurrentFilePath(filePath);
-    this.lobby.setCurrentFile(null);
-    this.fileExplorer.setActiveFile(filePath);
+    this.prepareGitView(filePath);
 
     this.elements.emptyState?.classList.add('hidden');
     this.elements.editorPage?.classList.remove('hidden');
     this.elements.diffPage?.classList.add('hidden');
-    if (this.elements.previewContent) {
-      this.elements.previewContent.innerHTML = '';
-      this.elements.previewContent.dataset.renderPhase = 'ready';
-    }
-    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
     this.resetPreviewSurface();
 
     this.elements.markdownToolbar?.classList.add('hidden');
@@ -281,6 +248,7 @@ export class WorkspaceRouteController {
   }
 
   async openFile(filePath, options = {}) {
+    if (!await this.prepareActiveEmbedDisconnect(filePath)) return false;
     const shouldRevealInTree = this.pendingTreeRevealPath === filePath;
     if (shouldRevealInTree) {
       this.pendingTreeRevealPath = null;
@@ -305,14 +273,16 @@ export class WorkspaceRouteController {
     return true;
   }
 
-  async prepareActiveExcalidrawDisconnect(nextFilePath = null) {
-    const activeFilePath = this.workspaceCoordinator.stateStore?.get?.('currentFilePath') || null;
-    if (
-      activeFilePath
-      && activeFilePath !== nextFilePath
-      && this.workspaceCoordinator.isExcalidrawFile?.(activeFilePath)
-    ) {
-      const canLeave = await this.excalidrawEmbed.prepareFileDisconnect(activeFilePath, {
+  async prepareActiveEmbedDisconnect(nextFilePath = null) {
+    const activeFilePath = this.workspaceCoordinator.stateStore?.currentFilePath
+      ?? this.workspaceCoordinator.stateStore?.get?.('currentFilePath')
+      ?? null;
+    if (!activeFilePath || activeFilePath === nextFilePath) return true;
+    const embed = this.workspaceCoordinator.isCanvasFile?.(activeFilePath)
+      ? this.canvasEmbed
+      : (this.workspaceCoordinator.isExcalidrawFile?.(activeFilePath) ? this.excalidrawEmbed : null);
+    if (embed) {
+      const canLeave = await embed.prepareFileDisconnect(activeFilePath, {
         timeoutMs: 10000,
       });
       if (!canLeave) {
@@ -376,6 +346,11 @@ export class WorkspaceRouteController {
   }
 
   resetPreviewSurface() {
+    if (this.elements.previewContent) {
+      this.elements.previewContent.innerHTML = '';
+      this.elements.previewContent.dataset.renderPhase = 'ready';
+    }
+    this.videoEmbed?.reconcileEmbeds(this.elements.previewContent);
     this.imageLightbox?.close?.();
     this.previewRenderer.setHydrationPaused(false);
     this.drawioEmbed.setHydrationPaused(false);