refactor: emoji picker v0.5

Author: HMarzban

packages/webapp/components/BottomSheet.tsx

@@ -6,16 +6,17 @@ import FilterModal from '@components/pages/document/components/FilterModal'
 import NotificationModal from './notificationPanel/mobile/NotificationModal'
 import ChatContainerMobile from './pages/document/components/chat/ChatContainerMobile'
 import useKeyboardHeight from '@hooks/useKeyboardHeight'
+import { EmojiPanel } from './chat/components/EmojiPanel'
+import { CHAT_OPEN } from '@services/eventsHub'
 
 const BottomSheet = () => {
-  const { activeSheet, closeSheet } = useSheetStore()
+  const { activeSheet, closeSheet, sheetData } = useSheetStore()
   const chatRoom = useChatStore((state) => state.chatRoom)
   const closeChatRoom = useChatStore((state) => state.closeChatRoom)
   const destroyChatRoom = useChatStore((state) => state.destroyChatRoom)
   const setSheetContainerRef = useSheetStore((state) => state.setSheetContainerRef)
   const { height: keyboardHeight } = useKeyboardHeight()
   const { deviceDetect } = useStore((state) => state.settings)
-
   const isDeviceIOS = useMemo(() => {
     return deviceDetect?.os() === 'iOS'
   }, [deviceDetect])
@@ -37,6 +38,12 @@ const BottomSheet = () => {
         return <NotificationModal />
       case 'filters':
         return <FilterModal />
+      case 'emojiPicker':
+        return (
+          <EmojiPanel variant="mobile">
+            <EmojiPanel.Selector />
+          </EmojiPanel>
+        )
       default:
         return null
     }
@@ -53,7 +60,13 @@ const BottomSheet = () => {
         return {
           id: 'chatroom_sheet',
           detent: 'full-height' as SheetProps['detent'],
-          disableScrollLocking: true
+          disableScrollLocking: true,
+          disableDrag: true
+        }
+      case 'emojiPicker':
+        return {
+          id: 'emoji_picker_sheet',
+          detent: 'content-height' as SheetProps['detent']
         }
       default:
         return {
@@ -73,9 +86,7 @@ const BottomSheet = () => {
         return {
           style: {
             paddingBottom: isDeviceIOS ? keyboardHeight : 0
-          },
-          disableDrag: true,
-          disableScrollLocking: true
+          }
         }
       default:
         return {}
@@ -86,12 +97,21 @@ const BottomSheet = () => {
     if (activeSheet === 'chatroom') {
       closeChatRoom()
       destroyChatRoom()
+    } else if (activeSheet === 'emojiPicker' && sheetData.chatRoomState) {
+      const { headingId } = sheetData.chatRoomState
+      closeSheet()
+      setTimeout(() => {
+        PubSub.publish(CHAT_OPEN, {
+          headingId: headingId,
+          focusEditor: true,
+          clearSheetState: true
+        })
+      }, 100)
+    } else {
+      closeSheet()
     }
-    closeSheet()
   }
 
-  if (!activeSheet) return null
-
   return (
     <Sheet
       className="bottom-sheet"

packages/webapp/components/chat/ChatRoom.tsx

@@ -109,20 +109,21 @@ export const ChatRoom = forwardRef(
 
           <div className="flex w-full flex-col items-center justify-center bg-transparent">
             {(!isMobile || (isMobile && !isEmojiBoxOpen)) && <ActionBar />}
-            {pickEmoji && (
-              <EmojiPickerWrapper
-                isEmojiBoxOpen={isEmojiBoxOpen}
-                emojiPickerPosition={emojiPickerPosition}
-                closeEmojiPicker={closeEmojiPicker}
-                handleEmojiSelect={handleEmojiSelect}
-                ref={emojiPickerRef}
-              />
-            )}
           </div>
 
           <ScrollToBottomButton messagesContainer={messageContainerRef} />
           {children}
         </MessageWrapper>
+
+        {/* {pickEmoji && ( */}
+        {/* <EmojiPickerWrapper
+          isEmojiBoxOpen={isEmojiBoxOpen}
+          emojiPickerPosition={emojiPickerPosition}
+          closeEmojiPicker={closeEmojiPicker}
+          handleEmojiSelect={handleEmojiSelect}
+          ref={emojiPickerRef}
+        /> */}
+        {/* )} */}
       </div>
     )
   }

packages/webapp/components/chat/components/EmojiPanel/EmojiPanel.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { EmojiSelector } from './Selector'
+import { Picker } from './Picker'
+import { EmojiPanelProvider } from './context/EmojiPanelContext'
+
+const EmojiPanel = ({
+  children,
+  variant
+}: {
+  children: React.ReactNode
+  variant: 'mobile' | 'desktop'
+}) => {
+  return (
+    <EmojiPanelProvider variant={variant}>
+      <div id="emoji_panel">{children}</div>
+    </EmojiPanelProvider>
+  )
+}
+
+export default EmojiPanel
+
+EmojiPanel.Selector = EmojiSelector
+EmojiPanel.Picker = Picker

packages/webapp/components/chat/components/EmojiPanel/Picker.tsx

@@ -0,0 +1,34 @@
+import EmojiPicker from '@emoji-mart/react'
+import data from '@emoji-mart/data/sets/14/native.json'
+import { useChatStore } from '@stores'
+import { useEmojiPanelContext } from './context/EmojiPanelContext'
+
+type Props = {
+  emojiSelectHandler: (emoji: any) => void
+}
+export const Picker = ({ emojiSelectHandler }: Props) => {
+  const { variant } = useEmojiPanelContext()
+  const { closeEmojiPicker, emojiPicker } = useChatStore()
+
+  return (
+    <EmojiPicker
+      data={data}
+      dynamicWidth={variant === 'mobile' ? true : false}
+      navPosition="bottom"
+      previewPosition="none"
+      searchPosition="sticky"
+      skinTonePosition="search"
+      {...(variant === 'mobile' && {
+        emojiSize: 34,
+        emojiButtonSize: 42
+      })}
+      emojiVersion="14"
+      set="native"
+      theme="light"
+      onClickOutside={() => {
+        if (emojiPicker.isOpen) closeEmojiPicker()
+      }}
+      onEmojiSelect={emojiSelectHandler}
+    />
+  )
+}

packages/webapp/components/chat/components/EmojiPanel/Selector.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useChatStore, useSheetStore } from '@stores'
+import { CHAT_OPEN } from '@services/eventsHub'
+import { Picker } from './Picker'
+import { createPortal } from 'react-dom'
+import { useCloseOnResize } from '@hooks/useCloseOnResize'
+import { useEmojiPanelContext } from './context/EmojiPanelContext'
+
+export const EmojiSelector = () => {
+  const { variant } = useEmojiPanelContext()
+  const { sheetData } = useSheetStore()
+  const { emojiPicker, closeEmojiPicker } = useChatStore()
+  const { editorInstance } = useChatStore((state) => state.chatRoom)
+
+  // TODO: this is only work for mobile
+  const emojiSelectHandler = (emoji: any) => {
+    if (variant === 'mobile') {
+      const { headingId } = sheetData.chatRoomState
+
+      PubSub.publish(CHAT_OPEN, {
+        headingId: headingId,
+        focusEditor: true,
+        insertContent: emoji.native,
+        clearSheetState: true
+      })
+    } else {
+      editorInstance?.commands.insertContent(emoji.native)
+      closeEmojiPicker()
+    }
+  }
+
+  useCloseOnResize()
+
+  if (variant === 'desktop') {
+    return createPortal(
+      <div
+        className=""
+        style={{
+          position: 'fixed',
+          top: `${emojiPicker.position?.top || 0}px`,
+          left: `${emojiPicker.position?.left || 0}px`,
+          visibility: emojiPicker.isOpen ? 'visible' : 'hidden',
+          zIndex: 999
+        }}>
+        <Picker emojiSelectHandler={emojiSelectHandler} />
+      </div>,
+      document.body
+    )
+  }
+
+  return <Picker emojiSelectHandler={emojiSelectHandler} />
+}

packages/webapp/components/chat/components/EmojiPanel/context/EmojiPanelContext.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useContext } from 'react'
+
+type EmojiPanelContextType = {
+  variant: 'mobile' | 'desktop'
+}
+
+const EmojiPanelContext = createContext<EmojiPanelContextType | undefined>(undefined)
+
+export const useEmojiPanelContext = () => {
+  const context = useContext(EmojiPanelContext)
+  if (!context) {
+    throw new Error('useEmojiPanelContext must be used within EmojiPanelProvider')
+  }
+  return context
+}
+
+export const EmojiPanelProvider: React.FC<{
+  children: React.ReactNode
+  variant: 'mobile' | 'desktop'
+}> = ({ children, variant }) => {
+  return <EmojiPanelContext.Provider value={{ variant }}>{children}</EmojiPanelContext.Provider>
+}

packages/webapp/components/chat/components/EmojiPanel/index.ts

@@ -0,0 +1 @@
+export { default as EmojiPanel } from './EmojiPanel'

packages/webapp/components/chat/components/MessageComposer/MessageComposer.tsx

@@ -60,6 +60,7 @@ const MessageComposer = ({
   const { workspaceId } = useChatStore((state) => state.workspaceSettings)
   const editorRef = useRef<HTMLDivElement | null>(null)
   const [isToolbarOpen, setIsToolbarOpen] = useState(() => toolbarStorage.get())
+  const setOrUpdateChatRoom = useChatStore((state) => state.setOrUpdateChatRoom)
 
   const setEditMsgMemory = useChatStore((state) => state.setEditMessageMemory)
   const setReplyMsgMemory = useChatStore((state) => state.setReplyMessageMemory)
@@ -371,25 +372,6 @@ const MessageComposer = ({
     submitRef.current = () => submitMessage()
   }, [submitMessage])
 
-  useEffect(() => {
-    // TODO: this is temporary
-    setTimeout(() => {
-      document.querySelector('.tiptap.ProseMirror')?.setAttribute('inputmode', 'text')
-      document.querySelector('.tiptap.ProseMirror')?.setAttribute('enterkeyhint', 'send')
-    }, 1000)
-  }, [editor])
-
-  useEffect(() => {
-    const setAttributes = () => {
-      const firstChild = editorRef.current?.firstChild as HTMLElement | null
-      if (firstChild) {
-        firstChild.setAttribute('inputmode', 'text')
-        firstChild.setAttribute('enterkeyhint', 'send')
-      }
-    }
-    setAttributes()
-  }, [editor])
-
   // Handle Draft Memory
   useEffect(() => {
     return () => {
@@ -416,14 +398,6 @@ const MessageComposer = ({
     setAttributes()
   }, [editor, editorRef])
 
-  useEffect(() => {
-    // TODO: this is temporary
-    setTimeout(() => {
-      document.querySelector('.tiptap.ProseMirror')?.setAttribute('inputmode', 'text')
-      document.querySelector('.tiptap.ProseMirror')?.setAttribute('enterkeyhint', 'send')
-    }, 1000)
-  }, [editor])
-
   // Save toolbar toggle state to localStorage
   useEffect(() => {
     toolbarStorage.set(isToolbarOpen)
@@ -433,6 +407,11 @@ const MessageComposer = ({
     setIsToolbarOpen(!isToolbarOpen)
   }, [setIsToolbarOpen, isToolbarOpen])
 
+  useEffect(() => {
+    editor && setOrUpdateChatRoom('editorInstance', editor)
+    editorRef.current && setOrUpdateChatRoom('editorRef', editorRef.current)
+  }, [editor, editorRef])
+
   const contextValue = {
     sendMsg,
     sendComment,