fix: display IME characters during composition

[ras0q]

resolve #2262

Fixed it so that during IME input, values are updated only within the Editor, and once the IME confirms the input, the value is passed to the caller.

before	after

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	71d09a9
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/68d3dfd8cc6576000846fdcd
😎 Deploy Preview	https://deploy-preview-2263--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/client@2263

create-slidev

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev@2263

create-slidev-theme

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev-theme@2263

@slidev/parser

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/parser@2263

@slidev/cli

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/cli@2263

@slidev/types

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/types@2263

commit: 71d09a9

[antfu]

I am afraid this is too complex and would be hard to understand and maintain. Don't we have a better way to do that? Or at least I think it would be better to move them into a headless component

[ras0q]

I didn't know InputEvent had an isComposing property.
https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/isComposing

Furthermore, since the target property of InputEvent contains the character being input via IME, we could handle most processing in onInput.
(However, since onInput doesn't fire when IME input ends, we need to use onCompositionEnd...)

How does this look? Should we further separate this into a headless component?

const localContent = ref(content.value)
watch(content, (v) => {
  if (v !== localContent.value) {
    localContent.value = v
  }
})

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
  }
}

function onCompositionEnd() {
  content.value = localContent.value
}

[antfu]

Yeah let's do a headless component. Thanks!

[ras0q]

@antfu I fixed it. Could you please review it again?