From 42f5f7b4fbd806a6720ae7e92dd308ff30ea1844 Mon Sep 17 00:00:00 2001
From: ras0q <ras0q@users.noreply.github.com>
Date: Mon, 1 Sep 2025 11:34:56 +0900
Subject: [PATCH 1/4] fix: display IME characters during composition

resolve #2262
---
 packages/client/internals/ShikiEditor.vue | 53 +++++++++++++++++++++--
 1 file changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/client/internals/ShikiEditor.vue b/packages/client/internals/ShikiEditor.vue
index 75734508f6..d45a9d6a30 100644
--- a/packages/client/internals/ShikiEditor.vue
+++ b/packages/client/internals/ShikiEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getHighlighter } from '#slidev/shiki'
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef, watch } from 'vue'
 
 const props = defineProps<{
   placeholder?: string
@@ -11,15 +11,62 @@ const textareaEl = ref<HTMLTextAreaElement | null>(null)
 
 const highlight = shallowRef<Awaited<ReturnType<typeof getHighlighter>> | null>(null)
 getHighlighter().then(h => highlight.value = h)
+
+const localContent = ref(content.value)
+const composing = ref(false)
+
+watch(content, (v) => {
+  if (v !== localContent.value && !composing.value) {
+    localContent.value = v
+  }
+})
+
+let preText = ''
+let postText = ''
+
+function onCompositionStart() {
+  composing.value = true
+  if (textareaEl.value) {
+    const start = textareaEl.value.selectionStart
+    const end = textareaEl.value.selectionEnd
+    preText = textareaEl.value.value.slice(0, start)
+    postText = textareaEl.value.value.slice(end)
+  }
+}
+
+function onCompositionUpdate(e: CompositionEvent) {
+  if (composing.value) {
+    localContent.value = preText + e.data + postText
+    e.preventDefault()
+  }
+}
+
+function onCompositionEnd() {
+  composing.value = false
+  preText = ''
+  postText = ''
+  // apply composition result
+  content.value = localContent.value
+}
+
+function onInput(e: Event) {
+  if (!composing.value) {
+    content.value = (e.target as HTMLTextAreaElement).value
+  }
+}
 </script>
 
 <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(localContent, 'markdown')}&nbsp;`" />
       <textarea
-        ref="textareaEl" v-model="content" :placeholder="props.placeholder"
+        ref="textareaEl" v-model="localContent" :placeholder="props.placeholder"
         class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"
+        @compositionstart="onCompositionStart"
+        @compositionupdate="onCompositionUpdate"
+        @compositionend="onCompositionEnd"
+        @input="onInput"
       />
     </div>
   </div>

From 9399c192a283491a3c39bbd216d8243fb5b87c1d Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 1 Sep 2025 02:41:35 +0000
Subject: [PATCH 2/4] [autofix.ci] apply automated fixes

---
 packages/vscode/schema/headmatter.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/vscode/schema/headmatter.json b/packages/vscode/schema/headmatter.json
index 86b92e1d88..bed19a9401 100644
--- a/packages/vscode/schema/headmatter.json
+++ b/packages/vscode/schema/headmatter.json
@@ -498,7 +498,10 @@
           "description": "Default frontmatter options applied to all slides",
           "markdownDescription": "Default frontmatter options applied to all slides"
         }
-      }
+      },
+      "required": [
+        "transition"
+      ]
     },
     "BuiltinLayouts": {
       "type": "string",

From 100ffa7a20de21fdac91a5fd913fa53cfe7c86b8 Mon Sep 17 00:00:00 2001
From: ras0q <ras0q@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:30:19 +0900
Subject: [PATCH 3/4] refactor: use InputEvent.isComposing to handle IME
 composition

---
 packages/client/internals/ShikiEditor.vue | 41 ++++++-----------------
 1 file changed, 10 insertions(+), 31 deletions(-)

diff --git a/packages/client/internals/ShikiEditor.vue b/packages/client/internals/ShikiEditor.vue
index d45a9d6a30..1bdad31e84 100644
--- a/packages/client/internals/ShikiEditor.vue
+++ b/packages/client/internals/ShikiEditor.vue
@@ -13,45 +13,26 @@ const highlight = shallowRef<Awaited<ReturnType<typeof getHighlighter>> | null>(
 getHighlighter().then(h => highlight.value = h)
 
 const localContent = ref(content.value)
-const composing = ref(false)
-
 watch(content, (v) => {
-  if (v !== localContent.value && !composing.value) {
+  if (v !== localContent.value) {
     localContent.value = v
   }
 })
 
-let preText = ''
-let postText = ''
-
-function onCompositionStart() {
-  composing.value = true
-  if (textareaEl.value) {
-    const start = textareaEl.value.selectionStart
-    const end = textareaEl.value.selectionEnd
-    preText = textareaEl.value.value.slice(0, start)
-    postText = textareaEl.value.value.slice(end)
-  }
-}
-
-function onCompositionUpdate(e: CompositionEvent) {
-  if (composing.value) {
-    localContent.value = preText + e.data + postText
-    e.preventDefault()
-  }
-}
-
 function onCompositionEnd() {
-  composing.value = false
-  preText = ''
-  postText = ''
-  // apply composition result
   content.value = localContent.value
 }
 
 function onInput(e: Event) {
-  if (!composing.value) {
-    content.value = (e.target as HTMLTextAreaElement).value
+  if (!(e instanceof InputEvent) || !(e.target instanceof HTMLTextAreaElement)) {
+    return
+  }
+
+  if (e.isComposing) {
+    localContent.value = e.target.value
+  }
+  else {
+    content.value = e.target.value
   }
 }
 </script>
@@ -63,8 +44,6 @@ function onInput(e: Event) {
       <textarea
         ref="textareaEl" v-model="localContent" :placeholder="props.placeholder"
         class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"
-        @compositionstart="onCompositionStart"
-        @compositionupdate="onCompositionUpdate"
         @compositionend="onCompositionEnd"
         @input="onInput"
       />

From c469ebfce075ee42e299b9f80f766c002366b54a Mon Sep 17 00:00:00 2001
From: ras0q <ras0q@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:56:17 +0900
Subject: [PATCH 4/4] refactor: split IME handling into a headless composable

---
 packages/client/composables/useIME.ts     | 30 ++++++++++++++++++++
 packages/client/internals/ShikiEditor.vue | 34 ++++-------------------
 2 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 packages/client/composables/useIME.ts

diff --git a/packages/client/composables/useIME.ts b/packages/client/composables/useIME.ts
new file mode 100644
index 0000000000..52f60822aa
--- /dev/null
+++ b/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 }
+}
diff --git a/packages/client/internals/ShikiEditor.vue b/packages/client/internals/ShikiEditor.vue
index 1bdad31e84..ffbc946e0c 100644
--- a/packages/client/internals/ShikiEditor.vue
+++ b/packages/client/internals/ShikiEditor.vue
@@ -1,51 +1,29 @@
 <script setup lang="ts">
 import { getHighlighter } from '#slidev/shiki'
-import { ref, shallowRef, watch } from 'vue'
+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)
 
 const highlight = shallowRef<Awaited<ReturnType<typeof getHighlighter>> | null>(null)
 getHighlighter().then(h => highlight.value = h)
-
-const localContent = ref(content.value)
-watch(content, (v) => {
-  if (v !== localContent.value) {
-    localContent.value = v
-  }
-})
-
-function onCompositionEnd() {
-  content.value = localContent.value
-}
-
-function onInput(e: Event) {
-  if (!(e instanceof InputEvent) || !(e.target instanceof HTMLTextAreaElement)) {
-    return
-  }
-
-  if (e.isComposing) {
-    localContent.value = e.target.value
-  }
-  else {
-    content.value = e.target.value
-  }
-}
 </script>
 
 <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(localContent, 'markdown')}&nbsp;`" />
+      <div class="relative w-full h-max" v-html="`${highlight(composingContent, 'markdown')}&nbsp;`" />
       <textarea
-        ref="textareaEl" v-model="localContent" :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"
-        @compositionend="onCompositionEnd"
         @input="onInput"
+        @compositionend="onCompositionEnd"
       />
     </div>
   </div>