From f490ca1469c8d8b972cf148b9a6be494a592e7b3 Mon Sep 17 00:00:00 2001
From: Chrissi2812 <cf@pixel-kraft.de>
Date: Thu, 7 Mar 2019 18:13:19 +0100
Subject: [PATCH 1/4] fix menububble position

---
 packages/tiptap/src/Plugins/MenuBubble.js | 49 ++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
index 95510b7796b..2c80c4f41a6 100644
--- a/packages/tiptap/src/Plugins/MenuBubble.js
+++ b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -1,4 +1,49 @@
 import { Plugin } from 'prosemirror-state'
+import { textRange } from 'prosemirror-view/src/dom'
+
+function singleRect(object, bias) {
+  const rects = object.getClientRects()
+  return !rects.length ? object.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1]
+}
+
+function coordsAtPos(view, pos, end = false) {
+  const { node, offset } = view.docView.domFromPos(pos)
+  let side
+  let rect
+  if (node.nodeType === 3) {
+    if (end && offset < node.nodeValue.length) {
+      rect = singleRect(textRange(node, offset - 1, offset), -1)
+      side = 'right'
+    } else if (offset < node.nodeValue.length) {
+      rect = singleRect(textRange(node, offset, offset + 1), -1)
+      side = 'left'
+    }
+  } else if (node.firstChild) {
+    if (offset < node.childNodes.length) {
+      const child = node.childNodes[offset]
+      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, -1)
+      side = 'left'
+    }
+    if ((!rect || rect.top === rect.bottom) && offset) {
+      const child = node.childNodes[offset - 1]
+      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, 1)
+      side = 'right'
+    }
+  } else {
+    rect = node.getBoundingClientRect()
+    side = 'left'
+  }
+
+  const x = rect[side]
+
+  return {
+    top: rect.top,
+    bottom: rect.bottom,
+    left: x,
+    right: x,
+  }
+}
+
 
 class Menu {
 
@@ -36,8 +81,8 @@ class Menu {
     const { from, to } = state.selection
 
     // These are in screen coordinates
-    const start = view.coordsAtPos(from)
-    const end = view.coordsAtPos(to)
+    const start = coordsAtPos(view, from)
+    const end = coordsAtPos(view, to, true)
 
     // The box in which the tooltip is positioned, to use as base
     const box = this.options.element.offsetParent.getBoundingClientRect()

From 8ddc0c016af9ccbda487e460a60202d864524c7a Mon Sep 17 00:00:00 2001
From: Chrissi2812 <cf@pixel-kraft.de>
Date: Thu, 7 Mar 2019 18:15:45 +0100
Subject: [PATCH 2/4] add note why we had to use our own cordsAtPos
 implementation

---
 packages/tiptap/src/Plugins/MenuBubble.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
index 2c80c4f41a6..e003d37de9e 100644
--- a/packages/tiptap/src/Plugins/MenuBubble.js
+++ b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -81,6 +81,8 @@ class Menu {
     const { from, to } = state.selection
 
     // These are in screen coordinates
+    // We can't use EditorView.cordsAtPos here because it can't handle linebreaks correctly
+    // See: https://github.com/ProseMirror/prosemirror-view/pull/47
     const start = coordsAtPos(view, from)
     const end = coordsAtPos(view, to, true)
 

From e441041860da82ebc4bc5e7554a7f7735b54cedd Mon Sep 17 00:00:00 2001
From: Chrissi2812 <cf@pixel-kraft.de>
Date: Thu, 7 Mar 2019 18:28:27 +0100
Subject: [PATCH 3/4] fix travis-ci: copied textRange function from
 prosemirror-view

---
 packages/tiptap/src/Plugins/MenuBubble.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
index e003d37de9e..0a0235d37d5 100644
--- a/packages/tiptap/src/Plugins/MenuBubble.js
+++ b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -1,5 +1,11 @@
 import { Plugin } from 'prosemirror-state'
-import { textRange } from 'prosemirror-view/src/dom'
+
+function textRange(node, from, to) {
+  const range = document.createRange()
+  range.setEnd(node, to == null ? node.nodeValue.length : to)
+  range.setStart(node, from || 0)
+  return range
+}
 
 function singleRect(object, bias) {
   const rects = object.getClientRects()

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 4/4] 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 6a7780b5981..30601375134 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 2d72a3ef06c..2992837550d 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 0a0235d37d5..77c726502cd 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()
   }