tiptap/packages/react/src/FloatingMenu.tsx
Philipp Kühn 9ba61c1582
feat: add key option and shouldShow option to menus (fix #1480, fix #1043, fix #1268, fix #1503)
* add key option to bubble menu

* ignore react for now

* add shouldShow option to bubble menu extension

* improve types

* remove BubbleMenuPluginKey

* add key and shouldShow option to floating menu extension

* fix: don’t show floating menu within code block

* docs: add new menu options
2021-08-11 14:37:58 +02:00

38 lines
844 B
TypeScript

import React, { useEffect, useRef } from 'react'
import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
export type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {
className?: string,
}
export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
const element = useRef<HTMLDivElement>(null)
useEffect(() => {
const {
key,
editor,
tippyOptions,
shouldShow,
} = props
editor.registerPlugin(FloatingMenuPlugin({
key,
editor,
element: element.current as HTMLElement,
tippyOptions,
shouldShow,
}))
return () => {
editor.unregisterPlugin(key)
}
}, [])
return (
<div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
{props.children}
</div>
)
}