Is there any way get current htmlstring by onChange

what i expected is to get current html string by add event listener on “change” event, where “change” event emit is in my custom plugin like code blow:

    new Plugin({
        key: new PluginKey('justEmitEvent'),
        state: {
           apply(tr) {
               if (tr.docChanged) {
                  throwEvent(tr, "change");

    ... somewhere else
    editorInstance.on('change', (htmlString) => { get htmlString })

on and emit is fired by eventBus library

obviously, it cannot work as expected for the transition has not yet been applied. what i get is a step before what i really tap in the contenteditable box.

any way can achieve that ? only if onChange can get immediately the current htmlString, my editor demo can show content (what user tap in the editorBox next to renderBox) in the renderBox immediately,

Trying to wire imperative events into ProseMirror like this is a bad idea. As you noticed, apply is called before the editor is updated (it is involved in creating a new state, which may not even be put into the editor view, depending on what dispatchTransaction and plugins’ filterTransaction callbacks do). It should be a pure function.

If you want to do imperative things, a plugin view’s update method would be the right place. Or the dispatchTransaction prop if you just want to hook into some update cycle.

wow, i see.

many thanks