imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.52k stars 146 forks source link

Cannot use domEventHandlers #573

Closed tidusvn05 closed 3 months ago

tidusvn05 commented 3 months ago

描述这个Bug

Describe the issue

i need handle IME composition feature with md-editor-v3. i try use syntax in document but not working: https://imzbf.github.io/md-editor-v3/en-US/docs#%F0%9F%8E%9B%20domEventHandlers

my code:

const editorRef = ref<ExposeParam>(null);
onMounted(() => {
  editorRef.value?.domEventHandlers({
    compositionstart: () => {
      console.log('compositionstart ref');
    },
    compositionend: () => {
      console.log('compositionsend ref');
    }
  });
});

<MdEditor
    ref="editorRef"
    v-model="message"
/>          

Thank You for your library!

Procedure version

^4.16.7

版本号

ime, composition api

问题重现链接

No response

imzbf commented 3 months ago

Thank you for your support.

These events are particularly useful for handling user input in languages that require multiple keystrokes to form a single character, such as Chinese, Japanese, and Korean.

They are invalid when typing English words.

tidusvn05 commented 3 months ago

yes, that right. Thank for your reply!

i handle IME composition problem with Chinese, Japanese, and Korean.

for textarea, only use @keydown event.isComposing or document.addEventListener('compositionstart') to handle it. but cannot with md-editor-v3.

so, i use above synxtax, but not working too.

imzbf commented 3 months ago

But it did work.

录屏2024-06-14 14 59 35

tidusvn05 commented 3 months ago

i see. the code like document.

i will find problem in my project. maybe some conflict with something.

Thank you for your support. The Best !!!

tidusvn05 commented 3 months ago

confirmed!

i tested on codesandbox with new nuxt project. it is good. for my project, nuxt3 too, still not working. i will find the problem.

tidusvn05 commented 3 months ago

i have fixed when cleanup project & upgrade versions.

- @nuxt/ui 2.16.0
+ @nuxt/ui 2.17.0
- @vueform/multiselect 2.6.7
+ @vueform/multiselect 2.6.8

- @vueuse/core 10.10.0
+ @vueuse/core 10.11.0
- @vueuse/nuxt 10.10.0
+ @vueuse/nuxt 10.11.0
- md-editor-v3 4.16.7
+ md-editor-v3 4.16.9
- @nuxt/devtools 1.3.2
+ @nuxt/devtools 1.3.3
- @types/node 20.12.12
+ @types/node 20.14.2
- nuxt 3.11.2
+ nuxt 3.12.1
- prettier 3.2.5
+ prettier 3.3.2
- sass 1.77.2
+ sass 1.77.5
- vue 3.4.27
+ vue 3.4.29
- vue-router 4.3.2
+ vue-router 4.3.3

Thank you for your support!