collabmd 0.1.30 → 0.1.32

package/src/client/excalidraw-editor.js

@@ -21,17 +21,22 @@ import {
   parseSceneJson,
   sceneToInitialData,
 } from './domain/excalidraw-scene.js';
+import {
+  normalizeDocumentMode,
+} from './domain/excalidraw-document-switch.js';
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
 import { ExcalidrawRoomClient } from './infrastructure/excalidraw-room-client.js';
 import { vaultApiClient } from './infrastructure/vault-api-client.js';
 
 const params = new URLSearchParams(window.location.search);
-const filePath = params.get('file');
 const isTestMode = params.get('test') === '1';
-const isPreviewMode = params.get('mode') === 'preview';
 const parentOrigin = window.location.origin;
 const syncTimeoutMs = Number.parseInt(params.get('syncTimeoutMs') || '', 10);
 
+let currentDocument = {
+  filePath: params.get('file') || '',
+  mode: normalizeDocumentMode(params.get('mode')),
+};
 let excalidrawAPI = null;
 let currentTheme = params.get('theme') || 'dark';
 let localAwarenessUser = resolveLocalAwarenessUser({
@@ -55,22 +60,104 @@ let apiStateCleanupCallbacks = [];
 let collaboratorRenderFrame = 0;
 let queuedCollaborators = null;
 let initialViewportFitPending = true;
-const roomClient = new ExcalidrawRoomClient({
-  filePath,
-  onCollaboratorsChange: (collaborators) => {
-    if (!collabReady) {
-      pendingCollaborators = collaborators;
-      return;
-    }
+let roomClient = null;
+let roomClientGeneration = 0;
+let reactRoot = null;
 
-    queueCollaboratorsRender(collaborators);
-  },
-  onRemoteSceneJson: (sceneJson) => {
-    applySceneFromJson(sceneJson);
-  },
-  syncTimeoutMs: Number.isFinite(syncTimeoutMs) ? syncTimeoutMs : undefined,
-  vaultClient: vaultApiClient,
-});
+function getDocumentViewState(mode = currentDocument.mode) {
+  const normalizedMode = normalizeDocumentMode(mode);
+  return {
+    viewModeEnabled: normalizedMode === 'preview',
+    zenModeEnabled: normalizedMode === 'preview',
+  };
+}
+
+function createRoomClient(filePath) {
+  const generation = ++roomClientGeneration;
+  const client = new ExcalidrawRoomClient({
+    filePath,
+    onCollaboratorsChange: (collaborators) => {
+      if (generation !== roomClientGeneration) {
+        return;
+      }
+
+      if (!collabReady) {
+        pendingCollaborators = collaborators;
+        return;
+      }
+
+      queueCollaboratorsRender(collaborators);
+    },
+    onRemoteSceneJson: (sceneJson) => {
+      if (generation !== roomClientGeneration) {
+        return;
+      }
+
+      applySceneFromJson(sceneJson);
+    },
+    syncTimeoutMs: Number.isFinite(syncTimeoutMs) ? syncTimeoutMs : undefined,
+    vaultClient: vaultApiClient,
+  });
+
+  return {
+    client,
+    generation,
+  };
+}
+
+function buildExcalidrawProps({ initialData } = {}) {
+  const props = {
+    onMount: handleEditorMount,
+    onInitialize: (api) => {
+      initializeEditor(api);
+    },
+    onUnmount: () => {
+      clearEditorApiStateBindings();
+      disconnectRealtimeRoom({ preserveEditorBindings: true });
+      excalidrawAPI = null;
+      collabReady = false;
+    },
+    aiEnabled: false,
+    isCollaborating: true,
+    onChange: (elements, appState, files) => {
+      scheduleSyncToRoom(elements, appState, files);
+      roomClient?.syncLocalSelectionAwareness(appState);
+    },
+    onPointerUpdate: (payload) => {
+      roomClient?.scheduleLocalPointerAwareness(payload);
+    },
+    theme: currentTheme,
+    ...getDocumentViewState(),
+    UIOptions: {
+      canvasActions: {
+        export: false,
+        loadScene: false,
+        saveToActiveFile: false,
+        toggleTheme: false,
+      },
+    },
+  };
+
+  if (initialData) {
+    props.initialData = initialData;
+  }
+
+  return props;
+}
+
+function renderExcalidrawApp({ initialData } = {}) {
+  if (!reactRoot) {
+    return;
+  }
+
+  reactRoot.render(
+    React.createElement(
+      'div',
+      { style: { height: '100vh', width: '100%' } },
+      React.createElement(Excalidraw, buildExcalidrawProps({ initialData })),
+    ),
+  );
+}
 
 function applySurfaceTheme(theme = currentTheme) {
   document.body.dataset.theme = theme === 'light' ? 'light' : 'dark';
@@ -108,7 +195,7 @@ function applyLocalUserPatch(nextUser = {}) {
     currentUser: localAwarenessUser,
     nextUser,
   });
-  roomClient.setLocalUser(localAwarenessUser);
+  roomClient?.setLocalUser(localAwarenessUser);
 }
 
 if (isTestMode) {
@@ -149,13 +236,13 @@ if (isTestMode) {
       } : null;
     },
     isViewMode: () => Boolean(excalidrawAPI?.getAppState?.().viewModeEnabled),
-    getSceneJson: () => roomClient.getLastSceneJson(),
+    getSceneJson: () => roomClient?.getLastSceneJson?.() || '',
     isAuthoritativeReady: () => (
       Boolean(excalidrawAPI)
       && collabReady
-      && roomClient.canWriteToRoom === true
-      && roomClient.waitingForAuthoritativeSync === false
-      && roomClient.isApplyingSharedSnapshot() === false
+      && roomClient?.canWriteToRoom === true
+      && roomClient?.waitingForAuthoritativeSync === false
+      && roomClient?.isApplyingSharedSnapshot?.() === false
     ),
     isReady: () => collabReady && Boolean(excalidrawAPI) && Boolean(getNativeHistoryButton('undo')) && Boolean(getNativeHistoryButton('redo')),
     redoShared: () => triggerNativeHistory('redo'),
@@ -243,7 +330,7 @@ function releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot = false }
     requestAnimationFrame(() => {
       pendingSuppressionReleases = Math.max(0, pendingSuppressionReleases - 1);
       if (trackedSharedSnapshot) {
-        roomClient.endApplyingSharedSnapshot();
+        roomClient?.endApplyingSharedSnapshot();
       }
       if (pendingSuppressionReleases === 0) {
         suppressOnChange = false;
@@ -264,20 +351,29 @@ function releaseViewportBroadcastSuppressionAfterPaint() {
   });
 }
 
-function buildApiSceneUpdate(scene) {
+function buildApiSceneUpdate(scene, {
+  appStateOverrides = {},
+  replaceElements = false,
+} = {}) {
   const currentAppState = excalidrawAPI.getAppState();
-  const currentElements = excalidrawAPI.getSceneElementsIncludingDeleted?.() || excalidrawAPI.getSceneElements();
+  const currentElements = replaceElements
+    ? []
+    : (excalidrawAPI.getSceneElementsIncludingDeleted?.() || excalidrawAPI.getSceneElements());
   const restoredElements = restoreElements(scene?.elements || [], currentElements, {
     repairBindings: true,
   });
   const restoredAppState = restoreAppState(scene?.appState || {}, currentAppState);
-  const reconciledElements = reconcileElements(currentElements, restoredElements, currentAppState);
+  const reconciledElements = replaceElements
+    ? restoredElements
+    : reconcileElements(currentElements, restoredElements, currentAppState);
 
   return {
     appState: {
       theme: currentTheme,
       viewBackgroundColor: restoredAppState.viewBackgroundColor ?? '#ffffff',
       gridSize: restoredAppState.gridSize ?? null,
+      ...getDocumentViewState(),
+      ...appStateOverrides,
     },
     elements: reconciledElements,
     files: scene?.files || {},
@@ -285,14 +381,19 @@ function buildApiSceneUpdate(scene) {
 }
 
 function updateApiScene(scene, {
+  appStateOverrides = {},
   captureUpdate = CaptureUpdateAction.NEVER,
+  replaceElements = false,
   trackedSharedSnapshot = true,
 } = {}) {
-  const nextSceneUpdate = buildApiSceneUpdate(scene);
+  const nextSceneUpdate = buildApiSceneUpdate(scene, {
+    appStateOverrides,
+    replaceElements,
+  });
 
   suppressOnChange = true;
   if (trackedSharedSnapshot) {
-    roomClient.beginApplyingSharedSnapshot();
+    roomClient?.beginApplyingSharedSnapshot();
   }
   try {
     excalidrawAPI.updateScene({
@@ -325,14 +426,14 @@ function applyLocalScene(scene, {
   });
 
   if (suppressOnChange) {
-    roomClient.commitSceneJson(normalizedJson, {
+    roomClient?.commitSceneJson(normalizedJson, {
       origin: 'excalidraw-local-scene-apply',
     });
   }
 }
 
 function onRoomTextUpdate() {
-  applySceneFromJson(roomClient.getLastSceneJson());
+  applySceneFromJson(roomClient?.getLastSceneJson?.() || '');
 }
 
 function postToParent(type, payload = {}) {
@@ -367,14 +468,14 @@ function scheduleInitialViewportFit() {
         animate: false,
         fitToViewport: true,
         maxZoom: 2,
-        viewportZoomFactor: isPreviewMode ? 0.92 : 0.88,
+        viewportZoomFactor: normalizeDocumentMode(currentDocument.mode) === 'preview' ? 0.92 : 0.88,
       });
     });
   });
 }
 
 function syncLocalViewportToRoom() {
-  if (!collabReady || !excalidrawAPI || suppressViewportBroadcast) {
+  if (!collabReady || !excalidrawAPI || !roomClient || suppressViewportBroadcast) {
     return;
   }
 
@@ -462,8 +563,16 @@ function applyHostFollowRequest(peerId) {
   pendingHostFollowPeerId = null;
 }
 
-function disconnectRealtimeRoom() {
+function clearEditorApiStateBindings() {
+  apiStateCleanupCallbacks.forEach((cleanup) => cleanup());
+  apiStateCleanupCallbacks = [];
+}
+
+function resetRealtimeRoomState() {
   collabReady = false;
+  suppressOnChange = false;
+  pendingRemoteSceneJson = '';
+  pendingSuppressionReleases = 0;
   pendingCollaborators = null;
   activeCollaborators = new Map();
   followedSocketId = null;
@@ -476,9 +585,19 @@ function disconnectRealtimeRoom() {
   }
   collaboratorRenderFrame = 0;
   queuedCollaborators = null;
-  apiStateCleanupCallbacks.forEach((cleanup) => cleanup());
-  apiStateCleanupCallbacks = [];
-  roomClient.disconnect();
+}
+
+function disconnectRealtimeRoom({ preserveEditorBindings = false } = {}) {
+  const activeRoomClient = roomClient;
+  roomClient = null;
+  roomClientGeneration += 1;
+
+  resetRealtimeRoomState();
+  if (!preserveEditorBindings) {
+    clearEditorApiStateBindings();
+  }
+
+  activeRoomClient?.disconnect();
 }
 
 let didDisconnectRealtimeRoom = false;
@@ -499,7 +618,7 @@ async function waitForPendingRoomWrites({
   const startedAt = performance.now();
 
   while ((performance.now() - startedAt) < maxWaitMs) {
-    const ws = roomClient.provider?.ws;
+    const ws = roomClient?.provider?.ws;
     if (!ws || ws.readyState !== WebSocket.OPEN || ws.bufferedAmount === 0) {
       return;
     }
@@ -509,10 +628,23 @@ async function waitForPendingRoomWrites({
 }
 
 async function prepareRealtimeRoomDisconnect() {
-  roomClient.flushSceneSync();
+  roomClient?.flushSceneSync();
   await waitForPendingRoomWrites();
 }
 
+async function connectDocumentClient(filePath) {
+  const { client, generation } = createRoomClient(filePath);
+  roomClient = client;
+  const scene = await client.connect({ initialUser: localAwarenessUser });
+
+  if (generation !== roomClientGeneration || roomClient !== client) {
+    client.disconnect();
+    return null;
+  }
+
+  return scene;
+}
+
 window.addEventListener('pagehide', disconnectRealtimeRoomOnce);
 
 window.addEventListener('message', (event) => {
@@ -536,6 +668,7 @@ window.addEventListener('message', (event) => {
       });
       releaseOnChangeSuppressionAfterPaint();
     }
+    renderExcalidrawApp();
     return;
   }
 
@@ -556,11 +689,19 @@ window.addEventListener('message', (event) => {
         requestId: message.requestId || '',
       });
     })();
+    return;
+  }
+
+  if (message.type === 'park-room') {
+    void (async () => {
+      await prepareRealtimeRoomDisconnect();
+      disconnectRealtimeRoom({ preserveEditorBindings: true });
+    })();
   }
 });
 
 function scheduleSyncToRoom(elements, appState, files) {
-  if (!collabReady || suppressOnChange) {
+  if (!collabReady || !roomClient || suppressOnChange) {
     return;
   }
 
@@ -589,7 +730,7 @@ function initializeEditor(api) {
     setFollowedSocket(null, { force: true });
   }));
 
-  const sceneJson = pendingRemoteSceneJson || roomClient.getLastSceneJson();
+  const sceneJson = pendingRemoteSceneJson || roomClient?.getLastSceneJson?.() || '';
   pendingRemoteSceneJson = '';
   updateApiScene(parseSceneJson(sceneJson));
 
@@ -622,53 +763,15 @@ async function init() {
   try {
     applySurfaceTheme(currentTheme);
     await ensureClientAuthenticated();
-    const initialScene = await roomClient.connect({ initialUser: localAwarenessUser });
+    const initialScene = await connectDocumentClient(currentDocument.filePath);
+    if (!initialScene) {
+      throw new Error('Failed to connect initial Excalidraw document');
+    }
     const initialData = sceneToInitialData(initialScene, { theme: currentTheme });
 
     loadingElement?.remove();
-
-    const excalidrawProps = {
-      onMount: handleEditorMount,
-      onInitialize: (api) => {
-        initializeEditor(api);
-      },
-      onUnmount: () => {
-        apiStateCleanupCallbacks.forEach((cleanup) => cleanup());
-        apiStateCleanupCallbacks = [];
-        excalidrawAPI = null;
-        collabReady = false;
-      },
-      initialData,
-      aiEnabled: false,
-      isCollaborating: true,
-      onChange: (elements, appState, files) => {
-        scheduleSyncToRoom(elements, appState, files);
-        roomClient.syncLocalSelectionAwareness(appState);
-      },
-      onPointerUpdate: (payload) => {
-        roomClient.scheduleLocalPointerAwareness(payload);
-      },
-      theme: currentTheme,
-      viewModeEnabled: isPreviewMode,
-      zenModeEnabled: isPreviewMode,
-      UIOptions: {
-        canvasActions: {
-          export: false,
-          loadScene: false,
-          saveToActiveFile: false,
-          toggleTheme: false,
-        },
-      },
-    };
-
-    const App = () => React.createElement(
-      'div',
-      { style: { height: '100vh', width: '100%' } },
-      React.createElement(Excalidraw, excalidrawProps),
-    );
-
-    const root = createRoot(document.getElementById('root'));
-    root.render(React.createElement(App));
+    reactRoot = createRoot(document.getElementById('root'));
+    renderExcalidrawApp({ initialData });
   } catch (error) {
     console.error('[excalidraw] Failed to initialize:', error);
     postToParent('error', {

package/src/client/export/export-page.js

@@ -1,4 +1,10 @@
-import { runExportAdapter, postExportPageMessage, prepareExportSnapshot, waitForBootstrapPayload } from './export-pipeline.js';
+import {
+  postExportPageMessage,
+  prepareExportSnapshot,
+  runExportAdapter,
+  waitForBootstrapPayload,
+  waitForRenderedExportContent,
+} from './export-pipeline.js';
 import { groupHeadingWithFollowingBlock } from './export-print-layout.js';
 
 function setStatus(message) {
@@ -28,13 +34,14 @@ function renderWarnings(snapshot) {
 function renderSnapshot(snapshot) {
   const mount = document.getElementById('exportContent');
   if (!mount) {
-    return;
+    return null;
   }
 
   document.title = `${snapshot.title} — Export`;
   mount.innerHTML = snapshot.html;
   groupHeadingWithFollowingBlock(mount);
   renderWarnings(snapshot);
+  return mount;
 }
 
 async function bootstrap() {
@@ -42,7 +49,8 @@ async function bootstrap() {
     setStatus('Loading export content…');
     const payload = await waitForBootstrapPayload();
     const snapshot = await prepareExportSnapshot(payload);
-    renderSnapshot(snapshot);
+    const mount = renderSnapshot(snapshot);
+    snapshot.html = await waitForRenderedExportContent(mount);
     setStatus(payload.action === 'pdf' ? 'Opening print dialog…' : 'Preparing DOCX download…');
     await runExportAdapter(snapshot, payload.action);
     setStatus(payload.action === 'pdf' ? 'Print dialog opened.' : 'DOCX download started.');

package/src/client/export/export-pipeline.js

@@ -23,6 +23,7 @@ const LIGHT_EXPORT_MERMAID_THEME = Object.freeze({
 });
 const EXPORT_ASSET_FETCH_TIMEOUT_MS = 10_000;
 const EXPORT_ASSET_MAX_BYTES = 10 * 1024 * 1024;
+const EXPORT_RENDER_SETTLE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_TIMEOUT_MS = 10_000;
 const VIDEO_POSTER_CAPTURE_SEEK_SECONDS = 1;
 
@@ -48,6 +49,10 @@ function encodeSvgDataUrl(svgMarkup) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
 }
 
+function waitForAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
 function blobToDataUrl(blob) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -177,6 +182,49 @@ async function imageDataUrlToPngDataUrl(dataUrl) {
   return canvas.toDataURL('image/png');
 }
 
+async function waitForImageElement(image, {
+  timeoutMs = EXPORT_RENDER_SETTLE_TIMEOUT_MS,
+} = {}) {
+  if (!(image instanceof HTMLImageElement)) {
+    return;
+  }
+
+  if (!image.getAttribute('src')) {
+    return;
+  }
+
+  if (!image.complete) {
+    await new Promise((resolve) => {
+      let settled = false;
+      const cleanup = () => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        window.clearTimeout(timeoutId);
+        image.removeEventListener('load', handleDone);
+        image.removeEventListener('error', handleDone);
+      };
+      const handleDone = () => {
+        cleanup();
+        resolve();
+      };
+      const timeoutId = window.setTimeout(handleDone, timeoutMs);
+
+      image.addEventListener('load', handleDone, { once: true });
+      image.addEventListener('error', handleDone, { once: true });
+
+      if (image.complete) {
+        handleDone();
+      }
+    });
+  }
+
+  if (typeof image.decode === 'function') {
+    await image.decode().catch(() => {});
+  }
+}
+
 async function fetchJson(url, init = {}) {
   const response = await fetch(url, {
     headers: {
@@ -1322,8 +1370,8 @@ export async function docxAdapter(snapshot) {
 }
 
 export async function printPdfAdapter() {
-  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-  await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  await waitForAnimationFrame();
+  await waitForAnimationFrame();
 
   await new Promise((resolve) => {
     const timeoutId = window.setTimeout(resolve, 1500);
@@ -1337,6 +1385,33 @@ export async function printPdfAdapter() {
   });
 }
 
+export async function waitForRenderedExportContent(container, {
+  settleFrames = 2,
+  timeoutMs = EXPORT_RENDER_SETTLE_TIMEOUT_MS,
+} = {}) {
+  if (!container) {
+    return '';
+  }
+
+  const imageWaiters = Array.from(container.querySelectorAll('img')).map((image) => (
+    waitForImageElement(image, { timeoutMs })
+  ));
+  const fontReadyPromise = document.fonts?.ready
+    ? Promise.resolve(document.fonts.ready).catch(() => {})
+    : Promise.resolve();
+
+  await Promise.allSettled([
+    fontReadyPromise,
+    ...imageWaiters,
+  ]);
+
+  for (let index = 0; index < settleFrames; index += 1) {
+    await waitForAnimationFrame();
+  }
+
+  return container.innerHTML;
+}
+
 export async function runExportAdapter(snapshot, format) {
   if (format === 'pdf') {
     await printPdfAdapter(snapshot);

package/src/client/infrastructure/auth-client.js

@@ -156,7 +156,7 @@ function renderOidcPrompt(card, config, {
   actions.className = 'auth-gate-actions';
 
   const signInButton = document.createElement('button');
-  signInButton.className = 'auth-gate-button auth-gate-button--google';
+  signInButton.className = 'ui-button ui-button--secondary auth-gate-button auth-gate-button--google';
   signInButton.type = 'button';
   signInButton.append(createGoogleIcon(), document.createTextNode(config.submitLabel || 'Continue with Google'));
 
@@ -191,7 +191,7 @@ function renderStatusCard(card, {
 
   if (secondaryActionLabel && typeof onSecondaryAction === 'function') {
     const button = document.createElement('button');
-    button.className = 'auth-gate-secondary-button';
+    button.className = 'ui-button ui-button--secondary auth-gate-secondary-button';
     button.type = 'button';
     button.textContent = secondaryActionLabel;
     button.addEventListener('click', () => {
@@ -220,7 +220,7 @@ function renderPasswordPrompt(card, config, {
   label.textContent = config.passwordLabel;
 
   const input = document.createElement('input');
-  input.className = 'auth-gate-input';
+  input.className = 'ui-input auth-gate-input';
   input.type = 'password';
   input.name = 'password';
   input.autocomplete = 'current-password';
@@ -233,7 +233,7 @@ function renderPasswordPrompt(card, config, {
   actions.className = 'auth-gate-actions';
 
   const submitButton = document.createElement('button');
-  submitButton.className = 'auth-gate-button';
+  submitButton.className = 'ui-button ui-button--primary auth-gate-button';
   submitButton.type = 'submit';
   submitButton.textContent = config.submitLabel;
 

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

@@ -0,0 +1,18 @@
+import { resolveApiUrl } from '../domain/runtime-paths.js';
+
+export class BacklinksApiClient {
+  async readBacklinks(filePath, { signal } = {}) {
+    const response = await fetch(
+      resolveApiUrl(`/backlinks?file=${encodeURIComponent(filePath)}`),
+      { signal },
+    );
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      throw new Error(data.error || 'Failed to load backlinks');
+    }
+
+    return Array.isArray(data.backlinks) ? data.backlinks : [];
+  }
+}
+
+export const backlinksApiClient = new BacklinksApiClient();

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

@@ -134,6 +134,10 @@ export class CommentThreadStore {
     this.onCommentsChange?.(this.getCommentThreads());
   }
 
+  refreshComments() {
+    this.emitCommentsChange();
+  }
+
   getCommentThreads() {
     if (!this.commentThreads) {
       return [];

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

@@ -93,6 +93,7 @@ export class EditorSession {
       undoManager: this.pendingCollaborativeBindings.undoManager,
       ytext: this.pendingCollaborativeBindings.ytext,
     });
+    this.commentThreadStore.refreshComments();
     this.pendingCollaborativeBindings = null;
     this.bootstrapContent = null;
     return true;
@@ -109,6 +110,7 @@ export class EditorSession {
       content: this.bootstrapContent,
       filePath: this.activeFilePath,
     });
+    this.commentThreadStore.refreshComments();
     return this.emitContentChange();
   }