From 1a7aa2505716119773a885cccab5804e37338627 Mon Sep 17 00:00:00 2001
From: Dominik <6538827+bdbch@users.noreply.github.com>
Date: Fri, 4 Nov 2022 16:39:41 +0100
Subject: [PATCH] refactor(extension/bubble-menu): add debounce to bubble menu
 updates (#3385)

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

* fix: change default duration in react bubble menu demo
---
 src/BubbleMenu.tsx | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/BubbleMenu.tsx b/src/BubbleMenu.tsx
index eb7f82ac5..1d15a78a9 100644
--- a/src/BubbleMenu.tsx
+++ b/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' }}>