tiptab>Editor Component>Adds Bubble Menu Component

components/editor/BubbleMenu.vue

@@ -0,0 +1,55 @@
+<template>
+  <editor-menu-bubble
+    :editor="editor"
+    :keep-in-bounds="keepInBounds"
+    v-slot="{ commands, isActive, menu }">
+    <div
+      class="menububble"
+      :class="{ 'is-active': menu.isActive }"
+      :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
+    >
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.heading({ level: 1}) }"
+        @click="commands.heading({ level: 1})"
+      >
+        H1
+      </button>
+
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.heading({ level: 2}) }"
+        @click="commands.heading({ level: 2})"
+      >
+        H2
+      </button>
+
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.heading({ level: 3}) }"
+        @click="commands.heading({ level: 3})"
+      >
+        H3
+      </button>
+    </div>
+  </editor-menu-bubble>
+</template>
+
+<script>
+import { EditorMenuBubble } from 'tiptap'
+export default {
+  components: {
+    EditorMenuBubble
+  },
+  props: {
+    editor: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      keepInBounds: true
+    }
+  }
+}
+</script>

components/editor/index.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="editor editor-squished">
+     <bubble-menu :editor="editor" />
     <editor-content
-      class="edito__content"
+      class="editor__content"
       :editor="editor"
     />
   </div>
 </template>
 
 <script>
-import { Editor, EditorContent } from "tiptap";
+import { Editor, EditorContent } from "tiptap"
+import BubbleMenu from '~/components/editor/BubbleMenu'
 import { Heading } from 'tiptap-extensions'
 export default {
   components: {
-    EditorContent
+    EditorContent,
+    BubbleMenu
   },
   data(){
     return {

pages/instructor/blog/editor.vue

@@ -6,8 +6,6 @@
     />
     <div class="blog-editor-container">
       <div class="container">
-        Editor
-        <!-- Editor Component here! -->
         <Editor />
       </div>
     </div>