How to properly control node view

1

I have a MathView node view for my LaTeX expressions. The desired behavour is the following:

  • If I click on a node view (rendered math), a menu should appear with Edit button specifically (here selectNode method adds a css class to highlight that node is selected)
  • When I click edit button, rendered math should be replaces by an inner editor to type math expression. This is done by adding another css class which is done by update method.

Above is working fine but I’d like to add ctrl-d keyboard shortcut which insert empty math and open editor (i.e. imitates clicking of edit button). How can I do that in most elegant way? For now my solution is to add openOnCreate node attribute which would be true when adding node via keyboard shortcut but not sure whether its ok to use node attributes. In my selectNode method I check whether this attribute is true and if yes, open editor (inner view).

This is how I handle it currently:

  selectNode() {
    if (!this._outerView.editable || this._outerView.dragging) {
      return;
    }
    this.isSelected = true;
    this.dom.classList.add('ProseMirror-selectednode');

    if (this.node.attrs.openOnCreate && !this.alreadyOpenedOnCreate) {
      this.alreadyOpenedOnCreate = true;
      this.openEditor();
    }
  }

Would appreciate suggestion how to organise it better. My another idea was to make openEditor method public and after node insertion search for its node view and call this method. Is that OK?

2

Node views should generally not do a lot of controlling or have state (since document updates can cause them to be recreated). The recommended approach is to have some editor plugin control them, and communicate with them through node decorations (which they get as argument when created or updated).

1 Like
3

Do you have somewhere an example of such plugin to store state and control what happens with custom nodes? Thanks