From 0bb5ab6d9b33ecce7f3324daabd27b4e4f8f769c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 12 Jun 2019 21:25:42 +0200
Subject: [PATCH] add resizeobserver to floating menu, fix #358

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

diff --git a/packages/tiptap/src/Plugins/FloatingMenu.js b/packages/tiptap/src/Plugins/FloatingMenu.js
index ed58a6205..7923d8ad7 100644
--- a/packages/tiptap/src/Plugins/FloatingMenu.js
+++ b/packages/tiptap/src/Plugins/FloatingMenu.js
@@ -5,6 +5,7 @@ class Menu {
   constructor({ options, editorView }) {
     this.options = {
       ...{
+        resizeObserver: true,
         element: null,
         onUpdate: () => false,
       },
@@ -20,9 +21,21 @@ class Menu {
     this.options.editor.on('focus', ({ view }) => {
       this.update(view)
     })
+
     this.options.editor.on('blur', ({ event }) => {
       this.hide(event)
     })
+
+    // sometimes we have to update the position
+    // because of a loaded images for example
+    if (this.options.resizeObserver && ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.isActive) {
+          this.update(this.editorView)
+        }
+      })
+      this.resizeObserver.observe(this.editorView.dom)
+    }
   }
 
   handleClick(event) {
@@ -81,6 +94,10 @@ class Menu {
 
   destroy() {
     this.options.element.removeEventListener('mousedown', this.handleClick)
+
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.editorView.dom)
+    }
   }
 
 }