tiptap editor > Adds More formatting options

components/editor/BubbleMenu.vue

@@ -8,6 +8,41 @@
       :class="{ 'is-active': menu.isActive }"
       :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
     >
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.bold() }"
+        @click="commands.bold()"
+      >
+        bold
+      </button>
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.italic() }"
+        @click="commands.italic()"
+      >
+        italic
+      </button>
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.code() }"
+        @click="commands.code()"
+      >
+        code
+      </button>
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.strike() }"
+        @click="commands.strike()"
+      >
+        strike
+      </button>
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.underline() }"
+        @click="commands.underline()"
+      >
+        underline
+      </button>
       <button
         class="menububble__button"
         :class="{ 'is-active': isActive.heading({ level: 1}) }"

components/editor/index.vue

@@ -11,7 +11,15 @@
 <script>
 import { Editor, EditorContent } from "tiptap"
 import BubbleMenu from '~/components/editor/BubbleMenu'
-import { Heading } from 'tiptap-extensions'
+import {
+  Heading,
+  Bold,
+  Code,
+  Italic,
+  Strike,
+  Underline,
+  History
+} from 'tiptap-extensions'
 export default {
   components: {
     EditorContent,
@@ -26,7 +34,13 @@ export default {
   mounted(){
     this.editor = new Editor({
       extensions: [
-        new Heading({ levels: [1, 2, 3]})
+        new Heading({ levels: [1, 2, 3]}),
+        new Bold(),
+        new Code(),
+        new Italic(),
+        new Strike(),
+        new Underline(),
+        new History()
       ]
     })
   },