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!