fix: display IME characters during composition (#2263)

Co-authored-by: ras0q <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: ras0q

packages/client/composables/useIME.ts

@@ -0,0 +1,30 @@
+import type { ModelRef } from 'vue'
+import { ref, watch } from 'vue'
+
+export function useIME(content: ModelRef<string>) {
+  const composingContent = ref(content.value)
+  watch(content, (v) => {
+    if (v !== composingContent.value) {
+      composingContent.value = v
+    }
+  })
+
+  function onInput(e: Event) {
+    if (!(e instanceof InputEvent) || !(e.target instanceof HTMLTextAreaElement)) {
+      return
+    }
+
+    if (e.isComposing) {
+      composingContent.value = e.target.value
+    }
+    else {
+      content.value = e.target.value
+    }
+  }
+
+  function onCompositionEnd() {
+    content.value = composingContent.value
+  }
+
+  return { composingContent, onInput, onCompositionEnd }
+}

packages/client/internals/ShikiEditor.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { getHighlighter } from '#slidev/shiki'
 import { ref, shallowRef } from 'vue'
+import { useIME } from '../composables/useIME'
 
 const props = defineProps<{
   placeholder?: string
 }>()
 const content = defineModel<string>({ required: true })
+const { composingContent, onInput, onCompositionEnd } = useIME(content)
 
 const textareaEl = ref<HTMLTextAreaElement | null>(null)
 
@@ -16,10 +18,12 @@ getHighlighter().then(h => highlight.value = h)
 <template>
   <div class="absolute left-3 right-0 inset-y-2 font-mono overflow-x-hidden overflow-y-auto cursor-text">
     <div v-if="highlight" class="relative w-full h-max min-h-full">
-      <div class="relative w-full h-max" v-html="`${highlight(content, 'markdown')}&nbsp;`" />
+      <div class="relative w-full h-max" v-html="`${highlight(composingContent, 'markdown')}&nbsp;`" />
       <textarea
-        ref="textareaEl" v-model="content" :placeholder="props.placeholder"
+        ref="textareaEl" v-model="composingContent" :placeholder="props.placeholder"
         class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"
+        @input="onInput"
+        @compositionend="onCompositionEnd"
       />
     </div>
   </div>