fix(files): pin editor bubble menus to the cursor during scroll - #6434
Conversation
The text and table toolbars were positioned `fixed` and portaled to `<body>`, so TipTap repositioned them on a debounced scroll listener — the toolbar visibly lagged and "chased" the cursor as the pane scrolled. Leave the menus at TipTap's default `absolute` strategy and append them into the editor's scroll container (now a positioning context) so they become absolutely-positioned children of the scrolled content and track the selection through native scrolling — no scroll listener, so no lag. TipTap's default `flip`/`shift` keep the toolbar above/below the selection at the pane edges, and the container's overflow clips it once the selection scrolls out of view. Verified in a harness: 0px menu-to-cell drift during scroll (was 100s of px on fast scroll), and no clipping at the top, bottom, or table edges.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryLow Risk Overview Positioning change: Menus are appended into the editor scroll container (not Trade-off: The wide formatting bar can clip if the pane is narrower than the toolbar; overflow on the container hides menus when the selection scrolls out of view. Reviewed by Cursor Bugbot for commit a2acda1. Configure here. |
Greptile SummaryThe PR changes the rich-markdown editor’s text and table bubble menus from fixed, body-portaled overlays to absolutely positioned children of the editor’s scroll container.
Confidence Score: 5/5The PR appears safe to merge with no actionable defects identified in the changed positioning flow. The editor container is established as the menus’ positioning and clipping context, native scrolling moves the menus with their selections, and the portal callback resolves after the parent container ref is committed.
|
| Filename | Overview |
|---|---|
| apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu.tsx | Removes explicit Floating UI options while retaining the shared selection anchor and new container portal target. |
| apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/table-menu.tsx | Applies the same native-scroll positioning behavior to the table editing toolbar. |
| apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/use-bubble-menu-floating.ts | Simplifies the positioning hook to provide a live selection anchor and append menus to the editor scroll container. |
| apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx | Adds a relative positioning context to the existing overflow-scrolling editor container. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart LR
Selection[Editor selection] --> Anchor[Virtual DOM anchor]
Anchor --> Menu[Absolute bubble menu]
Container[Relative overflow container] --> Menu
Scroll[Native container scroll] --> Container
Container -->|moves and clips child| Menu
Reviews (1): Last reviewed commit: "fix(files): pin editor bubble menus to t..." | Re-trigger Greptile
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit a2acda1. Configure here.
1 participant
Summary
position: fixedand portaled to<body>, TipTap repositioned them on a debounced scroll listener — so they visibly lagged and "chased" the cursor during scroll.absolutestrategy and append them into the editor's scroll container (now a positioning context viarelative). They become absolutely-positioned children of the scrolled content and track the selection through native scrolling — no scroll listener, no lag.flip/shiftstill park the toolbar above/below the selection at the pane edges, and the container's overflow clips it once the selection scrolls out of view.scrollTarget/hide/fixedoptions plumbing.Type of Change
Testing
Empirically verified in a Playwright harness against the real menu components:
Trade-off considered: native positioning can clip the wide text toolbar only if the file pane is narrower than the toolbar (~382 px); the table menu (~262 px) is unaffected. The body-portal bounce was confirmed unfixable via settings, so native pin was chosen for the smoothness.
Checklist