I want to add custom behavior for marked text blocks. Here’s how I have approached this thus far:
I create a MarkSpec for the <mark>
element and add a few data attributes
const mark= {
atom:true,
attrs: {
"data-id": {default: 1},
"data-comment": {default:"comment"}
},
parseDOM: [{tag: "mark", getAttrs(dom) {
return {
"data-id": dom.getAttribute("data-id"),
"data-comment": dom.getAttribute("data-comment")
}
}}],
toDOM(node) { return ["mark", node.attrs] }
}
I create my EditorView with a custom NodeView for <mark>
elements
editor.view = new EditorView( document.querySelector(".prosemirror"), {
state:editor.state,
dispatchTransaction: this.dispatchTransaction.bind(this),
nodeViews: {
mark(node, view, getPos) { return new HighlightView(node, view, getPos) }
}
});
I create a custom NodeView class for <mark>
elements
constructor(node, view, getPos) {
this.dom = document.createElement("mark")
this.dom.className = 'highlight-view';
this.dom.setAttribute('data-id',node.attrs['data-id']);
this.dom.setAttribute('data-comment',node.attrs['data-comment']);
this.dom.setAttribute('title',node.attrs['data-comment']);
this.node = node;
this.view = view;
this.getPos = getPos;
...
When I set a breakpoint in the constructor, the getPos
parameter is undefined.
If it’s undefined in the constructor, when it is actually defined so that I can call it?