From 948d644e053551cf809c9e5b9820ae9b4bfe0299 Mon Sep 17 00:00:00 2001 From: Luccas Correa Date: Fri, 13 Mar 2026 10:59:02 -0300 Subject: [PATCH 1/9] fix(comments): align floating sidebar comments to active text Replace viewport-based bubble scrolling with sidebar layer translation so the active floating comment aligns to the clicked document text. Also constrain the floating comments container to act as a clipped viewport for the translated sidebar content. --- packages/superdoc/src/SuperDoc.vue | 4 +++ .../CommentsLayer/FloatingComments.vue | 26 +++++++++---------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/superdoc/src/SuperDoc.vue b/packages/superdoc/src/SuperDoc.vue index d7d74d4f21..8a218d3d2d 100644 --- a/packages/superdoc/src/SuperDoc.vue +++ b/packages/superdoc/src/SuperDoc.vue @@ -1169,11 +1169,15 @@ const getPDFViewer = () => { .right-sidebar { min-width: 320px; + height: 100%; } .floating-comments { min-width: 300px; width: 300px; + height: 100%; + overflow-y: hidden; + overflow-x: hidden; } .superdoc__layers { diff --git a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue index 8fb9344545..052f91c18c 100644 --- a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue +++ b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue @@ -73,6 +73,7 @@ const { activeZoom } = storeToRefs(superdocStore); const floatingCommentsContainer = ref(null); const commentsRenderKey = ref(0); +const sidebarOffsetY = ref(0); // Resolve activeComment (which stores commentId) to the position key used by allPositions // (which prefers importedId). Without this, imported Word comments where importedId !== commentId @@ -316,8 +317,8 @@ watch(activeCommentKey, (newKey, oldKey) => { }); }); -// Scroll to the active comment ONLY when its anchor is off-screen. -// getBoundingClientRect() is viewport-relative (accounts for scroll + zoom). +// Align the active comment bubble with the same on-screen Y position as its +// document anchor by translating the inner sidebar layer. watch(activeComment, () => { if (scrollTimer) clearTimeout(scrollTimer); @@ -332,18 +333,15 @@ watch(activeComment, () => { scrollTimer = setTimeout(() => { const el = placeholderRefs.value[key]; if (!el) return; + const parentRect = props.parent?.getBoundingClientRect?.(); + if (!parentRect) return; - const rect = el.getBoundingClientRect(); - const margin = 80; - const availableHeight = window.innerHeight - 2 * margin; - const isVisible = - rect.height > availableHeight - ? rect.top >= margin - : rect.top >= margin && rect.bottom <= window.innerHeight - margin; + const anchorTop = getAnchorTop(comment); + if (typeof anchorTop !== 'number' || isNaN(anchorTop)) return; - if (!isVisible) { - el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); - } + const desiredTop = parentRect.top + anchorTop; + const currentTop = el.getBoundingClientRect().top; + sidebarOffsetY.value += desiredTop - currentTop; }, 400); }); }); @@ -458,7 +456,7 @@ onBeforeUnmount(() => {
-
+
{ position: absolute; width: 300px; min-height: 300px; + transition: transform 0.3s ease; + will-change: transform; } .section-wrapper { From 21526f82793f8ef78bcefaf2dc27ff9ab6aa8d3a Mon Sep 17 00:00:00 2001 From: Luccas Correa Date: Fri, 13 Mar 2026 13:42:30 -0300 Subject: [PATCH 2/9] fix(comments): align document text to clicked floating thread When a floating comment bubble is clicked, scroll the editor anchor to the bubble's current viewport Y and apply the sidebar translation after the post-activation remeasure so the thread and document text stay aligned. Also reset the sidebar offset when no thread is active. --- .../presentation-editor/PresentationEditor.ts | 46 ++++++++++ packages/super-editor/src/index.d.ts | 9 ++ .../CommentsLayer/CommentDialog.test.js | 8 +- .../CommentsLayer/CommentDialog.vue | 15 ++- .../CommentsLayer/FloatingComments.vue | 91 ++++++++++++++++--- .../superdoc/src/stores/comments-store.js | 18 +++- 6 files changed, 170 insertions(+), 17 deletions(-) diff --git a/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts b/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts index 17c2266b50..a8f581ca58 100644 --- a/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts +++ b/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts @@ -2173,6 +2173,52 @@ export class PresentationEditor extends EventEmitter { } } + /** + * Scroll a comment or tracked-change anchor so its top edge lands at the + * requested viewport Y coordinate. + * + * @param threadId - Comment or tracked-change identifier + * @param targetClientY - Desired top position in client/viewport coordinates + * @param options - Scrolling options + * @param options.behavior - Scroll behavior ('auto' | 'smooth') + * @returns True when the thread could be resolved and scrolling was applied + */ + scrollThreadAnchorToClientY( + threadId: string, + targetClientY: number, + options: { behavior?: ScrollBehavior } = {}, + ): boolean { + if (!threadId || !Number.isFinite(targetClientY)) return false; + + const threadPosition = this.#collectCommentPositions()[threadId]; + if (!threadPosition) return false; + + const selectionBounds = this.getSelectionBounds(threadPosition.start, threadPosition.end); + const currentTop = selectionBounds?.bounds?.top; + if (!Number.isFinite(currentTop)) return false; + + const deltaY = currentTop - targetClientY; + if (Math.abs(deltaY) < 1) return true; + + const behavior = options.behavior ?? 'auto'; + const scrollTarget = this.#scrollContainer ?? this.#visibleHost; + + if (scrollTarget instanceof Window) { + const currentScrollY = scrollTarget.scrollY ?? scrollTarget.pageYOffset ?? 0; + scrollTarget.scrollTo({ top: currentScrollY + deltaY, behavior }); + return true; + } + + if (scrollTarget instanceof HTMLElement) { + const maxScrollTop = Math.max(0, scrollTarget.scrollHeight - scrollTarget.clientHeight); + const nextScrollTop = Math.max(0, Math.min(maxScrollTop, scrollTarget.scrollTop + deltaY)); + scrollTarget.scrollTo({ top: nextScrollTop, behavior }); + return true; + } + + return false; + } + /** * Find the DOM element containing a specific document position. * Returns the most specific (smallest range) matching element. diff --git a/packages/super-editor/src/index.d.ts b/packages/super-editor/src/index.d.ts index 14d2b6d6bd..f824609d4c 100644 --- a/packages/super-editor/src/index.d.ts +++ b/packages/super-editor/src/index.d.ts @@ -821,6 +821,15 @@ export declare class PresentationEditor { */ scrollToPosition(pos: number, options?: { behavior?: ScrollBehavior; block?: ScrollLogicalPosition }): boolean; + /** + * Scroll a comment or tracked-change anchor to a viewport Y coordinate. + */ + scrollThreadAnchorToClientY( + threadId: string, + targetClientY: number, + options?: { behavior?: ScrollBehavior }, + ): boolean; + /** * Scroll to a document position (async version). */ diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.test.js b/packages/superdoc/src/components/CommentsLayer/CommentDialog.test.js index 0dc37e6905..432880283f 100644 --- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.test.js +++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.test.js @@ -24,6 +24,9 @@ vi.mock('@superdoc/super-editor', () => ({ return () => h('textarea', slots.default?.()); }, }), + PresentationEditor: { + getInstance: vi.fn(() => null), + }, })); const simpleStub = (name, emits = []) => @@ -134,6 +137,7 @@ const mountDialog = async ({ baseCommentOverrides = {}, extraComments = [], prop cancelComment: vi.fn(), deleteComment: vi.fn(), removePendingComment: vi.fn(), + requestInstantSidebarAlignment: vi.fn(), setActiveComment: vi.fn(), getPendingComment: vi.fn(() => ({ commentId: 'pending-1', @@ -222,7 +226,9 @@ describe('CommentDialog.vue', () => { await nextTick(); expect(baseComment.setActive).toHaveBeenCalledWith(superdocStub); - expect(superdocStub.activeEditor.commands.setCursorById).toHaveBeenCalledWith(baseComment.commentId); + expect(superdocStub.activeEditor.commands.setCursorById).toHaveBeenCalledWith(baseComment.commentId, { + preferredActiveThreadId: baseComment.commentId, + }); expect(commentsStoreStub.activeComment.value).toBe(baseComment.commentId); // Click the reply pill to expand the editor diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue index 2c8026eecd..4bb3944ba7 100644 --- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue +++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue @@ -3,6 +3,7 @@ import { computed, ref, getCurrentInstance, onMounted, nextTick, watch } from 'v import { storeToRefs } from 'pinia'; import { useCommentsStore } from '@superdoc/stores/comments-store'; import { useSuperdocStore } from '@superdoc/stores/superdoc-store'; +import { PresentationEditor } from '@superdoc/super-editor'; import { superdocIcons } from '@superdoc/icons.js'; import InternalDropdown from './InternalDropdown.vue'; import CommentHeader from './CommentHeader.vue'; @@ -30,7 +31,8 @@ const superdocStore = useSuperdocStore(); const commentsStore = useCommentsStore(); /* Comments store refs */ -const { addComment, cancelComment, deleteComment, removePendingComment } = commentsStore; +const { addComment, cancelComment, deleteComment, removePendingComment, requestInstantSidebarAlignment } = + commentsStore; const { suppressInternalExternal, getConfig, @@ -279,6 +281,8 @@ const hasTextContent = computed(() => { const setFocus = () => { const editor = proxy.$superdoc.activeEditor; + const targetClientY = commentDialogElement.value?.getBoundingClientRect?.()?.top; + requestInstantSidebarAlignment(targetClientY); // Only set as active if not resolved (resolved comments can't be edited) if (!props.comment.resolvedTime) { @@ -294,6 +298,15 @@ const setFocus = () => { ? props.comment.commentId : props.comment.importedId || props.comment.commentId; editor.commands?.setCursorById(cursorId); + + const presentation = props.comment.fileId ? PresentationEditor.getInstance(props.comment.fileId) : null; + if (presentation && Number.isFinite(targetClientY)) { + const fallbackThreadId = props.comment.commentId; + const scrolled = presentation.scrollThreadAnchorToClientY(cursorId, targetClientY, { behavior: 'auto' }); + if (!scrolled && fallbackThreadId && fallbackThreadId !== cursorId) { + presentation.scrollThreadAnchorToClientY(fallbackThreadId, targetClientY, { behavior: 'auto' }); + } + } } }; diff --git a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue index 052f91c18c..fe0f224970 100644 --- a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue +++ b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue @@ -66,7 +66,13 @@ const props = defineProps({ const superdocStore = useSuperdocStore(); const commentsStore = useCommentsStore(); -const { getCommentAliasIds, getCommentPositionKey, resolveCommentPositionEntry } = commentsStore; +const { + getCommentAliasIds, + getCommentPositionKey, + resolveCommentPositionEntry, + peekInstantSidebarAlignment, + clearInstantSidebarAlignment, +} = commentsStore; const { getFloatingComments, activeComment, editorCommentPositions, pendingComment } = storeToRefs(commentsStore); const { activeZoom } = storeToRefs(superdocStore); @@ -74,6 +80,7 @@ const { activeZoom } = storeToRefs(superdocStore); const floatingCommentsContainer = ref(null); const commentsRenderKey = ref(0); const sidebarOffsetY = ref(0); +const disableInstantLayoutTransitions = ref(false); // Resolve activeComment (which stores commentId) to the position key used by allPositions // (which prefers importedId). Without this, imported Word comments where importedId !== commentId @@ -270,6 +277,19 @@ const handleResize = (comment) => { }); }; +const setInstantLayoutTransitionsDisabled = (disabled) => { + disableInstantLayoutTransitions.value = disabled; +}; + +const alignCommentKeyToClientY = (key, targetY) => { + if (!Number.isFinite(targetY)) return; + const el = placeholderRefs.value[key]; + if (!el) return; + + const currentTop = el.getBoundingClientRect().top; + sidebarOffsetY.value += targetY - currentTop; +}; + // Store placeholder ref by comment ID const setPlaceholderRef = (id, el) => { if (el) { @@ -298,8 +318,10 @@ watch(activeCommentKey, (newKey, oldKey) => { // Cancel stale timers from previous activation remeasureTimers.forEach(clearTimeout); remeasureTimers = []; + const instantAlignmentTargetY = newKey ? peekInstantSidebarAlignment() : null; + const instantAlignment = Number.isFinite(instantAlignmentTargetY); - const remeasure = () => { + const remeasure = (shouldAlign = false) => { for (const key of [newKey, oldKey].filter(Boolean)) { const el = placeholderRefs.value[key]; if (!el) continue; @@ -307,13 +329,27 @@ watch(activeCommentKey, (newKey, oldKey) => { if (!dialog) continue; storeHeight(key, dialog.getBoundingClientRect().height); } + + if (!shouldAlign || !newKey) return; + + nextTick(() => { + alignCommentKeyToClientY(newKey, instantAlignmentTargetY); + clearInstantSidebarAlignment(); + requestAnimationFrame(() => { + setInstantLayoutTransitionsDisabled(false); + }); + }); }; // 50ms: after Vue nextTick + browser rAF settle the initial DOM change // 350ms: after .comment-placeholder transition (300ms ease) completes nextTick(() => { - remeasureTimers.push(setTimeout(remeasure, 50)); - remeasureTimers.push(setTimeout(remeasure, 350)); + if (instantAlignment) { + remeasure(true); + } else { + remeasureTimers.push(setTimeout(remeasure, 50)); + remeasureTimers.push(setTimeout(remeasure, 350)); + } }); }); @@ -322,15 +358,24 @@ watch(activeCommentKey, (newKey, oldKey) => { watch(activeComment, () => { if (scrollTimer) clearTimeout(scrollTimer); - if (!activeComment.value) return; + if (!activeComment.value) { + clearInstantSidebarAlignment(); + setInstantLayoutTransitionsDisabled(false); + sidebarOffsetY.value = 0; + return; + } const comment = commentsStore.getComment(activeComment.value); if (!comment) return; const key = resolveLayoutKey(comment); if (!key) return; + const instantAlignment = Number.isFinite(peekInstantSidebarAlignment()); + if (instantAlignment) { + setInstantLayoutTransitionsDisabled(true); + return; + } nextTick(() => { - // 400ms: wait for .comment-placeholder CSS transition (300ms) + buffer - scrollTimer = setTimeout(() => { + const applyAlignment = () => { const el = placeholderRefs.value[key]; if (!el) return; const parentRect = props.parent?.getBoundingClientRect?.(); @@ -339,10 +384,13 @@ watch(activeComment, () => { const anchorTop = getAnchorTop(comment); if (typeof anchorTop !== 'number' || isNaN(anchorTop)) return; - const desiredTop = parentRect.top + anchorTop; const currentTop = el.getBoundingClientRect().top; + const desiredTop = parentRect.top + anchorTop; sidebarOffsetY.value += desiredTop - currentTop; - }, 400); + }; + + // 400ms: wait for .comment-placeholder CSS transition (300ms) + buffer + scrollTimer = setTimeout(applyAlignment, 400); }); }); @@ -453,17 +501,32 @@ onBeforeUnmount(() => {