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

@@ -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' }}>

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