Add phosphor icons and improve menus UI

Signed-off-by: Émile Ré <emile@getprobo.com>
2026-03-23 18:06:53 +04:00
parent 34d64ecb75
commit 9ce510caa7
8 changed files with 139 additions and 129 deletions
--- a/packages/ui/src/RichEditor/BlockMenu.tsx
+++ b/packages/ui/src/RichEditor/BlockMenu.tsx
@@ -9,21 +9,20 @@ import {
  useFloatingRootContext,
  useInteractions,
 } from "@floating-ui/react";
+import { CodeBlockIcon, ListBulletsIcon, ListNumbersIcon, MinusIcon, PlusIcon, QuotesIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
 import { type useEditor } from "@tiptap/react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { tv } from "tailwind-variants";

-import { IconPlusSmall } from "../Atoms/Icons";
-
 import { MenuButton } from "./MenuButton";

 const blockMenuVariants = tv({
  slots: {
    trigger: [
-      "z-50 flex size-6 items-center justify-center",
+      "z-10 flex size-6 items-center justify-center",
      "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary text-xl font-light cursor-pointer",
    ],
-    menu: ["flex items-center gap-1 rounded-lg border border-border-mid bg-level-0 p-1 shadow-md z-50"],
+    menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-md z-20"],
  },
 });

@@ -170,7 +169,7 @@ export function BlockMenu({ editor }: BlockMenuProps) {
        }}
        className={trigger()}
      >
-        <IconPlusSmall size={16} />
+        <PlusIcon size={16} weight="bold" />
      </button>
      {menuOpen && (
        <div
@@ -183,50 +182,69 @@ export function BlockMenu({ editor }: BlockMenuProps) {
          onMouseDown={e => e.preventDefault()}
          className={menu()}
        >
+          <div className="p-1 font-semibold text-sm">Style</div>
          <MenuButton
-            label="H1"
-            active={editor.isActive("heading", { level: 1 })}
+            active={false}
+            onClick={() => handleAction(chain => chain.setParagraph())}
+          >
+            <TextTIcon size={16} weight="bold" />
+            Text
+          </MenuButton>
+          <MenuButton
+            active={false}
            onClick={() => handleAction(chain => chain.toggleHeading({ level: 1 }))}
-          />
+          >
+            <TextHOneIcon size={16} weight="bold" />
+            Heading 1
+          </MenuButton>
          <MenuButton
-            label="H2"
-            active={editor.isActive("heading", { level: 2 })}
+            active={false}
            onClick={() => handleAction(chain => chain.toggleHeading({ level: 2 }))}
-          />
+          >
+            <TextHTwoIcon size={16} weight="bold" />
+            Heading 2
+          </MenuButton>
          <MenuButton
-            label="H3"
-            active={editor.isActive("heading", { level: 3 })}
+            active={false}
            onClick={() => handleAction(chain => chain.toggleHeading({ level: 3 }))}
-          />
+          >
+            <TextHThreeIcon size={16} weight="bold" />
+            Heading 3
+          </MenuButton>
          <MenuButton
-            label="Bullet List"
-            active={editor.isActive("bulletList")}
+            active={false}
            onClick={() => handleAction(chain => chain.toggleBulletList())}
-          />
+          >
+            <ListBulletsIcon size={16} weight="bold" />
+            Bullet List
+          </MenuButton>
          <MenuButton
-            label="Ordered List"
-            active={editor.isActive("orderedList")}
+            active={false}
            onClick={() => handleAction(chain => chain.toggleOrderedList())}
-          />
+          >
+            <ListNumbersIcon size={16} weight="bold" />
+            Ordered List
+          </MenuButton>
          <MenuButton
-            label="Code"
-            active={editor.isActive("code")}
-            onClick={() => handleAction(chain => chain.toggleCode())}
-          />
-          <MenuButton
-            label="Code Block"
-            active={editor.isActive("codeBlock")}
+            active={false}
            onClick={() => handleAction(chain => chain.toggleCodeBlock())}
-          />
+          >
+            <CodeBlockIcon size={16} weight="bold" />
+            Code Block
+          </MenuButton>
          <MenuButton
-            label="Blockquote"
-            active={editor.isActive("blockquote")}
+            active={false}
            onClick={() => handleAction(chain => chain.toggleBlockquote())}
-          />
+          >
+            <QuotesIcon size={16} weight="bold" />
+            Blockquote
+          </MenuButton>
          <MenuButton
-            label="Divider"
            onClick={() => handleAction(chain => chain.setHorizontalRule())}
-          />
+          >
+            <MinusIcon size={16} weight="bold" />
+            Divider
+          </MenuButton>
        </div>
      )}
    </>
--- a/packages/ui/src/RichEditor/BubbleMenu.tsx
+++ b/packages/ui/src/RichEditor/BubbleMenu.tsx
@@ -1,3 +1,4 @@
+import { CodeIcon, LinkIcon, TextBIcon, TextItalicIcon, TextStrikethroughIcon, TextUnderlineIcon } from "@phosphor-icons/react";
 import type { useEditor } from "@tiptap/react";
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { tv } from "tailwind-variants";
@@ -21,32 +22,36 @@ export function BubbleMenu(props: BubbleMenuProps) {
      className={bubbleMenuVariants()}
    >
      <MenuButton
-        label="Bold"
        active={editor.isActive("bold")}
        onClick={() => editor.chain().focus().toggleBold().run()}
-      />
+      >
+        <TextBIcon size={16} weight="bold" />
+      </MenuButton>
      <MenuButton
-        label="Italic"
        active={editor.isActive("italic")}
        onClick={() => editor.chain().focus().toggleItalic().run()}
-      />
+      >
+        <TextItalicIcon size={16} weight="bold" />
+      </MenuButton>
      <MenuButton
-        label="Underline"
        active={editor.isActive("underline")}
        onClick={() => editor.chain().focus().toggleUnderline().run()}
-      />
+      >
+        <TextUnderlineIcon size={16} weight="bold" />
+      </MenuButton>
      <MenuButton
-        label="Strike"
        active={editor.isActive("strike")}
        onClick={() => editor.chain().focus().toggleStrike().run()}
-      />
+      >
+        <TextStrikethroughIcon size={16} weight="bold" />
+      </MenuButton>
      <MenuButton
-        label="Code"
        active={editor.isActive("code")}
        onClick={() => editor.chain().focus().toggleCode().run()}
-      />
+      >
+        <CodeIcon size={16} weight="bold" />
+      </MenuButton>
      <MenuButton
-        label="Link"
        active={editor.isActive("link")}
        onClick={() => {
          if (editor.isActive("link")) {
@@ -58,7 +63,9 @@ export function BubbleMenu(props: BubbleMenuProps) {
            editor.chain().focus().setLink({ href: url }).run();
          }
        }}
-      />
+      >
+        <LinkIcon size={16} weight="bold" />
+      </MenuButton>
    </BaseBubbleMenu>
  );
 }
--- a/packages/ui/src/RichEditor/MenuButton.tsx
+++ b/packages/ui/src/RichEditor/MenuButton.tsx
@@ -1,7 +1,11 @@
+import type { PropsWithChildren } from "react";
 import { tv } from "tailwind-variants";

 const menuButtonVariants = tv({
-  base: ["px-2 py-1 text-sm rounded-sm font-semibold bg-level-0 hover:bg-subtle"],
+  base: [
+    "flex items-center gap-2 w-full",
+    "px-2 py-1.5 text-sm rounded-sm bg-level-0 hover:bg-subtle cursor-pointer",
+  ],
  variants: {
    active: {
      true: ["bg-active"],
@@ -10,19 +14,18 @@ const menuButtonVariants = tv({
 });

 type MenuButtonProps = {
-  label: string;
  active?: boolean;
  onClick: () => void;
 };

-export function MenuButton({ label, active, onClick }: MenuButtonProps) {
+export function MenuButton({ children, active, onClick }: PropsWithChildren<MenuButtonProps>) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={menuButtonVariants({ active })}
    >
-      {label}
+      {children}
    </button>
  );
 }
--- a/packages/ui/src/RichEditor/OptionsMenu.tsx
+++ b/packages/ui/src/RichEditor/OptionsMenu.tsx
@@ -9,23 +9,22 @@ import {
  useFloatingRootContext,
  useInteractions,
 } from "@floating-ui/react";
+import { CodeBlockIcon, DotsSixVerticalIcon, ListBulletsIcon, ListNumbersIcon, QuotesIcon, TextHOneIcon, TextHThreeIcon, TextHTwoIcon, TextTIcon } from "@phosphor-icons/react";
 import { NodeSelection, TextSelection } from "@tiptap/pm/state";
 import type { EditorView } from "@tiptap/pm/view";
 import { type useEditor } from "@tiptap/react";
 import { type DragEvent, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { tv } from "tailwind-variants";

-import { IconChevronGrabberVertical } from "../Atoms/Icons";
-
 import { MenuButton } from "./MenuButton";

 const optionsMenuVariants = tv({
  slots: {
    trigger: [
-      "z-50 flex size-6 items-center justify-center",
+      "z-10 flex size-6 items-center justify-center",
      "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary cursor-grab",
    ],
-    menu: ["flex items-center gap-1 rounded-lg border border-border-mid bg-level-0 p-1 shadow-md z-50"],
+    menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-md z-20"],
  },
 });

@@ -265,7 +264,7 @@ export function OptionsMenu({ editor }: OptionsMenuProps) {
        }}
        className={trigger()}
      >
-        <IconChevronGrabberVertical size={16} />
+        <DotsSixVerticalIcon size={20} weight="bold" />
      </button>
      {menuOpen && (
        <div
@@ -278,46 +277,63 @@ export function OptionsMenu({ editor }: OptionsMenuProps) {
          onMouseDown={e => e.preventDefault()}
          className={menu()}
        >
+          <div className="p-1 font-semibold text-sm">Turn into</div>
+          <MenuButton
+            active={isNodeType("paragraph")}
+            onClick={() => handleAction(chain => chain.setParagraph())}
+          >
+            <TextTIcon size={16} weight="bold" />
+            Text
+          </MenuButton>
          <MenuButton
-            label="H1"
            active={isNodeType("heading", { level: 1 })}
            onClick={() => handleAction(chain => chain.toggleHeading({ level: 1 }))}
-          />
+          >
+            <TextHOneIcon size={16} weight="bold" />
+            Heading 1
+          </MenuButton>
          <MenuButton
-            label="H2"
            active={isNodeType("heading", { level: 2 })}
            onClick={() => handleAction(chain => chain.toggleHeading({ level: 2 }))}
-          />
+          >
+            <TextHTwoIcon size={16} weight="bold" />
+            Heading 2
+          </MenuButton>
          <MenuButton
-            label="H3"
            active={isNodeType("heading", { level: 3 })}
            onClick={() => handleAction(chain => chain.toggleHeading({ level: 3 }))}
-          />
+          >
+            <TextHThreeIcon size={16} weight="bold" />
+            Heading 3
+          </MenuButton>
          <MenuButton
-            label="Bullet List"
            active={isNodeType("bulletList")}
            onClick={() => handleAction(chain => chain.toggleBulletList())}
-          />
+          >
+            <ListBulletsIcon size={16} weight="bold" />
+            Bullet List
+          </MenuButton>
          <MenuButton
-            label="Ordered List"
            active={isNodeType("orderedList")}
            onClick={() => handleAction(chain => chain.toggleOrderedList())}
-          />
+          >
+            <ListNumbersIcon size={16} weight="bold" />
+            Ordered List
+          </MenuButton>
          <MenuButton
-            label="Code"
-            active={isNodeType("code")}
-            onClick={() => handleAction(chain => chain.toggleCode())}
-          />
-          <MenuButton
-            label="Code Block"
            active={isNodeType("codeBlock")}
            onClick={() => handleAction(chain => chain.toggleCodeBlock())}
-          />
+          >
+            <CodeBlockIcon size={16} weight="bold" />
+            Code Block
+          </MenuButton>
          <MenuButton
-            label="Blockquote"
            active={isNodeType("blockquote")}
            onClick={() => handleAction(chain => chain.toggleBlockquote())}
-          />
+          >
+            <QuotesIcon size={16} weight="bold" />
+            Blockquote
+          </MenuButton>
        </div>
      )}
    </>
--- a/packages/ui/src/RichEditor/RichEditor.tsx
+++ b/packages/ui/src/RichEditor/RichEditor.tsx
@@ -14,13 +14,12 @@ import { Text } from "@tiptap/extension-text";
 import { Underline } from "@tiptap/extension-underline";
 import { Dropcursor, Gapcursor, UndoRedo } from "@tiptap/extensions";
 import { type Content, EditorContent, useEditor, useEditorState } from "@tiptap/react";
-import { BubbleMenu } from "@tiptap/react/menus";
 import { type ComponentProps, useEffect, useRef } from "react";
 import { tv } from "tailwind-variants";

 import { BlockMenu } from "./BlockMenu";
+import { BubbleMenu } from "./BubbleMenu";
 import { LinkExtension } from "./LinkExtension";
-import { MenuButton } from "./MenuButton";
 import { OptionsMenu } from "./OptionsMenu";

 const extensions = [
@@ -49,14 +48,9 @@ const extensions = [
 ];

 const richEditorVariants = tv({
-  slots: {
-    bubbleMenu: ["flex items-center gap-1 rounded-lg border border-border-mid bg-level-0 p-1 shadow-md"],
-    editor: ["h-full px-12"],
-  },
+  base: ["h-full px-12"],
 });

-const { bubbleMenu, editor: editorVariants } = richEditorVariants();
-
 type RichEditorProps = ComponentProps<"div"> & {
  content: string;
  disabled?: boolean;
@@ -94,55 +88,10 @@ export function RichEditor(props: RichEditorProps) {
  }, [content, watchedContent, onChangeContent]);

  return (
-    <div className={editorVariants({ className })}>
-      <BubbleMenu
-        editor={editor}
-        className={bubbleMenu()}
-      >
-        <MenuButton
-          label="Bold"
-          active={editor.isActive("bold")}
-          onClick={() => editor.chain().focus().toggleBold().run()}
-        />
-        <MenuButton
-          label="Italic"
-          active={editor.isActive("italic")}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-        />
-        <MenuButton
-          label="Underline"
-          active={editor.isActive("underline")}
-          onClick={() => editor.chain().focus().toggleUnderline().run()}
-        />
-        <MenuButton
-          label="Strike"
-          active={editor.isActive("strike")}
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-        />
-        <MenuButton
-          label="Code"
-          active={editor.isActive("code")}
-          onClick={() => editor.chain().focus().toggleCode().run()}
-        />
-        <MenuButton
-          label="Link"
-          active={editor.isActive("link")}
-          onClick={() => {
-            if (editor.isActive("link")) {
-              editor.chain().focus().unsetLink().run();
-              return;
-            }
-            const url = window.prompt("URL");
-            if (url) {
-              editor.chain().focus().setLink({ href: url }).run();
-            }
-          }}
-        />
-      </BubbleMenu>
-
+    <div className={richEditorVariants({ className })}>
+      <BubbleMenu editor={editor} />
      <BlockMenu editor={editor} />
      <OptionsMenu editor={editor} />
-
      <EditorContent className="h-full" editor={editor} />
    </div>
  );