tiptap/packages/extension-bubble-menu/src/bubble-menu-plugin.ts

146 lines
3.3 KiB
TypeScript
Raw Normal View History

2021-03-30 17:36:51 +08:00
import { Editor } from '@tiptap/core'
import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view'
2021-03-30 18:13:55 +08:00
import { coordsAtPos } from './helpers'
2021-03-30 17:36:51 +08:00
2021-03-30 20:07:18 +08:00
export interface BubbleMenuPluginProps {
2021-03-30 18:45:56 +08:00
editor: Editor,
element: HTMLElement,
keepInBounds: boolean,
2021-03-30 17:36:51 +08:00
}
2021-03-31 16:22:54 +08:00
export type BubbleMenuViewProps = BubbleMenuPluginProps & {
2021-03-30 18:45:56 +08:00
view: EditorView,
}
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
export class BubbleMenuView {
public editor: Editor
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
public element: HTMLElement
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
public keepInBounds = true
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
public view: EditorView
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
public isActive = false
2021-03-30 17:36:51 +08:00
2021-03-30 18:56:23 +08:00
public top = 0
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
public bottom = 0
2021-03-30 18:13:55 +08:00
2021-03-30 18:56:23 +08:00
public left = 0
2021-03-30 18:13:55 +08:00
2021-03-30 18:45:56 +08:00
public preventHide = false
constructor({
editor,
element,
keepInBounds,
view,
2021-03-31 16:22:54 +08:00
}: BubbleMenuViewProps) {
2021-03-30 18:45:56 +08:00
this.editor = editor
this.element = element
this.keepInBounds = keepInBounds
this.view = view
this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
this.editor.on('focus', this.focusHandler)
this.editor.on('blur', this.blurHandler)
2021-03-30 18:13:55 +08:00
this.render()
2021-03-30 17:36:51 +08:00
}
2021-03-30 18:45:56 +08:00
mousedownHandler = () => {
this.preventHide = true
}
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
focusHandler = () => {
2021-03-31 16:58:05 +08:00
// we use `setTimeout` to make sure `selection` is already updated
setTimeout(() => this.update(this.editor.view))
2021-03-30 18:45:56 +08:00
}
2021-03-30 17:36:51 +08:00
2021-03-30 18:45:56 +08:00
blurHandler = ({ event }: { event: FocusEvent }) => {
if (this.preventHide) {
this.preventHide = false
2021-03-30 18:56:23 +08:00
2021-03-30 18:45:56 +08:00
return
}
2021-03-30 17:36:51 +08:00
2021-03-30 18:56:23 +08:00
if (
event?.relatedTarget
&& this.element.parentNode?.contains(event.relatedTarget as Node)
) {
return
}
this.hide()
2021-03-30 18:45:56 +08:00
}
2021-03-30 17:36:51 +08:00
2021-03-30 18:13:55 +08:00
update(view: EditorView, oldState?: EditorState) {
const { state, composing } = view
const { doc, selection } = state
2021-03-31 16:58:05 +08:00
const isSame = oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection)
2021-03-30 17:36:51 +08:00
2021-03-31 16:58:05 +08:00
if (composing || isSame) {
2021-03-30 17:36:51 +08:00
return
}
2021-03-30 18:13:55 +08:00
const { from, to, empty } = selection
2021-03-30 18:56:23 +08:00
const parent = this.element.offsetParent
2021-03-30 17:36:51 +08:00
2021-03-30 18:56:23 +08:00
if (empty || !parent) {
2021-03-30 17:36:51 +08:00
this.hide()
2021-03-30 18:13:55 +08:00
2021-03-30 17:36:51 +08:00
return
}
const start = coordsAtPos(view, from)
const end = coordsAtPos(view, to, true)
2021-03-30 18:13:55 +08:00
const parentBox = parent.getBoundingClientRect()
2021-03-30 18:45:56 +08:00
const box = this.element.getBoundingClientRect()
2021-03-30 18:13:55 +08:00
const left = (start.left + end.left) / 2 - parentBox.left
2021-03-30 17:36:51 +08:00
2021-03-30 18:56:23 +08:00
this.isActive = true
this.top = Math.round(end.bottom - parentBox.top)
this.bottom = Math.round(parentBox.bottom - start.top)
2021-03-30 17:36:51 +08:00
this.left = Math.round(
2021-03-30 18:45:56 +08:00
this.keepInBounds
2021-03-30 18:13:55 +08:00
? Math.min(parentBox.width - box.width / 2, Math.max(left, box.width / 2))
2021-03-30 17:36:51 +08:00
: left,
)
2021-03-30 18:13:55 +08:00
this.render()
2021-03-30 17:36:51 +08:00
}
2021-03-30 18:13:55 +08:00
render() {
2021-03-30 18:45:56 +08:00
Object.assign(this.element.style, {
2021-03-30 18:13:55 +08:00
position: 'absolute',
zIndex: 1000,
visibility: this.isActive ? 'visible' : 'hidden',
opacity: this.isActive ? 1 : 0,
left: `${this.left}px`,
// top: `${this.top}px`,
bottom: `${this.bottom}px`,
transform: 'translateX(-50%)',
2021-03-30 17:36:51 +08:00
})
}
2021-03-30 18:56:23 +08:00
hide() {
2021-03-30 17:36:51 +08:00
this.isActive = false
2021-03-30 18:13:55 +08:00
this.render()
2021-03-30 17:36:51 +08:00
}
destroy() {
2021-03-30 18:45:56 +08:00
this.element.removeEventListener('mousedown', this.mousedownHandler)
this.editor.off('focus', this.focusHandler)
this.editor.off('blur', this.blurHandler)
2021-03-30 17:36:51 +08:00
}
}
2021-03-30 18:56:23 +08:00
export const BubbleMenuPluginKey = new PluginKey('menuBubble')
2021-03-30 20:07:18 +08:00
export const BubbleMenuPlugin = (options: BubbleMenuPluginProps) => {
2021-03-30 17:36:51 +08:00
return new Plugin({
2021-03-30 18:56:23 +08:00
key: BubbleMenuPluginKey,
2021-03-30 18:45:56 +08:00
view: view => new BubbleMenuView({ view, ...options }),
2021-03-30 17:36:51 +08:00
})
}