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-04-01 18:12:23 +08:00
|
|
|
const left = (start.left + end.left) / 2 - parentBox.left - box.width / 2
|
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-04-01 18:12:23 +08:00
|
|
|
? Math.min(
|
|
|
|
parentBox.width - box.width,
|
|
|
|
Math.max(
|
|
|
|
left,
|
|
|
|
0,
|
|
|
|
),
|
|
|
|
)
|
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',
|
2021-03-31 17:13:09 +08:00
|
|
|
zIndex: 1,
|
2021-03-30 18:13:55 +08:00
|
|
|
visibility: this.isActive ? 'visible' : 'hidden',
|
|
|
|
opacity: this.isActive ? 1 : 0,
|
|
|
|
left: `${this.left}px`,
|
|
|
|
// top: `${this.top}px`,
|
|
|
|
bottom: `${this.bottom}px`,
|
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
|
|
|
})
|
|
|
|
}
|