refactor(extension/bubble-menu): add debounce to bubble menu updates (u…

…eberdosis#3385)

* refactor(extension/bubble-menu): add debounce to bubble menu updates

* fix: change default duration in react bubble menu demo

src/BubbleMenu.tsx

@@ -1,14 +1,13 @@
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
-import React, {
-  useEffect, useState,
-} from 'react'
+import React, { useEffect, useState } from 'react'
 
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
 export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
-  className?: string,
-  children: React.ReactNode
-}
+  className?: string;
+  children: React.ReactNode;
+  delay?: number;
+};
 
 export const BubbleMenu = (props: BubbleMenuProps) => {
   const [element, setElement] = useState<HTMLDivElement | null>(null)
@@ -23,26 +22,21 @@ export const BubbleMenu = (props: BubbleMenuProps) => {
     }
 
     const {
-      pluginKey = 'bubbleMenu',
-      editor,
-      tippyOptions = {},
-      shouldShow = null,
+      pluginKey = 'bubbleMenu', editor, tippyOptions = {}, delay, shouldShow = null,
     } = props
 
     const plugin = BubbleMenuPlugin({
-      pluginKey,
+      delay,
       editor,
       element,
-      tippyOptions,
+      pluginKey,
       shouldShow,
+      tippyOptions,
     })
 
     editor.registerPlugin(plugin)
     return () => editor.unregisterPlugin(pluginKey)
-  }, [
-    props.editor,
-    element,
-  ])
+  }, [props.editor, element])
 
   return (
     <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>