fix: handle IME mode in editor (#1371)

* fix: handle IME mode in editor

* chore: update

web/src/components/AskAIDialog.tsx

@@ -20,6 +20,7 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
   const fetchingState = useLoading(false);
   const [historyList, setHistoryList] = useState<History[]>([]);
   const [isEnabled, setIsEnabled] = useState<boolean>(true);
+  const [isInIME, setIsInIME] = useState(false);
   const [question, setQuestion] = useState<string>("");
 
   useEffect(() => {
@@ -38,15 +39,22 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
     setQuestion(event.currentTarget.value);
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter" && !event.shiftKey && !isInIME) {
+      event.preventDefault();
+      handleSendQuestionButtonClick();
+    }
+  };
+
   const handleSendQuestionButtonClick = async () => {
     fetchingState.setLoading();
+    setQuestion("");
     try {
       await askQuestion(question);
     } catch (error: any) {
       console.error(error);
       toast.error(error.response.data.error);
     }
-    setQuestion("");
     fetchingState.setFinish();
   };
 
@@ -80,7 +88,17 @@ const AskAIDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container !w-112 max-w-full">
         <div className="w-full relative">
-          <Textarea className="w-full" placeholder="Ask anything…" value={question} onChange={handleQuestionTextareaChange} />
+          <Textarea
+            className="w-full"
+            placeholder="Ask anything…"
+            value={question}
+            minRows={1}
+            maxRows={5}
+            onChange={handleQuestionTextareaChange}
+            onCompositionStart={() => setIsInIME(true)}
+            onCompositionEnd={() => setIsInIME(false)}
+            onKeyDown={handleKeyDown}
+          />
           <Icon.Send
             className="cursor-pointer w-7 p-1 h-auto rounded-md bg-gray-100 dark:bg-zinc-800 absolute right-2 bottom-1.5 shadow hover:opacity-80"
             onClick={handleSendQuestionButtonClick}

web/src/components/MemoEditor.tsx

@@ -52,6 +52,7 @@ const MemoEditor = () => {
     isRequesting: false,
   });
   const [allowSave, setAllowSave] = useState<boolean>(false);
+  const [isInIME, setIsInIME] = useState(false);
   const editorState = editorStore.state;
   const prevEditorStateRef = useRef(editorState);
   const editorRef = useRef<EditorRefActions>(null);
@@ -113,7 +114,7 @@ const MemoEditor = () => {
         return;
       }
     }
-    if (event.key === "Enter") {
+    if (event.key === "Enter" && !isInIME) {
       const cursorPosition = editorRef.current.getCursorPosition();
       const contentBeforeCursor = editorRef.current.getContent().slice(0, cursorPosition);
       const rowValue = last(contentBeforeCursor.split("\n"));
@@ -394,6 +395,8 @@ const MemoEditor = () => {
       onDrop={handleDropEvent}
       onFocus={handleEditorFocus}
       onBlur={handleEditorBlur}
+      onCompositionStart={() => setIsInIME(true)}
+      onCompositionEnd={() => setIsInIME(false)}
     >
       <Editor ref={editorRef} {...editorConfig} />
       <div className="common-tools-wrapper">

web/src/components/Settings/SystemSection.tsx

@@ -204,7 +204,7 @@ const SystemSection = () => {
           fontFamily: "monospace",
           fontSize: "14px",
         }}
-        placeholder="Write only"
+        placeholder="OpenAI API Key"
         value={openAIConfig.key}
         onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
       />
@@ -217,7 +217,7 @@ const SystemSection = () => {
           fontFamily: "monospace",
           fontSize: "14px",
         }}
-        placeholder="OpenAI Host. Default: https://api.openai.com"
+        placeholder="OpenAI API Host. Default: https://api.openai.com"
         value={openAIConfig.host}
         onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
       />