Selecting a node on `click` in addition to `ctrl+click`

[nokome]

Hi. First off thank you very much for ProseMirror, I’m just getting back into using it.

I have a Division node type whose toDOM function creates a Web Component which is wrapped in a NodeView (which implements selectNode and deselectNode). Most things work fine, including selecting the node by using ctrl+click (so that, for example, it can be copied or deleted):

However, as a user I’d expect to be able to select the node by just clicking on the header of the Division (the blue bit with the icon) and not need to press ctrl at the same time. My first, naive attempt at this is to modify the selection of the view in the NodeView::stopEvent method,

  stopEvent(event: Event): boolean {
    if (event.type === 'mousedown') {
      const mousedown = event as MouseEvent
      if (!mousedown.ctrlKey && mousedown.target === this.dom) {
        this.view.state.selection = NodeSelection.create(this.view.state.doc, this.getPos())
        this.view.focus()
        return true
      }
    }
    return false
  }

This works OK (when I originally posted I was missing this.view.focus()) but I’m wondering if there is a better way to achieve this.

[bhl]

You need to dispatch a transaction which sets the selection, instead of trying to modify it directly. stopEvent could also be replaced by onClick prop on view.props; if you wrote the nodeview, you can also modify it to dispatch via event listener on the header.

[marijn]

This is the default behavior for leaf/atom nodes. Maybe your node has content and you forgot to mark it as an atom?

[nokome]

Thanks for the responses.

@bhl

You need to dispatch a transaction which sets the selection, instead of trying to modify it directly.

That was my initial approach, but the node was selected and then immediately deselected. I’ll try again and see if I can get it to work that way.

@bhl

if you wrote the nodeview, you can also modify it to dispatch via event listener on the header.

Yes, this is the way I ended up doing it. Several of my node types have inner <input> elements and CodeMirror editors and I needed to make sure the node was deselected when they are focused to avoid keypresses in them bubbling up and replacing the node (and to remove the blue “is selected” visual cue from the outer node).

@marijn

This is the default behavior for leaf/atom nodes. Maybe your node has content and you forgot to mark it as an atom?

Yes, I tried marking it as an atom but then, IIRC, there was some weird cursor behaviour on the ProseMirror content within the node view. In anycase, as mentioned above, I need to be able to de-select the node when the user focuses an inner input and I don’t think atom on its own will provide for that?