TextNode with popover accessing global store in react

[divyanshu-shortloop]

I'm trying to build a TextNode which shows popover on hover/click. The data shown inside the popover will come from an external global store like zustand. Ideally the popover open state will also be in a global store so that I can remotely open the "popover" and autofocus it for navigation purposes.

How would I go about creating such node? I had a look at the FloatingLinkEditorPlugin code in playground and that looks like the best base reference for this task.

I also know there are decorator nodes that can render React components. It would make this insanely easy but that they don't have selection abilities in Lexical.

I'd like to hear any ideas for this.

[mariusplanable]

I would create a plugin which listens to the popover open state from the global store AND a NodeEventPlugin for listening on hover/click events on the nodes (let's say the node class is TextWithPopoverNode).
Note that for handling popovers from the global store you would also need to store which of the node exactly needs to display the popover (an ID property on the node maybe).
The plugin would look something like this:

import { NodeEventPlugin } from '@lexical/react/LexicalNodeEventPlugin';
import { $nodesOfType } from 'lexical';

const CustomPlugin = () => {
  const { openPopoverId } = useGlobalStore();
  
  useEffect(() => {
    if (!openPopoverId) {
      // hide any existing popovers
      return;
    }
    
    editor.getEditorState().read(() => {
      const nodeToDisplayPopoverFor =  $nodesOfType(TextWithPopoverNode).find(node => node.id === openPopoverId);
      // having the node display a floating element around it
    });
  }, [editor, openPopoverId]);
  
  return (
    <NodeEventPlugin
      nodeType={TextWithPopoverNode}
      eventType="hover"
      eventListener={(event: Event, eventEditor: LexicalEditor, key: NodeKey) => {
        // having the event you can display the floating element above the node
      }}
    />
  );
}

You would also need a NodeEventPlugin for the click eventType.

ANOTHER direction to look into would be to use a Decorator node, but as far as I know it's recommended to display custom floating elements outside the node instance.

[Tai-Ku]

I tried it, but it seems the hover event doesn't work, but the click event does

[etrepum]

That's because there is no hover event in html, only mouseover/mouseout or mousenter/mouseleave