forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[🐴] Support Japanese (et al.) IME in message input on web (#4159)
* support japanese et al. IME
* update comment
* nit
+10
-1
+10
-1
src/screens/Messages/Conversation/MessageInput.web.tsx
+10
-1
src/screens/Messages/Conversation/MessageInput.web.tsx
···
26
26
const [message, setMessage] = React.useState(getDraft)
27
27
28
28
const inputStyles = useSharedInputStyles()
29
+
const isComposing = React.useRef(false)
29
30
const [isFocused, setIsFocused] = React.useState(false)
30
31
const [isHovered, setIsHovered] = React.useState(false)
31
32
···
44
45
45
46
const onKeyDown = React.useCallback(
46
47
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
48
+
// Don't submit the form when the Japanese or any other IME is composing
49
+
if (isComposing.current) return
47
50
if (e.key === 'Enter') {
48
51
if (e.shiftKey) return
49
52
e.preventDefault()
50
53
onSubmit()
51
54
}
52
55
},
53
-
[onSubmit],
56
+
[onSubmit, isComposing],
54
57
)
55
58
56
59
const onChange = React.useCallback(
···
102
105
autoFocus={true}
103
106
onFocus={() => setIsFocused(true)}
104
107
onBlur={() => setIsFocused(false)}
108
+
onCompositionStart={() => {
109
+
isComposing.current = true
110
+
}}
111
+
onCompositionEnd={() => {
112
+
isComposing.current = false
113
+
}}
105
114
onChange={onChange}
106
115
onKeyDown={onKeyDown}
107
116
/>