collabmd 0.1.34 → 0.1.36

package/src/client/domain/diagram-action-icons.js

@@ -1,10 +1,29 @@
 const DIAGRAM_ACTION_ICONS = {
+  copy: `
+    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M5.5 5.5h6.8v8h-6.8z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M3.7 10.5H3a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+    </svg>
+  `,
+  download: `
+    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M8 2.2v7.2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M5.3 7.2 8 10l2.7-2.8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M3 12.8h10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+    </svg>
+  `,
   edit: `
     <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
       <path d="M11.8 1.8a1.5 1.5 0 0 1 2.1 2.1l-7.2 7.2-3.2.9.9-3.2z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
       <path d="M10.7 2.9l2.4 2.4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
     </svg>
   `,
+  fit: `
+    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+      <path d="M5.5 6.2V3H2.3M10.5 6.2V3h3.2M10.5 9.8V13h3.2M5.5 9.8V13H2.3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+      <path d="M5.5 6.2h5M5.5 9.8h5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
+    </svg>
+  `,
   maximize: `
     <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
       <path d="M6 2H2v4M10 2h4v4M14 10v4h-4M2 10v4h4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"/>
@@ -32,10 +51,12 @@ export function setDiagramActionButtonIcon(button, iconName) {
   const markup = DIAGRAM_ACTION_ICONS[iconName];
   if (!markup) {
     button.classList.remove('is-icon-only');
+    button.classList.remove('ui-preview-action--icon-only');
     return;
   }
 
   button.classList.add('is-icon-only');
+  button.classList.add('ui-preview-action--icon-only');
   button.dataset.icon = iconName;
   button.innerHTML = markup.trim();
 }

package/src/client/domain/excalidraw-api-scene-sync.js

@@ -0,0 +1,70 @@
+function normalizeBinaryFileVersion(value) {
+  return Number.isFinite(Number(value)) ? Number(value) : null;
+}
+
+function normalizeBinaryFileDataUrl(value) {
+  return typeof value === 'string' ? value : '';
+}
+
+export function hasBinaryFilePayloadConflict(currentFile, nextFile) {
+  return (
+    normalizeBinaryFileVersion(currentFile?.version) !== normalizeBinaryFileVersion(nextFile?.version)
+    || normalizeBinaryFileDataUrl(currentFile?.dataURL) !== normalizeBinaryFileDataUrl(nextFile?.dataURL)
+  );
+}
+
+export function buildExcalidrawFileSyncPlan(currentFiles = {}, nextFiles = {}) {
+  const missingFiles = [];
+  const conflictingFileIds = [];
+
+  Object.entries(nextFiles || {}).forEach(([fileId, nextFile]) => {
+    const currentFile = currentFiles?.[fileId];
+    if (!currentFile) {
+      missingFiles.push(nextFile);
+      return;
+    }
+
+    if (hasBinaryFilePayloadConflict(currentFile, nextFile)) {
+      conflictingFileIds.push(fileId);
+    }
+  });
+
+  return {
+    conflictingFileIds,
+    missingFiles,
+    requiresRemount: conflictingFileIds.length > 0,
+  };
+}
+
+export function applySceneUpdateWithFiles(api, {
+  captureUpdate,
+  files = {},
+  sceneUpdate,
+} = {}, {
+  onFileConflict = () => {},
+} = {}) {
+  const currentFiles = api?.getFiles?.() || {};
+  const syncPlan = buildExcalidrawFileSyncPlan(currentFiles, files);
+
+  if (syncPlan.requiresRemount) {
+    onFileConflict(syncPlan);
+    return {
+      ...syncPlan,
+      applied: false,
+    };
+  }
+
+  if (syncPlan.missingFiles.length > 0) {
+    api.addFiles(syncPlan.missingFiles);
+  }
+
+  api.updateScene({
+    ...sceneUpdate,
+    captureUpdate,
+  });
+
+  return {
+    ...syncPlan,
+    applied: true,
+  };
+}

package/src/client/domain/keyboard-shortcuts.js

@@ -0,0 +1,8 @@
+export function isPlainQuickSwitcherShortcut(event) {
+  if (!event || event.repeat || (!event.metaKey && !event.ctrlKey) || event.shiftKey || event.altKey) {
+    return false;
+  }
+
+  const key = String(event.key ?? '').toLowerCase();
+  return key === 'k' || event.code === 'KeyK';
+}

package/src/client/drawio-editor.js

@@ -2,6 +2,7 @@ import './styles/surfaces/embedded-editor-base.css';
 import './styles/surfaces/drawio-editor.css';
 
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
+import { isPlainQuickSwitcherShortcut } from './domain/keyboard-shortcuts.js';
 import { DrawioLeaseClient } from './infrastructure/drawio-lease-client.js';
 import { getRuntimeConfig } from './infrastructure/runtime-config.js';
 import { vaultApiClient } from './infrastructure/vault-api-client.js';
@@ -76,6 +77,16 @@ function postToParent(type, payload = {}) {
   window.parent.postMessage({ source: 'drawio-editor', instanceId, type, ...payload }, parentOrigin);
 }
 
+function handleQuickSwitcherKeyDown(event) {
+  if (!isPlainQuickSwitcherShortcut(event)) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  postToParent('request-toggle-quick-switcher');
+}
+
 function parseMessagePayload(rawValue) {
   if (typeof rawValue === 'string') {
     try {
@@ -418,6 +429,8 @@ async function claimEdit() {
   drawioLeaseClient.tryAcquireLease();
 }
 
+window.addEventListener('keydown', handleQuickSwitcherKeyDown, { capture: true });
+
 async function init() {
   setBodyTheme(currentTheme);
 

package/src/client/excalidraw-editor.js

@@ -16,6 +16,9 @@ import {
 } from './domain/excalidraw-collaboration.js';
 import './styles/surfaces/embedded-editor-base.css';
 import './styles/surfaces/excalidraw-editor.css';
+import {
+  applySceneUpdateWithFiles,
+} from './domain/excalidraw-api-scene-sync.js';
 import {
   normalizeScene,
   parseSceneJson,
@@ -24,6 +27,7 @@ import {
 import {
   normalizeDocumentMode,
 } from './domain/excalidraw-document-switch.js';
+import { isPlainQuickSwitcherShortcut } from './domain/keyboard-shortcuts.js';
 import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
 import { ExcalidrawRoomClient } from './infrastructure/excalidraw-room-client.js';
 import { vaultApiClient } from './infrastructure/vault-api-client.js';
@@ -63,6 +67,9 @@ let initialViewportFitPending = true;
 let roomClient = null;
 let roomClientGeneration = 0;
 let reactRoot = null;
+let editorRenderKey = 0;
+let skipRoomDisconnectOnUnmount = false;
+const reportedFileConflictSignatures = new Set();
 
 function getDocumentViewState(mode = currentDocument.mode) {
   const normalizedMode = normalizeDocumentMode(mode);
@@ -113,7 +120,11 @@ function buildExcalidrawProps({ initialData } = {}) {
     },
     onUnmount: () => {
       clearEditorApiStateBindings();
-      disconnectRealtimeRoom({ preserveEditorBindings: true });
+      if (skipRoomDisconnectOnUnmount) {
+        skipRoomDisconnectOnUnmount = false;
+      } else {
+        disconnectRealtimeRoom({ preserveEditorBindings: true });
+      }
       excalidrawAPI = null;
       collabReady = false;
     },
@@ -154,7 +165,10 @@ function renderExcalidrawApp({ initialData } = {}) {
     React.createElement(
       'div',
       { style: { height: '100vh', width: '100%' } },
-      React.createElement(Excalidraw, buildExcalidrawProps({ initialData })),
+      React.createElement(Excalidraw, {
+        key: `editor-${editorRenderKey}`,
+        ...buildExcalidrawProps({ initialData }),
+      }),
     ),
   );
 }
@@ -224,6 +238,13 @@ if (isTestMode) {
         .map((element) => element.id)
         .sort() ?? []
     ),
+    getElementStatus: (elementId) => (
+      excalidrawAPI?.getSceneElementsIncludingDeleted?.()
+        ?.find((entry) => entry.id === elementId && !entry.isDeleted)?.status ?? null
+    ),
+    getFileIds: () => (
+      Object.keys(excalidrawAPI?.getFiles?.() || {}).sort()
+    ),
     getHistoryState: () => getNativeHistoryState(),
     getLocalUserName: () => localAwarenessUser?.name || '',
     getLocalPeerId: () => localAwarenessUser?.peerId || '',
@@ -321,7 +342,9 @@ function applySceneFromJson(rawJson) {
     return;
   }
 
-  updateApiScene(scene);
+  updateApiScene(scene, {
+    replaceElements: true,
+  });
 }
 
 function releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot = false } = {}) {
@@ -376,35 +399,100 @@ function buildApiSceneUpdate(scene, {
       ...appStateOverrides,
     },
     elements: reconciledElements,
-    files: scene?.files || {},
   };
 }
 
-function updateApiScene(scene, {
+function logFileConflictOnce(conflictingFileIds = []) {
+  const signature = `${currentDocument.filePath}::${[...conflictingFileIds].sort().join(',')}`;
+  if (reportedFileConflictSignatures.has(signature)) {
+    return;
+  }
+
+  reportedFileConflictSignatures.add(signature);
+  console.warn(
+    `[excalidraw:${currentDocument.filePath}] Remounting editor after receiving conflicting binary file payload(s) for existing file ids: ${conflictingFileIds.join(', ')}`,
+  );
+}
+
+function requestEditorRemount(scene) {
+  if (!reactRoot) {
+    return false;
+  }
+
+  const normalizedScene = normalizeScene(scene);
+  const normalizedJson = JSON.stringify(normalizedScene);
+  pendingRemoteSceneJson = normalizedJson;
+  appliedSceneJson = normalizedJson;
+  pendingCollaborators = activeCollaborators;
+  initialViewportFitPending = true;
+  clearEditorApiStateBindings();
+  skipRoomDisconnectOnUnmount = true;
+  editorRenderKey += 1;
+  renderExcalidrawApp({
+    initialData: sceneToInitialData(normalizedScene, { theme: currentTheme }),
+  });
+  return true;
+}
+
+function applySceneToMountedApi(scene, {
   appStateOverrides = {},
   captureUpdate = CaptureUpdateAction.NEVER,
   replaceElements = false,
-  trackedSharedSnapshot = true,
+  trackedSharedSnapshot = false,
 } = {}) {
   const nextSceneUpdate = buildApiSceneUpdate(scene, {
     appStateOverrides,
     replaceElements,
   });
+  let applyResult = null;
 
   suppressOnChange = true;
   if (trackedSharedSnapshot) {
     roomClient?.beginApplyingSharedSnapshot();
   }
+
   try {
-    excalidrawAPI.updateScene({
-      ...nextSceneUpdate,
+    applyResult = applySceneUpdateWithFiles(excalidrawAPI, {
       captureUpdate,
+      files: scene?.files || {},
+      sceneUpdate: nextSceneUpdate,
+    }, {
+      onFileConflict: ({ conflictingFileIds }) => {
+        logFileConflictOnce(conflictingFileIds);
+      },
     });
   } finally {
-    releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot });
+    if (applyResult?.requiresRemount) {
+      if (trackedSharedSnapshot) {
+        roomClient?.endApplyingSharedSnapshot();
+      }
+      suppressOnChange = false;
+    } else {
+      releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot });
+    }
+  }
+
+  if (applyResult?.requiresRemount) {
+    requestEditorRemount(scene);
+    return applyResult;
   }
 
   scheduleInitialViewportFit();
+  return applyResult;
+}
+
+function updateApiScene(scene, {
+  appStateOverrides = {},
+  captureUpdate = CaptureUpdateAction.NEVER,
+  replaceElements = false,
+  trackedSharedSnapshot = true,
+} = {}) {
+  applySceneToMountedApi(scene, {
+    appStateOverrides,
+    captureUpdate,
+    replaceElements,
+    trackedSharedSnapshot,
+  });
 }
 
 function applyLocalScene(scene, {
@@ -420,16 +508,12 @@ function applyLocalScene(scene, {
     return;
   }
 
-  excalidrawAPI.updateScene({
-    ...buildApiSceneUpdate(normalizedScene),
+  applySceneToMountedApi(normalizedScene, {
     captureUpdate,
   });
-
-  if (suppressOnChange) {
-    roomClient?.commitSceneJson(normalizedJson, {
-      origin: 'excalidraw-local-scene-apply',
-    });
-  }
+  roomClient?.commitSceneJson(normalizedJson, {
+    origin: 'excalidraw-local-scene-apply',
+  });
 }
 
 function onRoomTextUpdate() {
@@ -440,6 +524,16 @@ function postToParent(type, payload = {}) {
   window.parent.postMessage({ source: 'excalidraw-editor', type, ...payload }, parentOrigin);
 }
 
+function handleQuickSwitcherKeyDown(event) {
+  if (!isPlainQuickSwitcherShortcut(event)) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  postToParent('request-toggle-quick-switcher');
+}
+
 function getSceneElementsForPreviewFit() {
   return (
     excalidrawAPI?.getSceneElementsIncludingDeleted?.()
@@ -705,11 +799,16 @@ function scheduleSyncToRoom(elements, appState, files) {
     return;
   }
 
-  appliedSceneJson = JSON.stringify(normalizeScene({
+  const nextSceneJson = JSON.stringify(normalizeScene({
     elements,
     appState,
     files,
   }));
+  if (nextSceneJson === appliedSceneJson) {
+    return;
+  }
+
+  appliedSceneJson = nextSceneJson;
   roomClient.scheduleSceneSync(elements, appState, files);
 }
 
@@ -757,6 +856,8 @@ function handleEditorMount({ excalidrawAPI: api }) {
   excalidrawAPI = api;
 }
 
+window.addEventListener('keydown', handleQuickSwitcherKeyDown, { capture: true });
+
 async function init() {
   const loadingElement = document.getElementById('loadingState');
 

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

@@ -210,7 +210,7 @@ export class ExcalidrawRoomClient {
     let initialJson = this.getStructuredSceneJson();
     let usedApiFallback = false;
     if (!initialJson) {
-      const sceneFromApi = await this.loadSceneFromApi();
+      const sceneFromApi = await this.loadSceneFromApi({ createIfMissing: false });
       const syncedJson = this.getStructuredSceneJson();
       if (syncedJson) {
         initialJson = syncedJson;
@@ -368,8 +368,31 @@ export class ExcalidrawRoomClient {
     replaceExcalidrawRoomScene(this.ydoc, nextScene);
   }
 
+  mergeLocallyChangedAppState(appState, baseSceneJson) {
+    const baseScene = parseSceneJson(baseSceneJson);
+    const roomScene = parseSceneJson(this.getStructuredSceneJson() || this.lastSceneJson);
+    const nextAppState = {
+      ...roomScene.appState,
+    };
+
+    ['gridSize', 'viewBackgroundColor'].forEach((key) => {
+      if (appState?.[key] === baseScene.appState?.[key]) {
+        return;
+      }
+
+      nextAppState[key] = appState?.[key];
+    });
+
+    return nextAppState;
+  }
+
   scheduleSceneSync(elements, appState, files) {
-    this.pendingSceneSyncPayload = { appState, elements, files };
+    this.pendingSceneSyncPayload = {
+      appState,
+      baseSceneJson: this.lastSceneJson,
+      elements,
+      files,
+    };
     if (!this.canWriteToRoom) {
       return;
     }
@@ -395,13 +418,27 @@ export class ExcalidrawRoomClient {
       return;
     }
 
-    const { elements, appState, files } = this.pendingSceneSyncPayload;
+    const {
+      appState,
+      baseSceneJson,
+      elements,
+      files,
+    } = this.pendingSceneSyncPayload;
     this.pendingSceneSyncPayload = null;
 
-    const sceneData = buildLiveCollaborationScene(elements, appState, files);
+    const sceneData = buildLiveCollaborationScene(
+      elements,
+      this.mergeLocallyChangedAppState(appState, baseSceneJson),
+      files,
+    );
     const json = JSON.stringify(sceneData);
     if (this.shouldDelayEmptySceneCommit(json)) {
-      this.pendingSceneSyncPayload = { appState, elements, files };
+      this.pendingSceneSyncPayload = {
+        appState,
+        baseSceneJson,
+        elements,
+        files,
+      };
       this.scheduleDelayedEmptySceneCommit();
       return;
     }

package/src/client/infrastructure/workspace-sync-client.js

@@ -6,6 +6,29 @@ import { WORKSPACE_ROOM_NAME } from '../../domain/workspace-room.js';
 import { resolveWsBaseUrl } from '../domain/runtime-paths.js';
 import { stopReconnectOnControlledClose } from './yjs-provider-reset-guard.js';
 
+function normalizeWorkspacePath(pathValue = '') {
+  return String(pathValue ?? '')
+    .trim()
+    .replace(/\\/g, '/')
+    .split('/')
+    .filter(Boolean)
+    .join('/');
+}
+
+function getParentDirectoryPath(pathValue = '') {
+  const normalizedPath = normalizeWorkspacePath(pathValue);
+  if (!normalizedPath) {
+    return '';
+  }
+
+  const separatorIndex = normalizedPath.lastIndexOf('/');
+  return separatorIndex >= 0 ? normalizedPath.slice(0, separatorIndex) : '';
+}
+
+function getEntryParentPath(entry = {}) {
+  return getParentDirectoryPath(entry?.path ?? '');
+}
+
 function createNode(entry) {
   if (!entry?.path || !entry?.type) {
     return null;
@@ -87,7 +110,7 @@ class WorkspaceTreeModel {
     sortPathsByDepth(Array.from(this.nodesByPath.keys())).forEach((pathValue) => {
       const node = this.nodesByPath.get(pathValue);
       if (node) {
-        this.attachNode(pathValue, node, this.entriesByPath.get(pathValue)?.parentPath || '');
+        this.attachNode(pathValue, node, getEntryParentPath(this.entriesByPath.get(pathValue)));
       }
     });
 
@@ -170,7 +193,7 @@ class WorkspaceTreeModel {
     }
 
     this.entriesByPath.set(pathValue, entry);
-    this.attachNode(pathValue, node, entry.parentPath || '');
+    this.attachNode(pathValue, node, getEntryParentPath(entry));
 
     if (node.type === 'directory') {
       this.rehomeChildren(pathValue);
@@ -214,7 +237,7 @@ class WorkspaceTreeModel {
 
   rehomeChildren(parentPath) {
     this.entriesByPath.forEach((entry, pathValue) => {
-      if (entry?.parentPath !== parentPath) {
+      if (getEntryParentPath(entry) !== parentPath) {
         return;
       }
 

package/src/client/presentation/app-shell-template.js

@@ -107,7 +107,14 @@ export function appShellTemplate() {
             </button>
             <div class="toolbar-room-info">
               <span class="toolbar-room-name" id="activeFileName">CollabMD</span>
-              <span class=${badgeClassNames({ tone: 'accent', extra: 'toolbar-badge' })} id="userCount"></span>
+              <button
+                type="button"
+                class=${badgeClassNames({ tone: 'accent', extra: ['toolbar-badge', 'toolbar-badge-button'] })}
+                id="userCount"
+                aria-controls="presencePanel"
+                aria-expanded="false"
+                data-presence-panel-trigger="true"
+              ></button>
               <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="toolbarDiffBadge">Diff</span>
               <span class=${badgeClassNames({ tone: 'accent', hidden: true, extra: 'toolbar-badge' })} id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
             </div>
@@ -149,6 +156,16 @@ export function appShellTemplate() {
 
             <div class="user-avatars toolbar-presence-cluster" id="userAvatars"></div>
 
+            <section class="presence-panel hidden" id="presencePanel" aria-label="Online users" aria-hidden="true">
+              <div class="presence-panel-header">
+                <div>
+                  <h2 class="presence-panel-title">Online now</h2>
+                  <p class="presence-panel-status" id="presencePanelStatus">Click someone to follow.</p>
+                </div>
+              </div>
+              <div class="presence-panel-list" id="presencePanelList"></div>
+            </section>
+
             <div class="chat-container" id="chatContainer">
               <button class=${buttonClassNames({ variant: 'ghost', toolbar: true, extra: 'chat-toggle-btn' })} id="chatToggleBtn" aria-label="Open team chat" aria-expanded="false" title="Team chat">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">