fix: pinyin keyboard

Author: tjbck

src/lib/components/chat/MessageInput.svelte

@@ -85,6 +85,8 @@
 	let loaded = false;
 	let recording = false;
 
+	let isComposing = false;
+
 	let chatInputContainerElement;
 	let chatInputElement;
 
@@ -707,6 +709,8 @@
 													console.log(res);
 													return res;
 												}}
+												oncompositionstart={() => (isComposing = true)}
+												oncompositionend={() => (isComposing = false)}
 												on:keydown={async (e) => {
 													e = e.detail.event;
 
@@ -806,6 +810,10 @@
 																navigator.msMaxTouchPoints > 0
 															)
 														) {
+															if (isComposing) {
+																return;
+															}
+
 															// Uses keyCode '13' for Enter key for chinese/japanese keyboards.
 															//
 															// Depending on the user's settings, it will send the message
@@ -882,6 +890,8 @@
 											class="scrollbar-hidden bg-transparent dark:text-gray-100 outline-hidden w-full pt-3 px-1 resize-none"
 											placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
 											bind:value={prompt}
+											on:compositionstart={() => (isComposing = true)}
+											on:compositionend={() => (isComposing = false)}
 											on:keydown={async (e) => {
 												const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
 
@@ -983,6 +993,10 @@
 															navigator.msMaxTouchPoints > 0
 														)
 													) {
+														if (isComposing) {
+															return;
+														}
+
 														console.log('keypress', e);
 														// Prevent Enter key from creating a new line
 														const isCtrlPressed = e.ctrlKey || e.metaKey;

src/lib/components/common/RichTextInput.svelte

@@ -27,6 +27,9 @@
 
 	import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
 
+	export let oncompositionstart = (e) => {};
+	export let oncompositionend = (e) => {};
+
 	// create a lowlight instance with all languages loaded
 	const lowlight = createLowlight(all);
 
@@ -226,6 +229,14 @@
 			editorProps: {
 				attributes: { id },
 				handleDOMEvents: {
+					compositionstart: (view, event) => {
+						oncompositionstart(event);
+						return false;
+					},
+					compositionend: (view, event) => {
+						oncompositionend(event);
+						return false;
+					},
 					focus: (view, event) => {
 						eventDispatch('focus', { event });
 						return false;