Merge pull request #17 from steelydylan/hotfix/0.3.5

Hotfix/0.3.5

Author: steelydylan

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-split-mde",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/components/Textarea.tsx

@@ -232,13 +232,27 @@ export const Textarea = React.forwardRef(
       });
     }, [markdown]);
 
+    /**
+     * 変換中かどうか（isComposing）を適切に取得する
+     * - Safariだとkeydownの前にcompositionEndが発火される
+     *   => 変換確定時のkeydownにおいてisComposingの値が適切ではない（変換確定のEnterキーでhandleKeyDownがcomposing:falseとして呼ばれてしまう）
+     *   => keyupイベントで変換終了を確認することで対応
+     * - Chromeだとkeyupイベントの後にcompositionStartが発火される
+     *   => キーを離す前にEnterを押されると変換中であると認識されない
+     *   => keydownイベントで変換開始を確認することで対応
+     */
     useEffect(() => {
-      const checkComposing = (e: KeyboardEvent) => {
-        composing.current = e.isComposing;
+      const checkComposingStart = (e: KeyboardEvent) => {
+        if (e.isComposing) composing.current = true;
       };
-      htmlRef.current.addEventListener("keyup", checkComposing);
+      const checkComposingEnd = (e: KeyboardEvent) => {
+        if (!e.isComposing) composing.current = false;
+      };
+      htmlRef.current.addEventListener("keydown", checkComposingStart);
+      htmlRef.current.addEventListener("keyup", checkComposingEnd);
       return () => {
-        htmlRef.current?.removeEventListener("keyup", checkComposing);
+        htmlRef.current?.removeEventListener("keydown", checkComposingStart);
+        htmlRef.current?.removeEventListener("keyup", checkComposingEnd);
       };
     }, []);