tiptab editor > Adds Basic Menu

components/editor/BasicMenu.vue

@@ -0,0 +1,72 @@
+<template>
+  <editor-menu-bar
+    :editor="editor"
+    v-slot="{ commands, isActive }">
+    <div class="menubar">
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.bullet_list() }"
+        @click="commands.bullet_list">
+        <icon name="list-ul" size="large" />
+      </button>
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.ordered_list() }"
+        @click="commands.ordered_list">
+        <icon name="list-ol" size="large" />
+      </button>
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.blockquote() }"
+        @click="commands.blockquote">
+        <icon name="quote-right" size="large" />
+      </button>
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.code_block() }"
+        @click="commands.code_block">
+        <icon name="file-code" size="large" />
+      </button>
+      <button
+        class="menubar__button"
+        @click="commands.horizontal_rule">
+        <icon name="ruler-horizontal" size="large" />
+      </button>
+      <button
+        class="menubar__button"
+        @click="commands.undo">
+        <icon name="undo-alt" size="large" />
+      </button>
+      <button
+        class="menubar__button"
+        @click="commands.redo">
+        <icon name="redo" size="large" />
+      </button>
+      <button class="button is-success button-save">
+        Save
+      </button>
+    </div>
+  </editor-menu-bar>
+</template>
+<script>
+import { EditorMenuBar } from 'tiptap'
+import Icon from '~/components/shared/Icon'
+export default {
+  components: {EditorMenuBar, Icon},
+  props: {
+    editor: Object
+  }
+}
+</script>
+<style scoped lang="scss">
+  .button-save {
+    float: right;
+    background-color: #23d160;
+    &:hover {
+      background-color: #2bc76c;
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+</style>

components/editor/BubbleMenu.vue

@@ -66,6 +66,13 @@
       >
         H3
       </button>
+      <button
+        class="menububble__button"
+        :class="{ 'is-active': isActive.paragraph() }"
+        @click="commands.paragraph()"
+      >
+        <icon name="paragraph" size="small" />
+      </button>
     </div>
   </editor-menu-bubble>
 </template>

components/editor/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="editor editor-squished">
-     <bubble-menu :editor="editor" />
+    <basic-menu :editor="editor" />
+    <bubble-menu :editor="editor" />
     <editor-content
       class="editor__content"
       :editor="editor"
@@ -11,6 +12,7 @@
 <script>
 import { Editor, EditorContent } from "tiptap"
 import BubbleMenu from '~/components/editor/BubbleMenu'
+import BasicMenu from '~/components/editor/BasicMenu'
 import {
   Heading,
   Bold,
@@ -18,12 +20,21 @@ import {
   Italic,
   Strike,
   Underline,
-  History
+  History,
+  Blockquote,
+  HorizontalRule,
+  OrderedList,
+  BulletList,
+  ListItem,
+  CodeBlockHighlight
 } from 'tiptap-extensions'
+import javascript from 'highlight.js/lib/languages/javascript'
+import css from 'highlight.js/lib/languages/css'
 export default {
   components: {
     EditorContent,
-    BubbleMenu
+    BubbleMenu,
+    BasicMenu
   },
   data(){
     return {
@@ -40,7 +51,18 @@ export default {
         new Italic(),
         new Strike(),
         new Underline(),
-        new History()
+        new History(),
+        new Blockquote(),
+        new HorizontalRule(),
+        new OrderedList(),
+        new BulletList(),
+        new ListItem(),
+        new CodeBlockHighlight({
+          languages: {
+            javascript,
+            css,
+          }
+        })
       ]
     })
   },