logipedia/src/components/article/editor/menu-bar.tsx

import ColorPickerPopover from "@/components/color-picker/color-picker-popover";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { RGBAToHexA } from "@/lib/utils";
import { useCurrentEditor } from "@tiptap/react";
import {
  BoldIcon,
  CodeIcon,
  CodeSquareIcon,
  Heading2Icon,
  Heading3Icon,
  Heading4Icon,
  Heading5Icon,
  Heading6Icon,
  ItalicIcon,
  ListIcon,
  ListOrderedIcon,
  QuoteIcon,
  RedoIcon,
  SeparatorHorizontalIcon,
  StrikethroughIcon,
  TextIcon,
  TypeIcon,
  UndoIcon,
} from "lucide-react";

export const MenuBar = () => {
  const { editor } = useCurrentEditor();

  if (!editor) {
    return null;
  }

  return (
    <div className="menu-bar mb-4 flex items-center justify-between space-y-2">
      {/* <div className="flex w-full items-center justify-between">
       
      </div> */}
      <div className="Button-group flex items-center gap-1">
        <Button
          size={"icon"}
          variant={"outline"}
          onClick={() => editor.chain().focus().toggleBold().run()}
          disabled={!editor.can().chain().focus().toggleBold().run()}
          className={editor.isActive("bold") ? "is-active" : ""}
        >
          <BoldIcon className="size-4" />
        </Button>
        <Button
          size={"icon"}
          variant={"outline"}
          onClick={() => editor.chain().focus().toggleItalic().run()}
          disabled={!editor.can().chain().focus().toggleItalic().run()}
          className={
            editor.isActive("italic") ? "bg-foreground text-background" : ""
          }
        >
          <ItalicIcon className="size-4" />
        </Button>
        <Button
          size={"icon"}
          variant={"outline"}
          onClick={() => editor.chain().focus().toggleStrike().run()}
          disabled={!editor.can().chain().focus().toggleStrike().run()}
          className={editor.isActive("strike") ? "is-active" : ""}
        >
          <StrikethroughIcon className="size-4" />
        </Button>
        {/* <Button
          size={"icon"}
          variant={"outline"}
          onClick={() => editor.chain().focus().toggleCode().run()}
          disabled={!editor.can().chain().focus().toggleCode().run()}
          className={editor.isActive("code") ? "is-active" : ""}
        >
          <CodeIcon className="size-4" />
        </Button> */}

        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().setParagraph().run()}
          className={editor.isActive("paragraph") ? "is-active" : ""}
        >
          <TypeIcon className="size-4" />
        </Button>

        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 2 }).run()
          }
          className={
            editor.isActive("heading", { level: 2 }) ? "is-active" : ""
          }
        >
          <Heading2Icon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 3 }).run()
          }
          className={
            editor.isActive("heading", { level: 3 }) ? "is-active" : ""
          }
        >
          <Heading3Icon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 4 }).run()
          }
          className={
            editor.isActive("heading", { level: 4 }) ? "is-active" : ""
          }
        >
          <Heading4Icon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 5 }).run()
          }
          className={
            editor.isActive("heading", { level: 5 }) ? "is-active" : ""
          }
        >
          <Heading5Icon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 6 }).run()
          }
          className={
            editor.isActive("heading", { level: 6 }) ? "is-active" : ""
          }
        >
          <Heading6Icon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          className={editor.isActive("bulletList") ? "is-active" : ""}
        >
          <ListIcon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
          className={editor.isActive("orderedList") ? "is-active" : ""}
        >
          <ListOrderedIcon className="size-4" />
        </Button>
        {/* <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
          className={editor.isActive("codeBlock") ? "is-active" : ""}
        >
          <CodeSquareIcon className="size-4" />
        </Button> */}
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().toggleBlockquote().run()}
          className={editor.isActive("blockquote") ? "is-active" : ""}
        >
          <QuoteIcon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().setHorizontalRule().run()}
        >
          <SeparatorHorizontalIcon className="size-4" />
        </Button>
        <ColorPickerPopover
          // initialColor={editor.getAttributes("textStyle").color}
          onInput={(color) => editor.chain().focus().setColor(color).run()}
        />
      </div>
      <div className="flex items-center gap-1">
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().undo().run()}
          disabled={!editor.can().chain().focus().undo().run()}
        >
          <UndoIcon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().redo().run()}
          disabled={!editor.can().chain().focus().redo().run()}
        >
          <RedoIcon className="size-4" />
        </Button>
      </div>
    </div>
  );
};