collabmd 0.1.30 → 0.1.32

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

@@ -1,4 +1,3 @@
-import { resolveApiUrl } from '../domain/runtime-paths.js';
 import {
   cancelIdleRender,
   IDLE_RENDER_TIMEOUT_MS,
@@ -7,6 +6,7 @@ import {
   shouldPreserveHydratedDiagram,
   syncAttribute,
 } from './preview-diagram-utils.js';
+import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 function datasetKeyToAttributeName(datasetKey) {
   return `data-${datasetKey.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
@@ -16,7 +16,8 @@ export class DiagramPreviewHydrator {
   constructor(renderer, {
     batchSize,
     datasetKeys,
-    fetchFn = (...args) => fetch(...args),
+    fetchFn = null,
+    loadFileSource = null,
     filePathLabel,
     requestIdleRenderFn = requestIdleRender,
     cancelIdleRenderFn = cancelIdleRender,
@@ -29,7 +30,7 @@ export class DiagramPreviewHydrator {
     this.renderer = renderer;
     this.batchSize = batchSize;
     this.datasetKeys = datasetKeys;
-    this.fetchFn = fetchFn;
+    this.loadFileSource = loadFileSource ?? this.createLegacyFileSourceLoader(fetchFn);
     this.filePathLabel = filePathLabel;
     this.requestIdleRenderFn = requestIdleRenderFn;
     this.cancelIdleRenderFn = cancelIdleRenderFn;
@@ -53,6 +54,22 @@ export class DiagramPreviewHydrator {
     this.fileInflightRequests = new Map();
   }
 
+  createLegacyFileSourceLoader(fetchFn) {
+    if (typeof fetchFn !== 'function') {
+      return null;
+    }
+
+    return async (filePath) => {
+      const response = await fetchFn(resolveApiUrl(`/file?path=${encodeURIComponent(filePath)}`));
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok || payload?.ok === false) {
+        throw new Error(payload?.error || `Failed to load ${this.filePathLabel.toLowerCase()} source`);
+      }
+
+      return String(payload?.content ?? '');
+    };
+  }
+
   destroy() {
     this.cancelHydration();
     this.preservedShells.clear();
@@ -359,19 +376,11 @@ export class DiagramPreviewHydrator {
       return this.fileInflightRequests.get(target);
     }
 
-    const request = this.fetchFn(resolveApiUrl(`/file?path=${encodeURIComponent(target)}`), {
-      headers: {
-        Accept: 'application/json',
-      },
-    })
-      .then(async (response) => {
-        const data = await response.json().catch(() => null);
-        if (!response.ok || typeof data?.content !== 'string') {
-          throw new Error(data?.error || `Failed to load ${target}`);
-        }
+    if (typeof this.loadFileSource !== 'function') {
+      throw new Error(`Missing ${this.filePathLabel} source loader`);
+    }
 
-        return data.content;
-      })
+    const request = this.loadFileSource(target)
       .finally(() => {
         this.fileInflightRequests.delete(target);
       });

package/src/client/application/markdown-frontmatter.js

@@ -2,13 +2,7 @@ import yaml from 'js-yaml';
 
 import { escapeHtml } from '../domain/vault-utils.js';
 
-function getDocumentNewline(markdownText = '') {
-  return String(markdownText).includes('\r\n') ? '\r\n' : '\n';
-}
-
-function normalizeLine(line = '') {
-  return String(line).replace(/\r$/, '');
-}
+export { extractYamlFrontmatter } from '../../domain/yaml-frontmatter.js';
 
 function isPlainObject(value) {
   return Object.prototype.toString.call(value) === '[object Object]';
@@ -73,55 +67,6 @@ function createHiddenSummary(entries) {
   return `${entries.length} propert${entries.length === 1 ? 'y' : 'ies'} hidden`;
 }
 
-export function extractYamlFrontmatter(markdownText = '') {
-  const normalizedMarkdown = String(markdownText ?? '');
-  if (!normalizedMarkdown.startsWith('---')) {
-    return null;
-  }
-
-  const newline = getDocumentNewline(normalizedMarkdown);
-  const lines = normalizedMarkdown.split(/\r?\n/);
-  if (normalizeLine(lines[0]) !== '---') {
-    return null;
-  }
-
-  let closingIndex = -1;
-  for (let index = 1; index < lines.length; index += 1) {
-    if (normalizeLine(lines[index]) === '---') {
-      closingIndex = index;
-      break;
-    }
-  }
-
-  if (closingIndex < 0) {
-    return null;
-  }
-
-  const rawFrontmatter = lines.slice(0, closingIndex + 1).join(newline);
-  const frontmatterSource = lines.slice(1, closingIndex).join(newline);
-
-  let parsedData;
-  try {
-    parsedData = yaml.load(frontmatterSource || '{}');
-  } catch {
-    return null;
-  }
-
-  const lineCount = closingIndex + 1;
-  const bodyMarkdown = [
-    ...Array.from({ length: lineCount }, () => ''),
-    ...lines.slice(closingIndex + 1),
-  ].join(newline);
-
-  return {
-    bodyMarkdown,
-    data: parsedData ?? {},
-    endLine: lineCount,
-    rawFrontmatter,
-    startLine: 1,
-  };
-}
-
 export function renderFrontmatterBlock(frontmatter, {
   collapsed = false,
   interactive = false,

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

@@ -12,7 +12,7 @@ import {
 } from './preview-diagram-utils.js';
 
 export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
-  constructor(renderer) {
+  constructor(renderer, { fetchFn = null, loadFileSource = null } = {}) {
     super(renderer, {
       batchSize: MERMAID_BATCH_SIZE,
       datasetKeys: {
@@ -26,7 +26,9 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
         sourceLineEnd: 'sourceLineEnd',
         target: 'mermaidTarget',
       },
+      fetchFn,
       filePathLabel: 'Mermaid',
+      loadFileSource,
       shellClassName: 'mermaid-shell',
       sourceClassName: 'mermaid-source',
     });
@@ -35,6 +37,101 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     this.loader = null;
     this.runtime = null;
     this.shellRefits = new WeakMap();
+    this.activeMaximizedShell = null;
+    this.maximizedRoot = null;
+  }
+
+  destroy() {
+    this.cancelHydration();
+    this.preservedShells.clear();
+    this.clearActiveShell();
+    this.maximizedRoot?.remove();
+    this.maximizedRoot = null;
+  }
+
+  cancelHydration() {
+    super.cancelHydration();
+
+    const activeShell = this.syncActiveShell();
+    if (!activeShell) {
+      return;
+    }
+
+    this.restoreShellMount(activeShell);
+    activeShell.classList.remove('is-maximized');
+    this.clearActiveShell();
+    document.body.classList.remove('mermaid-maximized-open');
+  }
+
+  clearActiveShell() {
+    this.activeMaximizedShell = null;
+    if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
+      this.maximizedRoot.hidden = true;
+    }
+  }
+
+  syncActiveShell() {
+    if (
+      this.activeMaximizedShell?.isConnected
+      && this.activeMaximizedShell.classList.contains('is-maximized')
+    ) {
+      return this.activeMaximizedShell;
+    }
+
+    this.clearActiveShell();
+    return null;
+  }
+
+  ensureMaximizedRoot() {
+    if (this.maximizedRoot?.isConnected && this.maximizedRoot.parentElement === document.body) {
+      return this.maximizedRoot;
+    }
+
+    let maximizedRoot = document.body.querySelector('[data-mermaid-maximized-root="true"]');
+    if (!maximizedRoot) {
+      maximizedRoot = document.createElement('div');
+      maximizedRoot.dataset.mermaidMaximizedRoot = 'true';
+      maximizedRoot.className = 'mermaid-maximized-root';
+      document.body.appendChild(maximizedRoot);
+    }
+
+    this.maximizedRoot = maximizedRoot;
+    return maximizedRoot;
+  }
+
+  mountShellInMaximizedRoot(shell) {
+    if (!shell) {
+      return;
+    }
+
+    const maximizedRoot = this.ensureMaximizedRoot();
+    maximizedRoot.hidden = false;
+    shell._mermaidRestoreParent = shell.parentElement || null;
+    shell._mermaidRestoreNextSibling = shell.nextSibling || null;
+    maximizedRoot.appendChild(shell);
+  }
+
+  restoreShellMount(shell) {
+    if (!shell) {
+      return;
+    }
+
+    const restoreParent = shell._mermaidRestoreParent;
+    const restoreNextSibling = shell._mermaidRestoreNextSibling;
+    if (restoreParent?.isConnected) {
+      if (restoreNextSibling?.parentElement === restoreParent) {
+        restoreParent.insertBefore(shell, restoreNextSibling);
+      } else {
+        restoreParent.appendChild(shell);
+      }
+    }
+
+    shell._mermaidRestoreParent = null;
+    shell._mermaidRestoreNextSibling = null;
+
+    if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
+      this.maximizedRoot.hidden = true;
+    }
   }
 
   applyTheme(theme) {
@@ -111,6 +208,7 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     if (restoredMaximizedShell) {
       document.body.classList.add('mermaid-maximized-open');
     }
+    this.syncActiveShell();
   }
 
   async prepareHydrationBatch() {
@@ -240,6 +338,10 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     }
 
     const hydratedShells = Array.from(previewElement.querySelectorAll('.mermaid-shell[data-mermaid-hydrated="true"]'));
+    const activeShell = this.syncActiveShell();
+    if (activeShell && !hydratedShells.includes(activeShell)) {
+      hydratedShells.push(activeShell);
+    }
     if (hydratedShells.length === 0) {
       return;
     }
@@ -447,11 +549,14 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
     };
 
     const setMaximizedState = (shouldMaximize) => {
-      const previewElement = this.renderer.previewElement;
       if (shouldMaximize) {
-        const activeContainer = previewElement.querySelector('.mermaid-shell.is-maximized');
+        const activeContainer = this.syncActiveShell();
         if (activeContainer && activeContainer !== shell) {
+          this.restoreShellMount(activeContainer);
           activeContainer.classList.remove('is-maximized');
+          if (this.activeMaximizedShell === activeContainer) {
+            this.clearActiveShell();
+          }
           this.shellRefits.get(activeContainer)?.();
           const activeButton = activeContainer.querySelector('.mermaid-maximize-btn');
           if (activeButton) {
@@ -460,15 +565,21 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
             activeButton.title = 'Maximize diagram';
           }
         }
+        this.mountShellInMaximizedRoot(shell);
         shell.classList.add('is-maximized');
+        this.activeMaximizedShell = shell;
         document.body.classList.add('mermaid-maximized-open');
         syncMaximizeButtonState();
         scheduleResetZoomToFit({ force: true });
         return;
       }
 
+      this.restoreShellMount(shell);
       shell.classList.remove('is-maximized');
-      if (!previewElement.querySelector('.mermaid-shell.is-maximized')) {
+      if (this.activeMaximizedShell === shell) {
+        this.clearActiveShell();
+      }
+      if (!this.syncActiveShell()) {
         document.body.classList.remove('mermaid-maximized-open');
       }
       syncMaximizeButtonState();
@@ -548,6 +659,12 @@ export class MermaidPreviewHydrator extends DiagramPreviewHydrator {
   }
 
   scheduleActiveRefit() {
+    const activeShell = this.syncActiveShell();
+    if (activeShell) {
+      this.shellRefits.get(activeShell)?.();
+      return;
+    }
+
     const previewElement = this.renderer.previewElement;
     if (!previewElement) {
       return;

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

@@ -1,6 +1,5 @@
 import { clamp } from '../domain/vault-utils.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
-import { resolveApiUrl } from '../domain/runtime-paths.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
   createPlantUmlPlaceholderCard,
@@ -13,7 +12,7 @@ import {
 } from './preview-diagram-utils.js';
 
 export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
-  constructor(renderer) {
+  constructor(renderer, { loadFileSource = null, renderClient = null } = {}) {
     super(renderer, {
       batchSize: PLANTUML_BATCH_SIZE,
       datasetKeys: {
@@ -28,10 +27,12 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
         target: 'plantumlTarget',
       },
       filePathLabel: 'PlantUML',
+      loadFileSource,
       shellClassName: 'plantuml-shell',
       sourceClassName: 'plantuml-source',
     });
     this.renderer = renderer;
+    this.renderClient = renderClient;
     this.svgCache = new Map();
     this.svgInflightRequests = new Map();
     this.shellRefits = new WeakMap();
@@ -206,20 +207,9 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       return this.svgInflightRequests.get(cacheKey);
     }
 
-    const request = fetch(resolveApiUrl('/plantuml/render'), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ source }),
-    })
-      .then(async (response) => {
-        const data = await response.json().catch(() => null);
-        if (!response.ok || !data?.ok || typeof data.svg !== 'string') {
-          throw new Error(data?.error || 'Failed to render PlantUML');
-        }
-
-        const sanitized = sanitizeSvgMarkup(data.svg);
+    const request = this.renderClient.renderSvg(source)
+      .then((svgMarkup) => {
+        const sanitized = sanitizeSvgMarkup(svgMarkup);
         this.svgCache.set(cacheKey, sanitized);
         return sanitized;
       })

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

@@ -84,6 +84,18 @@ function createDrawioPlaceholder({ embedKey, label, target }) {
   return `<span class="drawio-embed-placeholder diagram-preview-shell" data-drawio-key="${escapeHtml(embedKey)}" data-drawio-target="${escapeHtml(target)}" data-drawio-label="${escapeHtml(label)}" data-drawio-mode="view"><span class="drawio-embed-placeholder-card diagram-preview-placeholder-card"><span class="drawio-embed-placeholder-copy diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads when visible</span></span><button type="button" class="drawio-embed-placeholder-btn diagram-preview-placeholder-btn" data-drawio-key="${escapeHtml(embedKey)}">Load diagram</button></span></span>`;
 }
 
+function createBasePlaceholder({ key, sourceAttributes, sourceFilePath, sourceText, viewName = '' }) {
+  const sourceFileAttribute = sourceFilePath ? ` data-base-source-path="${escapeHtml(sourceFilePath)}"` : '';
+  const viewAttribute = viewName ? ` data-base-view="${escapeHtml(viewName)}"` : '';
+  return `<div class="bases-embed-placeholder diagram-preview-shell"${sourceAttributes} data-base-key="${escapeHtml(key)}" data-base-source="${escapeHtml(sourceText)}"${sourceFileAttribute}${viewAttribute}><div class="diagram-preview-placeholder-card"><div class="diagram-preview-placeholder-copy"><strong>Base view</strong><span>Loads query results when preview renders</span></div></div></div>`;
+}
+
+function createBaseFileEmbedPlaceholder({ embedKey, label, target, viewName = '', sourceFilePath = '' }) {
+  const sourceFileAttribute = sourceFilePath ? ` data-base-source-path="${escapeHtml(sourceFilePath)}"` : '';
+  const viewAttribute = viewName ? ` data-base-view="${escapeHtml(viewName)}"` : '';
+  return `<span class="bases-embed-placeholder diagram-preview-shell" data-base-key="${escapeHtml(embedKey)}" data-base-path="${escapeHtml(target)}" data-base-label="${escapeHtml(label)}"${viewAttribute}${sourceFileAttribute}><span class="diagram-preview-placeholder-card"><span class="diagram-preview-placeholder-copy"><strong>${escapeHtml(label)}</strong><span>Loads query results when preview renders</span></span></span></span>`;
+}
+
 function getDirectVideoMimeType(pathname = '') {
   const match = pathname.toLowerCase().match(/\.(mp4|ogg|webm)$/i);
   if (!match) {
@@ -228,13 +240,15 @@ function resolveLocalAttachmentUrl(source = '', {
 }
 
 function renderInlineWikiText(content, {
+  baseEmbedCounts,
   drawioEmbedCounts,
   excalidrawEmbedCounts,
   fileList,
   mermaidEmbedCounts,
   plantUmlEmbedCounts,
+  sourceFilePath = '',
 }) {
-  const regex = /!\[\[([^\]|]+\.(?:excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
+  const regex = /!\[\[([^\]|#]+\.(?:base|excalidraw|drawio|mmd|mermaid|puml|plantuml))(?:#([^\]|]+))?(?:\|([^\]]+))?\]\]|\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/gi;
   let lastIndex = 0;
   let html = '';
   let match;
@@ -246,9 +260,20 @@ function renderInlineWikiText(content, {
 
     if (match[1]) {
       const target = match[1].trim();
-      const label = (match[2] || target).trim();
-
-      if (/\.excalidraw$/i.test(target)) {
+      const viewName = (match[2] || '').trim();
+      const label = (match[3] || target).trim();
+
+      if (/\.base$/i.test(target)) {
+        const occurrenceIndex = baseEmbedCounts.get(`${target}#${viewName}`) ?? 0;
+        baseEmbedCounts.set(`${target}#${viewName}`, occurrenceIndex + 1);
+        html += createBaseFileEmbedPlaceholder({
+          embedKey: `${target}#${viewName || 'default'}#${occurrenceIndex}`,
+          label: normalizePreviewTypography(label.replace(/\.base$/i, '')),
+          sourceFilePath,
+          target,
+          viewName,
+        });
+      } else if (/\.excalidraw$/i.test(target)) {
         const occurrenceIndex = excalidrawEmbedCounts.get(target) ?? 0;
         excalidrawEmbedCounts.set(target, occurrenceIndex + 1);
         html += createExcalidrawPlaceholder({
@@ -282,8 +307,8 @@ function renderInlineWikiText(content, {
         });
       }
     } else {
-      const target = match[3].trim();
-      const display = (match[4] || match[3]).trim();
+      const target = match[4].trim();
+      const display = (match[5] || match[4]).trim();
       const resolved = resolveWikiTarget(target, fileList);
       const classes = resolved ? 'wiki-link' : 'wiki-link wiki-link-new';
       const title = resolved ? normalizePreviewTypography(display) : `Create "${target}"`;
@@ -344,6 +369,7 @@ function createMarkdownRenderer(fileList = [], {
 
   const drawioEmbedCounts = new Map();
   const excalidrawEmbedCounts = new Map();
+  const baseCounts = new Map();
   const mermaidCounts = new Map();
   const mermaidEmbedCounts = new Map();
   const plantUmlCounts = new Map();
@@ -389,6 +415,18 @@ function createMarkdownRenderer(fileList = [], {
       });
     }
 
+    if (info === 'base') {
+      const sourceHash = hashString(token.content);
+      const occurrenceIndex = baseCounts.get(sourceHash) ?? 0;
+      baseCounts.set(sourceHash, occurrenceIndex + 1);
+      return createBasePlaceholder({
+        key: `base-${sourceHash}-${occurrenceIndex}`,
+        sourceAttributes,
+        sourceFilePath,
+        sourceText: token.content,
+      });
+    }
+
     const rendered = renderToken(fallbackFence, tokens, index, options, env, self);
     if (!sourceLine) {
       return rendered;
@@ -416,30 +454,36 @@ function createMarkdownRenderer(fileList = [], {
 
     if (content.startsWith('[x] ') || content.startsWith('[X] ')) {
       return `<input type="checkbox" checked data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+        baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
+        sourceFilePath,
       })}`;
     }
 
     if (content.startsWith('[ ] ')) {
       return `<input type="checkbox" data-task-checkbox="true"> ${renderInlineWikiText(content.slice(4), {
+        baseEmbedCounts: baseCounts,
         drawioEmbedCounts,
         excalidrawEmbedCounts,
         fileList,
         mermaidEmbedCounts,
         plantUmlEmbedCounts,
+        sourceFilePath,
       })}`;
     }
 
     return renderInlineWikiText(content, {
+      baseEmbedCounts: baseCounts,
       drawioEmbedCounts,
       excalidrawEmbedCounts,
       fileList,
       mermaidEmbedCounts,
       plantUmlEmbedCounts,
+      sourceFilePath,
     });
   };
 

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

@@ -10,23 +10,27 @@ export class PreviewRenderer {
   constructor({
     getContent,
     getFileList,
+    loadFileSource = null,
     getSourceFilePath,
     onAfterRenderCommit,
     onBeforeRenderCommit,
     onPreviewLayoutChange,
     onRenderComplete,
     outlineController,
+    plantUmlRenderClient = null,
     previewContainer,
     previewElement,
   }) {
     this.getContent = getContent;
     this.getFileList = getFileList;
+    this.loadFileSource = loadFileSource;
     this.getSourceFilePath = getSourceFilePath;
     this.onAfterRenderCommit = onAfterRenderCommit;
     this.onBeforeRenderCommit = onBeforeRenderCommit;
     this.onPreviewLayoutChange = onPreviewLayoutChange;
     this.onRenderComplete = onRenderComplete;
     this.outlineController = outlineController;
+    this.plantUmlRenderClient = plantUmlRenderClient;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
     this.renderHost = null;
@@ -78,8 +82,13 @@ export class PreviewRenderer {
       this.plantUmlHydrator.scheduleActiveRefit();
     };
 
-    this.mermaidHydrator = new MermaidPreviewHydrator(this);
-    this.plantUmlHydrator = new PlantUmlPreviewHydrator(this);
+    this.mermaidHydrator = new MermaidPreviewHydrator(this, {
+      loadFileSource,
+    });
+    this.plantUmlHydrator = new PlantUmlPreviewHydrator(this, {
+      loadFileSource,
+      renderClient: plantUmlRenderClient,
+    });
     this.renderScheduler = new PreviewRenderScheduler({ getRenderProfileFn: getRenderProfile });
     this.renderExecutor = new PreviewRenderExecutor({
       attachmentApiPath: resolveApiUrl('/attachment'),

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

@@ -1,4 +1,5 @@
 import {
+  isBaseFilePath,
   isMarkdownFilePath,
   supportsBacklinksForFilePath,
 } from '../../domain/file-kind.js';
@@ -12,6 +13,7 @@ export class WorkspaceChromeController {
     onRenderDrawioPreview,
     onFileOpenError,
     onFileOpenReady,
+    onRenderBasePreview,
     onRenderExcalidrawPreview,
     onRenderImagePreview,
     onSyncWrapToggle,
@@ -24,23 +26,24 @@ export class WorkspaceChromeController {
     showEditorLoading,
     stateStore,
   }) {
-    this.beginDocumentLoad = beginDocumentLoad;
-    this.getDisplayName = getDisplayName;
-    this.loadBacklinks = loadBacklinks;
-    this.onBeforeFileOpen = onBeforeFileOpen;
-    this.onRenderDrawioPreview = onRenderDrawioPreview;
-    this.onFileOpenError = onFileOpenError;
-    this.onFileOpenReady = onFileOpenReady;
-    this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
-    this.onRenderImagePreview = onRenderImagePreview;
-    this.onSyncWrapToggle = onSyncWrapToggle;
-    this.onUpdateActiveFile = onUpdateActiveFile;
-    this.onUpdateCurrentFile = onUpdateCurrentFile;
-    this.onUpdateLobbyCurrentFile = onUpdateLobbyCurrentFile;
-    this.onUpdateVisibleChrome = onUpdateVisibleChrome;
-    this.onViewModeReset = onViewModeReset;
-    this.renderPresence = renderPresence;
-    this.showEditorLoading = showEditorLoading;
+    this.beginDocumentLoad = beginDocumentLoad ?? (() => {});
+    this.getDisplayName = getDisplayName ?? ((filePath) => filePath);
+    this.loadBacklinks = loadBacklinks ?? (() => {});
+    this.onBeforeFileOpen = onBeforeFileOpen ?? (() => {});
+    this.onRenderDrawioPreview = onRenderDrawioPreview ?? (() => {});
+    this.onFileOpenError = onFileOpenError ?? (() => {});
+    this.onFileOpenReady = onFileOpenReady ?? (() => {});
+    this.onRenderBasePreview = onRenderBasePreview ?? (() => {});
+    this.onRenderExcalidrawPreview = onRenderExcalidrawPreview ?? (() => {});
+    this.onRenderImagePreview = onRenderImagePreview ?? (() => {});
+    this.onSyncWrapToggle = onSyncWrapToggle ?? (() => {});
+    this.onUpdateActiveFile = onUpdateActiveFile ?? (() => {});
+    this.onUpdateCurrentFile = onUpdateCurrentFile ?? (() => {});
+    this.onUpdateLobbyCurrentFile = onUpdateLobbyCurrentFile ?? (() => {});
+    this.onUpdateVisibleChrome = onUpdateVisibleChrome ?? (() => {});
+    this.onViewModeReset = onViewModeReset ?? (() => {});
+    this.renderPresence = renderPresence ?? (() => {});
+    this.showEditorLoading = showEditorLoading ?? (() => {});
     this.stateStore = stateStore;
   }
 
@@ -75,16 +78,19 @@ export class WorkspaceChromeController {
   }
 
   finalizeFileOpen({
+    isBase = false,
     isDrawio = false,
     filePath,
     isExcalidraw = false,
     isImage = false,
-    session = null,
     supportsBacklinks,
   }) {
     if (isExcalidraw) {
       this.onRenderExcalidrawPreview(filePath);
     }
+    if (isBase || isBaseFilePath(filePath)) {
+      this.onRenderBasePreview(filePath);
+    }
     if (isDrawio) {
       this.onRenderDrawioPreview(filePath);
     }
@@ -92,7 +98,7 @@ export class WorkspaceChromeController {
       this.onRenderImagePreview(filePath);
     }
     this.onSyncWrapToggle();
-    if (supportsBacklinks && session) {
+    if (supportsBacklinks) {
       this.loadBacklinks(filePath);
     }
   }