Emitting events inside of a plugin

1

Hi,

I’m working with ProseMirror and Angular 17 and I’m trying to trigger a component to appear when a node is hovered over. My approach involves using a plugin to listen for the mouseover event and emit an event, while adding event listeners in the Angular component that contains the editor. However, this setup is leading to unexpected behavior.

import { Plugin } from 'prosemirror-state';
export const hoverPlugin = new Plugin({
  props: {
    handleDOMEvents: {
      mouseover(view, event) {
        const { $from } = view.state.selection;
        const node = view.state.doc.nodeAt($from.pos);
        if (node) {
          const { target } = event;
          target?.dispatchEvent(
            new CustomEvent('nodeHover', {
              detail: { Node: node, pos: $from.pos },
            }),
          );
        }
        return false;
      },
    },
  },
});

Does anyone know if emitting events from a ProseMirror plugin on mouseover is a viable approach? Are there any best practices or alternative methods to achieve this functionality effectively?

Thanks!

2

What is the unexpected behaviour you’re seeing? If you aren’t seeing your event handlers trigger, it is most likely because synthetic events do not bubble unless configured to do so. Adding bubbles: true to your CustomEvent constructor object will allow parent elements listening for nodeHover events to handle them.

3

Didn’t really think about that, that was it thanks.