How can I get a Bubble Menu to only appear on click?

[andersr]

I am currently working to add a menu that should appear on click of a link in the editor. I'm trying to use the BubbleMenu extension for this.

While it does appear on click of a link, it ALSO appears, for example, if I move my cursor so it is on a link, which I would like to prevent. It also will appear on focus of the editor if the last element happens to be a link, which I also want to prevent. Is there some way to have a BubbleMenu only appear on click?

This is what I currently have:

{editor && (
 <BubbleMenu
    editor={editor}
    shouldShow={({ editor }) => editor.isActive("link")}>
      <div>MY MENU</div>
</BubbleMenu>)}

There is a handleClick method in editorProps in the useEditor hook. However, I am not clear how I would bind that handler to shouldShow.

Any tips or insights would be appreciated!

[andersr]

Looking at the props available for tippy.js, it seem the trigger and triggerTarget options may be the solution.

{editor && (
 <BubbleMenu
    editor={editor}
    shouldShow={({ editor }) => editor.isActive("link")}
    tippyOptions={{
              trigger: "click",
              triggerTarget: ??? // <-- this requires the target Element, can get the current position and Node, but not sure about element
            }}
>
      <div>MY MENU</div>
</BubbleMenu>)}

[killbut]

@andersr Hi. Were you able to implement this? If yes, could you please show the solution.

[andersr]

@killbut yes, I came up with a solution adapted from the one in this comment. I would suggest taking a look at that discussion, which helped me a lot. Here is the component I ended up with, tailored for my specific needs. Hope that helps!

import {
  autoUpdate,
  flip,
  offset,
  useDismiss,
  useFloating,
  useInteractions,
} from "@floating-ui/react";
import { Editor, isNodeSelection, posToDOMRect } from "@tiptap/core";
import { ReactNode, useLayoutEffect, useState } from "react";

//src: https://floating-ui.com/docs/usefloating#placement
type Placement =
  | "top"
  | "top-start"
  | "top-end"
  | "right"
  | "right-start"
  | "right-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end";

interface Props {
  editor: Editor;
  openInit: boolean;
  children: ReactNode;
  placement: Placement;
}

// Adapted from https://github.com/ueberdosis/tiptap/issues/2305#issuecomment-1020665146
export const FloatingElement = ({
  editor,
  children,
  openInit,
  placement,
}: Props) => {
  const [isOpen, setIsOpen] = useState(openInit);
  const { floatingStyles, refs, context } = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    whileElementsMounted: autoUpdate,
    placement,
    middleware: [offset({ mainAxis: 8 }), flip()],
  });

  const dismiss = useDismiss(context, {});

  const { getReferenceProps } = useInteractions([dismiss]);

  useLayoutEffect(() => {
    const { ranges } = editor.state.selection;
    const from = Math.min(...ranges.map((range) => range.$from.pos));
    const to = Math.max(...ranges.map((range) => range.$to.pos));

    refs.setReference({
      getBoundingClientRect() {
        if (isNodeSelection(editor.state.selection)) {
          const node = editor.view.nodeDOM(from) as HTMLElement | null;

          if (node) {
            return node.getBoundingClientRect();
          }
        }

        return posToDOMRect(editor.view, from, to);
      },
    });
  }, [refs, editor.view, editor.state.selection]);

  if (!open) {
    return null;
  }

  return (
    <div
      ref={refs.setFloating}
      {...getReferenceProps()}
      style={{ ...floatingStyles, zIndex: 30 }}
      className="bg-white"
    >
      {children}
    </div>
  );
};