collabmd 0.1.49 → 0.1.52

package/src/client/presentation/create-menu-presenter.js

@@ -23,8 +23,6 @@ export class CreateMenuPresenter {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.activeAnchor = null;
     this.desktopMenu = null;
-    this.mobileSheet = null;
-    this.documentPointerDownHandler = null;
     this.windowResizeHandler = null;
     this.blockingModalHandler = () => this.close();
     this.boundClose = () => this.close();
@@ -67,8 +65,9 @@ export class CreateMenuPresenter {
 
   close({ restoreFocus = true } = {}) {
     if (this.desktopMenu) {
-      this.desktopMenu.remove();
+      const menu = this.desktopMenu;
       this.desktopMenu = null;
+      menu.remove();
     }
 
     if (this.mobileSheet) {
@@ -78,11 +77,6 @@ export class CreateMenuPresenter {
     }
     document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
 
-    if (this.documentPointerDownHandler) {
-      document.removeEventListener('pointerdown', this.documentPointerDownHandler);
-      this.documentPointerDownHandler = null;
-    }
-
     if (this.windowResizeHandler && typeof window !== 'undefined') {
       window.removeEventListener('resize', this.windowResizeHandler);
       this.windowResizeHandler = null;
@@ -104,26 +98,24 @@ export class CreateMenuPresenter {
     menu.className = 'create-menu';
     menu.setAttribute('role', 'menu');
     menu.setAttribute('aria-label', title);
+    menu.setAttribute('popover', 'auto');
 
     this.renderMenuItems(menu, items);
     document.body.appendChild(menu);
+    menu.showPopover?.();
     this.positionDesktopMenu(menu, anchor);
 
     menu.addEventListener('keydown', (event) => {
       this.handleDesktopMenuKeyDown(event, menu);
     });
-
-    this.documentPointerDownHandler = (event) => {
-      if (menu.contains(event.target) || anchor?.contains?.(event.target)) {
-        return;
+    // Native light-dismiss replaces the deferred pointerdown listener;
+    // explicit closes detach the element first, so ignore those toggles.
+    menu.addEventListener('toggle', (toggleEvent) => {
+      if (toggleEvent.newState === 'closed' && menu.isConnected && this.desktopMenu === menu) {
+        this.close();
       }
-
-      this.close();
-    };
+    });
     this.windowResizeHandler = this.boundClose;
-    setTimeout(() => {
-      document.addEventListener('pointerdown', this.documentPointerDownHandler);
-    }, 0);
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', this.windowResizeHandler);
     }
@@ -136,6 +128,7 @@ export class CreateMenuPresenter {
     const sheet = document.createElement('dialog');
     sheet.className = 'file-action-sheet create-action-sheet';
     sheet.setAttribute('aria-label', title);
+    sheet.setAttribute('closedby', 'any');
 
     const header = document.createElement('div');
     header.className = 'create-action-sheet-header';
@@ -160,6 +153,11 @@ export class CreateMenuPresenter {
       event.preventDefault();
       this.close();
     });
+    sheet.addEventListener('close', () => {
+      if (sheet.isConnected && this.mobileSheet === sheet) {
+        this.close();
+      }
+    });
     sheet.addEventListener('click', (event) => {
       const bounds = sheet.getBoundingClientRect();
       if (event.clientX < bounds.left || event.clientX > bounds.right

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

@@ -38,20 +38,23 @@ export class DrawioEmbedController {
     this.instanceCounter = 0;
     this.maximizedEntry = null;
     this.overlayRoot = null;
+    this.placeholderObserver = null;
 
     this._onMessage = this._onMessage.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
     this._onPreviewClick = this._onPreviewClick.bind(this);
 
-    window.addEventListener('message', this._onMessage);
-    window.addEventListener('keydown', this._onKeyDown);
-    this.previewElement?.addEventListener('click', this._onPreviewClick);
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
+    window.addEventListener('message', this._onMessage, { signal });
+    window.addEventListener('keydown', this._onKeyDown, { signal });
+    this.previewElement?.addEventListener('click', this._onPreviewClick, { signal });
   }
 
   destroy() {
-    window.removeEventListener('message', this._onMessage);
-    window.removeEventListener('keydown', this._onKeyDown);
-    this.previewElement?.removeEventListener('click', this._onPreviewClick);
+    this.listenerController?.abort();
+    this.listenerController = null;
+    this._disconnectPlaceholderObserver();
     cancelIdleRender(this.hydrationIdleId);
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
@@ -64,6 +67,7 @@ export class DrawioEmbedController {
   }
 
   detachForCommit() {
+    this._disconnectPlaceholderObserver();
     cancelIdleRender(this.hydrationIdleId);
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
@@ -122,6 +126,9 @@ export class DrawioEmbedController {
 
     this.embedEntries = nextEntries;
 
+    this._disconnectPlaceholderObserver();
+    this._ensurePlaceholderObserver();
+
     this.embedEntries.forEach((entry) => {
       if (entry.wrapper) {
         this.attachWrapper(entry);
@@ -164,12 +171,53 @@ export class DrawioEmbedController {
         return;
       }
 
-      if (entry.mode === 'edit' || isNearViewport(entry.placeholder, this.previewContainer, HYDRATE_VIEWPORT_MARGIN_PX)) {
+      if (entry.mode === 'edit') {
         this.enqueueHydration(entry);
+        return;
+      }
+
+      if (typeof IntersectionObserver === 'undefined') {
+        if (isNearViewport(entry.placeholder, this.previewContainer, HYDRATE_VIEWPORT_MARGIN_PX)) {
+          this.enqueueHydration(entry);
+        }
+        return;
       }
+
+      this.placeholderObserver?.observe(entry.placeholder);
     });
   }
 
+  _ensurePlaceholderObserver() {
+    if (!this.previewContainer || typeof IntersectionObserver === 'undefined') {
+      return;
+    }
+
+    this.placeholderObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+
+        const embedEntry = this.embedEntries.get(entry.target.dataset.drawioKey);
+        if (embedEntry && !embedEntry.wrapper) {
+          this.enqueueHydration(embedEntry);
+        }
+      });
+    }, {
+      root: this.previewContainer,
+      rootMargin: `${HYDRATE_VIEWPORT_MARGIN_PX}px 0px`,
+    });
+  }
+
+  _disconnectPlaceholderObserver() {
+    if (!this.placeholderObserver) {
+      return;
+    }
+
+    this.placeholderObserver.disconnect();
+    this.placeholderObserver = null;
+  }
+
   enqueueHydration(entry) {
     if (entry.queued) {
       return;

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

@@ -213,15 +213,20 @@ export class ExcalidrawEmbedController {
       return;
     }
 
-    const margin = this.isLargeDocument ? 180 : 420;
     this.embedEntries.forEach((entry) => {
       if (entry.wrapper || !entry.placeholder?.isConnected) {
         return;
       }
 
-      if (isNearViewport(entry.placeholder, this.previewContainer, margin)) {
-        this._enqueueHydration(entry, { prioritize: true });
+      if (typeof IntersectionObserver === 'undefined' || !this.placeholderObserver) {
+        const margin = this.isLargeDocument ? 180 : 420;
+        if (isNearViewport(entry.placeholder, this.previewContainer, margin)) {
+          this._enqueueHydration(entry, { prioritize: true });
+        }
+        return;
       }
+
+      this.placeholderObserver.observe(entry.placeholder);
     });
   }
 
@@ -563,6 +568,8 @@ export class ExcalidrawEmbedController {
       entry.wrapper.style.width = '';
       entry.wrapper.style.margin = '';
       entry.wrapper.style.pointerEvents = 'auto';
+      // Moving an iframe reloads its document; wait for its new ready message.
+      entry.isReady = false;
       placeholder.replaceWith(entry.wrapper);
       entry.placeholder = null;
       return;
@@ -571,6 +578,7 @@ export class ExcalidrawEmbedController {
     const overlayRoot = this._ensureOverlayRoot();
     overlayRoot.hidden = false;
     if (entry.wrapper?.parentElement !== overlayRoot) {
+      entry.isReady = false;
       overlayRoot.appendChild(entry.wrapper);
     }
 

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

@@ -14,6 +14,7 @@ export class FileExplorerController {
     showFileExtensions = false,
     toastController,
     vaultClient,
+    vaultSwitcher = null,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
@@ -21,6 +22,7 @@ export class FileExplorerController {
     this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
+    this.vaultSwitcher = vaultSwitcher;
     this.state = new FileTreeState();
     this.showFileExtensions = Boolean(showFileExtensions);
     this.threadCounts = new Map();
@@ -78,6 +80,7 @@ export class FileExplorerController {
 
   initialize() {
     this.view.initialize();
+    this.view.renderVaultSwitcher(this.vaultSwitcher);
     this.actionController.initialize();
   }
 
@@ -123,6 +126,7 @@ export class FileExplorerController {
   revealFile(filePath, { clearSearch = false } = {}) {
     if (clearSearch) {
       this.state.setSearchQuery('');
+      this.view.cancelPendingSearch();
     }
 
     this.state.setActiveFile(filePath);