fest: add text style menu

Author: Lanttcat

components/Tiptap.tsx

@@ -1,8 +1,8 @@
-import { useEditor, EditorContent } from '@tiptap/react'
+import { useEditor, EditorContent, BubbleMenu, Editor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import {Paragraph} from "@tiptap/extension-paragraph";
+import { Paragraph } from "@tiptap/extension-paragraph"
 import Placeholder from '@tiptap/extension-placeholder'
-import { Heading} from '@tiptap/extension-heading';
+import { Heading } from '@tiptap/extension-heading'
 
 export const Tiptap = () => {
   const editor = useEditor({
@@ -18,7 +18,7 @@ export const Tiptap = () => {
       }),
       Heading.configure({
         levels: [1, 2, 3],
-      })
+      }),
     ],
     content: '',
     editorProps: {
@@ -29,6 +29,51 @@ export const Tiptap = () => {
   })
 
   return (
-    <EditorContent editor={editor} />
+    <>
+      {editor && <BubbleMenu editor={editor} pluginKey={'menu'}>
+        <MenuUI editor={editor} />
+      </BubbleMenu>}
+      <EditorContent editor={editor} />
+    </>
+  )
+}
+
+const MenuUI = ({ editor }: {editor: Editor}) => {
+  return (
+    <div className="bg-amber-400 rounded flex px-2">
+      <div className="p-2 text-teal-50">
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('h-1') ? 'is-active' : ''}
+        >
+          h1
+        </button>
+      </div>
+      <div className="p-2 text-teal-50">
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+        bold
+        </button>
+      </div>
+      <div className="p-2 text-teal-50">
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+        italic
+        </button>
+      </div>
+
+      <div className="p-2 text-teal-50">
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={editor.isActive('strike') ? 'is-active' : ''}
+        >
+        strike
+        </button>  
+      </div>
+    </div>
   )
 }

package.json

@@ -15,6 +15,7 @@
     "@openzeppelin/contracts": "^4.4.1",
     "@react-hookz/web": "^12.0.4",
     "@textile/eth-storage": "^1.0.0",
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.54",
     "@tiptap/extension-heading": "^2.0.0-beta.25",
     "@tiptap/extension-paragraph": "^2.0.0-beta.23",
     "@tiptap/extension-placeholder": "^2.0.0-beta.46",