Best approach for loading new Doc back into Editor

Hey Lee,

First of all, great work on this plug-in! It’s made my job a hell of a lot easier over recent months. I appreciate you adding my feature request as well.

Anyway, I have a quick question about loading data back into the editor… I am able to retrieve it and successfully load it into the editor. However, I am mutating the prop directly by using this.content = recentDoc within my setter function. I know this is a bad pattern, and I fear it’s now refreshing the editor state either. I have looked into the TipTap documentation on the matter and it appears people are doing this with this.editor.setContent(content) but I realize these methods aren’t available with el-tiptap. I was looking into the Prosemirror props such as content, emitUpdate, parseOptions but I am unclear about how/where to implement them.

Maybe you could steer me in the right direction?

Let me know, thanks!

Shad

[Leecason]

<el-tiptap v-model="content"></el-tiptap>

You can use v-model to bind content then you can update content in your app or

template:

<el-tiptap @onInit="onInit"></el-tiptap>

js:

onInit({ editor }) {
  // you can access to `editor`, then you can editor.setContent(yourContent).
}

[shadrachtuck]

https://codesandbox.io/s/element-tiptap-x101r?file=/src/components/Editor.vue

This demo isn’t providing the same lag it was for me. However, I am running vue in electron and have other factors in the project. This demo is about as stripped-down as it gets. I solved the issue with a workaround, however it seems for me that onInit keeps sending event updates and loading a new version of the editor event while the document is edited.