feat: add tippyOptions prop

packages/extension-bubble-menu/src/bubble-menu-plugin.ts

@@ -1,11 +1,12 @@
 import { Editor, posToClientRect } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
-import tippy, { Instance } from 'tippy.js'
+import tippy, { Instance, Props } from 'tippy.js'
 
 export interface BubbleMenuPluginProps {
   editor: Editor,
   element: HTMLElement,
+  tippyOptions?: Partial<Props>,
 }
 
 export type BubbleMenuViewProps = BubbleMenuPluginProps & {
@@ -23,14 +24,19 @@ export class BubbleMenuView {
 
   public tippy!: Instance
 
-  constructor({ editor, element, view }: BubbleMenuViewProps) {
+  constructor({
+    editor,
+    element,
+    view,
+    tippyOptions,
+  }: BubbleMenuViewProps) {
     this.editor = editor
     this.element = element
     this.view = view
     this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
     this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
-    this.createTooltip()
+    this.createTooltip(tippyOptions)
     this.element.style.visibility = 'visible'
   }
 
@@ -60,7 +66,7 @@ export class BubbleMenuView {
     this.hide()
   }
 
-  createTooltip() {
+  createTooltip(options: Partial<Props> = {}) {
     this.tippy = tippy(this.view.dom, {
       duration: 0,
       getReferenceClientRect: null,
@@ -69,6 +75,7 @@ export class BubbleMenuView {
       trigger: 'manual',
       placement: 'top',
       hideOnClick: 'toggle',
+      ...options,
     })
   }
 

packages/extension-bubble-menu/src/bubble-menu.ts

@@ -10,6 +10,7 @@ export const BubbleMenu = Extension.create<BubbleMenuOptions>({
 
   defaultOptions: {
     element: null,
+    tippyOptions: {},
   },
 
   addProseMirrorPlugins() {
@@ -21,6 +22,7 @@ export const BubbleMenu = Extension.create<BubbleMenuOptions>({
       BubbleMenuPlugin({
         editor: this.editor,
         element: this.options.element,
+        tippyOptions: this.options.tippyOptions,
       }),
     ]
   },

packages/extension-floating-menu/src/floating-menu-plugin.ts

@@ -1,11 +1,12 @@
 import { Editor, isNodeEmpty, posToClientRect } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
-import tippy, { Instance } from 'tippy.js'
+import tippy, { Instance, Props } from 'tippy.js'
 
 export interface FloatingMenuPluginProps {
   editor: Editor,
   element: HTMLElement,
+  tippyOptions?: Partial<Props>,
 }
 
 export type FloatingMenuViewProps = FloatingMenuPluginProps & {
@@ -23,14 +24,19 @@ export class FloatingMenuView {
 
   public tippy!: Instance
 
-  constructor({ editor, element, view }: FloatingMenuViewProps) {
+  constructor({
+    editor,
+    element,
+    view,
+    tippyOptions,
+  }: FloatingMenuViewProps) {
     this.editor = editor
     this.element = element
     this.view = view
     this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
     this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
-    this.createTooltip()
+    this.createTooltip(tippyOptions)
     this.element.style.visibility = 'visible'
   }
 
@@ -60,7 +66,7 @@ export class FloatingMenuView {
     this.hide()
   }
 
-  createTooltip() {
+  createTooltip(options: Partial<Props> = {}) {
     this.tippy = tippy(this.view.dom, {
       duration: 0,
       getReferenceClientRect: null,
@@ -69,6 +75,7 @@ export class FloatingMenuView {
       trigger: 'manual',
       placement: 'right',
       hideOnClick: 'toggle',
+      ...options,
     })
   }
 

packages/extension-floating-menu/src/floating-menu.ts

@@ -10,6 +10,7 @@ export const FloatingMenu = Extension.create<FloatingMenuOptions>({
 
   defaultOptions: {
     element: null,
+    tippyOptions: {},
   },
 
   addProseMirrorPlugins() {
@@ -21,6 +22,7 @@ export const FloatingMenu = Extension.create<FloatingMenuOptions>({
       FloatingMenuPlugin({
         editor: this.editor,
         element: this.options.element,
+        tippyOptions: this.options.tippyOptions,
       }),
     ]
   },

packages/react/src/BubbleMenu.tsx

@@ -9,11 +9,12 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
   const element = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const { editor } = props
+    const { editor, tippyOptions } = props
 
     editor.registerPlugin(BubbleMenuPlugin({
       editor,
       element: element.current as HTMLElement,
+      tippyOptions,
     }))
 
     return () => {

packages/react/src/FloatingMenu.tsx

@@ -9,11 +9,12 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
   const element = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const { editor } = props
+    const { editor, tippyOptions } = props
 
     editor.registerPlugin(FloatingMenuPlugin({
       editor,
       element: element.current as HTMLElement,
+      tippyOptions,
     }))
 
     return () => {

packages/vue-2/src/BubbleMenu.ts

@@ -9,6 +9,11 @@ export const BubbleMenu = Vue.extend({
       type: Object as PropType<BubbleMenuPluginProps['editor']>,
       required: true,
     },
+
+    tippyOptions: {
+      type: Object as PropType<BubbleMenuPluginProps['tippyOptions']>,
+      default: () => ({}),
+    },
   },
 
   watch: {
@@ -23,6 +28,7 @@ export const BubbleMenu = Vue.extend({
           editor.registerPlugin(BubbleMenuPlugin({
             editor,
             element: this.$el as HTMLElement,
+            tippyOptions: this.tippyOptions,
           }))
         })
       },

packages/vue-2/src/FloatingMenu.ts

@@ -9,6 +9,11 @@ export const FloatingMenu = Vue.extend({
       type: Object as PropType<FloatingMenuPluginProps['editor']>,
       required: true,
     },
+
+    tippyOptions: {
+      type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
+      default: () => ({}),
+    },
   },
 
   watch: {
@@ -23,6 +28,7 @@ export const FloatingMenu = Vue.extend({
           editor.registerPlugin(FloatingMenuPlugin({
             editor,
             element: this.$el as HTMLElement,
+            tippyOptions: this.tippyOptions,
           }))
         })
       },

packages/vue-3/src/BubbleMenu.ts

@@ -20,15 +20,21 @@ export const BubbleMenu = defineComponent({
       type: Object as PropType<BubbleMenuPluginProps['editor']>,
       required: true,
     },
+
+    tippyOptions: {
+      type: Object as PropType<BubbleMenuPluginProps['tippyOptions']>,
+      default: () => ({}),
+    },
   },
 
-  setup({ editor }, { slots }) {
+  setup({ editor, tippyOptions }, { slots }) {
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
       editor.registerPlugin(BubbleMenuPlugin({
         editor,
         element: root.value as HTMLElement,
+        tippyOptions,
       }))
     })
 

packages/vue-3/src/FloatingMenu.ts

@@ -20,15 +20,21 @@ export const FloatingMenu = defineComponent({
       type: Object as PropType<FloatingMenuPluginProps['editor']>,
       required: true,
     },
+
+    tippyOptions: {
+      type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
+      default: () => ({}),
+    },
   },
 
-  setup({ editor }, { slots }) {
+  setup({ editor, tippyOptions }, { slots }) {
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
       editor.registerPlugin(FloatingMenuPlugin({
         editor,
         element: root.value as HTMLElement,
+        tippyOptions,
       }))
     })