handleClickOn (and associated handlers) don’t fire for node views

[steobrien]

I noticed this difference in behavior between a regular prosemirror NodeView, and one created by useNodeViews:

• For a vanilla NodeView, an editor-attached handleClickOn fires, for a click within the NodeView, or elsewhere in the editor, as documented/expected
• For a useNodeViews NodeView, a click within the NodeView does not fire, but other editor clicks do

This is also the case for handleDoubleClickOn and handleTripleClickOn.

I think this behavior should be consistent?

Vanilla implementation

class Pill {
  constructor(node) {
    this.dom = document.createElement("div");
    this.dom.innerText = node.attrs.text;
  }
}

// in component
<ProseMirror
  nodeViews={{
    pill(node) { return new Pill(node); },
  }}
  // other editor props
>

useNodeViews implementation

function Pill({ node }) {
  return (
    <span>{node.attrs.text}</span>
  );
}

const reactNodeViews = {
  pill: () => {
    const dom = document.createElement("div");
    dom.style.display = "contents";
    return {
      component: Pill,
      dom,
    };
  },
};

// passed to <ProseMirror> with `useNodeViews` as per README example

[steobrien]

Interestingly, if I replace <span>{node.attrs.text}</span> with an unwrapped <>{node.attrs.text}</>, the event does propagate as expected.

[smoores-dev]

@steobrien I don't know if this is still relevant to you, but I'd recommend giving @nytimes/react-prosemirror@next a shot! There are some breaking changes (noted in the README of the repo), but I believe it will resolve this issue (and others!)

[steobrien]

Great! Once I have some spare time I will dust off my old branch here and try it out.