Link - show custom popover UI with floating-ui

[fbolcic]

Hello,

First of all, thanks for an amazing library - we have just recently switched to tiptap and using it is just a breeze!

We would like to extend the native link element with a custom popover UI for inputting link href. We are using the floating-ui library in our app and would like to use it for this problem also.
I have seen some implementations that use the BubbleMenu but it does not seem like a perfect fit for us. We need to show this popover UI below the link component when the user:

1. selects a link element
2. clicks the link toolbar button or hits the link keyboard shortcut

Here is a mockup of the UI for adding the link:

We also have a variation for editing an existing link:

Currently, we have managed to build the logic which utilises the window.prompt (as described in the docs). Our main problem here is that for our use case we need to:

1. locate the HTML element so that we can attach a popover with floating-ui to it
2. show the popover, which is a React element that utilises floating-ui
   And the approach described in the docs is more of a JS than React approach of doing things.

Do you have any ideas and examples on how to achieve this?
Any help would be greatly appreciated.

[fbolcic]

Bumping this discussion since we are still stuck with this feature.
Can we get any help from the maintainers please? A simple nudge in the right direction would be greatly appreciated.

[ivanov-v]

Any ideas?) I need to implement exactly the same functionality

[fbolcic]

We tried going with the BubbleMenu in the end, and also with Interactive Node Views. But we got stuck again.
So no solution yet!

[ivanov-v]

I was also thinking of using Node, but it seems an interactive Mark is needed

[ivanov-v]

Maybe the implementation of this extension will help?
https://tiptap.dev/api/nodes/mention#usage

[BelalHashem007]

Hi,
I did have this exact problem using floating-ui react version so i used floating-ui dom which is just vanilla js and it worked.

import {
  computePosition,
  flip,
  shift,
  offset,
  autoUpdate,
} from "@floating-ui/dom";

export function LinkHoverElement({ editor }: { editor: Editor }) {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [anchorElement, setAnchorElement] = useState<HTMLAnchorElement | null>(
    null,
  );

  const tooltipRef = useRef<HTMLDivElement | null>(null);
  const cleanupRef = useRef<(() => void) | null>(null);
  
  useEffect(() => {

    const handleMouseClick = (e: Event) => {
    const a = (e.target as HTMLElement).closest("a");

      if (tooltipRef.current && a) {
        if (cleanupRef.current) cleanupRef.current();

        setAnchorElement(a);

        cleanupRef.current = autoUpdate(a, tooltipRef.current, () => {
          computePosition(a, tooltipRef.current as HTMLDivElement, {
            placement: "bottom",
            middleware: [offset(6), flip(), shift({ padding: 10 })],
          }).then(({ x, y }) => {
            Object.assign(tooltipRef.current?.style || {}, {
              left: `${x}px`,
              top: `${y}px`,
            });
          });
        });

        setIsOpen(true);
      } else {
        setIsOpen(false);
        if (cleanupRef.current) {
          cleanupRef.current();
          cleanupRef.current = null;
        }
      }
    };

    const dom = editor.view.dom;
    dom.addEventListener("click", handleMouseClick);

    return () => {
      dom.removeEventListener("click", handleMouseClick);
    };
  });
  
  return (
  <div
      ref={tooltipRef}
      className={`p-4 w-auto absolute gap-4 items-center top-0 left-0 ${isOpen ? "flex" : "hidden"} z-50`}
    >
    <a href={anchorElement?.href}>
    {anchorElement?.href}
    </a>
  </div>