You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.1 KiB
53 lines
1.1 KiB
3 years ago
|
import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
|
||
|
|
import React, {
|
||
|
|
useEffect, useState,
|
||
|
|
} from 'react'
|
||
|
|
|
||
|
|
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
|
||
|
|
|
||
|
|
export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
|
||
|
|
className?: string,
|
||
|
|
children: React.ReactNode
|
||
|
|
}
|
||
|
|
|
||
|
|
export const FloatingMenu = (props: FloatingMenuProps) => {
|
||
|
|
const [element, setElement] = useState<HTMLDivElement | null>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!element) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (props.editor.isDestroyed) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const {
|
||
|
|
pluginKey = 'floatingMenu',
|
||
|
|
editor,
|
||
|
|
tippyOptions = {},
|
||
|
|
shouldShow = null,
|
||
|
|
} = props
|
||
|
|
|
||
|
|
const plugin = FloatingMenuPlugin({
|
||
|
|
pluginKey,
|
||
|
|
editor,
|
||
|
|
element,
|
||
|
|
tippyOptions,
|
||
|
|
shouldShow,
|
||
|
|
})
|
||
|
|
|
||
|
|
editor.registerPlugin(plugin)
|
||
|
|
return () => editor.unregisterPlugin(pluginKey)
|
||
|
|
}, [
|
||
|
|
props.editor,
|
||
|
|
element,
|
||
|
|
])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
|
||
|
|
{props.children}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|