fix(files): anchor the editor bubble menus to the selection on scroll

The text and table bubble menus stayed pinned to a viewport position when the file
scrolled — clicking a table cell then scrolling left the toolbar floating over unrelated
content. TipTap v3's BubbleMenu reposition listener defaults to `window`, but the editor
scrolls inside an inner overflow container, so it never fired; the menu only moved when
the selection itself changed.

Pass the editor's scroll container as the BubbleMenu `scrollTarget` (a first-class TipTap
option) so it repositions with the selection, and enable Floating UI's `hide` middleware
so the menu hides once its anchored cell scrolls out of view. Share the anchor + options
through one `floating-anchor` helper so the two menus can't drift.

Removes the prior workarounds that fought this: the `strategy: 'fixed'` viewport-pin, the
resolveAnchor viewport-clamp branches, and the bubble menu's selection-keyed rect cache
(which froze the menu in place on scroll).

Verified in a harness: on scroll the menu delta matches the cell delta (follows), and it
hides once the cell leaves view.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Blimp,
   Bold,
@@ -16,11 +16,15 @@ import {
   TextQuote,
   Unlink,
 } from '@sim/emcn/icons'
-import { posToDOMRect } from '@tiptap/core'
 import { PluginKey } from '@tiptap/pm/state'
 import type { Editor } from '@tiptap/react'
 import { useEditorState } from '@tiptap/react'
 import { BubbleMenu } from '@tiptap/react/menus'
+import {
+  BUBBLE_MENU_APPEND_TO,
+  bubbleMenuFloatingOptions,
+  selectionVirtualElement,
+} from './floating-anchor'
 import { applyLink, LinkUrlInput } from './link-editing'
 import { ToolbarButton, ToolbarDivider } from './toolbar-button'
 
@@ -45,15 +49,9 @@ function revealBubbleMenu(editor: Editor, key: PluginKey): void {
   editor.commands.setMeta(key, 'updatePosition')
 }
 
-/** Pins the toolbar to the viewport so it stays put while the document scrolls instead of tracking the text. */
-const FLOATING_OPTIONS = { strategy: 'fixed' } as const
-
-/** Renders into the body so a transformed/clipping ancestor can't reparent the fixed toolbar and shift it. */
-const APPEND_TO_BODY = () => document.body
-
 interface EditorBubbleMenuProps {
   editor: Editor
-  /** The editor's scrollable viewport, used to keep the toolbar on-screen for selections taller than it. */
+  /** The editor's scrollable viewport, so the toolbar repositions with the selection as the pane scrolls. */
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
   /** Adds the current selection to Chat as a reference. Omit to hide the action. */
   onAddToChat?: () => void
@@ -185,37 +183,21 @@ export function EditorBubbleMenu({
     setLinkValue(null)
   }
 
-  const anchorCacheRef = useRef<{ key: string; rect: DOMRect } | null>(null)
-  const resolveAnchor = useCallback(() => {
-    const { view, state } = editor
-    if (!view.dom.isConnected) return null
-    const { from, to } = state.selection
-    const key = `${from}:${to}`
-    if (anchorCacheRef.current?.key !== key) {
-      const selection = posToDOMRect(view, from, to)
-      const viewport = scrollContainerRef.current?.getBoundingClientRect()
-      const rect =
-        viewport && selection.height > viewport.height
-          ? new DOMRect(
-              selection.left,
-              Math.min(Math.max(selection.top, viewport.top), viewport.bottom),
-              selection.width,
-              0
-            )
-          : selection
-      anchorCacheRef.current = { key, rect }
-    }
-    const { rect } = anchorCacheRef.current
-    return { getBoundingClientRect: () => rect, getClientRects: () => [rect] }
-  }, [editor, scrollContainerRef])
+  const [scrollTarget, setScrollTarget] = useState<HTMLElement | null>(null)
+  useEffect(() => {
+    setScrollTarget(scrollContainerRef.current)
+  }, [scrollContainerRef])
+
+  const resolveAnchor = useCallback(() => selectionVirtualElement(editor), [editor])
+  const options = useMemo(() => bubbleMenuFloatingOptions(scrollTarget), [scrollTarget])
 
   return (
     <BubbleMenu
       editor={editor}
       pluginKey={bubbleMenuKey}
       getReferencedVirtualElement={resolveAnchor}
-      options={FLOATING_OPTIONS}
-      appendTo={APPEND_TO_BODY}
+      options={options}
+      appendTo={BUBBLE_MENU_APPEND_TO}
       role='toolbar'
       aria-label='Text formatting'
       updateDelay={0}

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/floating-anchor.ts

@@ -0,0 +1,31 @@
+import { posToDOMRect } from '@tiptap/core'
+import type { Editor } from '@tiptap/react'
+
+/**
+ * Virtual anchor tracking the current selection's on-screen rect, for a Floating-UI-positioned bubble
+ * menu. Recomputed on every call and never cached by selection: the same selection lands at a new screen
+ * position purely from scrolling, and TipTap re-invokes this to reposition, so a cached rect would freeze
+ * the menu in place on scroll.
+ */
+export function selectionVirtualElement(editor: Editor) {
+  const { view, state } = editor
+  if (!view.dom.isConnected) return null
+  const { from, to } = state.selection
+  const rect = posToDOMRect(view, from, to)
+  return { getBoundingClientRect: () => rect, getClientRects: () => [rect] }
+}
+
+/**
+ * Floating options shared by the editor's bubble menus. `scrollTarget` is load-bearing: TipTap's
+ * reposition listener defaults to `window`, but the editor scrolls inside an inner overflow container, so
+ * without pointing it at that element the menu freezes at its last viewport position on scroll instead of
+ * following the selection. `hide` lets Floating UI hide the menu once its anchored selection scrolls out
+ * of view. `fixed` + rendering into `<body>` ({@link BUBBLE_MENU_APPEND_TO}) keeps a clipping or
+ * transformed ancestor from shifting it.
+ */
+export function bubbleMenuFloatingOptions(scrollTarget: HTMLElement | null) {
+  return { strategy: 'fixed' as const, scrollTarget: scrollTarget ?? undefined, hide: true }
+}
+
+/** Render the menu into `<body>` so a clipping/transformed ancestor can't reparent or shift it. */
+export const BUBBLE_MENU_APPEND_TO = () => document.body

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/table-menu.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   ArrowDown,
   ArrowLeft,
@@ -9,22 +9,20 @@ import {
   Table as TableIcon,
   Trash,
 } from '@sim/emcn/icons'
-import { posToDOMRect } from '@tiptap/core'
 import { PluginKey } from '@tiptap/pm/state'
 import type { Editor } from '@tiptap/react'
 import { useEditorState } from '@tiptap/react'
 import { BubbleMenu } from '@tiptap/react/menus'
+import {
+  BUBBLE_MENU_APPEND_TO,
+  bubbleMenuFloatingOptions,
+  selectionVirtualElement,
+} from './floating-anchor'
 import { ToolbarButton, ToolbarDivider } from './toolbar-button'
 
-/** Pins the toolbar to the viewport instead of tracking the (often wide) table as it scrolls horizontally. */
-const FLOATING_OPTIONS = { strategy: 'fixed' } as const
-
-/** Renders into the body so a transformed/clipping ancestor can't reparent the fixed toolbar and shift it. */
-const APPEND_TO_BODY = () => document.body
-
 interface TableBubbleMenuProps {
   editor: Editor
-  /** The editor's scrollable viewport, used to keep the toolbar on-screen for a table taller than it. */
+  /** The editor's scrollable viewport, so the toolbar repositions with the cell as the pane scrolls. */
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 }
 
@@ -36,6 +34,7 @@ interface TableBubbleMenuProps {
  */
 export function TableBubbleMenu({ editor, scrollContainerRef }: TableBubbleMenuProps) {
   const [menuKey] = useState(() => new PluginKey('markdownTableMenu'))
+  const [scrollTarget, setScrollTarget] = useState<HTMLElement | null>(null)
 
   const active = useEditorState({
     editor,
@@ -44,29 +43,20 @@ export function TableBubbleMenu({ editor, scrollContainerRef }: TableBubbleMenuP
     }),
   })
 
-  // Recomputed on every call (not cached by selection key) — the same table cell can land at a
-  // different screen position purely from scrolling with no selection change, and Floating UI's
-  // `autoUpdate` re-invokes this on scroll/resize expecting a fresh rect each time.
-  const resolveAnchor = useCallback(() => {
-    const { view, state } = editor
-    if (!view.dom.isConnected) return null
-    const { from, to } = state.selection
-    const selection = posToDOMRect(view, from, to)
-    const viewport = scrollContainerRef.current?.getBoundingClientRect()
-    const rect =
-      viewport && selection.top < viewport.top
-        ? new DOMRect(selection.left, viewport.top, selection.width, 0)
-        : selection
-    return { getBoundingClientRect: () => rect, getClientRects: () => [rect] }
-  }, [editor, scrollContainerRef])
+  useEffect(() => {
+    setScrollTarget(scrollContainerRef.current)
+  }, [scrollContainerRef])
+
+  const resolveAnchor = useCallback(() => selectionVirtualElement(editor), [editor])
+  const options = useMemo(() => bubbleMenuFloatingOptions(scrollTarget), [scrollTarget])
 
   return (
     <BubbleMenu
       editor={editor}
       pluginKey={menuKey}
       getReferencedVirtualElement={resolveAnchor}
-      options={FLOATING_OPTIONS}
-      appendTo={APPEND_TO_BODY}
+      options={options}
+      appendTo={BUBBLE_MENU_APPEND_TO}
       role='toolbar'
       aria-label='Table editing'
       updateDelay={0}