2021-06-16 01:06:26 +08:00
|
|
|
import {
|
|
|
|
Editor,
|
|
|
|
posToDOMRect,
|
|
|
|
isTextSelection,
|
|
|
|
isNodeSelection,
|
|
|
|
} from '@tiptap/core'
|
2021-03-30 17:36:51 +08:00
|
|
|
import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
|
|
|
|
import { EditorView } from 'prosemirror-view'
|
2021-04-16 18:42:56 +08:00
|
|
|
import tippy, { Instance, Props } from 'tippy.js'
|
2021-03-30 17:36:51 +08:00
|
|
|
|
2021-03-30 20:07:18 +08:00
|
|
|
export interface BubbleMenuPluginProps {
|
2021-08-11 20:37:58 +08:00
|
|
|
key: PluginKey | string,
|
2021-03-30 18:45:56 +08:00
|
|
|
editor: Editor,
|
|
|
|
element: HTMLElement,
|
2021-04-16 18:42:56 +08:00
|
|
|
tippyOptions?: Partial<Props>,
|
2021-08-11 20:37:58 +08:00
|
|
|
shouldShow: ((props: {
|
|
|
|
editor: Editor,
|
|
|
|
view: EditorView,
|
|
|
|
state: EditorState,
|
|
|
|
oldState?: EditorState,
|
|
|
|
from: number,
|
|
|
|
to: number,
|
|
|
|
}) => boolean) | null,
|
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 view: EditorView
|
2021-03-30 17:36:51 +08:00
|
|
|
|
2021-03-30 18:45:56 +08:00
|
|
|
public preventHide = false
|
|
|
|
|
2021-08-13 00:03:45 +08:00
|
|
|
public tippy: Instance | undefined
|
2021-04-10 04:42:09 +08:00
|
|
|
|
2021-08-11 20:37:58 +08:00
|
|
|
public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ state, from, to }) => {
|
|
|
|
const { doc, selection } = state
|
|
|
|
const { empty } = selection
|
|
|
|
|
|
|
|
// Sometime check for `empty` is not enough.
|
|
|
|
// Doubleclick an empty paragraph returns a node size of 2.
|
|
|
|
// So we check also for an empty text size.
|
|
|
|
const isEmptyTextBlock = !doc.textBetween(from, to).length
|
|
|
|
&& isTextSelection(state.selection)
|
|
|
|
|
|
|
|
if (empty || isEmptyTextBlock) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
|
2021-04-16 18:42:56 +08:00
|
|
|
constructor({
|
|
|
|
editor,
|
|
|
|
element,
|
|
|
|
view,
|
|
|
|
tippyOptions,
|
2021-08-11 20:37:58 +08:00
|
|
|
shouldShow,
|
2021-04-16 18:42:56 +08:00
|
|
|
}: BubbleMenuViewProps) {
|
2021-03-30 18:45:56 +08:00
|
|
|
this.editor = editor
|
|
|
|
this.element = element
|
|
|
|
this.view = view
|
2021-08-11 20:37:58 +08:00
|
|
|
|
|
|
|
if (shouldShow) {
|
|
|
|
this.shouldShow = shouldShow
|
|
|
|
}
|
|
|
|
|
2021-03-30 18:45:56 +08:00
|
|
|
this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
|
2021-06-15 00:28:27 +08:00
|
|
|
this.view.dom.addEventListener('dragstart', this.dragstartHandler)
|
2021-03-30 18:45:56 +08:00
|
|
|
this.editor.on('focus', this.focusHandler)
|
|
|
|
this.editor.on('blur', this.blurHandler)
|
2021-04-10 04:42:09 +08:00
|
|
|
this.element.style.visibility = 'visible'
|
2021-08-13 00:03:45 +08:00
|
|
|
|
|
|
|
// We create tippy asynchronously to make sure that `editor.options.element`
|
|
|
|
// has already been moved to the right position in the DOM
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
this.createTooltip(tippyOptions)
|
|
|
|
})
|
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-06-15 00:28:27 +08:00
|
|
|
dragstartHandler = () => {
|
|
|
|
this.hide()
|
|
|
|
}
|
|
|
|
|
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-04-16 18:42:56 +08:00
|
|
|
createTooltip(options: Partial<Props> = {}) {
|
2021-08-13 00:03:45 +08:00
|
|
|
this.tippy = tippy(this.editor.options.element, {
|
2021-04-10 04:42:09 +08:00
|
|
|
duration: 0,
|
|
|
|
getReferenceClientRect: null,
|
|
|
|
content: this.element,
|
|
|
|
interactive: true,
|
|
|
|
trigger: 'manual',
|
|
|
|
placement: 'top',
|
|
|
|
hideOnClick: 'toggle',
|
2021-04-16 18:42:56 +08:00
|
|
|
...options,
|
2021-04-10 04:42:09 +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-05-06 15:54:35 +08:00
|
|
|
// support for CellSelections
|
2021-08-11 20:37:58 +08:00
|
|
|
const { ranges } = selection
|
2021-05-06 15:54:35 +08:00
|
|
|
const from = Math.min(...ranges.map(range => range.$from.pos))
|
|
|
|
const to = Math.max(...ranges.map(range => range.$to.pos))
|
2021-04-22 05:38:13 +08:00
|
|
|
|
2021-08-11 20:37:58 +08:00
|
|
|
const shouldShow = this.shouldShow({
|
|
|
|
editor: this.editor,
|
|
|
|
view,
|
|
|
|
state,
|
|
|
|
oldState,
|
|
|
|
from,
|
|
|
|
to,
|
|
|
|
})
|
2021-06-15 00:58:10 +08:00
|
|
|
|
2021-08-11 20:37:58 +08:00
|
|
|
if (!shouldShow) {
|
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
|
|
|
|
}
|
|
|
|
|
2021-08-13 00:03:45 +08:00
|
|
|
this.tippy?.setProps({
|
2021-05-25 02:40:24 +08:00
|
|
|
getReferenceClientRect: () => {
|
2021-08-11 20:37:58 +08:00
|
|
|
if (isNodeSelection(state.selection)) {
|
2021-05-25 02:40:24 +08:00
|
|
|
const node = view.nodeDOM(from) as HTMLElement
|
|
|
|
|
|
|
|
if (node) {
|
|
|
|
return node.getBoundingClientRect()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return posToDOMRect(view, from, to)
|
|
|
|
},
|
2021-04-10 04:42:09 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
this.show()
|
2021-03-30 17:36:51 +08:00
|
|
|
}
|
|
|
|
|
2021-04-10 04:42:09 +08:00
|
|
|
show() {
|
2021-08-13 00:03:45 +08:00
|
|
|
this.tippy?.show()
|
2021-03-30 17:36:51 +08:00
|
|
|
}
|
|
|
|
|
2021-03-30 18:56:23 +08:00
|
|
|
hide() {
|
2021-08-13 00:03:45 +08:00
|
|
|
this.tippy?.hide()
|
2021-03-30 17:36:51 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
destroy() {
|
2021-08-13 00:03:45 +08:00
|
|
|
this.tippy?.destroy()
|
2021-03-30 18:45:56 +08:00
|
|
|
this.element.removeEventListener('mousedown', this.mousedownHandler)
|
2021-06-15 00:28:27 +08:00
|
|
|
this.view.dom.removeEventListener('dragstart', this.dragstartHandler)
|
2021-03-30 18:45:56 +08:00
|
|
|
this.editor.off('focus', this.focusHandler)
|
|
|
|
this.editor.off('blur', this.blurHandler)
|
2021-03-30 17:36:51 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
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-08-11 20:37:58 +08:00
|
|
|
key: typeof options.key === 'string'
|
|
|
|
? new PluginKey(options.key)
|
|
|
|
: options.key,
|
2021-03-30 18:45:56 +08:00
|
|
|
view: view => new BubbleMenuView({ view, ...options }),
|
2021-03-30 17:36:51 +08:00
|
|
|
})
|
|
|
|
}
|