collabmd 0.1.34 → 0.1.36

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

@@ -43,6 +43,7 @@ function openComposerForSelection(origin = 'editor', sourceRect = null) {
     : this.session?.getCommentAnchorClientRect?.(anchor));
   this.activeCard = {
     anchor,
+    composerDraft: null,
     mode: 'create',
     origin: nextOrigin,
     replyThreadId: null,
@@ -57,8 +58,10 @@ function openThreadGroup(group, { anchor, origin, sourceRect }) {
   this.activeCard = {
     anchor,
     groupKey: group.key,
+    groupThreadIds: group.threads.map((thread) => thread.id),
     mode: 'group',
     origin,
+    replyDrafts: {},
     replyThreadId: null,
     sourceRect,
   };
@@ -97,9 +100,59 @@ function updateCardSourceRect() {
   return this.activeCard.sourceRect;
 }
 
+/** @this {any} */
+function createTextareaDraft(textarea) {
+  if (!(textarea instanceof HTMLTextAreaElement)) {
+    return null;
+  }
+
+  return {
+    selectionDirection: textarea.selectionDirection ?? 'none',
+    selectionEnd: textarea.selectionEnd,
+    selectionStart: textarea.selectionStart,
+    value: textarea.value,
+  };
+}
+
+/** @this {any} */
+function captureActiveCardDraft() {
+  if (!this.activeCard) {
+    return;
+  }
+
+  const textarea = this.cardRoot?.querySelector('.comment-card-input');
+  const draft = createTextareaDraft(textarea);
+  if (!draft) {
+    return;
+  }
+
+  if (this.activeCard.mode === 'create') {
+    this.activeCard.composerDraft = draft;
+    return;
+  }
+
+  if (this.activeCard.mode === 'group' && this.activeCard.replyThreadId) {
+    this.activeCard.replyDrafts = {
+      ...(this.activeCard.replyDrafts ?? {}),
+      [this.activeCard.replyThreadId]: draft,
+    };
+  }
+}
+
+/** @this {any} */
+function createPendingFocusTarget(element, draft = null) {
+  return {
+    element,
+    selectionDirection: draft?.selectionDirection ?? 'none',
+    selectionEnd: Number.isInteger(draft?.selectionEnd) ? draft.selectionEnd : null,
+    selectionStart: Number.isInteger(draft?.selectionStart) ? draft.selectionStart : null,
+  };
+}
+
 /** @this {any} */
 function renderCard() {
   const root = this.ensureCardRoot();
+  this.captureActiveCardDraft();
   root.replaceChildren();
   root.classList.toggle('hidden', !this.activeCard);
   if (!this.activeCard) {
@@ -245,6 +298,7 @@ function createComposer() {
   textarea.rows = 4;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
   textarea.placeholder = 'Add context, feedback, or a question...';
+  textarea.value = this.activeCard?.composerDraft?.value ?? '';
 
   const actions = document.createElement('div');
   actions.className = 'ui-record-actions comment-card-actions';
@@ -277,7 +331,7 @@ function createComposer() {
     this.closeCard();
   });
 
-  this.pendingCardFocusElement = textarea;
+  this.pendingCardFocusElement = createPendingFocusTarget(textarea, this.activeCard?.composerDraft);
   return form;
 }
 
@@ -329,6 +383,9 @@ function createThreadElement(thread) {
   reply.setAttribute('aria-label', isReplying ? 'Cancel reply' : 'Reply to thread');
   reply.title = isReplying ? 'Cancel reply' : 'Reply to thread';
   reply.addEventListener('click', () => {
+    if (isReplying && this.activeCard?.replyDrafts?.[thread.id]) {
+      delete this.activeCard.replyDrafts[thread.id];
+    }
     this.activeCard = {
       ...this.activeCard,
       replyThreadId: isReplying ? null : thread.id,
@@ -517,12 +574,14 @@ function createReactionPickerButton(thread, message, emoji) {
 function createReplyComposer(thread) {
   const form = document.createElement('form');
   form.className = 'comment-reply-form';
+  const draft = this.activeCard?.replyDrafts?.[thread.id] ?? null;
 
   const textarea = document.createElement('textarea');
   textarea.className = inputClassNames({ extra: 'comment-card-input' });
   textarea.rows = 3;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
   textarea.placeholder = 'Reply to thread...';
+  textarea.value = draft?.value ?? '';
 
   const actions = document.createElement('div');
   actions.className = 'ui-record-actions comment-card-actions';
@@ -532,6 +591,9 @@ function createReplyComposer(thread) {
   cancel.className = buttonClassNames({ variant: 'secondary' });
   cancel.textContent = 'Cancel';
   cancel.addEventListener('click', () => {
+    if (this.activeCard?.replyDrafts?.[thread.id]) {
+      delete this.activeCard.replyDrafts[thread.id];
+    }
     this.activeCard = {
       ...this.activeCard,
       replyThreadId: null,
@@ -546,7 +608,7 @@ function createReplyComposer(thread) {
 
   actions.append(cancel, submit);
   form.append(textarea, actions);
-  this.pendingCardFocusElement = textarea;
+  this.pendingCardFocusElement = createPendingFocusTarget(textarea, draft);
 
   form.addEventListener('submit', async (event) => {
     event.preventDefault();
@@ -556,6 +618,9 @@ function createReplyComposer(thread) {
       return;
     }
 
+    if (this.activeCard?.replyDrafts?.[thread.id]) {
+      delete this.activeCard.replyDrafts[thread.id];
+    }
     this.activeCard = {
       ...this.activeCard,
       replyThreadId: null,
@@ -597,7 +662,8 @@ function positionCard(card) {
 
 /** @this {any} */
 function flushPendingCardFocus() {
-  const element = this.pendingCardFocusElement;
+  const pendingTarget = this.pendingCardFocusElement;
+  const element = pendingTarget instanceof HTMLElement ? pendingTarget : pendingTarget?.element;
   if (!(element instanceof HTMLElement) || !element.isConnected) {
     this.pendingCardFocusElement = null;
     return;
@@ -615,6 +681,17 @@ function flushPendingCardFocus() {
     }
 
     element.focus({ preventScroll: true });
+    if (
+      element instanceof HTMLTextAreaElement
+      && Number.isInteger(pendingTarget?.selectionStart)
+      && Number.isInteger(pendingTarget?.selectionEnd)
+    ) {
+      element.setSelectionRange(
+        pendingTarget.selectionStart,
+        pendingTarget.selectionEnd,
+        pendingTarget.selectionDirection ?? 'none',
+      );
+    }
   };
 
   focusElement();
@@ -633,14 +710,17 @@ function flushPendingCardFocus() {
 }
 
 export const commentUiCardMethods = {
+  captureActiveCardDraft,
   closeCard,
   createComposer,
+  createPendingFocusTarget,
   createMessageElement,
   createQuickReactionButton,
   createReactionBar,
   createReactionPicker,
   createReactionPickerButton,
   createReplyComposer,
+  createTextareaDraft,
   createThreadElement,
   ensureCardRoot,
   flushPendingCardFocus,

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

@@ -165,11 +165,34 @@ function handleEditorContentChange() {
 /** @this {CommentUiStateContext} */
 function setThreads(threads = []) {
   this.threads = sortThreads(threads);
+  const groups = this.getThreadGroups();
   if (
     this.activeCard?.mode === 'group'
-    && !this.getThreadGroups().some((group) => group.key === this.activeCard.groupKey)
   ) {
-    this.activeCard = null;
+    const activeThreadIds = Array.isArray(this.activeCard.groupThreadIds)
+      ? this.activeCard.groupThreadIds
+      : [];
+    const matchingGroup = groups.find((group) => group.key === this.activeCard.groupKey)
+      ?? groups.find((group) => (
+        group.threads.length === activeThreadIds.length
+        && group.threads.every((thread) => activeThreadIds.includes(thread.id))
+      ));
+    if (!matchingGroup) {
+      this.activeCard = null;
+    } else {
+      this.activeCard = {
+        ...this.activeCard,
+        anchor: matchingGroup.anchor,
+        groupKey: matchingGroup.key,
+        groupThreadIds: matchingGroup.threads.map((thread) => thread.id),
+      };
+      if (
+        this.activeCard.replyThreadId
+        && !matchingGroup.threads.some((thread) => thread.id === this.activeCard.replyThreadId)
+      ) {
+        this.activeCard.replyThreadId = null;
+      }
+    }
   }
   if (
     this.reactionPicker

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

@@ -98,6 +98,7 @@ export class DrawioEmbedController {
     getTheme,
     onOpenFile = null,
     onOpenTextFile = null,
+    onToggleQuickSwitcher = null,
     previewContainer,
     previewElement,
     toastController,
@@ -106,6 +107,7 @@ export class DrawioEmbedController {
     this.getTheme = getTheme;
     this.onOpenFile = onOpenFile;
     this.onOpenTextFile = onOpenTextFile;
+    this.onToggleQuickSwitcher = onToggleQuickSwitcher;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
     this.toastController = toastController;
@@ -585,7 +587,15 @@ export class DrawioEmbedController {
     return null;
   }
 
+  _isMessageFromEntry(event, entry) {
+    return Boolean(entry?.iframe?.contentWindow && event.source === entry.iframe.contentWindow);
+  }
+
   _onMessage(event) {
+    if (event.origin !== window.location.origin) {
+      return;
+    }
+
     const payload = event.data;
     if (!payload || payload.source !== 'drawio-editor') {
       return;
@@ -595,6 +605,9 @@ export class DrawioEmbedController {
     if (!entry) {
       return;
     }
+    if (!this._isMessageFromEntry(event, entry)) {
+      return;
+    }
 
     if (payload.type === 'fallback-text') {
       if (entry.mode === 'view') {
@@ -616,6 +629,11 @@ export class DrawioEmbedController {
 
     if (payload.type === 'request-open-file') {
       this.onOpenFile?.(entry.filePath);
+      return;
+    }
+
+    if (payload.type === 'request-toggle-quick-switcher') {
+      this.onToggleQuickSwitcher?.();
     }
   }
 

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

@@ -55,6 +55,7 @@ export class ExcalidrawEmbedController {
     getTheme,
     getLocalUser,
     onOpenFile = null,
+    onToggleQuickSwitcher = null,
     previewContainer,
     previewElement,
     toastController,
@@ -62,6 +63,7 @@ export class ExcalidrawEmbedController {
     this.getTheme = getTheme;
     this.getLocalUser = getLocalUser;
     this.onOpenFile = onOpenFile;
+    this.onToggleQuickSwitcher = onToggleQuickSwitcher;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
     this.toastController = toastController;
@@ -1197,6 +1199,11 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    if (msg.type === 'request-toggle-quick-switcher') {
+      this.onToggleQuickSwitcher?.();
+      return;
+    }
+
     if (msg.type === 'error') {
       if (entry.isParked) {
         return;

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

@@ -90,6 +90,16 @@ export class FileExplorerController {
     this.renderTree();
   }
 
+  revealFile(filePath, { clearSearch = false } = {}) {
+    if (clearSearch) {
+      this.state.setSearchQuery('');
+    }
+
+    this.state.setActiveFile(filePath);
+    this.renderTree({ reset: clearSearch });
+    this.view.revealFile(filePath);
+  }
+
   get flatFiles() {
     return this.state.flatFiles;
   }

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

@@ -131,6 +131,12 @@ export class FileExplorerView {
     });
   }
 
+  revealFile(filePath) {
+    const fileItem = Array.from(this.treeContainer?.querySelectorAll('.file-tree-file') ?? [])
+      .find((element) => element.dataset.path === filePath);
+    fileItem?.scrollIntoView({ block: 'nearest' });
+  }
+
   render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
     if (!this.treeContainer) {
       return;

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

@@ -730,6 +730,7 @@ export class GitPanelController {
       && this.selection.scope === file.scope;
     const dirPath = getPathDir(file.path);
     const displayName = getPathLeaf(file.path);
+    const fullPath = String(file.path || '');
     const statusClass = badgeClass(file.status);
     const stageAction = file.scope === 'staged'
       ? { label: 'Unstage', value: 'unstage' }
@@ -746,6 +747,7 @@ export class GitPanelController {
           type="button"
           data-git-path="${escapeHtml(file.path)}"
           data-git-scope="${escapeHtml(file.scope)}"
+          title="${escapeHtml(fullPath)}"
         >
           ${fileIconSvg()}
           <span class="ui-item-copy git-file-copy">