collabmd 0.1.31 → 0.1.33

package/src/client/presentation/comments-panel.js

@@ -37,6 +37,47 @@ function sortThreads(threads = []) {
   ));
 }
 
+export function countThreadsForSourceBlocks(blocks = [], threads = []) {
+  const normalizedBlocks = blocks
+    .map((block, index) => {
+      const startLine = Number(block?.startLine);
+      const endLine = Number(block?.endLine ?? startLine);
+      if (!Number.isFinite(startLine) || startLine <= 0) {
+        return null;
+      }
+
+      return {
+        endExclusive: Math.max(endLine, startLine + 1),
+        index,
+        startLine,
+      };
+    })
+    .filter(Boolean)
+    .sort((left, right) => (
+      left.startLine - right.startLine
+        || left.endExclusive - right.endExclusive
+        || left.index - right.index
+    ));
+  const counts = new Array(blocks.length).fill(0);
+  let threadIndex = 0;
+
+  normalizedBlocks.forEach((block) => {
+    while (threadIndex < threads.length && (threads[threadIndex]?.anchor?.startLine ?? 0) < block.startLine) {
+      threadIndex += 1;
+    }
+
+    let countIndex = threadIndex;
+    while (countIndex < threads.length && (threads[countIndex]?.anchor?.startLine ?? 0) < block.endExclusive) {
+      countIndex += 1;
+    }
+
+    counts[block.index] = countIndex - threadIndex;
+    threadIndex = countIndex;
+  });
+
+  return counts;
+}
+
 export class CommentsPanel {
   constructor({
     panelElement,
@@ -236,18 +277,22 @@ export class CommentsPanel {
 
     const blocks = Array.from(this.previewElement.querySelectorAll('[data-source-line]'))
       .filter((element) => isLeafSourceBlock(element) && isCommentablePreviewBlock(element));
+    const threadCounts = countThreadsForSourceBlocks(
+      blocks.map((block) => ({
+        endLine: parseLineNumber(block.getAttribute('data-source-line-end')) ?? parseLineNumber(block.getAttribute('data-source-line')) ?? 1,
+        startLine: parseLineNumber(block.getAttribute('data-source-line')),
+      })),
+      this.threads,
+    );
 
-    blocks.forEach((block) => {
+    blocks.forEach((block, index) => {
       const startLine = parseLineNumber(block.getAttribute('data-source-line'));
       const endLine = parseLineNumber(block.getAttribute('data-source-line-end')) ?? (startLine ?? 1);
       if (!startLine) {
         return;
       }
 
-      const matchingThreads = this.threads.filter((thread) => (
-        thread.anchor?.startLine >= startLine && thread.anchor?.startLine < Math.max(endLine, startLine + 1)
-      ));
-      const totalCount = matchingThreads.length;
+      const totalCount = threadCounts[index] ?? 0;
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'comment-anchor-btn';

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

@@ -75,6 +75,8 @@ export class ExcalidrawEmbedController {
     this.maximizedEmbed = null;
     this.overlayRoot = null;
     this.maximizedRoot = null;
+    this.warmCacheRoot = null;
+    this.warmEntry = null;
     this.placeholderObserver = null;
     this.followedPeerIdsByFilePath = new Map();
     this.pendingDisconnectRequests = new Map();
@@ -106,6 +108,11 @@ export class ExcalidrawEmbedController {
       entry.placeholder = null;
     });
     this.embedEntries.clear();
+    if (this.warmEntry) {
+      this._clearEntryBootTimeout(this.warmEntry);
+      this.warmEntry.wrapper?.remove();
+      this.warmEntry = null;
+    }
     this.pendingDisconnectRequests.forEach((request) => {
       request.resolve(false);
     });
@@ -115,6 +122,8 @@ export class ExcalidrawEmbedController {
     this.overlayRoot = null;
     this.maximizedRoot?.remove();
     this.maximizedRoot = null;
+    this.warmCacheRoot?.remove();
+    this.warmCacheRoot = null;
   }
 
   async setFollowedUser(filePath, peerId = null) {
@@ -186,6 +195,7 @@ export class ExcalidrawEmbedController {
     }));
 
     const { nextEntries, removedEntries } = reconcileEmbedEntries(this.embedEntries, descriptors);
+    this._captureWarmEntry(removedEntries);
     this._adoptReusableEntries(nextEntries, removedEntries);
     removedEntries.forEach((entry) => this._destroyEntry(entry));
     this.embedEntries = nextEntries;
@@ -196,8 +206,7 @@ export class ExcalidrawEmbedController {
       entry.queued = false;
       entry.followedPeerId = this.followedPeerIdsByFilePath.get(entry.filePath);
       if (entry.wrapper) {
-        this._updateEmbedLabel(entry);
-        this._attachWrapper(entry);
+        void this._hydrateEntry(entry);
         return;
       }
 
@@ -233,7 +242,7 @@ export class ExcalidrawEmbedController {
   }
 
   updateTheme(theme) {
-    this.embedEntries.forEach((entry) => {
+    this._forEachManagedEntry((entry) => {
       this._postMessageToEntry(entry, {
         source: 'collabmd-host',
         type: 'set-theme',
@@ -243,7 +252,7 @@ export class ExcalidrawEmbedController {
   }
 
   updateLocalUser(user) {
-    this.embedEntries.forEach((entry) => {
+    this._forEachManagedEntry((entry) => {
       this._syncEntryUser(entry, user);
     });
   }
@@ -390,19 +399,31 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    entry.isParked = false;
+
     if (!entry.wrapper) {
       const mount = this._createEmbedContainer(entry);
+      entry.header = mount.header;
       entry.wrapper = mount.wrapper;
       entry.iframe = mount.iframe;
       entry.labelElement = mount.labelElement;
+      entry.maxButton = mount.maxButton;
+      entry.openButton = mount.openButton;
       entry.instanceId = mount.instanceId;
       entry.isReady = false;
+      entry.bootFilePath = entry.filePath;
+      entry.bootMode = this._getEntryMode(entry);
+      entry.loadedFilePath = entry.bootFilePath;
+      entry.loadedMode = entry.bootMode;
       entry.bootAttempts = (entry.bootAttempts ?? 0) + 1;
       this._armEntryBootTimeout(entry);
     }
 
     entry.followedPeerId = this.followedPeerIdsByFilePath.get(entry.filePath);
     this._updateEmbedLabel(entry);
+    if (this._entryNeedsHardReload(entry)) {
+      this._reloadEntry(entry);
+    }
     this._attachWrapper(entry);
   }
 
@@ -444,22 +465,16 @@ export class ExcalidrawEmbedController {
         return;
       }
 
-      const removedIndex = removedEntries.findIndex((entry) => (
-        entry.filePath === nextEntry.filePath
-        && this._getEntryMode(entry) === this._getEntryMode(nextEntry)
-        && (entry.wrapper || entry.iframe)
-      ));
-      if (removedIndex < 0) {
+      const reusedEntry = this._claimReusableEntry(nextEntry, removedEntries);
+      if (!reusedEntry) {
         return;
       }
 
-      const [reusedEntry] = removedEntries.splice(removedIndex, 1);
       reusedEntry.filePath = nextEntry.filePath;
       reusedEntry.key = nextEntry.key;
       reusedEntry.label = nextEntry.label;
       reusedEntry.placeholder = nextEntry.placeholder;
       reusedEntry.queued = false;
-      reusedEntry.reusedFromEmbed = this._isFilePreviewEntry(nextEntry);
       nextEntries.set(key, reusedEntry);
     });
   }
@@ -477,16 +492,20 @@ export class ExcalidrawEmbedController {
     }
 
     this._clearEntryBootTimeout(entry);
+    if (this.warmEntry === entry) {
+      this.warmEntry = null;
+    }
     this._resetPlaceholderLayout(entry);
+    this._setEntryLoadingState(entry, false);
     entry.wrapper?.remove();
     entry.placeholder = null;
   }
 
-  _armEntryBootTimeout(entry) {
+  _armEntryBootTimeout(entry, delayMs = IFRAME_BOOT_TIMEOUT_MS) {
     this._clearEntryBootTimeout(entry);
     entry.bootTimerId = window.setTimeout(() => {
       void this._handleEntryBootTimeout(entry);
-    }, IFRAME_BOOT_TIMEOUT_MS);
+    }, delayMs);
   }
 
   _clearEntryBootTimeout(entry) {
@@ -519,6 +538,7 @@ export class ExcalidrawEmbedController {
 
     this._clearEntryBootTimeout(entry);
     this._resetPlaceholderLayout(entry);
+    this._setEntryLoadingState(entry, false);
 
     if (this.maximizedEmbed?.wrapper === entry.wrapper) {
       this._exitMaximizedEmbed();
@@ -527,9 +547,17 @@ export class ExcalidrawEmbedController {
     entry.wrapper?.remove();
     entry.wrapper = null;
     entry.iframe = null;
+    entry.header = null;
     entry.labelElement = null;
+    entry.maxButton = null;
+    entry.openButton = null;
     entry.instanceId = null;
     entry.isReady = false;
+    entry.isParked = false;
+    entry.bootFilePath = null;
+    entry.bootMode = null;
+    entry.loadedFilePath = null;
+    entry.loadedMode = null;
 
     await this._hydrateEntry(entry);
   }
@@ -545,6 +573,10 @@ export class ExcalidrawEmbedController {
       }
     }
 
+    if (this.warmEntry?.iframe?.contentWindow === contentWindow) {
+      return this.warmEntry;
+    }
+
     return null;
   }
 
@@ -559,6 +591,10 @@ export class ExcalidrawEmbedController {
       }
     }
 
+    if (this.warmEntry?.filePath === filePath) {
+      return this.warmEntry;
+    }
+
     return null;
   }
 
@@ -572,11 +608,20 @@ export class ExcalidrawEmbedController {
     if (entry.wrapper) {
       entry.wrapper.dataset.embedKey = entry.key;
       entry.wrapper.dataset.file = entry.filePath;
+      entry.wrapper.classList.toggle('is-direct-file', this._isFilePreviewEntry(entry));
     }
 
     if (entry.iframe) {
       entry.iframe.title = `Excalidraw: ${entry.filePath}`;
     }
+
+    if (entry.openButton) {
+      if (this._isFilePreviewEntry(entry)) {
+        entry.openButton.remove();
+      } else if (!entry.openButton.isConnected && entry.header) {
+        entry.header.insertBefore(entry.openButton, entry.maxButton || null);
+      }
+    }
   }
 
   _buildIframeUrl(entry) {
@@ -724,13 +769,33 @@ export class ExcalidrawEmbedController {
     syncMaximizeButtonState();
 
     return {
+      header,
       iframe,
       instanceId: iframe.dataset.instanceId,
       labelElement: label,
+      maxButton: maxBtn,
+      openButton: openBtn,
       wrapper,
     };
   }
 
+  _ensureWarmCacheRoot() {
+    if (this.warmCacheRoot?.isConnected && this.warmCacheRoot.parentElement === document.body) {
+      return this.warmCacheRoot;
+    }
+
+    let warmCacheRoot = document.body.querySelector('[data-excalidraw-warm-cache-root="true"]');
+    if (!warmCacheRoot) {
+      warmCacheRoot = document.createElement('div');
+      warmCacheRoot.dataset.excalidrawWarmCacheRoot = 'true';
+      warmCacheRoot.className = 'excalidraw-warm-cache-root';
+      document.body.appendChild(warmCacheRoot);
+    }
+
+    this.warmCacheRoot = warmCacheRoot;
+    return warmCacheRoot;
+  }
+
   _setupResizer(resizer, iframe, onResizeEnd = null) {
     let startY = 0;
     let startHeight = 0;
@@ -801,7 +866,164 @@ export class ExcalidrawEmbedController {
   }
 
   _shouldInlineFilePreview(entry) {
-    return this._isFilePreviewEntry(entry) && !entry?.reusedFromEmbed;
+    return this._isFilePreviewEntry(entry);
+  }
+
+  _entryNeedsHardReload(entry) {
+    const desiredMode = this._getEntryMode(entry);
+    return Boolean(
+      entry?.wrapper
+      && entry.iframe
+      && (
+        entry.isReady
+          ? (
+            entry.loadedFilePath !== entry.filePath
+            || entry.loadedMode !== desiredMode
+          )
+          : (
+            entry.bootFilePath !== entry.filePath
+            || entry.bootMode !== desiredMode
+          )
+      )
+    );
+  }
+
+  _setEntryLoadingState(entry, isLoading) {
+    if (!entry?.wrapper) {
+      return;
+    }
+
+    entry.wrapper.classList.toggle('is-loading', Boolean(isLoading));
+    entry.wrapper.setAttribute('aria-busy', isLoading ? 'true' : 'false');
+  }
+
+  _forEachManagedEntry(callback) {
+    const seen = new Set();
+    this.embedEntries.forEach((entry) => {
+      if (!entry || seen.has(entry)) {
+        return;
+      }
+
+      seen.add(entry);
+      callback(entry);
+    });
+
+    if (this.warmEntry && !seen.has(this.warmEntry)) {
+      callback(this.warmEntry);
+    }
+  }
+
+  _claimEntryFromRemovedEntries(removedEntries, predicate) {
+    const removedIndex = removedEntries.findIndex((entry) => (
+      (entry.wrapper || entry.iframe) && predicate(entry)
+    ));
+    if (removedIndex < 0) {
+      return null;
+    }
+
+    const [reusedEntry] = removedEntries.splice(removedIndex, 1);
+    return reusedEntry;
+  }
+
+  _claimReusableEntry(nextEntry, removedEntries) {
+    const desiredMode = this._getEntryMode(nextEntry);
+    const exactMatch = this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+      entry.filePath === nextEntry.filePath
+      && this._getEntryMode(entry) === desiredMode
+    ));
+    if (exactMatch) {
+      return exactMatch;
+    }
+
+    if (this._isFilePreviewEntry(nextEntry)) {
+      const promotedEntry = this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+        entry.filePath === nextEntry.filePath
+      ));
+      if (promotedEntry) {
+        return promotedEntry;
+      }
+
+      const warmEntry = this._claimWarmEntry();
+      if (warmEntry) {
+        return warmEntry;
+      }
+
+      return this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+        this._isFilePreviewEntry(entry)
+      ));
+    }
+
+    return null;
+  }
+
+  _claimWarmEntry() {
+    const warmEntry = this.warmEntry;
+    if (!warmEntry) {
+      return null;
+    }
+
+    this.warmEntry = null;
+    return warmEntry;
+  }
+
+  _captureWarmEntry(removedEntries) {
+    const warmCandidate = this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+      this._isFilePreviewEntry(entry)
+    ));
+    if (!warmCandidate) {
+      return;
+    }
+
+    if (this.warmEntry && this.warmEntry !== warmCandidate) {
+      this._destroyEntry(this.warmEntry);
+    }
+
+    this.warmEntry = warmCandidate;
+    this._parkWarmEntry(warmCandidate);
+  }
+
+  _parkWarmEntry(entry) {
+    if (!entry?.wrapper) {
+      return;
+    }
+
+    if (this.maximizedEmbed?.wrapper === entry.wrapper) {
+      this._exitMaximizedEmbed();
+    }
+
+    const warmCacheRoot = this._ensureWarmCacheRoot();
+    this._setEntryLoadingState(entry, false);
+    entry.isParked = true;
+    entry.isReady = false;
+    entry.bootFilePath = null;
+    entry.bootMode = null;
+    entry.loadedFilePath = null;
+    entry.loadedMode = null;
+    entry.placeholder = null;
+    if (entry.wrapper.parentElement !== warmCacheRoot) {
+      warmCacheRoot.appendChild(entry.wrapper);
+    }
+    this._postMessageToEntry(entry, {
+      source: 'collabmd-host',
+      type: 'park-room',
+    });
+  }
+
+  _reloadEntry(entry) {
+    if (!entry?.iframe) {
+      return;
+    }
+
+    this._clearEntryBootTimeout(entry);
+    this._setEntryLoadingState(entry, true);
+    entry.isReady = false;
+    entry.bootAttempts = (entry.bootAttempts ?? 0) + 1;
+    entry.bootFilePath = entry.filePath;
+    entry.bootMode = this._getEntryMode(entry);
+    entry.loadedFilePath = null;
+    entry.loadedMode = null;
+    entry.iframe.src = this._buildIframeUrl(entry).toString();
+    this._armEntryBootTimeout(entry);
   }
 
   _resetPlaceholderLayout(entry) {
@@ -950,8 +1172,15 @@ export class ExcalidrawEmbedController {
     }
 
     if (msg.type === 'ready') {
+      if (entry.isParked) {
+        return;
+      }
+
       entry.isReady = true;
       this._clearEntryBootTimeout(entry);
+      entry.loadedFilePath = entry.bootFilePath || entry.filePath;
+      entry.loadedMode = entry.bootMode || this._getEntryMode(entry);
+      this._setEntryLoadingState(entry, false);
       this._syncEntryUser(entry);
       this._postMessageToEntry(entry, {
         source: 'collabmd-host',
@@ -959,10 +1188,17 @@ export class ExcalidrawEmbedController {
         theme: this.getTheme?.() || 'dark',
       });
       this._syncEntryFollowState(entry);
+      if (this._entryNeedsHardReload(entry)) {
+        void this._hydrateEntry(entry);
+      }
       return;
     }
 
     if (msg.type === 'error') {
+      if (entry.isParked) {
+        return;
+      }
+
       entry.isReady = false;
       void this._handleEntryBootTimeout(entry);
       return;

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

@@ -11,7 +11,6 @@ export function reconcileEmbedEntries(currentEntries, placeholderDescriptors) {
       label: descriptor.label,
       placeholder: descriptor.placeholder,
       queued: false,
-      reusedFromEmbed: false,
       wrapper: null,
     };
 

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

@@ -23,6 +23,12 @@ function getPathLeaf(path) {
     .pop() || '';
 }
 
+function getParentPath(pathValue) {
+  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
+  const separatorIndex = normalized.lastIndexOf('/');
+  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
+}
+
 function replacePathPrefix(pathValue, oldPrefix, newPrefix) {
   if (pathValue === oldPrefix) {
     return newPrefix;
@@ -201,6 +207,10 @@ export class FileActionController {
         label: 'Rename / move',
         onSelect: () => this.handleRenameDirectory(directoryPath),
       },
+      {
+        label: 'Download',
+        onSelect: () => this.handleDownloadDirectory(directoryPath),
+      },
       {
         label: 'Delete',
         danger: true,
@@ -215,6 +225,10 @@ export class FileActionController {
         label: 'Rename / move',
         onSelect: () => this.handleRenameFile(filePath),
       },
+      {
+        label: 'Download',
+        onSelect: () => this.handleDownloadFile(filePath),
+      },
       {
         label: 'Delete',
         danger: true,
@@ -627,6 +641,81 @@ export class FileActionController {
     }
   }
 
+  planMoveEntryByDrop({ destinationDirectory = '', sourcePath = '', sourceType = 'file' } = {}) {
+    const normalizedSourcePath = normalizeVaultPathInput(sourcePath);
+    const normalizedDestinationDirectory = normalizeVaultPathInput(destinationDirectory);
+    const currentParentPath = getParentPath(normalizedSourcePath);
+    const entryName = getPathLeaf(normalizedSourcePath);
+
+    if (!normalizedSourcePath || !entryName) {
+      return { ok: false, reason: 'Invalid item to move' };
+    }
+
+    if (currentParentPath === normalizedDestinationDirectory) {
+      return { ok: false, reason: 'Item is already in that folder' };
+    }
+
+    if (sourceType === 'directory') {
+      if (normalizedDestinationDirectory === normalizedSourcePath) {
+        return { ok: false, reason: 'A folder cannot be moved into itself' };
+      }
+
+      if (normalizedDestinationDirectory.startsWith(`${normalizedSourcePath}/`)) {
+        return { ok: false, reason: 'A folder cannot be moved into one of its descendants' };
+      }
+
+      return {
+        nextPath: composeVaultChildPath(normalizedDestinationDirectory, entryName),
+        ok: true,
+      };
+    }
+
+    const extension = getVaultFileExtension(normalizedSourcePath) || '.md';
+    return {
+      extension,
+      nextPath: composeVaultChildPath(normalizedDestinationDirectory, entryName),
+      ok: true,
+    };
+  }
+
+  canMoveEntryByDrop(payload = {}) {
+    return this.planMoveEntryByDrop(payload).ok;
+  }
+
+  async moveEntryByDrop(payload = {}) {
+    const plan = this.planMoveEntryByDrop(payload);
+    if (!plan.ok) {
+      this.showToast(plan.reason);
+      return false;
+    }
+
+    if (payload.sourceType === 'directory') {
+      return this.renameDirectory(payload.sourcePath, plan.nextPath);
+    }
+
+    return this.renameVaultFile(payload.sourcePath, plan.nextPath, plan.extension);
+  }
+
+  async downloadFileEntry(filePath) {
+    try {
+      await this.vaultClient.downloadFile(filePath);
+      return true;
+    } catch (error) {
+      this.showToast(error?.message || 'Failed to download file');
+      return false;
+    }
+  }
+
+  async downloadDirectoryEntry(directoryPath) {
+    try {
+      await this.vaultClient.downloadDirectory(directoryPath);
+      return true;
+    } catch (error) {
+      this.showToast(error?.message || 'Failed to download folder');
+      return false;
+    }
+  }
+
   getCreateContext(parentDir = '') {
     const normalizedParentDir = normalizeVaultPathInput(parentDir);
 
@@ -908,4 +997,12 @@ export class FileActionController {
       onSubmit: () => this.deleteDirectory(directoryPath, { recursive: hasDescendants }),
     });
   }
+
+  handleDownloadFile(filePath) {
+    void this.downloadFileEntry(filePath);
+  }
+
+  handleDownloadDirectory(directoryPath) {
+    void this.downloadDirectoryEntry(directoryPath);
+  }
 }

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

@@ -29,6 +29,7 @@ export class FileExplorerController {
         this.state.toggleDirectory(pathValue);
         this.renderTree();
       },
+      onEntryDrop: (payload) => this.actionController.moveEntryByDrop(payload),
       onFileContextMenu: (event, payload) => {
         if (payload.type === 'directory') {
           this.view.showContextMenu(event, this.actionController.getDirectoryContextMenuItems(payload.directoryPath));
@@ -40,6 +41,7 @@ export class FileExplorerController {
       onFileSelect: (filePath) => {
         this.onFileSelect?.(filePath);
       },
+      onValidateDrop: (payload) => this.actionController.canMoveEntryByDrop(payload),
       onSearchChange: (value) => {
         this.state.setSearchQuery(value);
         this.renderTree();