nytimes / react-prosemirror

A library for safely integrating ProseMirror and React.
Other
459 stars 17 forks source link

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

Open steobrien opened 9 months ago

steobrien commented 9 months ago

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

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 commented 9 months ago

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