fix(comments): only calculate current caret element on demand (#4935)

packages/sanity/src/core/comments/components/pte/comment-input/CommentInputProvider.tsx

@@ -4,16 +4,18 @@ import {
   PortableTextEditor,
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
-import React, {FormEventHandler, useCallback, useMemo, useState} from 'react'
+import React, {FormEventHandler, startTransition, useCallback, useMemo, useState} from 'react'
 import {Path, isPortableTextSpan, isPortableTextTextBlock} from '@sanity/types'
 import {CommentMessage} from '../../../types'
 import {useDidUpdate} from '../../../../form'
 import {useCommentHasChanged} from '../../../helpers'
 import {MentionOptionsHookValue} from '../../../hooks'
+import {getCaretElement} from './getCaretElement'
 
 type FIXME = any
 
 export interface CommentInputContextValue {
+  activeCaretElement?: HTMLElement | null
   canSubmit?: boolean
   closeMentions: () => void
   editor: PortableTextEditor
@@ -58,6 +60,7 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
 
   const editor = usePortableTextEditor()
 
+  const [activeCaretElement, setActiveCaretElement] = useState<HTMLElement | null>(null)
   const [mentionsMenuOpen, setMentionsMenuOpen] = useState<boolean>(false)
   const [selectionAtMentionInsert, setSelectionAtMentionInsert] = useState<EditorSelection>(null)
 
@@ -100,7 +103,10 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
   const onBeforeInput = useCallback(
     (event: FIXME): void => {
       if (event.inputType === 'insertText' && event.data === '@') {
-        setMentionsMenuOpen(true)
+        const element = getCaretElement(event.target)
+        setActiveCaretElement(element)
+        startTransition(() => setMentionsMenuOpen(true))
+
         setSelectionAtMentionInsert(PortableTextEditor.getSelection(editor))
       }
     },
@@ -109,6 +115,7 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
 
   const closeMentions = useCallback(() => {
     if (!mentionsMenuOpen) return
+    setActiveCaretElement(null)
     setMentionsMenuOpen(false)
     focusEditor()
     setSelectionAtMentionInsert(null)
@@ -181,6 +188,7 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
   const ctxValue = useMemo(
     () =>
       ({
+        activeCaretElement,
         canSubmit,
         closeMentions,
         editor,
@@ -198,6 +206,7 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
         mentionOptions,
       }) satisfies CommentInputContextValue,
     [
+      activeCaretElement,
       canSubmit,
       closeMentions,
       editor,

packages/sanity/src/core/comments/components/pte/comment-input/Editable.tsx

@@ -6,7 +6,6 @@ import {MentionsMenu} from '../../mentions'
 import {useDidUpdate} from '../../../../form'
 import {renderBlock, renderChild} from '../render'
 import {useCommentInput} from './useCommentInput'
-import {useCursorElement} from './useCursorElement'
 
 const INLINE_STYLE: React.CSSProperties = {outline: 'none'}
 
@@ -53,6 +52,7 @@ export function Editable(props: EditableProps) {
   const editableRef = useRef<HTMLDivElement | null>(null)
 
   const {
+    activeCaretElement,
     closeMentions,
     expanded,
     focusEditor,
@@ -63,11 +63,6 @@ export function Editable(props: EditableProps) {
     onBeforeInput,
   } = useCommentInput()
 
-  const cursorElement = useCursorElement({
-    disabled: mentionsMenuOpen,
-    rootElement: editableRef.current,
-  })
-
   const renderPlaceholder = useCallback(() => <span>{placeholder}</span>, [placeholder])
 
   useGlobalKeyDown(
@@ -100,7 +95,7 @@ export function Editable(props: EditableProps) {
       <PortalProvider element={rootElementRef.current}>
         <StyledPopover
           constrainSize
-          hidden={!mentionsMenuOpen || !cursorElement}
+          disabled={!mentionsMenuOpen}
           content={
             <MentionsMenu
               loading={mentionOptions.loading}
@@ -113,7 +108,7 @@ export function Editable(props: EditableProps) {
           placement="bottom-start"
           portal
           ref={setPopoverElement}
-          referenceElement={cursorElement}
+          referenceElement={activeCaretElement}
         />
       </PortalProvider>
 

packages/sanity/src/core/comments/components/pte/comment-input/getCaretElement.ts

@@ -0,0 +1,29 @@
+export function getCaretElement(rootElement: HTMLElement | null): HTMLElement | null {
+  const selection = window.getSelection()
+
+  if (!selection || selection.type !== 'Caret') return null
+
+  const selectionRange = selection.getRangeAt(0)
+  const isWithinRoot = rootElement?.contains(selectionRange.commonAncestorContainer)
+
+  if (!isWithinRoot) return null
+
+  const {anchorNode, focusNode} = selection
+
+  if (rootElement?.contains(anchorNode) && anchorNode === focusNode) {
+    try {
+      const range = window.getSelection()?.getRangeAt(0)
+      const rect = range?.getBoundingClientRect()
+      if (rect) {
+        const element = {
+          getBoundingClientRect: () => rect,
+        } as HTMLElement
+        return element
+      }
+    } catch (_) {
+      return null
+    }
+  }
+
+  return null
+}