Examples of Mapping Transaction to Source Document

1

Upon instantiating the ProseMirror editor, I convert a document from one arbitrary structure into the ProseMirror doc structure. Following advice from one of the posts here, I have set the dispatchTransaction method to listen for changes so that those transactions can be mapped back to the source document and saved. However, I am still learning how to use the library and would like to see an example or more of how this has been accomplished.

Option 2 is to map the entire document back to the source structure, perform a diff (or diff, then map), then do the update according to whichever changes need to be made. This seems increasingly expensive as the size of the document increases, which is probably why the advice given was to use the transaction rather than an alternative.

I appreciate any guidance on how to accomplish the goal, regardless of approach.

2

Hi @jneander,

I have been using dispatchTransaction to insert some error handling, like this:

const view = new EditorView(editorNode, {
  state: editorState,
  dispatchTransaction(transaction) {
    try {
      const newState = view.state.apply(transaction);
      view.updateState(newState);
    } catch (error) {
      alert('Sorry, your last action failed. Please try again.');
      handleError(error);
    }
  }
})

I believe you could do something like:

dispatchTransaction(transaction) {
  const newState = view.state.apply(transaction);
  view.updateState(newState);

  saveDocument(newState);
}

I hope this helps!