From 70a328bd3dea174170ad8e92db4c4f7f9368fd1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 23 Aug 2021 18:44:40 +0200
Subject: [PATCH] fix: make shouldShow and pluginKey option for menus, fix
 #1779

---
 .../extension-bubble-menu/src/bubble-menu-plugin.ts    |  4 ++--
 .../src/floating-menu-plugin.ts                        |  4 ++--
 packages/react/src/BubbleMenu.tsx                      | 10 ++++++----
 packages/react/src/FloatingMenu.tsx                    | 10 ++++++----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
index 90c320bef..91635f2c8 100644
--- a/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
+++ b/packages/extension-bubble-menu/src/bubble-menu-plugin.ts
@@ -13,7 +13,7 @@ export interface BubbleMenuPluginProps {
   editor: Editor,
   element: HTMLElement,
   tippyOptions?: Partial<Props>,
-  shouldShow: ((props: {
+  shouldShow?: ((props: {
     editor: Editor,
     view: EditorView,
     state: EditorState,
@@ -140,7 +140,7 @@ export class BubbleMenuView {
     const from = Math.min(...ranges.map(range => range.$from.pos))
     const to = Math.max(...ranges.map(range => range.$to.pos))
 
-    const shouldShow = this.shouldShow({
+    const shouldShow = this.shouldShow?.({
       editor: this.editor,
       view,
       state,
diff --git a/packages/extension-floating-menu/src/floating-menu-plugin.ts b/packages/extension-floating-menu/src/floating-menu-plugin.ts
index fe0142149..c060edb9c 100644
--- a/packages/extension-floating-menu/src/floating-menu-plugin.ts
+++ b/packages/extension-floating-menu/src/floating-menu-plugin.ts
@@ -8,7 +8,7 @@ export interface FloatingMenuPluginProps {
   editor: Editor,
   element: HTMLElement,
   tippyOptions?: Partial<Props>,
-  shouldShow: ((props: {
+  shouldShow?: ((props: {
     editor: Editor,
     view: EditorView,
     state: EditorState,
@@ -122,7 +122,7 @@ export class FloatingMenuView {
       return
     }
 
-    const shouldShow = this.shouldShow({
+    const shouldShow = this.shouldShow?.({
       editor: this.editor,
       view,
       state,
diff --git a/packages/react/src/BubbleMenu.tsx b/packages/react/src/BubbleMenu.tsx
index 96a8dc39b..6c3719dfe 100644
--- a/packages/react/src/BubbleMenu.tsx
+++ b/packages/react/src/BubbleMenu.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react'
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 
-export type BubbleMenuProps = Omit<BubbleMenuPluginProps, 'element'> & {
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
   className?: string,
 }
 
@@ -10,10 +12,10 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
 
   useEffect(() => {
     const {
-      pluginKey,
+      pluginKey = 'bubbleMenu',
       editor,
-      tippyOptions,
-      shouldShow,
+      tippyOptions = {},
+      shouldShow = null,
     } = props
 
     editor.registerPlugin(BubbleMenuPlugin({
diff --git a/packages/react/src/FloatingMenu.tsx b/packages/react/src/FloatingMenu.tsx
index c5a20e0a2..d7e1aa1ec 100644
--- a/packages/react/src/FloatingMenu.tsx
+++ b/packages/react/src/FloatingMenu.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react'
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 
-export type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
   className?: string,
 }
 
@@ -10,10 +12,10 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
 
   useEffect(() => {
     const {
-      pluginKey,
+      pluginKey = 'floatingMenu',
       editor,
-      tippyOptions,
-      shouldShow,
+      tippyOptions = {},
+      shouldShow = null,
     } = props
 
     editor.registerPlugin(FloatingMenuPlugin({