collabmd 0.1.33 → 0.1.34

package/dist/client/index.html

@@ -15,7 +15,7 @@
       document.documentElement.setAttribute('data-initial-file-requested', 'true');
     }
   </script>
-  <script type="module" crossorigin src="./assets/index-Czg_KL-i.js"></script>
+  <script type="module" crossorigin src="./assets/index-BLrtj9YM.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/runtime-config-loader-_D2KZKn-.js">
   <link rel="modulepreload" crossorigin href="./assets/preload-helper-Bo9GmnuQ.js">
   <link rel="modulepreload" crossorigin href="./assets/base-h1uscjTi.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabmd",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "type": "module",
   "description": "Collaborative markdown vault — like Obsidian, but online. Serve any directory of markdown files for realtime collaborative editing.",
   "repository": {
@@ -84,6 +84,7 @@
     "openid-client": "^6.8.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "sharp": "^0.34.5",
     "ws": "^8.20.0",
     "y-codemirror.next": "^0.3.5",
     "y-protocols": "^1.0.7",

package/src/client/application/app-shell/git-feature.js

@@ -232,6 +232,48 @@ export const gitFeature = {
     await this.fileHistoryView.openFileHistory({ filePath });
   },
 
+  async _loadGitFileSnapshot({ hash, filePath, resolvedCurrentFilePath }) {
+    const data = await this.gitApiClient.readFileSnapshot({
+      hash,
+      path: filePath,
+    });
+    this.setStaticPreviewDocument?.({
+      ...data,
+      currentFilePath: resolvedCurrentFilePath,
+    });
+    this.resetPreviewMode();
+    this.elements.markdownToolbar?.classList.add('hidden');
+    this.elements.outlineToggle?.classList.toggle('hidden', data.fileKind !== 'markdown');
+
+    if (data.fileKind === 'markdown' || data.fileKind === 'mermaid' || data.fileKind === 'plantuml') {
+      if (data.fileKind === 'mermaid') {
+        this.elements.previewContent?.classList.add('is-mermaid-file-preview');
+      } else if (data.fileKind === 'plantuml') {
+        this.elements.previewContent?.classList.add('is-plantuml-file-preview');
+      }
+      this.previewRenderer.beginDocumentLoad();
+      this.previewRenderer.queueRender();
+      return;
+    }
+
+    this.elements.outlineToggle?.classList.add('hidden');
+    this.renderTextFilePreview?.({
+      content: data.content,
+      filePath: resolvedCurrentFilePath,
+    });
+  },
+
+  _handleGitFilePreviewError(error, resolvedCurrentFilePath) {
+    console.error('[git-preview] Failed to load file snapshot:', error);
+    this.clearStaticPreviewDocument?.();
+    this.toastController.show('Failed to load historical file preview');
+    this.renderTextFilePreview?.({
+      content: 'Failed to load historical file preview.',
+      filePath: resolvedCurrentFilePath,
+    });
+    this.elements.outlineToggle?.classList.add('hidden');
+  },
+
   async showGitFilePreview({ hash, filePath = null, currentFilePath = null } = {}) {
     const resolvedCurrentFilePath = String(currentFilePath ?? '').trim() || filePath;
     if (!hash || !filePath || !resolvedCurrentFilePath) {
@@ -256,43 +298,9 @@ export const gitFeature = {
     this.syncFileHistoryButton({ filePath: resolvedCurrentFilePath, mode: 'history-preview' });
 
     try {
-      const data = await this.gitApiClient.readFileSnapshot({
-        hash,
-        path: filePath,
-      });
-      this.setStaticPreviewDocument?.({
-        ...data,
-        currentFilePath: resolvedCurrentFilePath,
-      });
-      this.resetPreviewMode();
-      this.elements.markdownToolbar?.classList.add('hidden');
-      this.elements.outlineToggle?.classList.toggle('hidden', data.fileKind !== 'markdown');
-
-      if (data.fileKind === 'markdown' || data.fileKind === 'mermaid' || data.fileKind === 'plantuml') {
-        if (data.fileKind === 'mermaid') {
-          this.elements.previewContent?.classList.add('is-mermaid-file-preview');
-        } else if (data.fileKind === 'plantuml') {
-          this.elements.previewContent?.classList.add('is-plantuml-file-preview');
-        }
-        this.previewRenderer.beginDocumentLoad();
-        this.previewRenderer.queueRender();
-        return;
-      }
-
-      this.elements.outlineToggle?.classList.add('hidden');
-      this.renderTextFilePreview?.({
-        content: data.content,
-        filePath: resolvedCurrentFilePath,
-      });
+      await this._loadGitFileSnapshot({ hash, filePath, resolvedCurrentFilePath });
     } catch (error) {
-      console.error('[git-preview] Failed to load file snapshot:', error);
-      this.clearStaticPreviewDocument?.();
-      this.toastController.show('Failed to load historical file preview');
-      this.renderTextFilePreview?.({
-        content: 'Failed to load historical file preview.',
-        filePath: resolvedCurrentFilePath,
-      });
-      this.elements.outlineToggle?.classList.add('hidden');
+      this._handleGitFilePreviewError(error, resolvedCurrentFilePath);
     }
   },
 

package/src/client/application/app-shell/ui-feature-shell.js

@@ -136,31 +136,7 @@ function promptForVersionReload(payload = null) {
 }
 
 /** @this {UiShellContext} */
-function bindEvents() {
-  this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
-    this.fileExplorer.actionController.openRootCreateMenu({
-      anchor: this.elements.emptyStateNewFileBtn,
-    });
-  });
-
-  this.elements.emptyStateSearchBtn?.addEventListener('click', () => {
-    void this.toggleQuickSwitcher();
-  });
-
-  this.elements.chatToggleButton?.addEventListener('click', () => {
-    this.toggleChatPanel();
-    this.closeToolbarOverflowMenu?.();
-  });
-
-  this.elements.chatForm?.addEventListener('submit', (event) => {
-    event.preventDefault();
-    this.handleChatSubmit();
-  });
-
-  this.elements.chatNotificationButton?.addEventListener('click', () => {
-    void this.handleChatNotificationToggle();
-  });
-
+function bindToolbarEvents() {
   this.elements.shareButton?.addEventListener('click', () => {
     void this.copyCurrentLink();
     this.closeToolbarOverflowMenu?.();
@@ -197,7 +173,10 @@ function bindEvents() {
     this.openDisplayNameDialog();
     this.closeToolbarOverflowMenu?.();
   });
+}
 
+/** @this {UiShellContext} */
+function bindDialogEvents() {
   this.elements.displayNameCancel?.addEventListener('click', () => {
     this.elements.displayNameDialog?.close();
   });
@@ -233,14 +212,6 @@ function bindEvents() {
     }
   });
 
-  this.elements.markdownToolbar?.addEventListener('click', (event) => {
-    this.handleMarkdownToolbarClick?.(event);
-  });
-
-  this.elements.markdownToolbar?.addEventListener('keydown', (event) => {
-    this.handleMarkdownToolbarKeydown?.(event);
-  });
-
   this.elements.displayNameForm?.addEventListener('submit', (event) => {
     event.preventDefault();
     this.handleDisplayNameSubmit();
@@ -250,6 +221,44 @@ function bindEvents() {
     event.preventDefault();
     void this.handleGitCommitSubmit();
   });
+}
+
+/** @this {UiShellContext} */
+function bindEvents() {
+  this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
+    this.fileExplorer.actionController.openRootCreateMenu({
+      anchor: this.elements.emptyStateNewFileBtn,
+    });
+  });
+
+  this.elements.emptyStateSearchBtn?.addEventListener('click', () => {
+    void this.toggleQuickSwitcher();
+  });
+
+  this.elements.chatToggleButton?.addEventListener('click', () => {
+    this.toggleChatPanel();
+    this.closeToolbarOverflowMenu?.();
+  });
+
+  this.elements.chatForm?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    this.handleChatSubmit();
+  });
+
+  this.elements.chatNotificationButton?.addEventListener('click', () => {
+    void this.handleChatNotificationToggle();
+  });
+
+  bindToolbarEvents.call(this);
+  bindDialogEvents.call(this);
+
+  this.elements.markdownToolbar?.addEventListener('click', (event) => {
+    this.handleMarkdownToolbarClick?.(event);
+  });
+
+  this.elements.markdownToolbar?.addEventListener('keydown', (event) => {
+    this.handleMarkdownToolbarKeydown?.(event);
+  });
 
   this.elements.tabLockTakeoverButton?.addEventListener('click', () => {
     this.handleTabTakeover();
@@ -299,43 +308,53 @@ function bindEvents() {
   });
 
   document.addEventListener('pointerdown', (event) => {
-    this.handleMarkdownToolbarDocumentPointerDown?.(event);
+    this.handleDocumentPointerDown(event);
+  });
 
-    if (
-      this.toolbarOverflowOpen
-      && !this.elements.toolbarOverflowMenu?.contains(event.target)
-      && !this.elements.toolbarOverflowToggle?.contains(event.target)
-    ) {
-      this.closeToolbarOverflowMenu();
-    }
+  document.addEventListener('keydown', (event) => {
+    this.handleDocumentKeydown(event);
+  });
+}
 
-    if (!this.chatIsOpen) {
-      return;
-    }
+/** @this {UiShellContext} */
+function handleDocumentPointerDown(event) {
+  this.handleMarkdownToolbarDocumentPointerDown?.(event);
+
+  if (
+    this.toolbarOverflowOpen
+    && !this.elements.toolbarOverflowMenu?.contains(event.target)
+    && !this.elements.toolbarOverflowToggle?.contains(event.target)
+  ) {
+    this.closeToolbarOverflowMenu();
+  }
 
-    if (this.elements.chatContainer?.contains(event.target)) {
-      return;
-    }
+  if (!this.chatIsOpen) {
+    return;
+  }
 
-    this.closeChatPanel();
-  });
+  if (this.elements.chatContainer?.contains(event.target)) {
+    return;
+  }
 
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && this.toolbarOverflowOpen) {
-      this.closeToolbarOverflowMenu();
-      return;
-    }
+  this.closeChatPanel();
+}
 
-    if (event.key === 'Escape' && this.chatIsOpen) {
-      this.closeChatPanel();
-      return;
-    }
+/** @this {UiShellContext} */
+function handleDocumentKeydown(event) {
+  if (event.key === 'Escape' && this.toolbarOverflowOpen) {
+    this.closeToolbarOverflowMenu();
+    return;
+  }
 
-    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-      event.preventDefault();
-      void this.toggleQuickSwitcher();
-    }
-  });
+  if (event.key === 'Escape' && this.chatIsOpen) {
+    this.closeChatPanel();
+    return;
+  }
+
+  if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+    event.preventDefault();
+    void this.toggleQuickSwitcher();
+  }
 }
 
 function isNestedTaskListClickTarget(target, taskItem) {
@@ -521,6 +540,8 @@ export const uiFeatureShellMethods = {
   closeToolbarOverflowMenu,
   getStoredLineWrapping,
   handleConnectionChange,
+  handleDocumentKeydown,
+  handleDocumentPointerDown,
   handlePreviewContentClick,
   handleThemeChange,
   hideEditorLoading,

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

@@ -153,6 +153,7 @@ export class ExcalidrawEmbedController {
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
     this.hydrationInProgress = false;
+    this._exitMaximizedEmbed();
     if (this.overlayRoot) {
       this.overlayRoot.hidden = true;
     }
@@ -762,7 +763,9 @@ export class ExcalidrawEmbedController {
         enterMaximize();
       }
     });
-    openBtn.addEventListener('click', () => {
+    openBtn.addEventListener('click', (event) => {
+      event.preventDefault();
+      this._exitMaximizedEmbed();
       this.onOpenFile?.(entry.filePath);
     });
 

package/src/client/presentation/file-history-view-controller.js

@@ -516,9 +516,15 @@ export class FileHistoryViewController {
         additions: Number(selectedEntry.additions || 0),
         deletions: Number(selectedEntry.deletions || 0),
       } : null);
+    const hasSelection = Boolean(selectedEntry);
+
+    this.syncToolbarIndicators(selectedEntry, selectedSummary, hasSelection);
+    this.syncToolbarButtonStates(hasSelection);
+  }
+
+  syncToolbarIndicators(selectedEntry, selectedSummary, hasSelection) {
     const additions = Number(selectedSummary?.additions || 0);
     const deletions = Number(selectedSummary?.deletions || 0);
-    const hasSelection = Boolean(selectedEntry);
 
     if (this.fileIndicator) {
       this.fileIndicator.textContent = selectedEntry?.type === 'commit'
@@ -535,7 +541,9 @@ export class FileHistoryViewController {
       `;
       this.stats.classList.toggle('hidden', !hasSelection);
     }
+  }
 
+  syncToolbarButtonStates(hasSelection) {
     this.backToHistoryButton?.classList.add('hidden');
     this.gitActionsGroup?.classList.add('hidden');
     this.layoutToggle?.classList.add('hidden');

package/src/client/presentation/git-panel-controller.js

@@ -149,115 +149,125 @@ export class GitPanelController {
     };
   }
 
-  initialize() {
-    this.panel?.addEventListener('click', (event) => {
-      const modeButton = event.target instanceof Element
-        ? event.target.closest('[data-git-panel-mode]')
-        : null;
-      if (modeButton) {
-        const nextMode = modeButton.getAttribute('data-git-panel-mode');
-        if (nextMode === 'changes' || nextMode === 'history') {
-          void this.setMode(nextMode);
-        }
-        return;
+  _handlePanelModeClick(event) {
+    const modeButton = event.target instanceof Element
+      ? event.target.closest('[data-git-panel-mode]')
+      : null;
+    if (modeButton) {
+      const nextMode = modeButton.getAttribute('data-git-panel-mode');
+      if (nextMode === 'changes' || nextMode === 'history') {
+        void this.setMode(nextMode);
       }
+      return true;
+    }
+    return false;
+  }
 
-      const toggleButton = event.target instanceof Element
-        ? event.target.closest('[data-git-section-toggle]')
-        : null;
-      if (toggleButton) {
-        const sectionKey = toggleButton.getAttribute('data-git-section-toggle');
-        this.toggleSection(sectionKey);
-        return;
-      }
+  _handleSectionToggleClick(event) {
+    const toggleButton = event.target instanceof Element
+      ? event.target.closest('[data-git-section-toggle]')
+      : null;
+    if (toggleButton) {
+      this.toggleSection(toggleButton.getAttribute('data-git-section-toggle'));
+      return true;
+    }
+    return false;
+  }
 
-      const historyButton = event.target instanceof Element
-        ? event.target.closest('[data-git-commit-hash]')
-        : null;
-      if (historyButton && !event.target.closest('[data-git-history-load-more]')) {
-        const hash = historyButton.getAttribute('data-git-commit-hash');
-        if (!hash) {
-          return;
-        }
+  _handleCommitHistoryClick(event) {
+    const historyButton = event.target instanceof Element
+      ? event.target.closest('[data-git-commit-hash]')
+      : null;
+    if (historyButton && !event.target.closest('[data-git-history-load-more]')) {
+      const hash = historyButton.getAttribute('data-git-commit-hash');
+      if (hash) {
         this.onSelectCommit(hash, { path: this.selection.commitHash === hash ? this.selection.path : null });
-        return;
       }
+      return true;
+    }
+    return false;
+  }
 
-      const loadMoreButton = event.target instanceof Element
-        ? event.target.closest('[data-git-history-load-more]')
-        : null;
-      if (loadMoreButton) {
-        void this.loadMoreHistory();
-        return;
+  _handleFileSelectionClick(event) {
+    const fileButton = event.target instanceof Element
+      ? event.target.closest('[data-git-path]')
+      : null;
+    if (fileButton && !event.target.closest('[data-git-file-action]')) {
+      const filePath = fileButton.getAttribute('data-git-path');
+      if (filePath) {
+        this.onSelectDiff(filePath, { scope: fileButton.getAttribute('data-git-scope') || 'working-tree' });
       }
+      return true;
+    }
+    return false;
+  }
 
-      const fileButton = event.target instanceof Element
-        ? event.target.closest('[data-git-path]')
-        : null;
-      if (fileButton && !event.target.closest('[data-git-file-action]')) {
-        const filePath = fileButton.getAttribute('data-git-path');
-        const scope = fileButton.getAttribute('data-git-scope') || 'working-tree';
-        if (!filePath) {
-          return;
-        }
-        this.onSelectDiff(filePath, { scope });
-        return;
+  _handleFileActionClick(event) {
+    const actionButton = event.target instanceof Element
+      ? event.target.closest('[data-git-file-action]')
+      : null;
+    if (actionButton) {
+      const action = actionButton.getAttribute('data-git-file-action');
+      const filePath = actionButton.getAttribute('data-git-path');
+      if (action && filePath) {
+        event.preventDefault();
+        event.stopPropagation();
+        void this.handleFileAction(action, filePath, actionButton.getAttribute('data-git-scope') || 'working-tree');
       }
+      return true;
+    }
+    return false;
+  }
 
-      const pullBackupButton = event.target instanceof Element
-        ? event.target.closest('[data-git-pull-backup-path]')
-        : null;
-      if (pullBackupButton) {
-        const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
-        if (!summaryPath) {
-          return;
-        }
+  _handlePanelClick(event) {
+    if (this._handlePanelModeClick(event)) return;
+    if (this._handleSectionToggleClick(event)) return;
+    if (this._handleCommitHistoryClick(event)) return;
+
+    if (event.target instanceof Element && event.target.closest('[data-git-history-load-more]')) {
+      void this.loadMoreHistory();
+      return;
+    }
+
+    if (this._handleFileSelectionClick(event)) return;
+
+    const pullBackupButton = event.target instanceof Element
+      ? event.target.closest('[data-git-pull-backup-path]')
+      : null;
+    if (pullBackupButton) {
+      const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
+      if (summaryPath) {
         this.onOpenPullBackup(summaryPath);
-        return;
       }
+      return;
+    }
 
-      const actionButton = event.target instanceof Element
-        ? event.target.closest('[data-git-file-action]')
-        : null;
-      if (actionButton) {
-        const action = actionButton.getAttribute('data-git-file-action');
-        const filePath = actionButton.getAttribute('data-git-path');
-        const scope = actionButton.getAttribute('data-git-scope') || 'working-tree';
-        if (!action || !filePath) {
-          return;
-        }
+    if (this._handleFileActionClick(event)) return;
 
-        event.preventDefault();
-        event.stopPropagation();
-        void this.handleFileAction(action, filePath, scope);
-        return;
-      }
+    if (event.target instanceof Element && event.target.closest('[data-git-view-all]')) {
+      this.onViewAllDiff();
+      return;
+    }
 
-      const viewAllButton = event.target instanceof Element
-        ? event.target.closest('[data-git-view-all]')
-        : null;
-      if (viewAllButton) {
-        this.onViewAllDiff();
-        return;
-      }
+    if (event.target instanceof Element && event.target.closest('[data-git-commit-staged]')) {
+      void this.handleCommitStaged();
+      return;
+    }
 
-      const commitStagedButton = event.target instanceof Element
-        ? event.target.closest('[data-git-commit-staged]')
-        : null;
-      if (commitStagedButton) {
-        void this.handleCommitStaged();
-        return;
+    const syncButton = event.target instanceof Element
+      ? event.target.closest('[data-git-sync-action]')
+      : null;
+    if (syncButton) {
+      const action = syncButton.getAttribute('data-git-sync-action');
+      if (action === 'pull' || action === 'push') {
+        void this.handleSyncAction(action);
       }
+    }
+  }
 
-      const syncButton = event.target instanceof Element
-        ? event.target.closest('[data-git-sync-action]')
-        : null;
-      if (syncButton) {
-        const action = syncButton.getAttribute('data-git-sync-action');
-        if (action === 'pull' || action === 'push') {
-          void this.handleSyncAction(action);
-        }
-      }
+  initialize() {
+    this.panel?.addEventListener('click', (event) => {
+      this._handlePanelClick(event);
     });
 
     this.searchInput?.addEventListener('input', (event) => {