collabmd 0.1.44 → 0.1.46

package/src/client/presentation/comment-ui/comment-ui-render.js

@@ -1,4 +1,8 @@
-import { createRenderedCommentBody, formatAnchorLabel, getLatestGroupMessage } from './comment-ui-shared.js';
+import {
+  createCommentOverviewThread,
+  formatAnchorLabel,
+  getLatestGroupMessage,
+} from './comment-ui-shared.js';
 
 /**
  * @typedef {object} CommentUiRenderContext
@@ -61,18 +65,38 @@ function renderDrawer() {
   }
 
   this.commentsDrawer.classList.toggle('hidden', !this.supported || !this.drawerOpen);
+  if (!this.supported || !this.drawerOpen) {
+    return;
+  }
+
   this.commentsDrawerList.replaceChildren();
   const groups = this.getThreadGroups();
   this.commentsDrawerEmpty?.classList.toggle('hidden', groups.length > 0);
-  if (!this.supported || groups.length === 0) {
+  if (groups.length === 0) {
     return;
   }
 
   const fragment = document.createDocumentFragment();
   groups.forEach((group) => {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'ui-record-surface comments-drawer-item';
+    const latestMessage = getLatestGroupMessage(group);
+    const messageCount = group.threads.reduce(
+      (count, thread) => count + (Array.isArray(thread.messages) ? thread.messages.length : 0),
+      0,
+    );
+    const button = createCommentOverviewThread({
+      authorName: latestMessage?.userName || group.threads[0]?.createdByName || 'Anonymous',
+      buttonClassName: 'comment-overview-thread comments-drawer-item',
+      footerClassName: 'comment-overview-thread-footer comments-drawer-item-footer',
+      headerClassName: 'comment-overview-thread-header comments-drawer-item-header',
+      lineClassName: 'comment-overview-thread-line comments-drawer-item-title',
+      lineLabel: formatAnchorLabel(group.anchor),
+      messageCount,
+      previewBody: latestMessage?.body || '',
+      previewClassName: 'comment-markdown comment-overview-thread-preview comments-drawer-item-preview',
+      quote: group.anchor?.quote || group.anchor?.excerpt || 'Source anchored comment',
+      quoteClassName: 'comment-overview-thread-quote comments-drawer-item-quote',
+      timestamp: latestMessage ? this.formatTimestamp(latestMessage.createdAt) : '',
+    });
     button.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
     button.addEventListener('pointerdown', (event) => {
       event.preventDefault();
@@ -81,48 +105,11 @@ function renderDrawer() {
       this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
       this.openThreadGroup(group, {
         anchor: group.anchor,
-        origin: 'drawer',
-        sourceRect: button.getBoundingClientRect(),
+        origin: 'editor',
+        sourceRect: this.session?.getCommentAnchorClientRect?.(group.anchor)
+          ?? button.getBoundingClientRect(),
       });
     });
-
-    const header = document.createElement('div');
-    header.className = 'ui-record-header comments-drawer-item-header';
-
-    const title = document.createElement('span');
-    title.className = 'comments-drawer-item-title';
-    title.textContent = formatAnchorLabel(group.anchor);
-
-    const count = document.createElement('span');
-    count.className = 'ui-pill-badge ui-pill-badge--count ui-pill-badge--accent comments-drawer-item-count';
-    count.textContent = String(group.threads.length);
-
-    header.append(title, count);
-
-    const quote = document.createElement('p');
-    quote.className = 'comments-drawer-item-quote';
-    quote.textContent = group.anchor.quote || group.anchor.excerpt || 'Source anchored comment';
-
-    const latestMessage = getLatestGroupMessage(group);
-    const preview = createRenderedCommentBody(
-      latestMessage?.body || '',
-      'comment-markdown comments-drawer-item-preview',
-    );
-
-    const footer = document.createElement('div');
-    footer.className = 'ui-record-meta comments-drawer-item-footer';
-    const countLabel = document.createElement('span');
-    countLabel.textContent = `${group.threads.length} thread${group.threads.length === 1 ? '' : 's'}`;
-
-    const updatedLabel = document.createElement('span');
-    updatedLabel.className = 'comments-drawer-item-updated';
-    updatedLabel.textContent = latestMessage
-      ? `${latestMessage.userName} • ${this.formatTimestamp(latestMessage.createdAt)}`
-      : '';
-
-    footer.append(countLabel, updatedLabel);
-
-    button.append(header, quote, preview, footer);
     fragment.appendChild(button);
   });
 

package/src/client/presentation/comment-ui/comment-ui-shared.js

@@ -13,10 +13,6 @@ export const COMMENT_CARD_WIDTH = 520;
 export const COMMENT_SELECTION_REVEAL_DELAY_MS = 150;
 export const COMMENT_SELECTION_CHIP_GAP = 12;
 export const COMMENT_CONTROL_SLOT_HEIGHT = 36;
-export const COMMENT_PREVIEW_BADGE_MIN_WIDTH = 28;
-export const COMMENT_PREVIEW_RAIL_SLOT_HEIGHT = 30;
-export const COMMENT_PREVIEW_RAIL_MIN_WIDTH = 400;
-export const COMMENT_PREVIEW_RAIL_BREAKPOINT = 769;
 export const COMMENT_REACTION_PRESET_EMOJIS = Object.freeze(['👍', '❤️', '🎉', '👀', '🚀']);
 export const COMMENT_REACTION_MORE_EMOJIS = Object.freeze(['😂', '🔥', '✅', '🙏', '💡', '🤔', '👏', '😄', '🎯', '🙌']);
 
@@ -55,19 +51,19 @@ export function areAnchorsEqual(left, right) {
 }
 
 export function formatAnchorLabel(anchor) {
-  if (!anchor) {
-    return 'No source anchor';
+  if (getAnchorKind(anchor) === 'diagram-element') {
+    return 'Diagram element';
   }
 
-  if ((anchor.kind || anchor.anchorKind) === 'text' && anchor.quote) {
-    return anchor.startLine === anchor.endLine
-      ? `Line ${anchor.startLine}`
-      : `Lines ${anchor.startLine}-${anchor.endLine}`;
+  const startLine = Number(anchor?.startLine || 0);
+  const endLine = Number(anchor?.endLine || startLine);
+  if (!Number.isFinite(startLine) || startLine <= 0) {
+    return 'No source anchor';
   }
 
-  return anchor.startLine === anchor.endLine
-    ? `Line ${anchor.startLine}`
-    : `Lines ${anchor.startLine}-${anchor.endLine}`;
+  return startLine === endLine
+    ? `Line ${startLine}`
+    : `Lines ${startLine}-${endLine}`;
 }
 
 export function getAnchorGroupKey(anchor = {}) {
@@ -120,6 +116,65 @@ export function createRenderedCommentBody(body, className = 'comment-markdown')
   return container;
 }
 
+export function createCommentOverviewThread({
+  authorName = 'Anonymous',
+  buttonClassName = 'comment-overview-thread',
+  footerClassName = 'comment-overview-thread-footer',
+  headerClassName = 'comment-overview-thread-header',
+  lineClassName = 'comment-overview-thread-line',
+  lineLabel = '',
+  messageCount = 0,
+  previewBody = '',
+  previewClassName = 'comment-markdown comment-overview-thread-preview',
+  quote = 'Source anchored comment',
+  quoteClassName = 'comment-overview-thread-quote',
+  timestamp = '',
+} = {}) {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = buttonClassName;
+
+  const header = document.createElement('div');
+  header.className = headerClassName;
+
+  const line = document.createElement('span');
+  line.className = lineClassName;
+  line.textContent = lineLabel;
+
+  const meta = document.createElement('span');
+  meta.className = 'comment-overview-thread-meta';
+  meta.textContent = timestamp;
+  header.append(line, meta);
+
+  const body = document.createElement('div');
+  body.className = 'comment-overview-thread-body';
+  const preview = createRenderedCommentBody(previewBody, previewClassName);
+
+  const quoteSection = document.createElement('div');
+  quoteSection.className = 'comment-overview-thread-section comment-overview-thread-reference';
+  const quoteLabel = document.createElement('span');
+  quoteLabel.className = 'comment-overview-thread-section-label';
+  quoteLabel.textContent = 'Reference';
+  const quoteNode = document.createElement('span');
+  quoteNode.className = quoteClassName;
+  quoteNode.textContent = quote;
+  quoteSection.append(quoteLabel, quoteNode);
+  body.append(preview, quoteSection);
+
+  const footer = document.createElement('div');
+  footer.className = footerClassName;
+  const author = document.createElement('span');
+  author.className = 'comment-overview-thread-author';
+  author.textContent = authorName;
+  const messages = document.createElement('span');
+  messages.className = 'comment-overview-thread-message-count';
+  messages.textContent = `${messageCount} message${messageCount === 1 ? '' : 's'}`;
+  footer.append(author, messages);
+
+  button.append(header, body, footer);
+  return button;
+}
+
 export function hasLocalReaction(reaction, localUserId) {
   return Boolean(localUserId && reaction?.users?.some((user) => user?.userId === localUserId));
 }

package/src/client/presentation/comment-ui-controller.js

@@ -89,9 +89,13 @@ export class CommentUiController {
       if (this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview') {
         return;
       }
-      this.previewSelection = this.supported && this.fileKind === 'markdown'
+      const previewSelection = this.supported && this.fileKind === 'markdown'
         ? createPreviewSelection(window.getSelection(), this.previewElement, this.session?.getText?.() ?? '')
         : null;
+      if (!previewSelection && !this.previewSelection) {
+        return;
+      }
+      this.previewSelection = previewSelection;
       this.scheduleLayoutRefresh();
     };
     this.handleCommentSelectionButtonPointerDown = (event) => {

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

@@ -1,6 +1,7 @@
 import { createDrawioLeaseRoomName } from '../../domain/drawio-room.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
+import { renderDrawioViewer } from './drawio-viewer.js';
 import {
   cancelIdleRender,
   isNearViewport,
@@ -8,62 +9,6 @@ import {
 } from '../browser-utils.js';
 
 const HYDRATE_VIEWPORT_MARGIN_PX = 360;
-const DRAWIO_VIEWER_SCRIPT_URL = 'https://viewer.diagrams.net/js/viewer-static.min.js';
-
-let drawioViewerLoadPromise = null;
-
-function ensureDrawioViewerLoaded() {
-  if (window.GraphViewer?.processElements) {
-    return Promise.resolve(window.GraphViewer);
-  }
-
-  if (drawioViewerLoadPromise) {
-    return drawioViewerLoadPromise;
-  }
-
-  drawioViewerLoadPromise = new Promise((resolve, reject) => {
-    const existingScript = document.querySelector('script[data-collabmd-drawio-viewer]');
-    const script = existingScript instanceof HTMLScriptElement
-      ? existingScript
-      : document.createElement('script');
-
-    const cleanup = () => {
-      script.removeEventListener('error', handleError);
-      script.removeEventListener('load', handleLoad);
-    };
-
-    const handleError = () => {
-      cleanup();
-      drawioViewerLoadPromise = null;
-      reject(new Error('Failed to load draw.io viewer'));
-    };
-
-    const handleLoad = () => {
-      cleanup();
-      if (!window.GraphViewer?.processElements) {
-        drawioViewerLoadPromise = null;
-        reject(new Error('draw.io viewer did not initialize'));
-        return;
-      }
-
-      resolve(window.GraphViewer);
-    };
-
-    script.addEventListener('error', handleError, { once: true });
-    script.addEventListener('load', handleLoad, { once: true });
-
-    if (!existingScript) {
-      script.src = DRAWIO_VIEWER_SCRIPT_URL;
-      script.async = true;
-      script.dataset.collabmdDrawioViewer = 'true';
-      document.head.append(script);
-    } else if (window.GraphViewer?.processElements) {
-      handleLoad();
-    }
-  });
-
-  return drawioViewerLoadPromise;
-}
 
 export class DrawioEmbedController {
   constructor({
@@ -350,59 +295,21 @@ export class DrawioEmbedController {
   }
 
   async renderViewerEntry(entry) {
-    const [{ content }, viewer] = await Promise.all([
-      this.vaultApiClient.readFile(entry.filePath),
-      ensureDrawioViewerLoaded(),
-    ]);
+    const { content } = await this.vaultApiClient.readFile(entry.filePath);
 
     if (!entry.wrapper?.isConnected || !entry.viewerElement?.isConnected) {
       return;
     }
 
     const theme = this.getTheme?.() === 'light' ? 'light' : 'dark';
-    const graphElement = document.createElement('div');
-    graphElement.className = 'mxgraph drawio-viewer-frame';
-    graphElement.dataset.action = 'open-file';
-    graphElement.dataset.filePath = entry.filePath;
-    graphElement.setAttribute('role', 'button');
-    graphElement.setAttribute('tabindex', '0');
-    graphElement.setAttribute('aria-label', `Open ${entry.label.replace(/\.drawio$/i, '')}`);
-    graphElement.addEventListener('click', (event) => {
-      event.preventDefault();
-      this.onOpenFile?.(entry.filePath);
-    });
-    graphElement.addEventListener('keydown', (event) => {
-      if (event.key !== 'Enter' && event.key !== ' ') {
-        return;
-      }
-
-      event.preventDefault();
-      this.onOpenFile?.(entry.filePath);
-    });
-    graphElement.dataset.mxgraph = JSON.stringify({
-      'check-visible-state': false,
-      center: true,
-      border: 0,
-      'dark-mode': theme,
-      editable: false,
-      fit: 1,
-      lightbox: false,
-      nav: false,
-      resize: false,
-      tooltips: false,
-      xml: String(content ?? ''),
-    });
-
     const viewerHost = entry.wrapper.querySelector('.drawio-viewer-shell') ?? entry.viewerElement;
-    viewerHost.replaceChildren(graphElement);
-    entry.viewerElement = graphElement;
-
-    if (typeof viewer.createViewerForElement === 'function') {
-      viewer.createViewerForElement(graphElement);
-      return;
-    }
-
-    viewer.processElements();
+    entry.viewerElement = await renderDrawioViewer(viewerHost, {
+      ariaLabel: `Open ${entry.label.replace(/\.drawio$/i, '')}`,
+      className: 'mxgraph drawio-viewer-frame',
+      onActivate: () => this.onOpenFile?.(entry.filePath),
+      source: String(content ?? ''),
+      theme,
+    });
   }
 
   buildIframeUrl(entry) {

package/src/client/presentation/drawio-viewer.js

@@ -0,0 +1,118 @@
+const DRAWIO_VIEWER_SCRIPT_URL = 'https://viewer.diagrams.net/js/viewer-static.min.js';
+
+let drawioViewerLoadPromise = null;
+
+export function ensureDrawioViewerLoaded() {
+  if (window.GraphViewer?.processElements) {
+    return Promise.resolve(window.GraphViewer);
+  }
+
+  if (drawioViewerLoadPromise) {
+    return drawioViewerLoadPromise;
+  }
+
+  drawioViewerLoadPromise = new Promise((resolve, reject) => {
+    const existingScript = document.querySelector('script[data-collabmd-drawio-viewer]');
+    const script = existingScript instanceof HTMLScriptElement
+      ? existingScript
+      : document.createElement('script');
+
+    const cleanup = () => {
+      script.removeEventListener('error', handleError);
+      script.removeEventListener('load', handleLoad);
+    };
+
+    const handleError = () => {
+      cleanup();
+      drawioViewerLoadPromise = null;
+      reject(new Error('Failed to load draw.io viewer'));
+    };
+
+    const handleLoad = () => {
+      cleanup();
+      if (!window.GraphViewer?.processElements) {
+        drawioViewerLoadPromise = null;
+        reject(new Error('draw.io viewer did not initialize'));
+        return;
+      }
+
+      resolve(window.GraphViewer);
+    };
+
+    script.addEventListener('error', handleError, { once: true });
+    script.addEventListener('load', handleLoad, { once: true });
+
+    if (!existingScript) {
+      script.src = DRAWIO_VIEWER_SCRIPT_URL;
+      script.async = true;
+      script.dataset.collabmdDrawioViewer = 'true';
+      document.head.append(script);
+    } else if (window.GraphViewer?.processElements) {
+      handleLoad();
+    }
+  });
+
+  return drawioViewerLoadPromise;
+}
+
+export function createDrawioViewerElement({
+  ariaLabel = '',
+  className = 'drawio-viewer-frame',
+  onActivate = null,
+  source = '',
+  theme = 'dark',
+} = {}) {
+  const graphElement = document.createElement('div');
+  graphElement.className = className;
+  if (ariaLabel) {
+    graphElement.setAttribute('aria-label', ariaLabel);
+  }
+
+  if (typeof onActivate === 'function') {
+    graphElement.dataset.action = 'open-file';
+    graphElement.setAttribute('role', 'button');
+    graphElement.setAttribute('tabindex', '0');
+    graphElement.addEventListener('click', (event) => {
+      event.preventDefault();
+      onActivate();
+    });
+    graphElement.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      onActivate();
+    });
+  }
+
+  graphElement.dataset.mxgraph = JSON.stringify({
+    'check-visible-state': false,
+    center: true,
+    border: 0,
+    'dark-mode': theme === 'light' ? 'light' : 'dark',
+    editable: false,
+    fit: 1,
+    lightbox: false,
+    nav: false,
+    resize: false,
+    tooltips: false,
+    xml: String(source ?? ''),
+  });
+
+  return graphElement;
+}
+
+export async function renderDrawioViewer(host, options = {}) {
+  const viewer = await ensureDrawioViewerLoaded();
+  const graphElement = createDrawioViewerElement(options);
+  host.replaceChildren(graphElement);
+
+  if (typeof viewer.createViewerForElement === 'function') {
+    viewer.createViewerForElement(graphElement);
+  } else {
+    viewer.processElements();
+  }
+
+  return graphElement;
+}

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

@@ -1,6 +1,6 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { reconcileEmbedEntries } from './excalidraw-embed-reconciler.js';
-import { resolveAppUrl } from '../domain/runtime-paths.js';
+import { resolveAppUrl, resolveWsServerOverride } from '../domain/runtime-paths.js';
 import {
   cancelIdleRender,
   isNearViewport,
@@ -15,6 +15,13 @@ const MAX_IFRAME_BOOT_ATTEMPTS = 3;
 const MIN_HEIGHT = 200;
 const EDITOR_IFRAME_PATH = '/excalidraw-editor.html';
 
+function findEmbedPlaceholder(previewElement, key) {
+  const placeholders = previewElement?.querySelectorAll?.(
+    '.excalidraw-embed-placeholder[data-embed-key]',
+  );
+  return Array.from(placeholders || []).find((placeholder) => placeholder.dataset?.embedKey === key) || null;
+}
+
 export class ExcalidrawEmbedController {
   constructor({
     getTheme,
@@ -70,12 +77,16 @@ export class ExcalidrawEmbedController {
 
     this.embedEntries.forEach((entry) => {
       this._clearEntryBootTimeout(entry);
+      entry.resizerCleanup?.();
+      entry.resizerCleanup = null;
       entry.wrapper?.remove();
       entry.placeholder = null;
     });
     this.embedEntries.clear();
     if (this.warmEntry) {
       this._clearEntryBootTimeout(this.warmEntry);
+      this.warmEntry.resizerCleanup?.();
+      this.warmEntry.resizerCleanup = null;
       this.warmEntry.wrapper?.remove();
       this.warmEntry = null;
     }
@@ -219,6 +230,25 @@ export class ExcalidrawEmbedController {
     });
   }
 
+  openCommentThread(filePath, threadId) {
+    if (!filePath || !threadId) {
+      return false;
+    }
+
+    const entry = this._findEntryByFilePath(filePath);
+    if (!entry) {
+      return false;
+    }
+
+    entry.pendingCommentThreadId = threadId;
+    if (entry.isReady) {
+      this._postPendingCommentThread(entry);
+    } else if (!entry.wrapper) {
+      this._enqueueHydration(entry, { prioritize: true });
+    }
+    return true;
+  }
+
   prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
     const entry = this._findEntryByFilePath(filePath);
     if (!entry?.iframe?.contentWindow) {
@@ -394,6 +424,7 @@ export class ExcalidrawEmbedController {
       entry.maxButton = mount.maxButton;
       entry.openButton = mount.openButton;
       entry.instanceId = mount.instanceId;
+      entry.resizerCleanup = mount.resizerCleanup;
       entry.isReady = false;
       entry.bootFilePath = entry.filePath;
       entry.bootMode = this._getEntryMode(entry);
@@ -414,7 +445,7 @@ export class ExcalidrawEmbedController {
   _attachWrapper(entry) {
     const placeholder = entry.placeholder?.isConnected
       ? entry.placeholder
-      : this.previewElement?.querySelector(`.excalidraw-embed-placeholder[data-embed-key="${entry.key}"]`);
+      : findEmbedPlaceholder(this.previewElement, entry.key);
 
     if (!placeholder) {
       return;
@@ -476,6 +507,8 @@ export class ExcalidrawEmbedController {
     }
 
     this._clearEntryBootTimeout(entry);
+    entry.resizerCleanup?.();
+    entry.resizerCleanup = null;
     if (this.warmEntry === entry) {
       this.warmEntry = null;
     }
@@ -634,7 +667,7 @@ export class ExcalidrawEmbedController {
     }
 
     const hostSearchParams = new URLSearchParams(window.location.search);
-    const serverOverride = hostSearchParams.get('server');
+    const serverOverride = resolveWsServerOverride();
     if (serverOverride) {
       iframeUrl.searchParams.set('server', serverOverride);
     }
@@ -702,7 +735,7 @@ export class ExcalidrawEmbedController {
     const resizer = document.createElement('div');
     resizer.className = 'excalidraw-embed-resizer';
     resizer.title = 'Drag to resize';
-    this._setupResizer(resizer, iframe, () => {
+    const resizerCleanup = this._setupResizer(resizer, iframe, () => {
       this._syncEntryLayout(entry);
       this._requestPreviewViewportFit(entry);
     });
@@ -769,6 +802,7 @@ export class ExcalidrawEmbedController {
       labelElement: label,
       maxButton: maxBtn,
       openButton: openBtn,
+      resizerCleanup,
       wrapper,
     };
   }
@@ -793,6 +827,7 @@ export class ExcalidrawEmbedController {
   _setupResizer(resizer, iframe, onResizeEnd = null) {
     let startY = 0;
     let startHeight = 0;
+    let isDragging = false;
 
     const onPointerMove = (event) => {
       const delta = event.clientY - startY;
@@ -801,20 +836,37 @@ export class ExcalidrawEmbedController {
       iframe.style.pointerEvents = 'none';
     };
 
-    const onPointerUp = () => {
+    const stopDragging = () => {
+      if (!isDragging) {
+        return;
+      }
+
+      isDragging = false;
       iframe.style.pointerEvents = '';
       document.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
+    };
+
+    const onPointerUp = () => {
+      stopDragging();
       onResizeEnd?.();
     };
 
-    resizer.addEventListener('pointerdown', (event) => {
+    const onPointerDown = (event) => {
       event.preventDefault();
+      isDragging = true;
       startY = event.clientY;
       startHeight = iframe.offsetHeight;
       document.addEventListener('pointermove', onPointerMove);
       document.addEventListener('pointerup', onPointerUp);
-    });
+    };
+
+    resizer.addEventListener('pointerdown', onPointerDown);
+
+    return () => {
+      resizer.removeEventListener?.('pointerdown', onPointerDown);
+      stopDragging();
+    };
   }
 
   _ensureOverlayRoot() {
@@ -1064,7 +1116,7 @@ export class ExcalidrawEmbedController {
 
     const placeholder = entry.placeholder?.isConnected
       ? entry.placeholder
-      : this.previewElement?.querySelector(`.excalidraw-embed-placeholder[data-embed-key="${entry.key}"]`);
+      : findEmbedPlaceholder(this.previewElement, entry.key);
 
     if (!placeholder) {
       return;
@@ -1163,6 +1215,7 @@ export class ExcalidrawEmbedController {
         theme: this.getTheme?.() || 'dark',
       });
       this._syncEntryFollowState(entry);
+      this._postPendingCommentThread?.(entry);
       if (this._entryNeedsHardReload(entry)) {
         void this._hydrateEntry(entry);
       }
@@ -1227,6 +1280,19 @@ export class ExcalidrawEmbedController {
     entry?.iframe?.contentWindow?.postMessage(payload, window.location.origin);
   }
 
+  _postPendingCommentThread(entry) {
+    if (!entry?.isReady || !entry.pendingCommentThreadId) {
+      return;
+    }
+
+    this._postMessageToEntry(entry, {
+      source: 'collabmd-host',
+      threadId: entry.pendingCommentThreadId,
+      type: 'open-comment-thread',
+    });
+    entry.pendingCommentThreadId = null;
+  }
+
   _requestPreviewViewportFit(entry) {
     if (this._isFilePreviewEntry(entry)) {
       return;