feat: update tooltip icons and layout in alpha editor

Author: dineshsutihar

components/editor/editor/components/bubble-menu.tsx

@@ -6,9 +6,11 @@ import {
   BoldIcon,
   ItalicIcon,
   CodeIcon,
+  QuoteIcon,
+  MinusSquareIcon,
+  Type as TextIcon,
+  Heading,
 } from "lucide-react";
-
-import { NodeSelector } from "./node-selector";
 import { LinkSelector } from "./link-selector";
 import { cn } from "@/utils/utils";
 
@@ -23,34 +25,56 @@ type EditorBubbleMenuProps = Omit<Required<Pick<BubbleMenuProps, "editor">> & Bu
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const items: BubbleMenuItem[] = [
+    {
+      name: "heading",
+      isActive: () => props.editor?.isActive("heading", { level: 2 }) ?? false,
+      command: () => props.editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+      icon: Heading,
+    },
+    {
+      name: "text",
+      isActive: () => props.editor?.isActive("paragraph") ?? false,
+      command: () => props.editor?.chain().focus().setParagraph().run(),
+      icon: TextIcon,
+    },
     {
       name: "bold",
-      isActive: () => props.editor.isActive("bold"),
-      command: () => props.editor.chain().focus().toggleBold().run(),
+      isActive: () => props.editor?.isActive("bold") ?? false,
+      command: () => props.editor?.chain().focus().toggleBold().run(),
       icon: BoldIcon,
     },
     {
       name: "italic",
-      isActive: () => props.editor.isActive("italic"),
-      command: () => props.editor.chain().focus().toggleItalic().run(),
+      isActive: () => props.editor?.isActive("italic") ?? false,
+      command: () => props.editor?.chain().focus().toggleItalic().run(),
       icon: ItalicIcon,
     },
     {
       name: "code",
-      isActive: () => props.editor.isActive("code"),
-      command: () => props.editor.chain().focus().toggleCode().run(),
+      isActive: () => props.editor?.isActive("code") ?? false,
+      command: () => props.editor?.chain().focus().toggleCode().run(),
       icon: CodeIcon,
     },
+    {
+      name: "quote",
+      isActive: () => props.editor?.isActive("blockquote") ?? false,
+      command: () => props.editor?.chain().focus().toggleBlockquote().run(),
+      icon: QuoteIcon,
+    },
+    {
+      name: "horizontalRule",
+      isActive: () => false,
+      command: () => props.editor?.chain().focus().setHorizontalRule().run(),
+      icon: MinusSquareIcon,
+    },
   ];
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
     shouldShow: ({ editor }) => {
-      // don't show if image is selected or a heading
-      if (editor.isActive("image") || editor.isActive("heading")) {
+      if (editor.isActive("image")) {
         return false;
       }
-
       try {
         if (editor.view.state.selection.$from.before() === 0) {
           return false;
@@ -65,36 +89,18 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     tippyOptions: {
       moveTransition: "transform 0.15s ease-out",
       onHidden: () => {
-        setIsNodeSelectorOpen(false);
         setIsLinkSelectorOpen(false);
       },
     },
   };
 
-  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
 
   return (
     <BubbleMenu
       {...bubbleMenuProps}
       className="flex w-fit divide-x divide-stone-200 rounded border border-stone-200 bg-white shadow-xl"
     >
-      <NodeSelector
-        editor={props.editor}
-        isOpen={isNodeSelectorOpen}
-        setIsOpen={() => {
-          setIsNodeSelectorOpen(!isNodeSelectorOpen);
-          setIsLinkSelectorOpen(false);
-        }}
-      />
-      <LinkSelector
-        editor={props.editor}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
       <div className="flex">
         {items.map((item, index) => (
           <button
@@ -111,6 +117,13 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           </button>
         ))}
       </div>
+      <LinkSelector
+        editor={props.editor!}
+        isOpen={isLinkSelectorOpen}
+        setIsOpen={() => {
+          setIsLinkSelectorOpen(!isLinkSelectorOpen);
+        }}
+      />
     </BubbleMenu>
   );
-};
+};

components/editor/editor/components/link-selector.tsx

@@ -1,6 +1,6 @@
 import { cn, getUrlFromString } from "@/utils/utils";
 import type { Editor } from "@tiptap/core";
-import { Check, Trash } from "lucide-react";
+import { Link2Icon } from "lucide-react";
 import type { Dispatch, FC, SetStateAction } from "react";
 import { useEffect, useRef, useCallback } from "react";
 
@@ -60,14 +60,11 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
         className="flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={setLink}
       >
-        <p className="text-base">↗</p>
-        <p
-          className={cn("underline decoration-stone-400 underline-offset-4", {
+        <Link2Icon
+          className={cn("h-4 w-4", {
             "text-blue-500": editor.isActive("link"),
           })}
-        >
-          Link
-        </p>
+        />
       </button>
       {/* {isOpen && (
         <form
@@ -106,4 +103,4 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
       )} */}
     </div>
   );
-};
+};