I’m running into an issue and after spending several days on it with no solution I figured I’d reach out here. I’m likely missing something incredibly obvious, but nonetheless here we go.
What I’m Trying To Accomplish:
- A user can add a comment to selected tex. That comment will appear in the far-right hand side of the screen in what we’re calling the gutter (similar concept as Google docs)
- A comment is a type of mark. When it is created, we save pertinent data in attributes property of the mark
- The comment will display on the same horizontal axis as the text it is associated with
- When a user scrolls, we want to update the position of the comment so it scrolls with the associated text
- To accomplish this, we are passing a unique ID as an attribute to the node that contains the associated text so that upon an event handler we can use doc.descendants to scan the doc for that unique ID and update the position accordingly
Issue:
- We’re using setNodeMarkup to assign an id to the attributes property. This works fine if there is only one comment.
- When additional comments are added, the newest unique ID becomes the ID for all of the nodes in the document, thus defeating the point of a unique id.
- Relevant code:
private updatePMState(markType: any) {
let resolved = this.currentState.doc.resolve(
// we've saved the from & to positions in another function prior to when this is called
this.moteAttrs.associatedTextPosition.from
);
let node = resolved.node();
let action = { action: 'add-mote', attributes: this.moteAttrs };
const stateTransaction = this.currentState.tr
.addMark(
this.moteAttrs.associatedTextPosition.from,
this.moteAttrs.associatedTextPosition.to,
markType.create(this.moteAttrs)
)
.setMeta('motes', action);
this.dispatch(stateTransaction);
node.attrs.id = this.moteAttrs.associatedTextId; // This value is being created in another method prior to this
const updateNodeAttrs = this.currentState.tr.setNodeMarkup(
resolved.pos,
this.currentNode.type, // we've saved this in a variable when the text was selected
{
id: node.attrs.id,
}
);
this.currentState.applyTransaction(updateNodeAttrs);
return true;
}
It seems that the ID being created & passed in is being assigned to every paragraph node in the document even though I’m trying ton only past the position of the node we want the ID attribute assigned to. I’m clearly not implementing it properly but I’ve been at it so long I think I’ve worked myself into a hole I can’t get out of. Any insight? Happy to provide more code if necessary. Thanks in advance.