From c7c4a359c7b6674c622efde85913fb4fcc0e4439 Mon Sep 17 00:00:00 2001
From: Tomas Valenta <valenta.and.thomas@gmail.com>
Date: Mon, 11 Oct 2021 12:48:00 +0200
Subject: [PATCH 1/2] Add `editor` dependency when registering
 `BubbleMenuPlugin`

When we are initializing editor via the `useEditor` hook with dependencies the `BubbleMenu` component is only registered the first time the editor is initialized.

Adding editor to the dependency array registering/unregistering the `BubbleMenuPlugin` fixes this. (I tested exactly this code in our project.)

I also added a check that ensures that the menu element referenced via the `useRef` is defined when registering the plugin - otherwise, there is no point in registering the plugin.
---
 packages/react/src/BubbleMenu.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/BubbleMenu.tsx b/packages/react/src/BubbleMenu.tsx
index 6c3719dfed7..49ebecfee82 100644
--- a/packages/react/src/BubbleMenu.tsx
+++ b/packages/react/src/BubbleMenu.tsx
@@ -11,6 +11,8 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
   const element = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
+    if (!element.current) return
+
     const {
       pluginKey = 'bubbleMenu',
       editor,
@@ -29,7 +31,10 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
     return () => {
       editor.unregisterPlugin(pluginKey)
     }
-  }, [])
+  }, [
+    props.editor,
+    element.current,
+  ])
 
   return (
     <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>

From 1830069fe43dc37b9f5e77b1679c654f54483c28 Mon Sep 17 00:00:00 2001
From: Tomas Valenta <valenta.and.thomas@gmail.com>
Date: Tue, 12 Oct 2021 02:31:56 +0200
Subject: [PATCH 2/2] Add `editor` dependency when registering
 `FloatingMenuPlugin`

---
 packages/react/src/FloatingMenu.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/FloatingMenu.tsx b/packages/react/src/FloatingMenu.tsx
index d7e1aa1ec02..f7ca09b7a9b 100644
--- a/packages/react/src/FloatingMenu.tsx
+++ b/packages/react/src/FloatingMenu.tsx
@@ -11,6 +11,8 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
   const element = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
+    if (!element.current) return
+
     const {
       pluginKey = 'floatingMenu',
       editor,
@@ -29,7 +31,10 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
     return () => {
       editor.unregisterPlugin(pluginKey)
     }
-  }, [])
+  }, [
+    props.editor,
+    element.current,
+  ])
 
   return (
     <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>