add menububble react component

This commit is contained in:
Philipp Kühn
2021-03-31 10:21:34 +02:00
parent 0bdac219f5
commit 6f5a96d2e5
4 changed files with 52 additions and 2 deletions

View File

@@ -0,0 +1,28 @@
import React, { useEffect, useRef } from 'react'
import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
export type BubbleMenuProps = Omit<BubbleMenuPluginProps, 'element'>
export const BubbleMenu: React.FC<BubbleMenuProps> = (props) => {
const element = useRef<HTMLDivElement>(null)
useEffect(() => {
const { editor, keepInBounds } = props
editor.registerPlugin(BubbleMenuPlugin({
editor,
element: element.current as HTMLElement,
keepInBounds,
}))
return () => {
editor.unregisterPlugin(BubbleMenuPluginKey)
}
}, [])
return (
<div ref={element}>
{props.children}
</div>
)
}