diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index ae7717a11..7db31010b 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/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; diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte index 80f92694c..3a30eb646 100644 --- a/src/lib/components/common/RichTextInput.svelte +++ b/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;