Advertisement
elliottchong

Untitled

Sep 24th, 2023
534
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Editor } from "@tiptap/react";
  2. import {
  3.   Bold,
  4.   Code,
  5.   CodepenIcon,
  6.   Heading1,
  7.   Heading2,
  8.   Heading3,
  9.   Heading4,
  10.   Heading5,
  11.   Heading6,
  12.   Italic,
  13.   List,
  14.   ListOrdered,
  15.   Quote,
  16.   Redo,
  17.   Strikethrough,
  18.   Undo,
  19. } from "lucide-react";
  20.  
  21. const TipTapMenuBar = ({ editor }: { editor: Editor }) => {
  22.   return (
  23.     <div className="flex flex-wrap gap-2">
  24.       <button
  25.         onClick={() => editor.chain().focus().toggleBold().run()}
  26.         disabled={!editor.can().chain().focus().toggleBold().run()}
  27.         className={editor.isActive("bold") ? "is-active" : ""}
  28.       >
  29.         <Bold className="w-6 h-6" />
  30.       </button>
  31.       <button
  32.         onClick={() => editor.chain().focus().toggleItalic().run()}
  33.         disabled={!editor.can().chain().focus().toggleItalic().run()}
  34.         className={editor.isActive("italic") ? "is-active" : ""}
  35.       >
  36.         <Italic className="w-6 h-6" />
  37.       </button>
  38.       <button
  39.         onClick={() => editor.chain().focus().toggleStrike().run()}
  40.         disabled={!editor.can().chain().focus().toggleStrike().run()}
  41.         className={editor.isActive("strike") ? "is-active" : ""}
  42.       >
  43.         <Strikethrough className="w-6 h-6" />
  44.       </button>
  45.       <button
  46.         onClick={() => editor.chain().focus().toggleCode().run()}
  47.         disabled={!editor.can().chain().focus().toggleCode().run()}
  48.         className={editor.isActive("code") ? "is-active" : ""}
  49.       >
  50.         <Code className="w-6 h-6" />
  51.       </button>
  52.       <button
  53.         onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
  54.         className={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
  55.       >
  56.         <Heading1 className="w-6 h-6" />
  57.       </button>
  58.       <button
  59.         onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
  60.         className={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
  61.       >
  62.         <Heading2 className="w-6 h-6" />
  63.       </button>
  64.       <button
  65.         onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
  66.         className={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
  67.       >
  68.         <Heading3 className="w-6 h-6" />
  69.       </button>
  70.       <button
  71.         onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
  72.         className={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
  73.       >
  74.         <Heading4 className="w-6 h-6" />
  75.       </button>
  76.       <button
  77.         onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
  78.         className={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
  79.       >
  80.         <Heading5 className="w-6 h-6" />
  81.       </button>
  82.       <button
  83.         onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
  84.         className={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
  85.       >
  86.         <Heading6 className="w-6 h-6" />
  87.       </button>
  88.       <button
  89.         onClick={() => editor.chain().focus().toggleBulletList().run()}
  90.         className={editor.isActive("bulletList") ? "is-active" : ""}
  91.       >
  92.         <List className="w-6 h-6" />
  93.       </button>
  94.       <button
  95.         onClick={() => editor.chain().focus().toggleOrderedList().run()}
  96.         className={editor.isActive("orderedList") ? "is-active" : ""}
  97.       >
  98.         <ListOrdered className="w-6 h-6" />
  99.       </button>
  100.       <button
  101.         onClick={() => editor.chain().focus().toggleCodeBlock().run()}
  102.         className={editor.isActive("codeBlock") ? "is-active" : ""}
  103.       >
  104.         <CodepenIcon className="w-6 h-6" />
  105.       </button>
  106.       <button
  107.         onClick={() => editor.chain().focus().toggleBlockquote().run()}
  108.         className={editor.isActive("blockquote") ? "is-active" : ""}
  109.       >
  110.         <Quote className="w-6 h-6" />
  111.       </button>
  112.       <button
  113.         onClick={() => editor.chain().focus().undo().run()}
  114.         disabled={!editor.can().chain().focus().undo().run()}
  115.       >
  116.         <Undo className="w-6 h-6" />
  117.       </button>
  118.       <button
  119.         onClick={() => editor.chain().focus().redo().run()}
  120.         disabled={!editor.can().chain().focus().redo().run()}
  121.       >
  122.         <Redo className="w-6 h-6" />
  123.       </button>
  124.     </div>
  125.   );
  126. };
  127.  
  128. export default TipTapMenuBar;
  129.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement