Editor link components

* other minor fixes

apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css

@@ -8,21 +8,4 @@
   .active {
     color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-gray-5));
   }
-
-  .colorButton {
-    border: none;
-  }
-
-  .colorButton::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 1px;
-    background-color: light-dark(
-      var(--mantine-color-gray-3),
-      var(--mantine-color-gray-8)
-    );
-  }
 }

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

@@ -4,7 +4,7 @@ import {
   isNodeSelection,
   useEditor,
 } from "@tiptap/react";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, memo, useEffect, useRef, useState } from "react";
 import {
   IconBold,
   IconCode,
@@ -25,6 +25,7 @@ import {
 import { useAtom } from "jotai";
 import { v4 as uuidv4 } from "uuid";
 import { isCellSelection } from "@docmost/editor-ext";
+import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 
 export interface BubbleMenuItem {
   name: string;
@@ -113,7 +114,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     },
     tippyOptions: {
       moveTransition: "transform 0.15s ease-out",
-      onHidden: () => {
+      onHide: () => {
         setIsNodeSelectorOpen(false);
         setIsColorSelectorOpen(false);
         setIsLinkSelectorOpen(false);
@@ -155,6 +156,14 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           ))}
         </ActionIcon.Group>
 
+        <LinkSelector
+          editor={props.editor}
+          isOpen={isLinkSelectorOpen}
+          setIsOpen={() => {
+            setIsLinkSelectorOpen(!isLinkSelectorOpen);
+          }}
+        />
+
         <ColorSelector
           editor={props.editor}
           isOpen={isColorSelectorOpen}
@@ -171,7 +180,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           style={{ border: "none" }}
           onClick={commentItem.command}
         >
-          <IconMessage style={{ width: rem(16) }} stroke={2} />
+          <IconMessage size={16} stroke={2} />
         </ActionIcon>
       </div>
     </BubbleMenu>

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

@@ -1,7 +1,14 @@
 import { Dispatch, FC, SetStateAction } from "react";
-import { IconCheck, IconChevronDown } from "@tabler/icons-react";
-import { Button, Popover, rem, ScrollArea, Text, Tooltip } from "@mantine/core";
-import classes from "./bubble-menu.module.css";
+import { IconCheck, IconPalette } from "@tabler/icons-react";
+import {
+  ActionIcon,
+  Button,
+  Popover,
+  rem,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 import { useEditor } from "@tiptap/react";
 
 export interface BubbleColorMenuItem {
@@ -110,21 +117,19 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   return (
     <Popover width={200} opened={isOpen} withArrow>
       <Popover.Target>
-        <Tooltip label="text color" withArrow>
-          <Button
+        <Tooltip label="Text color" withArrow>
+          <ActionIcon
             variant="default"
+            size="lg"
             radius="0"
-            rightSection={<IconChevronDown size={16} />}
-            className={classes.colorButton}
             style={{
+              border: "none",
               color: activeColorItem?.color,
-              paddingLeft: "8px",
-              paddingRight: "8px",
             }}
             onClick={() => setIsOpen(!isOpen)}
           >
-            A
-          </Button>
+            <IconPalette size={16} stroke={2} />
+          </ActionIcon>
         </Tooltip>
       </Popover.Target>
 

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

@@ -0,0 +1,61 @@
+import { Dispatch, FC, SetStateAction, useCallback } from "react";
+import { IconLink } from "@tabler/icons-react";
+import { ActionIcon, Popover, Tooltip } from "@mantine/core";
+import { useEditor } from "@tiptap/react";
+import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
+
+export interface BubbleColorMenuItem {
+  name: string;
+  color: string;
+}
+
+interface LinkSelectorProps {
+  editor: ReturnType<typeof useEditor>;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const LinkSelector: FC<LinkSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
+  const onLink = useCallback(
+    (url: string) => {
+      editor.chain().focus().setLink({ href: url }).run();
+      setIsOpen(false);
+      console.log("is p[e ");
+    },
+    [editor],
+  );
+
+  return (
+    <Popover
+      width={300}
+      opened={isOpen}
+      trapFocus
+      offset={{ mainAxis: 35, crossAxis: 0 }}
+      withArrow
+    >
+      <Popover.Target>
+        <Tooltip label="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>
+        <LinkEditorPanel onSetLink={onLink} />
+      </Popover.Dropdown>
+    </Popover>
+  );
+};

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

@@ -12,8 +12,7 @@ import {
   IconListNumbers,
   IconTypography,
 } from "@tabler/icons-react";
-import { Popover, Button, rem, ScrollArea } from "@mantine/core";
-import classes from "@/features/editor/components/bubble-menu/bubble-menu.module.css";
+import { Popover, Button, ScrollArea } from "@mantine/core";
 import { useEditor } from "@tiptap/react";
 
 interface NodeSelectorProps {
@@ -110,9 +109,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       <Popover.Target>
         <Button
           variant="default"
+          style={{ border: "none", height: "34px" }}
           radius="0"
           rightSection={<IconChevronDown size={16} />}
-          className={classes.colorButton}
           onClick={() => setIsOpen(!isOpen)}
         >
           {activeItem?.name}