test(rich-editor): cover suggestion keyboard nav through ReactRenderer; drop inline comments

Adds a test that drives the real ReactRenderer path the suggestion plugin uses:
the captured onKeyDown handle returns false while the store is empty and true
once async workspace items land, and arrow+enter select the right item. Removes
the explanatory inline comments from the two imperative handles.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-list.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Guards the `@` menu's keyboard navigation against the async-data race: the suggestion plugin grabs
+ * the list's `onKeyDown` handle once, but workspace items arrive later via the store. The handle must
+ * read live values so arrow/enter work after the data lands (otherwise keys fall through to the editor).
+ * The second test drives the real `ReactRenderer` path the suggestion plugin actually uses.
+ */
+import { act, createRef } from 'react'
+import { Editor } from '@tiptap/core'
+import { EditorContent, ReactRenderer } from '@tiptap/react'
+import { File } from 'lucide-react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createMarkdownEditorExtensions } from '../extensions'
+import { MentionList, type MentionListHandle } from './mention-list'
+import { createMentionStore } from './mention-store'
+import type { MentionItem } from './types'
+
+const items: MentionItem[] = [
+  { kind: 'file', id: 'a', label: 'Alpha', group: 'Files', icon: File },
+  { kind: 'file', id: 'b', label: 'Beta', group: 'Files', icon: File },
+]
+
+const arrowDown = { event: new KeyboardEvent('keydown', { key: 'ArrowDown' }) }
+const enter = { event: new KeyboardEvent('keydown', { key: 'Enter' }) }
+
+describe('MentionList keyboard nav', () => {
+  let container: HTMLElement
+  let root: ReturnType<typeof import('react-dom/client').createRoot>
+
+  beforeEach(async () => {
+    // jsdom implements neither — both are exercised by scroll-into-view and ProseMirror.
+    Element.prototype.scrollIntoView = vi.fn()
+    document.elementFromPoint = vi.fn(() => null)
+    const { createRoot } = await import('react-dom/client')
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('navigates with arrows + inserts on enter once async items have loaded', () => {
+    const ref = createRef<MentionListHandle>()
+    const command = vi.fn()
+    const store = createMentionStore()
+
+    // Menu opens before the workspace data resolves — the store is still empty.
+    act(() => {
+      root.render(<MentionList ref={ref} query='' command={command} store={store} />)
+    })
+    expect(ref.current?.onKeyDown(arrowDown)).toBe(false)
+
+    // Async data lands; the captured handle must now see the items and intercept the keys.
+    act(() => store.set(items))
+
+    let handled: boolean | undefined
+    act(() => {
+      handled = ref.current?.onKeyDown(arrowDown)
+    })
+    expect(handled).toBe(true)
+
+    act(() => {
+      ref.current?.onKeyDown(enter)
+    })
+    expect(command).toHaveBeenCalledWith(items[1])
+  })
+
+  it('exposes a working onKeyDown through ReactRenderer (the suggestion plugin path)', async () => {
+    const editor = new Editor({ extensions: createMarkdownEditorExtensions({ placeholder: '' }) })
+    act(() => {
+      root.render(<EditorContent editor={editor} />)
+    })
+
+    const command = vi.fn()
+    const store = createMentionStore()
+    const renderer = new ReactRenderer<MentionListHandle>(MentionList, {
+      editor,
+      props: { query: '', command, store },
+    })
+    // Let the portal mount so ReactRenderer captures the imperative handle.
+    await act(async () => {})
+
+    expect(renderer.ref).not.toBeNull()
+    expect(renderer.ref?.onKeyDown(arrowDown)).toBe(false)
+
+    act(() => store.set(items))
+    expect(renderer.ref?.onKeyDown(arrowDown)).toBe(true)
+
+    renderer.destroy()
+    editor.destroy()
+  })
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-list.tsx

@@ -90,9 +90,6 @@ export const MentionList = forwardRef<MentionListHandle, MentionListProps>(funct
       ?.scrollIntoView({ block: 'nearest' })
   }, [activeIndex])
 
-  // The suggestion plugin captures this handle via `ReactRenderer.ref` once at mount, so it must read
-  // live values rather than close over them — otherwise keyboard nav uses the initial (empty) `flat`
-  // from before the async workspace data landed, and arrow keys fall through to the editor.
   const latest = useRef({ flat, activeIndex, command })
   latest.current = { flat, activeIndex, command }
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/slash-command/slash-command-list.tsx

@@ -37,8 +37,6 @@ export const SlashCommandList = forwardRef<SlashCommandListHandle, SlashCommandL
         ?.scrollIntoView({ block: 'nearest' })
     }, [activeIndex])
 
-    // Read live values: the suggestion plugin captures this handle via `ReactRenderer.ref` at mount,
-    // so closing over `items`/`activeIndex` would make Enter act on the mount-time snapshot.
     const latest = useRef({ items, activeIndex, command })
     latest.current = { items, activeIndex, command }