Merge branch 'main' of https://github.com/ueberdosis/tiptap

packages/react/src/BubbleMenu.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useRef } from 'react'
+import React, {
+  useEffect, useState,
+} from 'react'
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
@@ -8,10 +10,14 @@ export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>,
 }
 
 export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
-  const element = useRef<HTMLDivElement>(null)
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (!element.current) {
+    if (!element) {
+      return
+    }
+
+    if (props.editor.isDestroyed) {
       return
     }
 
@@ -22,24 +28,23 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
       shouldShow = null,
     } = props
 
-    editor.registerPlugin(BubbleMenuPlugin({
+    const plugin = BubbleMenuPlugin({
       pluginKey,
       editor,
-      element: element.current as HTMLElement,
+      element,
       tippyOptions,
       shouldShow,
-    }))
+    })
 
-    return () => {
+    editor.registerPlugin(plugin)
-      editor.unregisterPlugin(pluginKey)
+    return () => editor.unregisterPlugin(pluginKey)
-    }
   }, [
     props.editor,
-    element.current,
+    element,
   ])
 
   return (
-    <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
+    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
       {props.children}
     </div>
   )

packages/react/src/FloatingMenu.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useRef } from 'react'
+import React, {
+  useEffect, useState,
+} from 'react'
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
@@ -8,10 +10,14 @@ export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKe
 }
 
 export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
-  const element = useRef<HTMLDivElement>(null)
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (!element.current) {
+    if (!element) {
+      return
+    }
+
+    if (props.editor.isDestroyed) {
       return
     }
 
@@ -22,24 +28,23 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
       shouldShow = null,
     } = props
 
-    editor.registerPlugin(FloatingMenuPlugin({
+    const plugin = FloatingMenuPlugin({
       pluginKey,
       editor,
-      element: element.current as HTMLElement,
+      element,
       tippyOptions,
       shouldShow,
-    }))
+    })
 
-    return () => {
+    editor.registerPlugin(plugin)
-      editor.unregisterPlugin(pluginKey)
+    return () => editor.unregisterPlugin(pluginKey)
-    }
   }, [
     props.editor,
-    element.current,
+    element,
   ])
 
   return (
-    <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
+    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
       {props.children}
     </div>
   )