From 656e117f2dcb4672399b61a63f12a50405ceaa05 Mon Sep 17 00:00:00 2001
From: Brian Kimball <bvkimball@gmail.com>
Date: Mon, 18 Mar 2019 10:00:08 -0400
Subject: [PATCH 1/2] fix(MenuBubble): MenuBubble doesn't update position when
 it resizes fix(MenuBubble): MenuBubble doesn't stay within bounding box of
 editor

---
 packages/tiptap/src/Plugins/MenuBubble.js | 48 ++++++++++++++++-------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
index 95510b7796..b466e1c1b6 100644
--- a/packages/tiptap/src/Plugins/MenuBubble.js
+++ b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -16,22 +16,20 @@ class Menu {
     this.bottom = 0
 
     this.editorView.dom.addEventListener('blur', this.hide.bind(this))
+    this.startObservingSize()
   }
 
-  update(view, lastState) {
-    const { state } = view
-
-    // Don't do anything if the document/selection didn't change
-    if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
-      return
-    }
+  startObservingSize() {
+    if(window && window.ResizeObserver)
+      this.observer = new ResizeObserver(() => this.reposition(this.editorView)).observe(this.options.element)
+  }
 
-    // Hide the tooltip if the selection is empty
-    if (state.selection.empty) {
-      this.hide()
-      return
-    }
+  stopObservingSize() {
+    this.observer && this.observer.unobserve(this.options.element)
+  }
 
+  reposition(view) {
+    const { state } = view
     // Otherwise, reposition it and update its content
     const { from, to } = state.selection
 
@@ -41,14 +39,33 @@ 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)
-
-    this.isActive = true
+    const left = Math.max((start.left + end.left) / 2, start.left + 3, el.width / 2)
+    // console.log(`${left} - ${box.left} > ${el.width} / 2`, left - box.left, el.width / 2)
     this.left = parseInt(left - box.left, 10)
     this.bottom = parseInt(box.bottom - start.top, 10)
+    this.sendUpdate()
+  }
+
+  update(view, lastState) {
+    const { state } = view
+
+    // Don't do anything if the document/selection didn't change
+    if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
+      return
+    }
+
+    // Hide the tooltip if the selection is empty
+    if (state.selection.empty) {
+      this.hide()
+      return
+    }
+
+    this.reposition(view)
+    this.isActive = true
 
     this.sendUpdate()
   }
@@ -71,6 +88,7 @@ class Menu {
   }
 
   destroy() {
+    this.stopObservingSize()
     this.editorView.dom.removeEventListener('blur', this.hide)
   }
 

From ffbd1fb94a0b0f46c4b42e857b739e18d916e0cf Mon Sep 17 00:00:00 2001
From: Brian Kimball <bvkimball@gmail.com>
Date: Mon, 18 Mar 2019 10:26:15 -0400
Subject: [PATCH 2/2] fix duplicate sendUpdate calls removed

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

diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
index b466e1c1b6..db90d2c23e 100644
--- a/packages/tiptap/src/Plugins/MenuBubble.js
+++ b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -21,7 +21,11 @@ class Menu {
 
   startObservingSize() {
     if(window && window.ResizeObserver)
-      this.observer = new ResizeObserver(() => this.reposition(this.editorView)).observe(this.options.element)
+      this.observer = new ResizeObserver(() => {
+        this.reposition(this.editorView)
+        this.sendUpdate()
+      })
+      this.observer.observe(this.options.element)
   }
 
   stopObservingSize() {
@@ -47,7 +51,6 @@ class Menu {
     // console.log(`${left} - ${box.left} > ${el.width} / 2`, left - box.left, el.width / 2)
     this.left = parseInt(left - box.left, 10)
     this.bottom = parseInt(box.bottom - start.top, 10)
-    this.sendUpdate()
   }
 
   update(view, lastState) {