From e25e1ddd2738553e85d07d6cc9c29b7dfe7f78ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 1 Apr 2021 16:22:02 +0200
Subject: [PATCH] update menus on resize

---
 packages/extension-bubble-menu/src/bubble-menu-plugin.ts  | 8 ++++++++
 .../extension-floating-menu/src/floating-menu-plugin.ts   | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
index 13c46b5a..c6f403cf 100644
--- a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
+++ b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
@@ -45,6 +45,7 @@ export class BubbleMenuView {
     this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
     this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
+    this.editor.on('resize', this.resizeHandler)
     this.render()
   }
 
@@ -57,6 +58,12 @@ export class BubbleMenuView {
     setTimeout(() => this.update(this.editor.view))
   }
 
+  resizeHandler = () => {
+    if (this.isActive) {
+      this.update(this.editor.view)
+    }
+  }
+
   blurHandler = ({ event }: { event: FocusEvent }) => {
     if (this.preventHide) {
       this.preventHide = false
@@ -137,6 +144,7 @@ export class BubbleMenuView {
     this.element.removeEventListener('mousedown', this.mousedownHandler)
     this.editor.off('focus', this.focusHandler)
     this.editor.off('blur', this.blurHandler)
+    this.editor.off('resize', this.resizeHandler)
   }
 }
 
diff --git a/packages/extension-floating-menu/src/floating-menu-plugin.ts b/packages/extension-floating-menu/src/floating-menu-plugin.ts
index 98e3dad3..bdc3700a 100644
--- a/packages/extension-floating-menu/src/floating-menu-plugin.ts
+++ b/packages/extension-floating-menu/src/floating-menu-plugin.ts
@@ -37,6 +37,7 @@ export class FloatingMenuView {
     this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
     this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
+    this.editor.on('resize', this.resizeHandler)
     this.render()
   }
 
@@ -49,6 +50,12 @@ export class FloatingMenuView {
     setTimeout(() => this.update(this.editor.view))
   }
 
+  resizeHandler = () => {
+    if (this.isActive) {
+      this.update(this.editor.view)
+    }
+  }
+
   blurHandler = ({ event }: { event: FocusEvent }) => {
     if (this.preventHide) {
       this.preventHide = false
@@ -120,6 +127,7 @@ export class FloatingMenuView {
     this.element.removeEventListener('mousedown', this.mousedownHandler)
     this.editor.off('focus', this.focusHandler)
     this.editor.off('blur', this.blurHandler)
+    this.editor.off('resize', this.resizeHandler)
   }
 }