mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 17:43:49 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix: Add editor dependency when registering BubbleMenuPlugin and FloatingMenuPlugin (#2018)

Browse Source 
* Add `editor` dependency when registering `BubbleMenuPlugin`

When we are initializing editor via the `useEditor` hook with dependencies the `BubbleMenu` component is only registered the first time the editor is initialized.

Adding editor to the dependency array registering/unregistering the `BubbleMenuPlugin` fixes this. (I tested exactly this code in our project.)

I also added a check that ensures that the menu element referenced via the `useRef` is defined when registering the plugin - otherwise, there is no point in registering the plugin.

* Add `editor` dependency when registering `FloatingMenuPlugin`
This commit is contained in:
Tomas Valenta 2021-10-12 11:09:00 +02:00 committed by GitHub
parent 0e0b0b6a8c
commit e9465ec0f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/react/src/BubbleMenu.tsx
View File

@ -11,6 +11,8 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
const element = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!element.current) return
const {
pluginKey = 'bubbleMenu',
editor,
@ -29,7 +31,10 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
return () => {
editor.unregisterPlugin(pluginKey)
}
}, [])
}, [
props.editor,
element.current,
])
return (
<div ref={element} className={props.className} style={{ visibility: 'hidden' }}>

7
packages/react/src/FloatingMenu.tsx
View File

@ -11,6 +11,8 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
const element = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!element.current) return
const {
pluginKey = 'floatingMenu',
editor,
@ -29,7 +31,10 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
return () => {
editor.unregisterPlugin(pluginKey)
}
}, [])
}, [
props.editor,
element.current,
])
return (
<div ref={element} className={props.className} style={{ visibility: 'hidden' }}>