keep menuBubble in bounding box of editor

ueberdosis · Apr 25, 2019 · 2f0acf2 · 2f0acf2
1 parent e441041
commit 2f0acf2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="editor">
-    <editor-menu-bubble :editor="editor">
+    <editor-menu-bubble :editor="editor" :keepInBounds="keepInBounds">
       <div
         slot-scope="{ commands, isActive, menu }"
         class="menububble"
@@ -69,6 +69,7 @@ export default {
   },
   data() {
     return {
+      keepInBounds: true,
       editor: new Editor({
         extensions: [
           new Blockquote(),

diff --git a/packages/tiptap/src/Components/EditorMenuBubble.js b/packages/tiptap/src/Components/EditorMenuBubble.js
@@ -7,6 +7,10 @@ export default {
       default: null,
       type: Object,
     },
+    keepInBounds: {
+      default: true,
+      type: Boolean,
+    },
   },
 
   data() {
@@ -27,6 +31,7 @@ export default {
           this.$nextTick(() => {
             editor.registerPlugin(MenuBubble({
               element: this.$el,
+              keepInBounds: this.keepInBounds,
               onUpdate: menu => {
                 // the second check ensures event is fired only once
                 if (menu.isActive && this.menu.isActive === false) {

diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -57,6 +57,7 @@ class Menu {
     this.options = {
       ...{
         element: null,
+        keepInBounds: true,
         onUpdate: () => false,
       },
       ...options,
@@ -94,14 +95,17 @@ class Menu {
 
     // The box in which the tooltip is positioned, to use as base
     const box = this.options.element.offsetParent.getBoundingClientRect()
+    const el = this.options.element.getBoundingClientRect()
 
     // Find a center-ish x position from the selection endpoints (when
     // crossing lines, end may be more to the left)
-    const left = Math.max((start.left + end.left) / 2, start.left + 3)
+    const left = ((start.left + end.left) / 2) - box.left
 
+    // Keep the menuBubble in the bounding box of the offsetParent i
+    this.left = Math.round(this.options.keepInBounds
+        ? Math.min(box.width - (el.width / 2), Math.max(left, el.width / 2)) : left)
+    this.bottom = Math.round(box.bottom - start.top)
     this.isActive = true
-    this.left = parseInt(left - box.left, 10)
-    this.bottom = parseInt(box.bottom - start.top, 10)
 
     this.sendUpdate()
   }