| 1 | import type { ModelRef } from 'vue' |
| 2 | import { ref, watch } from 'vue' |
| 3 | |
| 4 | export function useIME(content: ModelRef<string>) { |
| 5 | const composingContent = ref(content.value) |
| 6 | watch(content, (v) => { |
| 7 | if (v !== composingContent.value) { |
| 8 | composingContent.value = v |
| 9 | } |
| 10 | }) |
| 11 | |
| 12 | function onInput(e: Event) { |
| 13 | if (!(e instanceof InputEvent) || !(e.target instanceof HTMLTextAreaElement)) { |
| 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 | function onCompositionEnd() { |
| 26 | content.value = composingContent.value |
| 27 | } |
| 28 | |
| 29 | return { composingContent, onInput, onCompositionEnd } |
| 30 | } |
| 31 |