collabmd 0.1.35 → 0.1.36

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,
@@ -64,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);
@@ -114,7 +120,11 @@ function buildExcalidrawProps({ initialData } = {}) {
     },
     onUnmount: () => {
       clearEditorApiStateBindings();
-      disconnectRealtimeRoom({ preserveEditorBindings: true });
+      if (skipRoomDisconnectOnUnmount) {
+        skipRoomDisconnectOnUnmount = false;
+      } else {
+        disconnectRealtimeRoom({ preserveEditorBindings: true });
+      }
       excalidrawAPI = null;
       collabReady = false;
     },
@@ -155,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 }),
+      }),
     ),
   );
 }
@@ -225,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 || '',
@@ -322,7 +342,9 @@ function applySceneFromJson(rawJson) {
     return;
   }
 
-  updateApiScene(scene);
+  updateApiScene(scene, {
+    replaceElements: true,
+  });
 }
 
 function releaseOnChangeSuppressionAfterPaint({ trackedSharedSnapshot = false } = {}) {
@@ -377,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, {
@@ -421,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() {
@@ -716,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);
 }
 

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

@@ -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/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">

package/src/client/presentation/file-explorer-controller.js

@@ -90,6 +90,16 @@ export class FileExplorerController {
     this.renderTree();
   }
 
+  revealFile(filePath, { clearSearch = false } = {}) {
+    if (clearSearch) {
+      this.state.setSearchQuery('');
+    }
+
+    this.state.setActiveFile(filePath);
+    this.renderTree({ reset: clearSearch });
+    this.view.revealFile(filePath);
+  }
+
   get flatFiles() {
     return this.state.flatFiles;
   }

package/src/client/presentation/file-explorer-view.js

@@ -131,6 +131,12 @@ export class FileExplorerView {
     });
   }
 
+  revealFile(filePath) {
+    const fileItem = Array.from(this.treeContainer?.querySelectorAll('.file-tree-file') ?? [])
+      .find((element) => element.dataset.path === filePath);
+    fileItem?.scrollIntoView({ block: 'nearest' });
+  }
+
   render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
     if (!this.treeContainer) {
       return;