I’m trying to create a plugin that’s able to highlight text. The highlighting should be done based on offsets. So far I’ve come up with this approach:
lintDeco(doc) {
let decos = this.results.map(({ from, to, className }) => Decoration.inline(from, to, { class: className }));
return DecorationSet.create(doc, decos);
}
new Plugin({
state: {
init: (_, { doc }) => {
return this.lintDeco(doc);
},
apply: (tr, decorationSet) => {
if (tr.docChanged) {
return this.lintDeco(tr.doc);
}
return decorationSet.map(tr.mapping, tr.doc);
},
},
props: {
decorations(state) {
return this.getState(state);
},
},
}),
However, no matter what I try, I keep getting the same error:
Uncaught TypeError: this.members[i].localsInner is not a function
at DecorationGroup.locals (index.es.js?f904:4298)
at iterDeco (index.es.js?f904:1819)
at NodeViewDesc.updateChildren (index.es.js?f904:1238)
at new NodeViewDesc (index.es.js?f904:1150)
at Function.create (index.es.js?f904:1200)
at ViewTreeUpdater.addNode (index.es.js?f904:1759)
at eval (index.es.js?f904:1255)
at iterDeco (index.es.js?f904:1824)
at NodeViewDesc.updateChildren (index.es.js?f904:1238)
at NodeViewDesc.updateInner (index.es.js?f904:1334)
at NodeViewDesc.update (index.es.js?f904:1326)
at EditorView.updateStateInner (index.es.js?f904:4652)
at EditorView.updateState (index.es.js?f904:4614)
at Editor.dispatchTransaction (tiptap.esm.js?cd42:1335)
at EditorView.dispatch (index.es.js?f904:4861)
at Plugin.blur (tiptap.esm.js?cd42:1227)
at eval (index.es.js?f904:3238)
at EditorView.someProp (index.es.js?f904:4723)
at runCustomHandler (index.es.js?f904:3236)
at HTMLDivElement.view.dom.addEventListener.view.eventHandlers.<computed> (index.es.js?f904:3200)
at HTMLDivElement.sentryWrapped (helpers.js?bf37:71)
I’m using vue-tiptap to initialize ProseMirror. Anyone an idea?