Merge branch 'develop'

src/app/content/components/MessageInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ChangeEvent, type KeyboardEvent } from 'react'
+import { forwardRef, type ChangeEvent, CompositionEvent, type KeyboardEvent } from 'react'
 
 import { Textarea } from '@/components/ui/Textarea'
 import { Markdown } from '@/components/Markdown'
@@ -12,21 +12,34 @@ export interface MessageInputProps {
   preview?: boolean
   autoFocus?: boolean
   disabled?: boolean
-  onInput?: (value: string) => void
+  onInput?: (e: ChangeEvent<HTMLTextAreaElement>) => void
-  onEnter?: (value: string) => void
+  onEnter?: (e: KeyboardEvent<HTMLTextAreaElement>) => void
+  onCompositionStart?: (e: CompositionEvent<HTMLTextAreaElement>) => void
+  onCompositionEnd?: (e: CompositionEvent<HTMLTextAreaElement>) => void
 }
 
 const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
-  ({ value = '', className, maxLength = 500, onInput, onEnter, preview, autoFocus, disabled }, ref) => {
+  (
+    {
+      value = '',
+      className,
+      maxLength = 500,
+      onInput,
+      onEnter,
+      onCompositionStart,
+      onCompositionEnd,
+      preview,
+      autoFocus,
+      disabled
+    },
+    ref
+  ) => {
     const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === 'Enter' && !(e.shiftKey || e.ctrlKey || e.altKey || e.metaKey)) {
         e.preventDefault()
-        onEnter?.(value)
+        onEnter?.(e)
       }
     }
-    const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
-      onInput?.(e.target.value)
-    }
 
     return (
       <div className={cn('relative', className)}>
@@ -42,8 +55,10 @@ const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
               className="box-border resize-none whitespace-pre-wrap break-words border-none bg-gray-50 pb-5 [field-sizing:content] focus:ring-0 focus:ring-offset-0"
               rows={2}
               value={value}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
               placeholder="Type your message here."
-              onInput={handleInput}
+              onInput={onInput}
               disabled={disabled}
             />
           </ScrollArea>

src/app/content/index.tsx

@@ -8,8 +8,8 @@ import { createShadowRootUi } from 'wxt/client'
 
 import App from './App'
 import { LocalStorageImpl, IndexDBStorageImpl, BrowserSyncStorageImpl } from '@/domain/impls/Storage'
-import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
 import { DanmakuImpl } from '@/domain/impls/Danmaku'
+import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
 // import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
 import '@/assets/styles/tailwind.css'
 import '@/assets/styles/sonner.css'

src/app/content/views/Footer/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, type FC } from 'react'
+import { ChangeEvent, useRef, type FC } from 'react'
 import { CornerDownLeftIcon } from 'lucide-react'
 import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
 import MessageInput from '../../components/MessageInput'
@@ -15,12 +15,14 @@ const Footer: FC = () => {
   const message = useRemeshQuery(messageInputDomain.query.MessageQuery())
 
   const inputRef = useRef<HTMLTextAreaElement>(null)
+  const isComposing = useRef(false)
 
-  const handleInput = (value: string) => {
+  const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    send(messageInputDomain.command.InputCommand(value))
+    send(messageInputDomain.command.InputCommand(e.target.value))
   }
 
   const handleSend = () => {
+    if (isComposing.current) return
     if (!message.trim()) return
     send(roomDomain.command.SendTextMessageCommand(message.trim()))
     send(messageInputDomain.command.ClearCommand())
@@ -38,6 +40,8 @@ const Footer: FC = () => {
         value={message}
         onEnter={handleSend}
         onInput={handleInput}
+        onCompositionEnd={() => (isComposing.current = false)}
+        onCompositionStart={() => (isComposing.current = true)}
         maxLength={MESSAGE_MAX_LENGTH}
       ></MessageInput>
       <div className="flex items-center">