tiptap/packages/suggestion/src/suggestion.ts

206 lines
5.6 KiB
TypeScript
Raw Normal View History

2021-01-19 19:03:38 +08:00
import { Editor, Range, AnyObject } from '@tiptap/core'
2020-12-17 00:47:17 +08:00
import { Plugin, PluginKey } from 'prosemirror-state'
2021-01-19 17:09:32 +08:00
import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
2021-01-15 21:49:28 +08:00
import { findSuggestionMatch } from './findSuggestionMatch'
2020-12-17 00:47:17 +08:00
2021-01-15 22:58:39 +08:00
export interface SuggestionOptions {
editor: Editor,
char?: string,
allowSpaces?: boolean,
startOfLine?: boolean,
suggestionClass?: string,
2021-01-20 16:23:44 +08:00
command?: (props: {
editor: Editor,
range: Range,
attributes: AnyObject
}) => void,
2021-01-15 22:58:39 +08:00
items?: (query: string) => any[],
2021-01-19 06:41:38 +08:00
render?: () => {
2021-01-19 17:09:32 +08:00
onStart?: (props: SuggestionProps) => void,
onUpdate?: (props: SuggestionProps) => void,
onExit?: (props: SuggestionProps) => void,
onKeyDown?: (props: SuggestionKeyDownProps) => boolean,
2021-01-18 19:40:13 +08:00
},
2021-01-15 22:58:39 +08:00
}
2021-01-19 17:09:32 +08:00
export interface SuggestionProps {
editor: Editor,
range: Range,
query: string,
text: string,
items: any[],
2021-01-19 19:03:38 +08:00
command: (attributes: AnyObject) => void,
2021-01-19 17:09:32 +08:00
decorationNode: Element | null,
2021-01-19 19:28:33 +08:00
clientRect: DOMRect | null,
2021-01-19 17:09:32 +08:00
}
export interface SuggestionKeyDownProps {
view: EditorView,
event: KeyboardEvent,
range: Range,
}
2020-12-18 00:13:35 +08:00
export function Suggestion({
2021-01-19 17:09:32 +08:00
editor,
2021-01-15 16:25:50 +08:00
char = '@',
allowSpaces = false,
startOfLine = false,
2020-12-17 00:47:17 +08:00
suggestionClass = 'suggestion',
2021-01-15 22:58:39 +08:00
command = () => null,
items = () => [],
2021-01-19 06:41:38 +08:00
render = () => ({}),
2021-01-15 22:58:39 +08:00
}: SuggestionOptions) {
2021-01-18 19:40:13 +08:00
2021-01-19 06:41:38 +08:00
const renderer = render?.()
2020-12-17 00:47:17 +08:00
return new Plugin({
2021-01-20 03:45:18 +08:00
key: new PluginKey('suggestion'),
2020-12-17 00:47:17 +08:00
view() {
return {
update: async (view, prevState) => {
const prev = this.key?.getState(prevState)
const next = this.key?.getState(view.state)
// See how the state changed
const moved = prev.active && next.active && prev.range.from !== next.range.from
const started = !prev.active && next.active
const stopped = prev.active && !next.active
const changed = !started && !stopped && prev.query !== next.query
const handleStart = started || moved
const handleChange = changed && !moved
const handleExit = stopped || moved
// Cancel when suggestion isn't active
if (!handleStart && !handleChange && !handleExit) {
return
}
const state = handleExit ? prev : next
const decorationNode = document.querySelector(`[data-decoration-id="${state.decorationId}"]`)
2021-01-19 17:09:32 +08:00
const props: SuggestionProps = {
editor,
2020-12-17 00:47:17 +08:00
range: state.range,
query: state.query,
text: state.text,
2021-01-19 06:41:38 +08:00
items: (handleChange || handleStart)
? await items(state.query)
: [],
2021-01-19 19:03:38 +08:00
command: attributes => {
2021-01-20 16:23:44 +08:00
command({
editor,
range: state.range,
attributes,
})
2021-01-19 06:41:38 +08:00
},
2020-12-17 00:47:17 +08:00
decorationNode,
2021-01-19 19:28:33 +08:00
// virtual node for popper.js or tippy.js
2021-01-15 21:49:28 +08:00
// this can be used for building popups without a DOM node
2021-01-19 19:28:33 +08:00
clientRect: decorationNode?.getBoundingClientRect() || null,
2020-12-17 00:47:17 +08:00
}
2021-01-19 06:41:38 +08:00
if (handleStart) {
renderer?.onStart?.(props)
2020-12-17 00:47:17 +08:00
}
if (handleChange) {
2021-01-19 06:41:38 +08:00
renderer?.onUpdate?.(props)
2020-12-17 00:47:17 +08:00
}
2021-01-19 06:41:38 +08:00
if (handleExit) {
renderer?.onExit?.(props)
2020-12-17 00:47:17 +08:00
}
},
}
},
state: {
// Initialize the plugin's internal state.
init() {
return {
active: false,
range: {},
query: null,
text: null,
}
},
// Apply changes to the plugin state from a view transaction.
2021-01-19 06:41:38 +08:00
apply(transaction, prev) {
const { selection } = transaction
2020-12-17 00:47:17 +08:00
const next = { ...prev }
// We can only be suggesting if there is no selection
if (selection.from === selection.to) {
// Reset active state if we just left the previous suggestion range
if (selection.from < prev.range.from || selection.from > prev.range.to) {
next.active = false
}
// Try to match against where our cursor currently is
2021-01-15 21:49:28 +08:00
const match = findSuggestionMatch({
2021-01-15 16:25:50 +08:00
char,
allowSpaces,
startOfLine,
2021-01-15 16:55:15 +08:00
$position: selection.$from,
2021-01-15 16:25:50 +08:00
})
2021-01-15 21:49:28 +08:00
const decorationId = `id_${Math.floor(Math.random() * 0xFFFFFFFF)}`
2021-01-15 16:25:50 +08:00
2020-12-17 00:47:17 +08:00
// If we found a match, update the current state to show it
if (match) {
next.active = true
next.decorationId = prev.decorationId ? prev.decorationId : decorationId
next.range = match.range
next.query = match.query
next.text = match.text
} else {
next.active = false
}
} else {
next.active = false
}
// Make sure to empty the range if suggestion is inactive
if (!next.active) {
next.decorationId = null
next.range = {}
next.query = null
next.text = null
}
return next
},
},
props: {
// Call the keydown hook if suggestion is active.
handleKeyDown(view, event) {
const { active, range } = this.getState(view.state)
2021-01-15 21:49:28 +08:00
if (!active) {
return false
}
2020-12-17 00:47:17 +08:00
2021-01-19 06:41:38 +08:00
return renderer?.onKeyDown?.({ view, event, range }) || false
2020-12-17 00:47:17 +08:00
},
// Setup decorator on the currently active suggestion.
2021-01-15 21:49:28 +08:00
decorations(state) {
const { active, range, decorationId } = this.getState(state)
2020-12-17 00:47:17 +08:00
2021-01-15 21:49:28 +08:00
if (!active) {
return null
}
2020-12-17 00:47:17 +08:00
2021-01-15 21:49:28 +08:00
return DecorationSet.create(state.doc, [
2020-12-17 00:47:17 +08:00
Decoration.inline(range.from, range.to, {
nodeName: 'span',
class: suggestionClass,
'data-decoration-id': decorationId,
}),
])
},
},
})
}