Commitbdabdec

and

authored

fix: display IME characters during composition (#2263)

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

1 parentd00c18d commitbdabdecCopy full SHA for bdabdec

File tree

+36

-2

lines changed

+36

-2

lines changed

Lines changed: 30 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,30 @@`
	`1`	`+importtype{ModelRef}from'vue'`
	`2`	`+import{ref,watch}from'vue'`
	`3`	`+`
	`4`	`+exportfunctionuseIME(content:ModelRef<string>){`
	`5`	`+constcomposingContent=ref(content.value)`
	`6`	`+watch(content,(v)=>{`
	`7`	`+if(v!==composingContent.value){`
	`8`	`+composingContent.value=v`
	`9`	`+}`
	`10`	`+})`
	`11`	`+`
	`12`	`+functiononInput(e:Event){`
	`13`	`+if(!(einstanceofInputEvent)\|\|!(e.targetinstanceofHTMLTextAreaElement)){`
	`14`	`+return`
	`15`	`+}`
	`16`	`+`
	`17`	`+if(e.isComposing){`
	`18`	`+composingContent.value=e.target.value`
	`19`	`+}`
	`20`	`+else{`
	`21`	`+content.value=e.target.value`
	`22`	`+}`
	`23`	`+}`
	`24`	`+`
	`25`	`+functiononCompositionEnd(){`
	`26`	`+content.value=composingContent.value`
	`27`	`+}`
	`28`	`+`
	`29`	`+return{ composingContent, onInput, onCompositionEnd}`
	`30`	`+}`

Lines changed: 6 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,13 @@`
`1`	`1`	`<script setup lang="ts">`
`2`	`2`	`import {getHighlighter }from'#slidev/shiki'`
`3`	`3`	`import {ref,shallowRef }from'vue'`
	`4`	`+import {useIME }from'../composables/useIME'`
`4`	`5`
`5`	`6`	`const props=defineProps<{`
`6`	`7`	`placeholder?:string`
`7`	`8`	`}>()`
`8`	`9`	`const content=defineModel<string>({ required:true })`
	`10`	`+const { composingContent, onInput, onCompositionEnd }=useIME(content)`
`9`	`11`
`10`	`12`	`const textareaEl=ref<HTMLTextAreaElement\|null>(null)`
`11`	`13`
`@@ -16,10 +18,12 @@ getHighlighter().then(h => highlight.value = h)`
`16`	`18`	`<template>`
`17`	`19`	`<divclass="absolute left-3 right-0 inset-y-2 font-mono overflow-x-hidden overflow-y-auto cursor-text">`
`18`	`20`	`<divv-if="highlight"class="relative w-full h-max min-h-full">`
`19`		- <divclass="relative w-full h-max"v-html="`${highlight(content, 'markdown')} `" />
	`21`	+ <divclass="relative w-full h-max"v-html="`${highlight(composingContent, 'markdown')} `" />
`20`	`22`	`<textarea`
`21`		`-ref="textareaEl"v-model="content":placeholder="props.placeholder"`
	`23`	`+ref="textareaEl"v-model="composingContent":placeholder="props.placeholder"`
`22`	`24`	`class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"`
	`25`	`+@input="onInput"`
	`26`	`+@compositionend="onCompositionEnd"`
`23`	`27`	`/>`
`24`	`28`	`</div>`
`25`	`29`	`</div>`

Comments

(0)