From 2f0acf2f91e9569e8a192210b196b25093a4a023 Mon Sep 17 00:00:00 2001
From: Chrissi2812 <cf@pixel-kraft.de>
Date: Thu, 25 Apr 2019 16:01:27 +0200
Subject: [PATCH] keep menuBubble in bounding box of editor

---
 examples/Components/Routes/MenuBubble/index.vue    |  3 ++-
 packages/tiptap/src/Components/EditorMenuBubble.js |  5 +++++
 packages/tiptap/src/Plugins/MenuBubble.js          | 10 +++++++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index 6a7780b5..30601375 100644
--- 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
index 2d72a3ef..29928375 100644
--- 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
index 0a0235d3..77c72650 100644
--- 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()
   }