collabmd 0.1.45 → 0.1.46

package/src/client/infrastructure/browser-preferences-port.js

@@ -22,6 +22,7 @@ export class BrowserPreferencesPort {
     fileTreeShowExtensionsKey,
     lineWrappingKey,
     recentFilesKey = 'collabmd-recent-files',
+    vimModeKey = 'collabmd-editor-vim-mode',
     sidebarVisibleKey,
     userNameKey,
     storage = globalThis.localStorage,
@@ -32,6 +33,7 @@ export class BrowserPreferencesPort {
     this.sidebarVisibleKey = sidebarVisibleKey;
     this.storage = storage;
     this.userNameKey = userNameKey;
+    this.vimModeKey = vimModeKey;
   }
 
   getUserName() {
@@ -58,6 +60,14 @@ export class BrowserPreferencesPort {
     writeStorage(this.storage, this.lineWrappingKey, String(enabled));
   }
 
+  getVimModeEnabled() {
+    return readStorage(this.storage, this.vimModeKey, null) === 'true';
+  }
+
+  setVimModeEnabled(enabled) {
+    writeStorage(this.storage, this.vimModeKey, String(enabled));
+  }
+
   getRecentFiles() {
     const stored = readStorage(this.storage, this.recentFilesKey, '[]');
     try {

package/src/client/infrastructure/comment-thread-store.js

@@ -83,15 +83,21 @@ function normalizeSelectionAnchorPayload(payload, state) {
 
 export class CommentThreadStore {
   constructor({
+    canWrite = () => true,
+    createAnchor = null,
     getDoc,
     getEditorState,
     getLocalUser,
     onCommentsChange = null,
+    resolveThread = null,
   }) {
+    this.canWrite = canWrite;
+    this.createAnchor = createAnchor;
     this.getDoc = getDoc;
     this.getEditorState = getEditorState;
     this.getLocalUser = getLocalUser;
     this.onCommentsChange = onCommentsChange;
+    this.resolveThread = resolveThread;
     this.commentThreads = null;
     this.ydoc = null;
     this.ytext = null;
@@ -144,33 +150,44 @@ export class CommentThreadStore {
     }
 
     return serializeCommentThreads(this.commentThreads)
-      .map((thread) => this.resolveCommentThread(thread))
+      .map((thread) => this.resolveThread
+        ? this.resolveThread(thread)
+        : this.resolveCommentThread(thread))
       .filter(Boolean);
   }
 
   createCommentThread({ anchor, body }) {
-    const state = this.getEditorState();
-    if (!state || !this.commentThreads || !this.ytext || !this.ydoc) {
+    if (!this.canWrite() || !this.commentThreads || !this.ydoc) {
       return null;
     }
 
+    const state = this.getEditorState?.();
     const normalizedBody = normalizeCommentBody(body);
-    const normalizedAnchor = normalizeSelectionAnchorPayload(anchor, state);
+    if (!this.createAnchor && (!state || !this.ytext)) {
+      return null;
+    }
+
+    const normalizedAnchor = this.createAnchor
+      ? this.createAnchor(anchor)
+      : normalizeSelectionAnchorPayload(anchor, state);
     if (!normalizedBody || !normalizedAnchor) {
       return null;
     }
 
     const thread = createCommentThreadSharedType({
-      anchorEnd: Y.relativePositionToJSON(
-        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.endIndex),
-      ),
-      anchorEndLine: normalizedAnchor.anchorEndLine,
+      ...normalizedAnchor,
+      ...(this.createAnchor ? {} : {
+        anchorEnd: Y.relativePositionToJSON(
+          Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.endIndex),
+        ),
+      }),
       anchorKind: normalizedAnchor.anchorKind,
       anchorQuote: normalizedAnchor.anchorQuote,
-      anchorStart: Y.relativePositionToJSON(
-        Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.startIndex),
-      ),
-      anchorStartLine: normalizedAnchor.anchorStartLine,
+      ...(this.createAnchor ? {} : {
+        anchorStart: Y.relativePositionToJSON(
+          Y.createRelativePositionFromTypeIndex(this.ytext, normalizedAnchor.startIndex),
+        ),
+      }),
       createdAt: Date.now(),
       createdByColor: this.getLocalUser()?.color ?? '',
       createdByName: this.getLocalUser()?.name ?? 'Anonymous',
@@ -194,6 +211,10 @@ export class CommentThreadStore {
   }
 
   replyToCommentThread(threadId, body) {
+    if (!this.canWrite()) {
+      return null;
+    }
+
     const normalizedBody = normalizeCommentBody(body);
     if (!normalizedBody || !this.ydoc) {
       return null;
@@ -291,7 +312,7 @@ export class CommentThreadStore {
   }
 
   deleteCommentThread(threadId) {
-    if (!this.commentThreads || !this.ydoc) {
+    if (!this.canWrite() || !this.commentThreads || !this.ydoc) {
       return false;
     }
 

package/src/client/infrastructure/editor-session.js

@@ -8,6 +8,7 @@ export class EditorSession {
   constructor({
     editorContainer,
     lineWrappingEnabled = true,
+    vimModeEnabled = false,
     initialTheme,
     lineInfoElement,
     onAwarenessChange,
@@ -44,6 +45,7 @@ export class EditorSession {
       initialTheme,
       lineInfoElement,
       lineWrappingEnabled,
+      vimModeEnabled,
       onDocChanged: () => {
         this.emitContentChange();
       },
@@ -210,6 +212,14 @@ export class EditorSession {
     return this.viewAdapter.isLineWrappingEnabled();
   }
 
+  isVimModeEnabled() {
+    return this.viewAdapter.isVimModeEnabled();
+  }
+
+  setVimMode(enabled) {
+    return this.viewAdapter.setVimMode(enabled);
+  }
+
   setLineWrapping(enabled) {
     return this.viewAdapter.setLineWrapping(enabled);
   }

package/src/client/infrastructure/editor-view-adapter.js

@@ -1,3 +1,4 @@
+import { vim } from '@replit/codemirror-vim';
 import { autocompletion, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -45,15 +46,26 @@ import {
 } from '@codemirror/view';
 import { yCollab } from 'y-codemirror.next';
 
-import { isBaseFilePath, isMermaidFilePath, isPlantUmlFilePath } from '../../domain/file-kind.js';
+import {
+  isBaseFilePath,
+  isMermaidFilePath,
+  isPlantUmlFilePath,
+  isStructurizrFilePath,
+} from '../../domain/file-kind.js';
 import { normalizeCommentQuote } from '../../domain/comment-threads.js';
 import { createMarkdownToolbarEdit } from '../domain/markdown-formatting.js';
 import { mermaidLanguage, mermaidLanguageDescription } from '../domain/mermaid-language.js';
 import { wikiLinkCompletions } from '../domain/wiki-link-completions.js';
 import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantuml-language.js';
+import { structurizrLanguage, structurizrLanguageDescription } from '../domain/structurizr-language.js';
 import { handleImagePasteEvent } from './editor-paste-utils.js';
 
-const markdownCodeLanguages = [...languages, mermaidLanguageDescription, plantUmlLanguageDescription];
+const markdownCodeLanguages = [
+  ...languages,
+  mermaidLanguageDescription,
+  plantUmlLanguageDescription,
+  structurizrLanguageDescription,
+];
 const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
 const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
 const remoteUpdateMark = Decoration.mark({ class: 'cm-remoteUpdateFlash' });
@@ -387,6 +399,10 @@ export function createLanguageExtension(filePath) {
     return plantUmlLanguage;
   }
 
+  if (isStructurizrFilePath(filePath)) {
+    return structurizrLanguage;
+  }
+
   if (isBaseFilePath(filePath)) {
     return yaml();
   }
@@ -408,6 +424,7 @@ export class EditorViewAdapter {
     initialTheme,
     lineInfoElement,
     lineWrappingEnabled = true,
+    vimModeEnabled = false,
     onDocChanged = null,
     onImagePaste = null,
     onSelectionChanged = null,
@@ -418,6 +435,7 @@ export class EditorViewAdapter {
     this.initialTheme = initialTheme;
     this.lineInfoElement = lineInfoElement;
     this.lineWrappingEnabled = lineWrappingEnabled;
+    this.vimModeEnabled = Boolean(vimModeEnabled);
     this.onDocChanged = onDocChanged;
     this.onImagePaste = onImagePaste;
     this.onSelectionChanged = onSelectionChanged;
@@ -426,6 +444,7 @@ export class EditorViewAdapter {
     this.themeCompartment = new Compartment();
     this.syntaxThemeCompartment = new Compartment();
     this.lineWrappingCompartment = new Compartment();
+    this.vimModeCompartment = new Compartment();
     this.viewportFrame = 0;
     this.remoteUpdateFlashTimer = 0;
     this.lastLocalInputAt = 0;
@@ -478,6 +497,7 @@ export class EditorViewAdapter {
       highlightActiveLine(),
       highlightSelectionMatches(),
       createSearchNavigationListener(),
+      this.vimModeCompartment.of(!readOnly && this.vimModeEnabled ? vim({ status: true }) : []),
       keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,
@@ -645,6 +665,30 @@ export class EditorViewAdapter {
     return this.lineWrappingEnabled;
   }
 
+  isVimModeEnabled() {
+    return this.vimModeEnabled;
+  }
+
+  setVimMode(enabled) {
+    const nextEnabled = Boolean(enabled);
+    if (nextEnabled === this.vimModeEnabled) {
+      return nextEnabled;
+    }
+
+    this.vimModeEnabled = nextEnabled;
+    if (!this.editorView || this.editorView.state.readOnly) {
+      return nextEnabled;
+    }
+
+    this.editorView.dispatch({
+      effects: this.vimModeCompartment.reconfigure(
+        nextEnabled ? vim({ status: true }) : [],
+      ),
+    });
+    this.editorView.focus();
+    return nextEnabled;
+  }
+
   setLineWrapping(enabled) {
     this.lineWrappingEnabled = Boolean(enabled);
 

package/src/client/infrastructure/excalidraw-room-client.js

@@ -24,6 +24,10 @@ import {
   tryParseSceneJson,
 } from '../domain/excalidraw-scene.js';
 import { resolveWsBaseUrl } from '../domain/runtime-paths.js';
+import {
+  normalizeCommentQuote,
+} from '../../domain/comment-threads.js';
+import { CommentThreadStore } from './comment-thread-store.js';
 import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
 
 const DEFAULT_EMPTY_SCENE_GUARD_MS = 250;
@@ -39,16 +43,21 @@ export const EXCALIDRAW_ROOM_CONNECTION_STATE = Object.freeze({
   RECONNECTING_READONLY: 'reconnecting-readonly',
 });
 
-function stableJson(value) {
-  if (Array.isArray(value)) {
-    return `[${value.map((entry) => stableJson(entry)).join(',')}]`;
+function areExcalidrawFilesEqual(left, right) {
+  if (left === right) {
+    return true;
   }
 
-  if (value && typeof value === 'object') {
-    return `{${Object.keys(value).sort().map((key) => `${JSON.stringify(key)}:${stableJson(value[key])}`).join(',')}}`;
+  if (!left || !right || typeof left !== 'object' || typeof right !== 'object') {
+    return false;
   }
 
-  return JSON.stringify(value);
+  return left.id === right.id
+    && left.mimeType === right.mimeType
+    && left.dataURL === right.dataURL
+    && left.created === right.created
+    && left.lastRetrieved === right.lastRetrieved
+    && left.version === right.version;
 }
 
 function normalizeElementVersion(value) {
@@ -81,6 +90,35 @@ function shouldSyncElementToRoom(localElement, roomElement) {
   return localVersionNonce < roomVersionNonce;
 }
 
+function createDiagramCommentAnchor(element) {
+  const elementId = typeof element?.id === 'string' ? element.id.trim() : '';
+  const x = Number(element?.x);
+  const y = Number(element?.y);
+  const width = Number(element?.width);
+  const height = Number(element?.height);
+  if (!elementId || ![x, y, width, height].every(Number.isFinite)) {
+    return null;
+  }
+
+  return {
+    anchorKind: 'diagram-element',
+    anchorPoint: {
+      x: x + (width / 2),
+      y: y + (height / 2),
+    },
+    anchorQuote: normalizeCommentQuote(element.text),
+    anchorSnapshot: {
+      height,
+      text: normalizeCommentQuote(element.text),
+      type: typeof element.type === 'string' ? element.type : 'element',
+      width,
+      x,
+      y,
+    },
+    elementId,
+  };
+}
+
 export class ExcalidrawRoomClient {
   constructor({
     cancelAnimationFrameFn = (frameId) => cancelAnimationFrame(frameId),
@@ -89,6 +127,7 @@ export class ExcalidrawRoomClient {
     filePath = '',
     now = () => Date.now(),
     onCollaboratorsChange = () => {},
+    onCommentThreadsChange = () => {},
     onConnectionStateChange = () => {},
     onRemoteSceneJson = () => {},
     requestAnimationFrameFn = (callback) => requestAnimationFrame(callback),
@@ -106,6 +145,7 @@ export class ExcalidrawRoomClient {
     this.filePath = filePath;
     this.now = now;
     this.onCollaboratorsChange = onCollaboratorsChange;
+    this.onCommentThreadsChange = onCommentThreadsChange;
     this.onConnectionStateChange = onConnectionStateChange;
     this.onRemoteSceneJson = onRemoteSceneJson;
     this.requestAnimationFrameFn = requestAnimationFrameFn;
@@ -138,12 +178,22 @@ export class ExcalidrawRoomClient {
     this.lastViewportSignature = '';
     this.lastSelectedIdsSignature = '';
     this.pendingEmptySceneCandidate = null;
+    this.structuredObserversAttached = false;
     this.canWriteToRoom = false;
     this.waitingForAuthoritativeSync = false;
     this.connectionState = EXCALIDRAW_ROOM_CONNECTION_STATE.CLOSED;
     this.hasAuthoritativeSync = false;
     this.applyingSharedSnapshotDepth = 0;
     this.suppressStructuredSceneUpdateDepth = 0;
+    this.commentThreadStore = new CommentThreadStore({
+      canWrite: () => this.canWriteToRoom,
+      createAnchor: createDiagramCommentAnchor,
+      getDoc: () => this.ydoc,
+      getEditorState: () => null,
+      getLocalUser: () => this.getLocalUser(),
+      onCommentsChange: (threads) => this.onCommentThreadsChange(threads),
+      resolveThread: (thread) => thread,
+    });
 
     this.handleAwarenessChange = () => {
       this.onCollaboratorsChange(buildCollaboratorsMap(this.awareness));
@@ -177,6 +227,25 @@ export class ExcalidrawRoomClient {
     return this.localUser;
   }
 
+  getCommentThreads() {
+    return this.commentThreadStore.getCommentThreads();
+  }
+
+  createCommentThread({ body, element } = {}) {
+    return this.commentThreadStore.createCommentThread({
+      anchor: element,
+      body,
+    });
+  }
+
+  replyToCommentThread(threadId, body) {
+    return this.commentThreadStore.replyToCommentThread(threadId, body);
+  }
+
+  deleteCommentThread(threadId) {
+    return this.commentThreadStore.deleteCommentThread(threadId);
+  }
+
   getConnectionState() {
     return this.connectionState;
   }
@@ -268,7 +337,16 @@ export class ExcalidrawRoomClient {
     return this.localUser;
   }
 
-  async connect({ initialUser = null } = {}) {
+  async connect(options = {}) {
+    try {
+      return await this.connectInternal(options);
+    } catch (error) {
+      this.disconnect();
+      throw error;
+    }
+  }
+
+  async connectInternal({ initialUser = null } = {}) {
     this.localUser = initialUser;
     this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.CONNECTING);
 
@@ -277,6 +355,7 @@ export class ExcalidrawRoomClient {
       this.lastSceneJson = JSON.stringify(scene);
       this.hasAuthoritativeSync = true;
       this.setConnectionState(EXCALIDRAW_ROOM_CONNECTION_STATE.AUTHORITATIVE);
+      this.onCommentThreadsChange([]);
       return scene;
     }
 
@@ -367,6 +446,11 @@ export class ExcalidrawRoomClient {
     this.roomElements.observeDeep(this.handleStructuredSceneUpdate);
     this.roomFiles.observeDeep(this.handleStructuredSceneUpdate);
     this.roomAppState.observe(this.handleStructuredSceneUpdate);
+    this.structuredObserversAttached = true;
+    this.commentThreadStore.bind({
+      commentThreads: this.ydoc.getArray('comments'),
+      ydoc: this.ydoc,
+    });
     if (usedApiFallback && this.canWriteToRoom) {
       this.commitSceneJson(this.lastSceneJson, {
         origin: 'excalidraw-api-fallback',
@@ -501,7 +585,7 @@ export class ExcalidrawRoomClient {
 
   mergeLocallyChangedAppState(appState, baseSceneJson) {
     const baseScene = parseSceneJson(baseSceneJson);
-    const roomScene = parseSceneJson(this.getStructuredSceneJson() || this.lastSceneJson);
+    const roomScene = parseSceneJson(this.lastSceneJson || this.getStructuredSceneJson());
     const nextAppState = {
       ...roomScene.appState,
     };
@@ -523,7 +607,7 @@ export class ExcalidrawRoomClient {
     elements,
     files,
   } = {}) {
-    const roomSceneJson = this.getStructuredSceneJson() || this.lastSceneJson || baseSceneJson;
+    const roomSceneJson = this.lastSceneJson || this.getStructuredSceneJson() || baseSceneJson;
     const roomScene = parseSceneJson(roomSceneJson);
     const nextAppState = this.mergeLocallyChangedAppState(appState, baseSceneJson);
     const roomElementsById = new Map(roomScene.elements.map((element) => [element.id, element]));
@@ -533,7 +617,7 @@ export class ExcalidrawRoomClient {
     const nextFiles = files && typeof files === 'object' ? files : {};
     const changedFiles = Object.fromEntries(
       Object.entries(nextFiles).filter(([fileId, file]) => (
-        stableJson(file) !== stableJson(roomScene.files?.[fileId])
+        !areExcalidrawFilesEqual(file, roomScene.files?.[fileId])
       )),
     );
     const appStateChanged = (
@@ -869,10 +953,15 @@ export class ExcalidrawRoomClient {
     this.lastSelectedIdsSignature = '';
     this.pendingEmptySceneCandidate = null;
 
-    this.roomMeta?.unobserve(this.handleStructuredSceneUpdate);
-    this.roomElements?.unobserveDeep(this.handleStructuredSceneUpdate);
-    this.roomFiles?.unobserveDeep(this.handleStructuredSceneUpdate);
-    this.roomAppState?.unobserve(this.handleStructuredSceneUpdate);
+    if (this.structuredObserversAttached) {
+      this.roomMeta?.unobserve(this.handleStructuredSceneUpdate);
+      this.roomElements?.unobserveDeep(this.handleStructuredSceneUpdate);
+      this.roomFiles?.unobserveDeep(this.handleStructuredSceneUpdate);
+      this.roomAppState?.unobserve(this.handleStructuredSceneUpdate);
+      this.structuredObserversAttached = false;
+    }
+
+    this.commentThreadStore.unbind();
 
     if (this.awareness) {
       this.awareness.off('change', this.handleAwarenessChange);

package/src/client/infrastructure/git-api-client.js

@@ -74,6 +74,11 @@ export class GitApiClient {
     return parseApiResponse(response, 'Failed to load historical file preview');
   }
 
+  getFileAttachmentUrl({ hash, path } = {}) {
+    const params = createSearchParams({ hash, path });
+    return resolveApiUrl(`/git/file-attachment?${params.toString()}`);
+  }
+
   async stageFile({ path, requestId = null } = {}) {
     return this.#postJson('/git/stage', { path }, { requestId, fallbackError: 'Failed to stage file' });
   }

package/src/client/infrastructure/vault-api-client.js

@@ -51,6 +51,20 @@ export class VaultApiClient {
     return Array.isArray(data.backlinks) ? data.backlinks : [];
   }
 
+  async syncStructurizrWorkspace({ path, source }) {
+    const response = await fetch(resolveApiUrl('/structurizr/sync'), {
+      body: JSON.stringify({
+        path,
+        source,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to sync Structurizr workspace');
+  }
+
   async renderSvg(source) {
     const response = await fetch(resolveApiUrl('/plantuml/render'), {
       body: JSON.stringify({ source }),
@@ -261,6 +275,18 @@ export class VaultApiClient {
     return parseApiResponse(response, 'Failed to upload image');
   }
 
+  async uploadFile({ file, path, requestId = null }) {
+    const response = await fetch(resolveApiUrl('/file/upload'), {
+      body: file,
+      headers: createRequestHeaders(requestId, {
+        'Content-Type': file?.type || 'application/octet-stream',
+        'X-CollabMD-File-Path': encodeHeaderMetadata(path),
+      }),
+      method: 'POST',
+    });
+    return parseApiResponse(response, 'Failed to upload file');
+  }
+
   async downloadFile(path) {
     const fallbackFileName = getVaultPathLeaf(path) || 'download';
     return triggerDownload(resolveApiUrl(`/download/file?path=${encodeURIComponent(path)}`), {

package/src/client/presentation/comment-ui/comment-ui-shared.js

@@ -51,6 +51,10 @@ export function areAnchorsEqual(left, right) {
 }
 
 export function formatAnchorLabel(anchor) {
+  if (getAnchorKind(anchor) === 'diagram-element') {
+    return 'Diagram element';
+  }
+
   const startLine = Number(anchor?.startLine || 0);
   const endLine = Number(anchor?.endLine || startLine);
   if (!Number.isFinite(startLine) || startLine <= 0) {

package/src/client/presentation/drawio-embed-controller.js

@@ -1,6 +1,7 @@
 import { createDrawioLeaseRoomName } from '../../domain/drawio-room.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
+import { renderDrawioViewer } from './drawio-viewer.js';
 import {
   cancelIdleRender,
   isNearViewport,
@@ -8,62 +9,6 @@ import {
 } from '../browser-utils.js';
 
 const HYDRATE_VIEWPORT_MARGIN_PX = 360;
-const DRAWIO_VIEWER_SCRIPT_URL = 'https://viewer.diagrams.net/js/viewer-static.min.js';
-
-let drawioViewerLoadPromise = null;
-
-function ensureDrawioViewerLoaded() {
-  if (window.GraphViewer?.processElements) {
-    return Promise.resolve(window.GraphViewer);
-  }
-
-  if (drawioViewerLoadPromise) {
-    return drawioViewerLoadPromise;
-  }
-
-  drawioViewerLoadPromise = new Promise((resolve, reject) => {
-    const existingScript = document.querySelector('script[data-collabmd-drawio-viewer]');
-    const script = existingScript instanceof HTMLScriptElement
-      ? existingScript
-      : document.createElement('script');
-
-    const cleanup = () => {
-      script.removeEventListener('error', handleError);
-      script.removeEventListener('load', handleLoad);
-    };
-
-    const handleError = () => {
-      cleanup();
-      drawioViewerLoadPromise = null;
-      reject(new Error('Failed to load draw.io viewer'));
-    };
-
-    const handleLoad = () => {
-      cleanup();
-      if (!window.GraphViewer?.processElements) {
-        drawioViewerLoadPromise = null;
-        reject(new Error('draw.io viewer did not initialize'));
-        return;
-      }
-
-      resolve(window.GraphViewer);
-    };
-
-    script.addEventListener('error', handleError, { once: true });
-    script.addEventListener('load', handleLoad, { once: true });
-
-    if (!existingScript) {
-      script.src = DRAWIO_VIEWER_SCRIPT_URL;
-      script.async = true;
-      script.dataset.collabmdDrawioViewer = 'true';
-      document.head.append(script);
-    } else if (window.GraphViewer?.processElements) {
-      handleLoad();
-    }
-  });
-
-  return drawioViewerLoadPromise;
-}
 
 export class DrawioEmbedController {
   constructor({
@@ -350,59 +295,21 @@ export class DrawioEmbedController {
   }
 
   async renderViewerEntry(entry) {
-    const [{ content }, viewer] = await Promise.all([
-      this.vaultApiClient.readFile(entry.filePath),
-      ensureDrawioViewerLoaded(),
-    ]);
+    const { content } = await this.vaultApiClient.readFile(entry.filePath);
 
     if (!entry.wrapper?.isConnected || !entry.viewerElement?.isConnected) {
       return;
     }
 
     const theme = this.getTheme?.() === 'light' ? 'light' : 'dark';
-    const graphElement = document.createElement('div');
-    graphElement.className = 'mxgraph drawio-viewer-frame';
-    graphElement.dataset.action = 'open-file';
-    graphElement.dataset.filePath = entry.filePath;
-    graphElement.setAttribute('role', 'button');
-    graphElement.setAttribute('tabindex', '0');
-    graphElement.setAttribute('aria-label', `Open ${entry.label.replace(/\.drawio$/i, '')}`);
-    graphElement.addEventListener('click', (event) => {
-      event.preventDefault();
-      this.onOpenFile?.(entry.filePath);
-    });
-    graphElement.addEventListener('keydown', (event) => {
-      if (event.key !== 'Enter' && event.key !== ' ') {
-        return;
-      }
-
-      event.preventDefault();
-      this.onOpenFile?.(entry.filePath);
-    });
-    graphElement.dataset.mxgraph = JSON.stringify({
-      'check-visible-state': false,
-      center: true,
-      border: 0,
-      'dark-mode': theme,
-      editable: false,
-      fit: 1,
-      lightbox: false,
-      nav: false,
-      resize: false,
-      tooltips: false,
-      xml: String(content ?? ''),
-    });
-
     const viewerHost = entry.wrapper.querySelector('.drawio-viewer-shell') ?? entry.viewerElement;
-    viewerHost.replaceChildren(graphElement);
-    entry.viewerElement = graphElement;
-
-    if (typeof viewer.createViewerForElement === 'function') {
-      viewer.createViewerForElement(graphElement);
-      return;
-    }
-
-    viewer.processElements();
+    entry.viewerElement = await renderDrawioViewer(viewerHost, {
+      ariaLabel: `Open ${entry.label.replace(/\.drawio$/i, '')}`,
+      className: 'mxgraph drawio-viewer-frame',
+      onActivate: () => this.onOpenFile?.(entry.filePath),
+      source: String(content ?? ''),
+      theme,
+    });
   }
 
   buildIframeUrl(entry) {