feat: update tooltip layout and organize modifiers

Author: dineshsutihar

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

@@ -5,7 +5,6 @@ import { useState } from "react";
 import {
   BoldIcon,
   ItalicIcon,
-  CodeIcon,
 } from "lucide-react";
 
 import { NodeSelector } from "./node-selector";
@@ -25,22 +24,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const items: BubbleMenuItem[] = [
     {
       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(),
-      icon: CodeIcon,
-    },
   ];
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
@@ -79,22 +72,16 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       {...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);
-        }}
-      />
+      {props.editor && (
+        <NodeSelector
+          editor={props.editor}
+          isOpen={isNodeSelectorOpen}
+          setIsOpen={() => {
+            setIsNodeSelectorOpen(!isNodeSelectorOpen);
+            setIsLinkSelectorOpen(false);
+          }}
+        />
+      )}
       <div className="flex">
         {items.map((item, index) => (
           <button
@@ -110,6 +97,15 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             />
           </button>
         ))}
+        {props.editor && (
+          <LinkSelector
+            editor={props.editor}
+            isOpen={isLinkSelectorOpen}
+            setIsOpen={() => {
+              setIsLinkSelectorOpen(!isLinkSelectorOpen);
+            }}
+          />
+        )}
       </div>
     </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 { Link } 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", {
+        <Link
+          className={cn("h-4 w-4", {
             "text-blue-500": editor.isActive("link"),
           })}
-        >
-          Link
-        </p>
+        />
       </button>
       {/* {isOpen && (
         <form

components/editor/editor/components/node-selector.tsx

@@ -2,14 +2,8 @@ import type { Editor } from "@tiptap/core";
 import {
   Check,
   ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
   TextQuote,
-  ListOrdered,
   TextIcon,
-  Code,
-  CheckSquare,
   Heading,
 } from "lucide-react";
 import type { Dispatch, FC, SetStateAction } from "react";
@@ -28,17 +22,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   setIsOpen,
 }) => {
   const items: BubbleMenuItem[] = [
-    {
-      name: "Text",
-      icon: TextIcon,
-      command: () =>
-        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
-      // I feel like there has to be a more efficient way to do this – feel free to PR if you know how!
-      isActive: () =>
-        editor.isActive("paragraph") &&
-        !editor.isActive("bulletList") &&
-        !editor.isActive("orderedList"),
-    },
     {
       name: "Heading",
       icon: Heading,
@@ -51,6 +34,13 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
       isActive: () => editor.isActive("heading", { level: 3 }),
     },
+    {
+      name: "Text",
+      icon: TextIcon,
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      isActive: () => editor.isActive("paragraph"),
+    },
     {
       name: "Quote",
       icon: TextQuote,
@@ -63,24 +53,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
           .run(),
       isActive: () => editor.isActive("blockquote"),
     },
-    {
-      name: "Code",
-      icon: Code,
-      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
-    },
-    {
-      name: "Bullet List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
-    },
-    {
-      name: "Numbered List",
-      icon: ListOrdered,
-      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
-    },
   ];
 
   const activeItem = items.filter((item) => item.isActive()).pop() ?? {
@@ -93,6 +65,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
         type="button"
         className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
       >
         <span>{activeItem?.name}</span>
         <ChevronDown className="h-4 w-4" />