Best way to watch for change, focus and blur ?

[Emmanuel Salomon]

I found this way to watch change :

// MyEditor.vue
...
const editor = createEditor({ extension: defineExtension(), defaultDoc })
editor.use(defineDocChangeHandler((event) => {
  emit('update:modelValue', event.state.doc.toJSON())
}))

1. I wonder if this is the good way to watch change with vue.js ?

I saw word-counter example with useEditor but it works only inside ProseKit component. (side note: word-counter doesn't count well because editor.value.view.state.doc.textContent doesn't add space between paragraph)

Going to watch change, I tried to watch focus and blur events with :

editor.use(defineUpdateHandler((event) => {
  console.log(event)
}))

but event.focused is false the first time. And blur event is not tracked.

2. How to track these events ?

[ocavue]

You can use defineFocusChangeHandler to get notified when the editor gains or loses focus. This API was added in v0.2.8.

if this is the good way to watch change with vue.js

You can check https://prosekit.dev/examples/save-and-restore as an example. Let me know if you have any further questions.

word-counter doesn't count well because editor.value.view.state.doc.textContent doesn't add space between paragraph

Fixed. Thanks!

[Emmanuel Salomon]

Awesome !
I didn't see the <EventHandlers :onDocChange="onDocChange" /> at the bottom of the save-and-restore file.

So there are two way to handle doc change. editor.use(defineDocChangeHandler(async (event) => { works well also.

Thanks for all !