feat(superdoc): center comment and document anchor on sidebar click#2466
feat(superdoc): center comment and document anchor on sidebar click#2466
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 41d3e62d97
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| // Skip instant alignment (which disables CSS transitions) so that the | ||
| // sidebar smoothly slides to its target. The non-instant watcher path in | ||
| // FloatingComments will align the comment after the smooth scroll settles. | ||
| clearInstantSidebarAlignment(); |
There was a problem hiding this comment.
Clearing the instant-alignment request here breaks the new centering behavior whenever the clicked thread is already active. FloatingComments.vue only updates sidebarOffsetY from its watch(activeCommentKey, ...) / watch(activeComment, ...) paths, so re-clicking the currently active card—or expanding N more replies on an already-active thread—does not move the sidebar at all, while scrollThreadAnchorToClientY(..., { behavior: 'smooth' }) below still recenters the document. In that scenario the document anchor moves to center but the selected comment card stays where it was.
Useful? React with 👍 / 👎.
| } else { | ||
| clearInstantSidebarAlignment(); | ||
| } | ||
| const targetClientY = Math.round(window.innerHeight * VIEWPORT_CENTER_RATIO); |
There was a problem hiding this comment.
This uses the browser window height as the centering target, but PresentationEditor.scrollThreadAnchorToClientY() explicitly supports scrolling an HTMLElement container as well as Window (packages/super-editor/src/core/presentation-editor/PresentationEditor.ts, scrollThreadAnchorToClientY), and the same class's other scrolling code already switches to container bounds for nested scrollers (#scrollScreenRectIntoView). In embedded layouts like a modal or split pane, window.innerHeight * 0.38 is not the visible center of the editor viewport, so sidebar clicks will land the anchor/comment noticeably off-center.
Useful? React with 👍 / 👎.
Target viewport center (38% from top) instead of the comment's current screen position when clicking a sidebar comment card.
tupizz
force-pushed
the
feat/center-comment-on-sidebar-click
branch
from
adfdfc4 to
f86b8b9
Compare
caio-pizzol
left a comment
caio-pizzol
left a comment
There was a problem hiding this comment.
@tupizz nice and simple change. the centering works well for the current full-screen setup. one small thing: if the editor ever lives inside a smaller container, the scroll position might land a bit off — left an inline comment about it. no tests needed for this. the codex bot flagged re-clicking the same comment as a problem, but that behavior already existed before this PR.
| const setFocus = () => { | ||
| const editor = proxy.$superdoc.activeEditor; | ||
| const targetClientY = commentDialogElement.value?.getBoundingClientRect?.()?.top; | ||
| const targetClientY = Math.round(window.innerHeight * 0.38); |
There was a problem hiding this comment.
this uses the browser window height to figure out where to scroll, which works when the editor takes up the full screen. if the editor is inside something smaller (like a modal or a panel with a toolbar above it), the scroll target will be a bit off. not a blocker — just something to keep in mind. also, naming the 0.38 makes it easier to find and tweak later:
| const targetClientY = Math.round(window.innerHeight * 0.38); | |
| const COMMENT_FOCUS_VIEWPORT_RATIO = 0.38; | |
| const targetClientY = Math.round(window.innerHeight * COMMENT_FOCUS_VIEWPORT_RATIO); |
2 participants
CleanShot.2026-03-19.at.10.43.17.mp4
Summary
fixes SD-2248
https://linear.app/superdocworkspace/issue/SD-2248/bug-in-tester-tools-googleapis-and-labs-commenttc-bubbles-and-doc-do
behavior: 'smooth'instead of instant jumpHow it works
The entire alignment pipeline is parameterized by a single
targetClientYvalue. This PR changes it fromcommentDialog.getBoundingClientRect().top(the card's current position) towindow.innerHeight * 0.38(optical center of the viewport).The 0.38 ratio places content slightly above true center to leave room for comment card content below. This is a tunable constant (
VIEWPORT_CENTER_RATIO).What does NOT change
scrollIntoView({ block: 'center' }))Test plan