Hi, I’m a beginner with prosemirror (I’m using it via tiptap) and I’m trying to remove from history some transactions that contain intermediate states (those states are simply choices user can do between content A and content B) so I don’t want them to be able to rollback to those states when they are closed.
I tried creating a tiptap extension to replace the default history and filter the transations I don’t want (intermediate states) :
import { Extension } from '@tiptap/core'
import { DOMSerializer } from '@tiptap/pm/model'
import { history, redo, undo } from 'prosemirror-history'
import { EditorState, Plugin, Transaction } from 'prosemirror-state'
export const CustomHistory = Extension.create({
name: 'customHistory',
addCommands() {
return {
undo: () => ({ state, dispatch }) => {
return undo(state, dispatch)
},
redo: () => ({ state, dispatch }) => {
return redo(state, dispatch)
},
}
},
addKeyboardShortcuts() {
return {
'Mod-z': () => this.editor.commands.undo(),
'Shift-Mod-z': () => this.editor.commands.redo(),
'Mod-y': () => this.editor.commands.redo(),
'Mod-я': () => this.editor.commands.undo(),
'Shift-Mod-я': () => this.editor.commands.redo(),
}
},
addProseMirrorPlugins() {
const historyPlugin = history({
newGroupDelay: 500,
})
const customPlugin = new Plugin({
...historyPlugin.spec,
filterTransaction(tr: Transaction, state: EditorState) {
if (!tr.docChanged) {
return true;
}
const newContent = DOMSerializer.fromSchema(state.schema).serializeFragment(tr.doc.content);
const newDiv = document.createElement("div");
newDiv.appendChild(newContent);
const shouldAddToHistory = !newDiv.innerHTML.includes("regen-component")
console.log(tr.getMeta("addToHistory"))
if (shouldAddToHistory) {
console.log(newDiv.innerHTML)
} else {
tr.setMeta("addToHistory", false)
}
return true;
},
})
return [customPlugin]
},
})
According to the doc : " You can set an "addToHistory"
metadata property of false
on a transaction to prevent it from being rolled back by undo."
So that’s what I did with by filtering transactions having my intermediate node view (regen-component).
After that I set the meta “addToHistory” to false for those transactions to remove them from the history (that’s what I’m trying to do).
But as a result, I get some transactions removed from the history but not those I intended to actually remove.
I don’t really understand what I’m doing wrong since what I’m printing is correct :
console.log(newDiv.innerHTML)
This shows exactly the content of transactions I’m trying to keep in my history.
Thanks in advance if you can help me solving this.