From e9465ec0f6921abd428ed27b50596d20edc05b77 Mon Sep 17 00:00:00 2001
From: Tomas Valenta <valenta.and.thomas@gmail.com>
Date: Tue, 12 Oct 2021 11:09:00 +0200
Subject: [PATCH] fix: Add `editor` dependency when registering
 `BubbleMenuPlugin` and `FloatingMenuPlugin` (#2018)

* 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.

* Add `editor` dependency when registering `FloatingMenuPlugin`
---
 packages/react/src/BubbleMenu.tsx   | 7 ++++++-
 packages/react/src/FloatingMenu.tsx | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/BubbleMenu.tsx b/packages/react/src/BubbleMenu.tsx
index 6c3719df..49ebecfe 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' }}>
diff --git a/packages/react/src/FloatingMenu.tsx b/packages/react/src/FloatingMenu.tsx
index d7e1aa1e..f7ca09b7 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' }}>