How to get change in onExecute event for Kendo React Editor

[yilmaz]

When Kendo React editor changes its content by user typing in it, how to get the latest state of html from editor? When I use the get html method from EditorTools, it gives me the state without the change.

[Stefan]

Hello,

The current state can be retrieved during the event from the transaction event parameter on the onExecute event:

const nextState = ProseMirror.EditorState.create({
  doc: transaction.doc,
  selection: transaction.selection
}); // this will create the next state

 
const editorValue = EditorUtils.getHtml(nextState);

Also, please have in mind that the onExecute will be fired when the selection is changed as well, that is why it is a good idea to add some logic to check for that to not make unnecessary updates:

if (state.doc.eq(transaction.doc)) {
  return;
}

This is an  example

https://stackblitz.com/edit/react-n1jgym?file=app/main.jsx

Also, I have two side notes:

1) As when the document becomes bigger serializing it with "getHtml" could become slower, we can suggest during onExecute to only save the document in the state and serialize it during another event as save button.

2) We have an example with a HOC that adds an Editor with an onChange event that handles this internally. Please take a look at it as it can prove helpful:

https://stackblitz.com/edit/react-urtld6-rzwtsv?file=app/controlled-editor.jsx

Regards,
Stefan
Progress Telerik