agora-appbuilder-core 4.1.8-1 → 4.1.8-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.8-1",
+  "version": "4.1.8-2",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.8-1',
-  CORE_VERSION: '4.1.8-1',
+  CLI_VERSION: '3.1.8-2',
+  CORE_VERSION: '4.1.8-2',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/atoms/TextInput.tsx

@@ -17,6 +17,9 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 interface TextInputCustomProps extends TextInputProps {
   setRef?: (ref: any) => void;
+  onCompositionStart?: () => void;
+  onCompositionEnd?: () => void;
+  onInput?: (event: any) => void;
 }
 
 const TextInputCustom = (props: TextInputCustomProps) => {

package/template/src/subComponents/ChatInput.tsx

@@ -97,6 +97,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     replyToMsgId,
     setReplyToMsgId,
   } = useChatUIControls();
+
+  // Track IME composition state
+  const [isComposing, setIsComposing] = React.useState(false);
+
   const {defaultContent} = useContent();
   const {sendChatSDKMessage, uploadAttachment} = useChatConfigure();
   const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
@@ -115,6 +119,41 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     });
   }, []);
 
+  // Set up direct DOM event listeners for IME composition
+  useEffect(() => {
+    if (!isWeb()) return;
+
+    const inputElement = chatInputRef?.current;
+    if (!inputElement) return;
+
+    // Get the actual DOM element (React Native Web creates a textarea/input)
+    const domElement = inputElement._nativeTag
+      ? document.querySelector(`[data-tag="${inputElement._nativeTag}"]`)
+      : inputElement;
+
+    if (!domElement) return;
+
+    const handleCompositionStart = () => {
+      setIsComposing(true);
+    };
+
+    const handleCompositionEnd = () => {
+      setIsComposing(false);
+    };
+
+    // Add event listeners directly to DOM element
+    domElement.addEventListener('compositionstart', handleCompositionStart);
+    domElement.addEventListener('compositionend', handleCompositionEnd);
+
+    return () => {
+      domElement.removeEventListener(
+        'compositionstart',
+        handleCompositionStart,
+      );
+      domElement.removeEventListener('compositionend', handleCompositionEnd);
+    };
+  }, [chatInputRef?.current]);
+
   const {data} = useRoomInfo();
   const [name] = useUserName();
   const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
@@ -166,9 +205,37 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     });
   };
 
+  // IME composition handlers
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = () => {
+    setIsComposing(false);
+  };
+
+  const handleInput = event => {
+    // Reset composition state if input event occurs without active composition
+    if (isWeb() && !event.nativeEvent.isComposing && isComposing) {
+      setIsComposing(false);
+    }
+  };
+
   // with multiline textinput enter prints /n
   const handleKeyPress = ({nativeEvent}) => {
-    if (nativeEvent.key === 'Enter' && !nativeEvent.shiftKey) {
+    const currentlyComposing = nativeEvent.isComposing || isComposing;
+
+    // Check if this is an Enter key during composition
+    if (nativeEvent.key === 'Enter' && currentlyComposing) {
+      return;
+    }
+
+    // Only submit on Enter if not composing with IME and no Shift key
+    if (
+      nativeEvent.key === 'Enter' &&
+      !nativeEvent.shiftKey &&
+      !currentlyComposing
+    ) {
       nativeEvent.preventDefault();
       onSubmitEditing();
       setShowEmojiPicker(false); // This will close emoji picker on enter
@@ -225,6 +292,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       autoCorrect={false}
       onKeyPress={handleKeyPress}
       onChange={_handleHeightChange}
+      // IME composition event handlers for React Native Web
+      onCompositionStart={isWeb() ? handleCompositionStart : undefined}
+      onCompositionEnd={isWeb() ? handleCompositionEnd : undefined}
+      onInput={isWeb() ? handleInput : undefined}
     />
   );