update menus on resize

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)
   }
 }
 

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)
   }
 }