collabmd 0.1.21 → 0.1.23

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

@@ -77,6 +77,8 @@ export class ExcalidrawEmbedController {
     this.maximizedRoot = null;
     this.placeholderObserver = null;
     this.followedPeerIdsByFilePath = new Map();
+    this.pendingDisconnectRequests = new Map();
+    this.disconnectRequestCounter = 0;
 
     this._onMessage = this._onMessage.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
@@ -104,6 +106,10 @@ export class ExcalidrawEmbedController {
       entry.placeholder = null;
     });
     this.embedEntries.clear();
+    this.pendingDisconnectRequests.forEach((request) => {
+      request.resolve(false);
+    });
+    this.pendingDisconnectRequests.clear();
     this.followedPeerIdsByFilePath.clear();
     this.overlayRoot?.remove();
     this.overlayRoot = null;
@@ -242,6 +248,43 @@ export class ExcalidrawEmbedController {
     });
   }
 
+  prepareFileDisconnect(filePath, { timeoutMs = 250 } = {}) {
+    const entry = this._findEntryByFilePath(filePath);
+    if (!entry?.iframe?.contentWindow) {
+      return Promise.resolve(false);
+    }
+
+    const requestId = `disconnect-${++this.disconnectRequestCounter}`;
+    return new Promise((resolve) => {
+      const finish = (value) => {
+        if (!this.pendingDisconnectRequests.has(requestId)) {
+          return;
+        }
+
+        const request = this.pendingDisconnectRequests.get(requestId);
+        window.clearTimeout(request.timeoutId);
+        this.pendingDisconnectRequests.delete(requestId);
+        resolve(value);
+      };
+
+      const timeoutId = window.setTimeout(() => {
+        finish(false);
+      }, timeoutMs);
+
+      this.pendingDisconnectRequests.set(requestId, {
+        entry,
+        resolve: finish,
+        timeoutId,
+      });
+
+      this._postMessageToEntry(entry, {
+        source: 'collabmd-host',
+        type: 'prepare-disconnect',
+        requestId,
+      });
+    });
+  }
+
   _ensurePlaceholderObserver() {
     if (!this.previewContainer) {
       return;
@@ -422,6 +465,13 @@ export class ExcalidrawEmbedController {
   }
 
   _destroyEntry(entry) {
+    this.pendingDisconnectRequests.forEach((request, requestId) => {
+      if (request.entry === entry) {
+        request.resolve(false);
+        this.pendingDisconnectRequests.delete(requestId);
+      }
+    });
+
     if (this.maximizedEmbed?.wrapper === entry.wrapper) {
       this._exitMaximizedEmbed();
     }
@@ -588,14 +638,14 @@ export class ExcalidrawEmbedController {
 
     const openBtn = document.createElement('button');
     openBtn.type = 'button';
-    openBtn.className = 'excalidraw-embed-btn diagram-preview-action-btn';
+    openBtn.className = 'excalidraw-embed-btn ui-preview-action ui-preview-action--icon-only';
     openBtn.title = 'Edit in Excalidraw';
     openBtn.setAttribute('aria-label', 'Edit in Excalidraw');
     setDiagramActionButtonIcon(openBtn, 'edit');
 
     const maxBtn = document.createElement('button');
     maxBtn.type = 'button';
-    maxBtn.className = 'excalidraw-embed-btn diagram-preview-action-btn';
+    maxBtn.className = 'excalidraw-embed-btn ui-preview-action ui-preview-action--icon-only';
     maxBtn.title = 'Maximize diagram';
     maxBtn.setAttribute('aria-label', 'Maximize diagram');
     setDiagramActionButtonIcon(maxBtn, 'maximize');
@@ -915,6 +965,14 @@ export class ExcalidrawEmbedController {
     if (msg.type === 'error') {
       entry.isReady = false;
       void this._handleEntryBootTimeout(entry);
+      return;
+    }
+
+    if (msg.type === 'disconnect-ready') {
+      const request = this.pendingDisconnectRequests.get(msg.requestId);
+      if (request?.entry === entry) {
+        request.resolve(true);
+      }
     }
   }