mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/ueberdosis/tiptap

Browse Source
This commit is contained in:
Philipp Kühn 2021-12-22 12:27:10 +01:00
commit 4904011216
2 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,6 @@
import React, { useEffect, useRef } from 'react'
import React, {
useEffect, useState,
} from 'react'
import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
@ -8,10 +10,14 @@ export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>,
}
export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
const element = useRef<HTMLDivElement>(null)
const [element, setElement] = useState<HTMLDivElement | null>(null)
useEffect(() => {
if (!element.current) {
if (!element) {
return
}
if (props.editor.isDestroyed) {
return
}
@ -22,24 +28,23 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
shouldShow = null,
} = props
editor.registerPlugin(BubbleMenuPlugin({
const plugin = BubbleMenuPlugin({
pluginKey,
editor,
element: element.current as HTMLElement,
element,
tippyOptions,
shouldShow,
}))
})
return () => {
editor.unregisterPlugin(pluginKey)
}
editor.registerPlugin(plugin)
return () => editor.unregisterPlugin(pluginKey)
}, [
props.editor,
element.current,
element,
])
return (
<div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
<div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
{props.children}
</div>
)

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

@ -1,4 +1,6 @@
import React, { useEffect, useRef } from 'react'
import React, {
useEffect, useState,
} from 'react'
import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
@ -8,10 +10,14 @@ export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKe
}
export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
const element = useRef<HTMLDivElement>(null)
const [element, setElement] = useState<HTMLDivElement | null>(null)
useEffect(() => {
if (!element.current) {
if (!element) {
return
}
if (props.editor.isDestroyed) {
return
}
@ -22,24 +28,23 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
shouldShow = null,
} = props
editor.registerPlugin(FloatingMenuPlugin({
const plugin = FloatingMenuPlugin({
pluginKey,
editor,
element: element.current as HTMLElement,
element,
tippyOptions,
shouldShow,
}))
})
return () => {
editor.unregisterPlugin(pluginKey)
}
editor.registerPlugin(plugin)
return () => editor.unregisterPlugin(pluginKey)
}, [
props.editor,
element.current,
element,
])
return (
<div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
<div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
{props.children}
</div>
)