collabmd 0.1.44 → 0.1.46

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

@@ -32,18 +32,12 @@ 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.clearPreservedShells();
-  }
-
   cancelHydration({ preserveActiveShell = false } = {}) {
     super.cancelHydration();
     if (!preserveActiveShell) {
@@ -51,10 +45,6 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     }
   }
 
-  scheduleActiveRefit() {
-    this.diagramChrome?.scheduleActiveRefitOnNextFrame?.();
-  }
-
   handleReconcile({ restoredMaximizedShell }) {
     if (restoredMaximizedShell) {
       document.body.classList.add('plantuml-maximized-open');

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

@@ -8,6 +8,37 @@ export {
   requestIdleRender,
 } from '../browser-utils.js';
 
+export function encodeSvgDataUrl(svgMarkup) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
+}
+
+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;
+  });
+}
+
+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));
+
+  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) {
   const nextValue = source.getAttribute(name);
   if (nextValue === null) {
@@ -62,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),
   };
 }

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

@@ -5,7 +5,8 @@ import { isImageAttachmentFilePath } from '../../domain/file-kind.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, renderFrontmatterBlock } from './markdown-frontmatter.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({

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

@@ -91,8 +91,8 @@ export class PreviewRenderer {
     };
 
     this.handleWindowResize = () => {
-      this.mermaidHydrator.scheduleActiveRefit();
-      this.plantUmlHydrator.scheduleActiveRefit();
+      this.scheduleActiveMermaidRefit();
+      this.scheduleActivePlantUmlRefit();
     };
 
     this.diagramChrome = new DiagramChrome({

package/src/client/application/quick-switcher-loader.js

@@ -22,8 +22,10 @@ export async function ensureQuickSwitcherInstance(host) {
   if (!host.quickSwitcher) {
     host.quickSwitcher = new QuickSwitcherController({
       getFileList: () => host.fileExplorer.flatFiles,
+      getFileMetadata: () => host.fileExplorer.fileEntries,
+      getRecentFiles: () => host.preferences?.getRecentFiles?.() ?? [],
       getSearchConfig: () => host.runtimeConfig.search ?? {},
-      onFileSelect: (filePath) => host.handleFileSelection(filePath, {
+      onFileSelect: (filePath) => host.workspaceRouteController.handleFileSelection(filePath, {
         closeSidebarOnMobile: true,
         revealInTree: true,
       }),

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

@@ -0,0 +1,395 @@
+import { resolveAppPath } from '../domain/runtime-paths.js';
+import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
+
+const SYNC_DEBOUNCE_MS = 300;
+const FRAME_FIT_ATTEMPTS = 20;
+const FRAME_FIT_INTERVAL_MS = 50;
+
+function decodeViewKey(hash = '') {
+  const normalized = String(hash ?? '').replace(/^#/, '');
+  if (!normalized) {
+    return '';
+  }
+
+  try {
+    return decodeURIComponent(normalized);
+  } catch {
+    return normalized;
+  }
+}
+
+function readFrameState(iframe) {
+  try {
+    const frameDocument = iframe?.contentDocument;
+    const layer = frameDocument?.querySelector('.joint-layers');
+    const viewport = frameDocument?.querySelector('#diagram-viewport');
+    const zoom = layer ? new DOMMatrixReadOnly(getComputedStyle(layer).transform).a : 0;
+    return {
+      scrollLeft: viewport?.scrollLeft ?? 0,
+      scrollTop: viewport?.scrollTop ?? 0,
+      zoom: Number.isFinite(zoom) && zoom > 0 ? zoom : null,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export class StructurizrPreviewController {
+  constructor({
+    enabled = false,
+    syncWorkspace,
+  }) {
+    this.enabled = Boolean(enabled);
+    this.syncWorkspace = syncWorkspace;
+    this.iframe = null;
+    this.shell = null;
+    this.status = null;
+    this.maximizeButton = null;
+    this.filePath = null;
+    this.viewKey = '';
+    this.lastVersion = null;
+    this.syncTimer = null;
+    this.syncToken = 0;
+    this.frameFitTimer = null;
+    this.frameHost = null;
+    this.pendingIframe = null;
+    this.pendingVersion = null;
+    this.handleFrameLoad = (event) => {
+      const iframe = event?.currentTarget || this.iframe;
+      if (!iframe) {
+        return;
+      }
+
+      try {
+        if (iframe === this.iframe) {
+          this.viewKey = decodeViewKey(iframe.contentWindow?.location?.hash || '') || this.viewKey;
+          iframe.contentWindow?.addEventListener('hashchange', this.handleFrameHashChange);
+        }
+        this.prepareFrame(iframe);
+      } catch {
+        if (iframe === this.pendingIframe) {
+          this.commitPendingIframe(iframe);
+        }
+      }
+    };
+    this.handleFrameHashChange = () => {
+      try {
+        this.viewKey = decodeViewKey(this.iframe?.contentWindow?.location?.hash || '') || this.viewKey;
+      } catch {
+        // Ignore inaccessible frame locations.
+      }
+    };
+  }
+
+  setStatus(message = '', { error = false } = {}) {
+    if (!this.status) {
+      return;
+    }
+
+    this.status.textContent = message;
+    this.status.hidden = !message;
+    this.status.classList.toggle('is-error', error);
+  }
+
+  prepareFrame(iframe = this.iframe) {
+    const frameDocument = iframe?.contentDocument;
+    if (!frameDocument?.head) {
+      if (iframe === this.pendingIframe) {
+        this.commitPendingIframe(iframe);
+      }
+      return;
+    }
+
+    iframe.contentWindow?.dispatchEvent(new Event('resize'));
+    this.scheduleFrameFit(iframe, iframe === this.pendingIframe ? () => this.commitPendingIframe(iframe) : null);
+  }
+
+  fitFrameToCanvas(iframe = this.iframe) {
+    const frameDocument = iframe?.contentDocument;
+    const canvas = frameDocument?.querySelector('#diagram-canvas');
+    if (!canvas) {
+      return false;
+    }
+    if (iframe === this.pendingIframe && !frameDocument.querySelector('.joint-layers')) {
+      return false;
+    }
+
+    try {
+      const diagram = iframe?.contentWindow?.structurizr?.diagram;
+      diagram?.setEmbedded?.(true);
+      diagram?.resize?.();
+      diagram?.zoomToWidthOrHeight?.();
+    } catch {
+      // The frame can be cross-origin in custom deployments; the CSS crop still applies.
+    }
+
+    const { width, height } = canvas.getBoundingClientRect();
+    if (!width || !height) {
+      return false;
+    }
+
+    return true;
+  }
+
+  disposeFrame(iframe) {
+    if (!iframe) {
+      return;
+    }
+
+    try {
+      iframe.contentWindow?.removeEventListener?.('hashchange', this.handleFrameHashChange);
+    } catch {
+      // Ignore inaccessible frame windows during cleanup.
+    }
+    iframe.removeEventListener('load', this.handleFrameLoad);
+    iframe.remove();
+  }
+
+  discardPendingIframe() {
+    if (!this.pendingIframe) {
+      return;
+    }
+
+    clearTimeout(this.frameFitTimer);
+    this.frameFitTimer = null;
+    this.disposeFrame(this.pendingIframe);
+    this.pendingIframe = null;
+    this.pendingVersion = null;
+  }
+
+  commitPendingIframe(iframe) {
+    if (iframe !== this.pendingIframe || !this.shell?.isConnected) {
+      return;
+    }
+
+    const previousIframe = this.iframe;
+    const nextVersion = this.pendingVersion;
+    const frameState = readFrameState(previousIframe);
+    this.pendingIframe = null;
+    this.pendingVersion = null;
+    if (frameState?.zoom) {
+      try {
+        iframe.contentWindow?.structurizr?.diagram?.zoomTo?.(frameState.zoom);
+      } catch {
+        // Keep the new diagram usable when a custom viewer does not expose zoom controls.
+      }
+    }
+    try {
+      const viewport = iframe.contentDocument?.querySelector('#diagram-viewport');
+      if (viewport && frameState) {
+        viewport.scrollLeft = frameState.scrollLeft;
+        viewport.scrollTop = frameState.scrollTop;
+      }
+    } catch {
+      // Cross-origin custom viewers cannot restore viewport coordinates.
+    }
+    this.disposeFrame(previousIframe);
+    iframe.style.visibility = '';
+    iframe.style.pointerEvents = '';
+    iframe.removeAttribute('aria-hidden');
+    this.iframe = iframe;
+    this.lastVersion = nextVersion;
+
+    try {
+      this.viewKey = decodeViewKey(iframe.contentWindow?.location?.hash || '') || this.viewKey;
+      iframe.contentWindow?.addEventListener('hashchange', this.handleFrameHashChange);
+    } catch {
+      // Cross-origin deployments cannot expose the frame hash.
+    }
+    this.setStatus('');
+  }
+
+  createIframe() {
+    const iframe = document.createElement('iframe');
+    iframe.className = 'structurizr-preview-iframe';
+    iframe.title = 'Structurizr architecture diagram';
+    iframe.loading = 'eager';
+    iframe.referrerPolicy = 'same-origin';
+    iframe.addEventListener('load', this.handleFrameLoad);
+    return iframe;
+  }
+
+  syncMaximizeButtonState() {
+    if (!this.maximizeButton || !this.shell) {
+      return;
+    }
+
+    const isMaximized = this.shell.classList.contains('is-maximized');
+    setDiagramActionButtonIcon(this.maximizeButton, isMaximized ? 'restore' : 'maximize');
+    const label = isMaximized ? 'Restore diagram size' : 'Maximize diagram';
+    this.maximizeButton.title = label;
+    this.maximizeButton.setAttribute('aria-label', label);
+  }
+
+  setMaximized(shouldMaximize) {
+    const isMaximized = Boolean(shouldMaximize);
+    this.shell?.classList.toggle('is-maximized', isMaximized);
+    document.body?.classList.toggle('structurizr-maximized-open', isMaximized);
+    this.syncMaximizeButtonState();
+    this.iframe?.contentWindow?.dispatchEvent(new Event('resize'));
+  }
+
+  scheduleFrameFit(iframe = this.iframe, onReady = null) {
+    if (!iframe) {
+      return;
+    }
+
+    clearTimeout(this.frameFitTimer);
+    let attempts = 0;
+    const fit = () => {
+      this.frameFitTimer = null;
+      if (this.fitFrameToCanvas(iframe) || attempts >= FRAME_FIT_ATTEMPTS) {
+        onReady?.();
+        return;
+      }
+
+      attempts += 1;
+      this.frameFitTimer = setTimeout(fit, FRAME_FIT_INTERVAL_MS);
+    };
+    fit();
+  }
+
+  mount(renderHost, filePath) {
+    const fileChanged = Boolean(this.filePath && this.filePath !== filePath);
+    if (fileChanged) {
+      this.setMaximized(false);
+      this.discardPendingIframe();
+      this.disposeFrame(this.iframe);
+      this.iframe = null;
+      this.lastVersion = null;
+      this.viewKey = '';
+    }
+
+    this.filePath = filePath;
+
+    if (this.shell?.isConnected && this.shell.parentElement === renderHost) {
+      return;
+    }
+
+    clearTimeout(this.frameFitTimer);
+    this.frameFitTimer = null;
+    this.shell = document.createElement('section');
+    this.shell.className = 'structurizr-preview-shell diagram-preview-shell';
+    this.shell.dataset.structurizrPreview = 'true';
+
+    const header = document.createElement('div');
+    header.className = 'structurizr-preview-header diagram-preview-toolbar';
+
+    const label = document.createElement('span');
+    label.className = 'structurizr-preview-label';
+    label.textContent = String(filePath).split('/').pop()?.replace(/\.dsl$/i, '') || 'Structurizr';
+
+    this.maximizeButton = document.createElement('button');
+    this.maximizeButton.type = 'button';
+    this.maximizeButton.className = 'structurizr-preview-btn ui-preview-action ui-preview-action--icon-only';
+    this.maximizeButton.dataset.action = 'toggle-maximize';
+    this.maximizeButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.setMaximized(!this.shell?.classList.contains('is-maximized'));
+    });
+    header.append(label, this.maximizeButton);
+    this.syncMaximizeButtonState();
+
+    this.status = document.createElement('div');
+    this.status.className = 'structurizr-preview-status';
+    this.status.setAttribute('aria-live', 'polite');
+    this.status.setAttribute('role', 'status');
+    this.status.hidden = true;
+
+    this.frameHost = document.createElement('div');
+    this.frameHost.className = 'structurizr-preview-stage';
+    this.shell.append(header, this.status, this.frameHost);
+
+    renderHost?.replaceChildren(this.shell);
+    this.iframe = null;
+    this.pendingIframe = null;
+    this.pendingVersion = null;
+    this.lastVersion = null;
+  }
+
+  async render({ filePath, renderHost, source = '' }) {
+    this.mount(renderHost, filePath);
+    return this.syncNow({ filePath, source: String(source ?? '') });
+  }
+
+  queueSync({ filePath, source = '' } = {}) {
+    clearTimeout(this.syncTimer);
+    this.syncTimer = setTimeout(() => {
+      this.syncTimer = null;
+      void this.syncNow({ filePath, source: String(source ?? '') });
+    }, SYNC_DEBOUNCE_MS);
+  }
+
+  async syncNow({ filePath, source = '' } = {}) {
+    if (filePath !== this.filePath) {
+      return false;
+    }
+
+    const token = ++this.syncToken;
+    if (!this.enabled) {
+      this.setStatus('Structurizr preview is not configured. Start CollabMD with --local-structurizr.', { error: true });
+      return false;
+    }
+
+    if (!this.iframe) {
+      this.setStatus('Validating Structurizr workspace…');
+    }
+
+    try {
+      const payload = await this.syncWorkspace({ path: filePath, source });
+      if (token !== this.syncToken || filePath !== this.filePath) {
+        return false;
+      }
+
+      const nextVersion = payload?.version || null;
+      const route = resolveAppPath('/workspace/1/diagrams');
+      const hash = this.viewKey ? `#${encodeURIComponent(this.viewKey)}` : '';
+      if (!this.iframe) {
+        const iframe = this.createIframe();
+        this.iframe = iframe;
+        this.frameHost?.appendChild(iframe);
+        iframe.src = `${route}${hash}`;
+        this.lastVersion = nextVersion;
+      } else if (nextVersion !== this.lastVersion) {
+        this.discardPendingIframe();
+        const iframe = this.createIframe();
+        iframe.style.visibility = 'hidden';
+        iframe.style.pointerEvents = 'none';
+        iframe.setAttribute('aria-hidden', 'true');
+        this.pendingIframe = iframe;
+        this.pendingVersion = nextVersion;
+        this.frameHost?.appendChild(iframe);
+        iframe.src = `${route}${hash}`;
+      }
+
+      this.setStatus('');
+      return true;
+    } catch (error) {
+      if (token !== this.syncToken || filePath !== this.filePath) {
+        return false;
+      }
+
+      this.setStatus(error?.message || 'Failed to load Structurizr workspace.', { error: true });
+      return false;
+    }
+  }
+
+  reset() {
+    this.setMaximized(false);
+    clearTimeout(this.syncTimer);
+    this.syncTimer = null;
+    clearTimeout(this.frameFitTimer);
+    this.frameFitTimer = null;
+    this.syncToken += 1;
+    this.discardPendingIframe();
+    this.disposeFrame(this.iframe);
+    this.iframe = null;
+    this.frameHost = null;
+    this.shell = null;
+    this.status = null;
+    this.maximizeButton = null;
+    this.filePath = null;
+    this.lastVersion = null;
+    this.viewKey = '';
+  }
+}

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

@@ -21,6 +21,7 @@ export class WorkspaceCoordinator {
     getDisplayName,
     getFileList,
     getLineWrappingEnabled,
+    getVimModeEnabled,
     getLocalUser,
     getStoredUserName,
     getTheme,
@@ -28,8 +29,10 @@ export class WorkspaceCoordinator {
     isDrawioFile,
     isExcalidrawFile,
     isImageFile,
+    isPdfFile,
     isMermaidFile,
     isPlantUmlFile,
+    isStructurizrWorkspaceFile,
     isTabActive,
     loadBootstrapContent = null,
     loadEditorSessionClass,
@@ -49,6 +52,8 @@ export class WorkspaceCoordinator {
     onRenderExcalidrawPreview,
     onRenderDrawioPreview,
     onRenderImagePreview,
+    onRenderPdfPreview,
+    onRenderStructurizrPreview,
     onSyncWrapToggle,
     onUpdateActiveFile,
     onUpdateCurrentFile,
@@ -68,6 +73,7 @@ export class WorkspaceCoordinator {
     this.getDisplayName = getDisplayName;
     this.getFileList = getFileList;
     this.getLineWrappingEnabled = getLineWrappingEnabled;
+    this.getVimModeEnabled = getVimModeEnabled ?? (() => false);
     this.getLocalUser = getLocalUser;
     this.getStoredUserName = getStoredUserName;
     this.getTheme = getTheme;
@@ -75,8 +81,10 @@ export class WorkspaceCoordinator {
     this.isDrawioFile = isDrawioFile ?? (() => false);
     this.isExcalidrawFile = isExcalidrawFile ?? (() => false);
     this.isImageFile = isImageFile ?? (() => false);
+    this.isPdfFile = isPdfFile ?? (() => false);
     this.isMermaidFile = isMermaidFile ?? (() => false);
     this.isPlantUmlFile = isPlantUmlFile ?? (() => false);
+    this.isStructurizrWorkspaceFile = isStructurizrWorkspaceFile ?? (() => false);
     this.isTabActive = isTabActive;
     this.loadBootstrapContent = loadBootstrapContent;
     this.loadEditorSessionClassPort = loadEditorSessionClass;
@@ -96,6 +104,8 @@ export class WorkspaceCoordinator {
     this.onRenderDrawioPreview = onRenderDrawioPreview;
     this.onRenderExcalidrawPreview = onRenderExcalidrawPreview;
     this.onRenderImagePreview = onRenderImagePreview;
+    this.onRenderPdfPreview = onRenderPdfPreview;
+    this.onRenderStructurizrPreview = onRenderStructurizrPreview;
     this.onSyncWrapToggle = onSyncWrapToggle;
     this.onUpdateActiveFile = onUpdateActiveFile;
     this.onUpdateCurrentFile = onUpdateCurrentFile;
@@ -171,12 +181,19 @@ export class WorkspaceCoordinator {
     filePath,
     isExcalidraw = false,
     isImage = false,
+    isPdf = false,
     supportsBacklinks,
   }) {
     if (isExcalidraw) this.onRenderExcalidrawPreview(filePath);
     if (isBase || isBaseFilePath(filePath)) this.onRenderBasePreview(filePath);
     if (isDrawio) this.onRenderDrawioPreview(filePath);
     if (isImage) this.onRenderImagePreview(filePath);
+    if (isPdf) this.onRenderPdfPreview(filePath);
+    if (this.isStructurizrWorkspaceFile(filePath)) {
+      this.onRenderStructurizrPreview(filePath, {
+        source: this.session?.getText?.() ?? '',
+      });
+    }
     this.onSyncWrapToggle();
     if (supportsBacklinks) this.loadBacklinks(filePath);
   }
@@ -192,13 +209,15 @@ export class WorkspaceCoordinator {
     const isExcalidraw = this.isExcalidrawFile(filePath);
     const isBase = this.isBaseFile(filePath);
     const isImage = this.isImageFile(filePath);
+    const isPdf = this.isPdfFile(filePath);
     const isMermaid = this.isMermaidFile(filePath);
     const isPlantUml = this.isPlantUmlFile(filePath);
+    const isStructurizrWorkspace = this.isStructurizrWorkspaceFile(filePath);
 
     if (
       filePath === this.stateStore.currentFilePath
       && normalizedDrawioMode === currentDrawioMode
-      && (this.session || isDrawio || isExcalidraw || isImage)
+      && (this.session || isDrawio || isExcalidraw || isImage || isPdf)
     ) {
       this.onUpdateActiveFile(filePath);
       this.onUpdateLobbyCurrentFile(filePath);
@@ -211,11 +230,11 @@ export class WorkspaceCoordinator {
     this.cleanupSession();
     const chromeState = this.prepareForFileOpen(filePath, {
       drawioMode: normalizedDrawioMode,
-      resetConnectionState: !isDrawio && !isExcalidraw && !isImage,
+      resetConnectionState: !isDrawio && !isExcalidraw && !isImage && !isPdf,
     });
     this.reportFileOpenMetric('open_started', loadToken, { filePath });
 
-    if (isDrawio || isExcalidraw || isImage) {
+    if (isDrawio || isExcalidraw || isImage || isPdf) {
       this.onSessionAssigned?.(null);
 
       if (loadToken !== this.stateStore.sessionLoadToken) {
@@ -229,6 +248,7 @@ export class WorkspaceCoordinator {
         isDrawio,
         isExcalidraw,
         isImage,
+        isPdf,
         session: null,
         supportsBacklinks: chromeState.supportsBacklinks,
       });
@@ -241,6 +261,7 @@ export class WorkspaceCoordinator {
       getFileList: this.getFileList,
       lineWrappingEnabled: this.getLineWrappingEnabled(),
       localUser: this.getLocalUser(),
+      vimModeEnabled: this.getVimModeEnabled(),
       onAwarenessChange: (users) => this.onFileAwarenessChange(users),
       onConnectionChange: (state) => this.onConnectionChange(state),
       onCommentsChange: (threads) => this.onCommentsChange?.(threads),
@@ -253,6 +274,7 @@ export class WorkspaceCoordinator {
           isBase,
           isMermaid,
           isPlantUml,
+          isStructurizrWorkspace,
         });
       },
       onImagePaste: (file) => this.onImagePaste?.(file),