replace floating and bubble menu with menu bar

webapp/components/Editor/Editor.vue

@@ -43,137 +43,7 @@
         </div>
       </div>
     </div>
-
+    <hc-menu-bar :editor="editor" />
-    <editor-menu-bubble :editor="editor">
-      <div
-        ref="menu"
-        slot-scope="{ commands, getMarkAttrs, isActive, menu }"
-        class="menububble tooltip"
-        x-placement="top"
-        :class="{ 'is-active': menu.isActive || linkMenuIsActive }"
-        :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
-      >
-        <div class="tooltip-wrapper">
-          <template v-if="linkMenuIsActive">
-            <ds-input
-              ref="linkInput"
-              v-model="linkUrl"
-              class="editor-menu-link-input"
-              placeholder="http://"
-              @blur.native.capture="hideMenu(menu.isActive)"
-              @keydown.native.esc.prevent="hideMenu(menu.isActive)"
-              @keydown.native.enter.prevent="setLinkUrl(commands.link, linkUrl)"
-            />
-          </template>
-          <template v-else>
-            <ds-button
-              class="menububble__button"
-              size="small"
-              :hover="isActive.bold()"
-              ghost
-              @click.prevent="() => {}"
-              @mousedown.native.prevent="commands.bold"
-            >
-              <ds-icon name="bold" />
-            </ds-button>
-
-            <ds-button
-              class="menububble__button"
-              size="small"
-              :hover="isActive.italic()"
-              ghost
-              @click.prevent="() => {}"
-              @mousedown.native.prevent="commands.italic"
-            >
-              <ds-icon name="italic" />
-            </ds-button>
-
-            <ds-button
-              class="menububble__button"
-              size="small"
-              :hover="isActive.link()"
-              ghost
-              @click.prevent="() => {}"
-              @mousedown.native.prevent="showLinkMenu(getMarkAttrs('link'))"
-            >
-              <ds-icon name="link" />
-            </ds-button>
-          </template>
-        </div>
-        <div class="tooltip-arrow" />
-      </div>
-    </editor-menu-bubble>
-    <editor-floating-menu :editor="editor">
-      <div
-        slot-scope="{ commands, isActive, menu }"
-        class="editor__floating-menu"
-        :class="{ 'is-active': menu.isActive }"
-        :style="`top: ${menu.top}px`"
-      >
-        <ds-button
-          class="menubar__button"
-          size="small"
-          :ghost="!isActive.paragraph()"
-          @click.prevent="commands.paragraph()"
-        >
-          <ds-icon name="paragraph" />
-        </ds-button>
-
-        <ds-button
-          class="menubar__button"
-          size="small"
-          :ghost="!isActive.heading({ level: 3 })"
-          @click.prevent="commands.heading({ level: 3 })"
-        >
-          H3
-        </ds-button>
-
-        <ds-button
-          class="menubar__button"
-          size="small"
-          :ghost="!isActive.heading({ level: 4 })"
-          @click.prevent="commands.heading({ level: 4 })"
-        >
-          H4
-        </ds-button>
-
-        <ds-button
-          class="menubar__button"
-          size="small"
-          :ghost="!isActive.bullet_list()"
-          @click.prevent="commands.bullet_list()"
-        >
-          <ds-icon name="list-ul" />
-        </ds-button>
-
-        <ds-button
-          class="menubar__button"
-          size="small"
-          :ghost="!isActive.ordered_list()"
-          @click.prevent="commands.ordered_list()"
-        >
-          <ds-icon name="list-ol" />
-        </ds-button>
-
-        <ds-button
-          class="menubar__button"
-          size="small"
-          :ghost="!isActive.blockquote()"
-          @click.prevent="commands.blockquote"
-        >
-          <ds-icon name="quote-right" />
-        </ds-button>
-
-        <ds-button
-          class="menubar__button"
-          size="small"
-          :ghost="!isActive.horizontal_rule()"
-          @click.prevent="commands.horizontal_rule"
-        >
-          <ds-icon name="minus" />
-        </ds-button>
-      </div>
-    </editor-floating-menu>
     <editor-content ref="editor" :editor="editor" />
   </div>
 </template>
@@ -184,20 +54,20 @@ import linkify from 'linkify-it'
 import stringHash from 'string-hash'
 import Fuse from 'fuse.js'
 import tippy from 'tippy.js'
-import { Editor, EditorContent, EditorFloatingMenu, EditorMenuBubble } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import EventHandler from './plugins/eventHandler.js'
 import { History } from 'tiptap-extensions'
 import Hashtag from './nodes/Hashtag.js'
 import Mention from './nodes/Mention.js'
 import { mapGetters } from 'vuex'
+import HcMenuBar from './MenuBar'
 
 let throttleInputEvent
 
 export default {
   components: {
     EditorContent,
-    EditorFloatingMenu,
+    HcMenuBar,
-    EditorMenuBubble,
   },
   props: {
     users: { type: Array, default: () => null }, // If 'null', than the Mention extention is not assigned.

webapp/components/Editor/MenuBar.vue

@@ -0,0 +1,78 @@
+<template>
+  <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, getMarkAttrs }">
+    <div>
+      <menu-bar-button
+        :isActive="isActive.bold()"
+        :onClick="commands.bold"
+        icon="bold"
+      ></menu-bar-button>
+
+      <menu-bar-button
+        :isActive="isActive.italic()"
+        :onClick="commands.italic"
+        icon="italic"
+      ></menu-bar-button>
+
+      <!-- <menu-bar-button
+        :isActive="isActive.link()"
+        :onClick="() => showLinkMenu(getMarkAttrs('link'))"
+        icon="link"
+      ></menu-bar-button>-->
+
+      <menu-bar-button
+        :isActive="isActive.paragraph()"
+        :onClick="commands.paragraph"
+        icon="paragraph"
+      ></menu-bar-button>
+
+      <menu-bar-button
+        :isActive="isActive.heading({ level: 3 })"
+        :onClick="() => commands.heading({ level: 3 })"
+        label="H3"
+      ></menu-bar-button>
+
+      <menu-bar-button
+        :isActive="isActive.heading({ level: 4 })"
+        :onClick="() => commands.heading({ level: 4 })"
+        label="H4"
+      ></menu-bar-button>
+
+      <menu-bar-button
+        :isActive="isActive.bullet_list()"
+        :onClick="commands.bullet_list"
+        icon="list-ul"
+      ></menu-bar-button>
+
+      <menu-bar-button
+        :isActive="isActive.ordered_list()"
+        :onClick="commands.ordered_list"
+        icon="list-ol"
+      ></menu-bar-button>
+
+      <menu-bar-button
+        :isActive="isActive.blockquote()"
+        :onClick="commands.blockquote"
+        icon="quote-right"
+      ></menu-bar-button>
+
+      <menu-bar-button
+        :isActive="isActive.horizontal_rule()"
+        :onClick="commands.horizontal_rule"
+        icon="minus"
+      ></menu-bar-button>
+    </div>
+  </editor-menu-bar>
+</template>
+
+<script>
+import { EditorMenuBar } from 'tiptap'
+import MenuBarButton from './MenuBarButton'
+
+export default {
+  components: {
+    EditorMenuBar,
+    MenuBarButton,
+  },
+  props: ['editor'],
+}
+</script>

webapp/components/Editor/MenuBarButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <ds-button size="small" :ghost="!isActive" @click="onClick" :icon="icon">
+    <span v-if="label">{{ label }}</span>
+  </ds-button>
+</template>
+
+<script>
+export default {
+  props: {
+    isActive: Boolean,
+    icon: String,
+    label: String,
+    onClick: Function,
+  },
+}
+</script>