fix(desktop): open emoji picker at editor caret position in chatroom

Author: HMarzban

packages/webapp/components/chat/components/MessageComposer/components/Actions/ActionButtons/EmojiButton.tsx

@@ -2,20 +2,48 @@ import { twMerge } from 'tailwind-merge'
 import Button from '../../ui/Button'
 import Icon from '@components/TipTap/toolbar/Icon'
 import { useMessageComposer } from '../../../hooks/useMessageComposer'
+import { Editor } from '@tiptap/react'
+import { useCallback } from 'react'
 type Props = React.HTMLAttributes<HTMLButtonElement> & {
   className?: string
   size?: number
 }
 
+const getCaretPositionWithScroll = (editor: Editor) => {
+  if (!editor) return null
+
+  const { selection } = editor.state
+  const coords = editor.view.coordsAtPos(selection.from)
+
+  return {
+    x: coords.left + window.scrollX,
+    y: coords.top + window.scrollY,
+    bottom: coords.bottom + window.scrollY,
+    right: coords.right + window.scrollX
+  }
+}
+
 export const EmojiButton = ({ className, size = 20, ...props }: Props) => {
   const { editor } = useMessageComposer()
 
-  const openEmojiPicker = (clickEvent: any) => {
-    const event = new CustomEvent('toggelEmojiPicker', {
-      detail: { clickEvent: clickEvent, editor, type: 'inserEmojiToEditor' }
-    })
-    document.dispatchEvent(event)
-  }
+  const openEmojiPicker = useCallback(
+    (clickEvent: any) => {
+      if (!editor) return
+
+      const caretPosition = getCaretPositionWithScroll(editor)
+
+      const event = new CustomEvent('toggelEmojiPicker', {
+        detail: {
+          clickEvent: clickEvent,
+          editor,
+          type: 'inserEmojiToEditor',
+          coordinates: caretPosition
+        }
+      })
+      document.dispatchEvent(event)
+    },
+    [editor]
+  )
 
   return (
     <Button

packages/webapp/components/chat/hooks/useEmojiBoxHandler.ts

@@ -27,6 +27,7 @@ export const useEmojiBoxHandler = (emojiPikerRef: any, messageContainerRef: any)
       const message = e.detail?.message
       const type = e.detail.type
       const editor = e.detail?.editor
+      const coordinates = e.detail?.coordinates
       setEditor(editor)
       setEventTypes(type)
 
@@ -36,15 +37,23 @@ export const useEmojiBoxHandler = (emojiPikerRef: any, messageContainerRef: any)
       const emojiButtonWidth = 24
       const chatEditorHeight = 153
 
-      // Use getBoundingClientRect if positioning relative to an element
-      const rect =
-        event.currentTarget?.getBoundingClientRect() || event.target?.getBoundingClientRect()
-      if (!rect) {
-        console.error('rect is null')
-        return
+      let newTop, newLeft
+
+      if (coordinates) {
+        // Use provided coordinates
+        newTop = coordinates.y || coordinates.top
+        newLeft = coordinates.x || coordinates.left
+      } else {
+        // Fallback to DOM positioning
+        const rect =
+          event.currentTarget?.getBoundingClientRect() || event.target?.getBoundingClientRect()
+        if (!rect) {
+          console.error('rect is null')
+          return
+        }
+        newTop = rect.bottom + window.scrollY
+        newLeft = rect.left + window.scrollX
       }
-      let newTop = rect.bottom + window.scrollY
-      let newLeft = rect.left + window.scrollX
 
       // Adjust for right and bottom edges
       if (newLeft + clientWidth + emojiButtonWidth > window.innerWidth) {