feat: replace link popover with dedicated bubble menu

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -26,7 +26,7 @@ import { v7 as uuid7 } from "uuid";
 import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
-import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
+import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
@@ -49,6 +49,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
   const showAiMenuRef = useRef(showAiMenu);
+  const [showLinkMenu] = useAtom(showLinkMenuAtom);
+  const showLinkMenuRef = useRef(showLinkMenu);
 
   useEffect(() => {
     showCommentPopupRef.current = showCommentPopup;
@@ -58,6 +60,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     showAiMenuRef.current = showAiMenu;
   }, [showAiMenu]);
 
+  useEffect(() => {
+    showLinkMenuRef.current = showLinkMenu;
+  }, [showLinkMenu]);
+
   const editorState = useEditorState({
     editor: props.editor,
     selector: (ctx) => {
@@ -135,6 +141,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
         isNodeSelection(selection) ||
         isCellSelection(selection) ||
         showAiMenuRef.current ||
+        showLinkMenuRef.current ||
         showCommentPopupRef?.current
       ) {
         return false;
@@ -147,7 +154,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       onHide: () => {
         setIsNodeSelectorOpen(false);
         setIsTextAlignmentOpen(false);
-        setIsLinkSelectorOpen(false);
         setIsColorSelectorOpen(false);
       },
     },
@@ -155,11 +161,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
 
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isTextAlignmentSelectorOpen, setIsTextAlignmentOpen] = useState(false);
-  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
 
   // Hide the bubble menu immediately when AI menu is shown
-  if (showAiMenu) return;
+  if (showAiMenu || showLinkMenu) return;
 
   return (
     <BubbleMenu
@@ -189,7 +194,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsOpen={() => {
             setIsNodeSelectorOpen(!isNodeSelectorOpen);
             setIsTextAlignmentOpen(false);
-            setIsLinkSelectorOpen(false);
             setIsColorSelectorOpen(false);
           }}
         />
@@ -200,7 +204,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           setIsOpen={() => {
             setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
             setIsNodeSelectorOpen(false);
-            setIsLinkSelectorOpen(false);
             setIsColorSelectorOpen(false);
           }}
         />
@@ -224,16 +227,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           ))}
         </ActionIcon.Group>
 
-        <LinkSelector
-          editor={props.editor}
-          isOpen={isLinkSelectorOpen}
-          setIsOpen={(value) => {
-            setIsLinkSelectorOpen(value);
-            setIsNodeSelectorOpen(false);
-            setIsTextAlignmentOpen(false);
-            setIsColorSelectorOpen(false);
-          }}
-        />
+        <LinkSelector />
 
         <ColorSelector
           editor={props.editor}
@@ -242,7 +236,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             setIsColorSelectorOpen(!isColorSelectorOpen);
             setIsNodeSelectorOpen(false);
             setIsTextAlignmentOpen(false);
-            setIsLinkSelectorOpen(false);
           }}
         />
 

apps/client/src/features/editor/components/bubble-menu/link-selector.tsx

@@ -1,68 +1,25 @@
-import { Dispatch, FC, SetStateAction, useCallback } from "react";
+import { FC } from "react";
 import { IconLink } from "@tabler/icons-react";
-import { ActionIcon, Popover, Tooltip } from "@mantine/core";
-import { useEditor } from "@tiptap/react";
-import { TextSelection } from "@tiptap/pm/state";
-import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
-import { normalizeUrl } from "@/features/editor/components/link/link-view";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { useSetAtom } from "jotai";
 import { useTranslation } from "react-i18next";
+import { showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
 
-interface LinkSelectorProps {
-  editor: ReturnType<typeof useEditor>;
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export const LinkSelector: FC<LinkSelectorProps> = ({
-  editor,
-  isOpen,
-  setIsOpen,
-}) => {
+export const LinkSelector: FC = () => {
   const { t } = useTranslation();
-  const onLink = useCallback(
-    (url: string, internal?: boolean) => {
-      setIsOpen(false);
-      editor
-        .chain()
-        .focus()
-        .setLink({ href: internal ? url : normalizeUrl(url), internal: !!internal } as any)
-        .command(({ tr }) => {
-          tr.setSelection(TextSelection.create(tr.doc, tr.selection.to));
-          return true;
-        })
-        .run();
-    },
-    [editor, setIsOpen],
-  );
+  const setShowLinkMenu = useSetAtom(showLinkMenuAtom);
 
   return (
-    <Popover
-      width={320}
-      opened={isOpen}
-      trapFocus
-      offset={{ mainAxis: 35, crossAxis: 0 }}
-      withArrow
-      shadow="md"
-    >
-      <Popover.Target>
-        <Tooltip label={t("Add link")} withArrow>
-          <ActionIcon
-            variant="default"
-            size="lg"
-            radius="0"
-            style={{
-              border: "none",
-            }}
-            onClick={() => setIsOpen(!isOpen)}
-          >
-            <IconLink size={16} />
-          </ActionIcon>
-        </Tooltip>
-      </Popover.Target>
-
-      <Popover.Dropdown p="sm">
-        <LinkEditorPanel onSetLink={onLink} />
-      </Popover.Dropdown>
-    </Popover>
+    <Tooltip label={t("Add link")} withArrow>
+      <ActionIcon
+        variant="default"
+        size="lg"
+        radius="0"
+        style={{ border: "none" }}
+        onClick={() => setShowLinkMenu(true)}
+      >
+        <IconLink size={16} />
+      </ActionIcon>
+    </Tooltip>
   );
 };