tiptap/packages/core/src/ExtensionManager.ts

358 lines
9.3 KiB
TypeScript
Raw Normal View History

2020-04-02 15:42:26 +08:00
import { keymap } from 'prosemirror-keymap'
2020-10-29 16:26:24 +08:00
import { Schema, Node as ProsemirrorNode } from 'prosemirror-model'
2021-01-25 03:56:07 +08:00
import { inputRules as inputRulesPlugin } from 'prosemirror-inputrules'
2020-10-29 16:26:24 +08:00
import { EditorView, Decoration } from 'prosemirror-view'
2021-01-28 16:11:24 +08:00
import { Plugin } from 'prosemirror-state'
2020-08-22 06:12:34 +08:00
import { Editor } from './Editor'
2021-04-16 03:14:33 +08:00
import { Extensions, RawCommands, AnyConfig } from './types'
import getExtensionField from './helpers/getExtensionField'
import getSchemaByResolvedExtensions from './helpers/getSchemaByResolvedExtensions'
2020-11-30 16:42:53 +08:00
import getSchemaTypeByName from './helpers/getSchemaTypeByName'
2021-01-20 03:27:51 +08:00
import getNodeType from './helpers/getNodeType'
2020-11-30 16:42:53 +08:00
import splitExtensions from './helpers/splitExtensions'
import getAttributesFromExtensions from './helpers/getAttributesFromExtensions'
import getRenderedAttributes from './helpers/getRenderedAttributes'
2021-04-02 01:06:40 +08:00
import callOrReturn from './utilities/callOrReturn'
2021-04-16 03:14:33 +08:00
import { NodeConfig } from '.'
2020-08-22 06:05:00 +08:00
2020-03-06 04:05:01 +08:00
export default class ExtensionManager {
2020-04-01 04:17:54 +08:00
editor: Editor
2020-09-24 06:29:05 +08:00
2020-10-23 15:20:26 +08:00
schema: Schema
2020-08-22 06:05:00 +08:00
extensions: Extensions
2020-03-06 04:05:01 +08:00
2021-04-02 01:06:40 +08:00
splittableMarks: string[] = []
2020-08-22 06:05:00 +08:00
constructor(extensions: Extensions, editor: Editor) {
2020-04-01 04:17:54 +08:00
this.editor = editor
this.extensions = ExtensionManager.resolve(extensions)
this.schema = getSchemaByResolvedExtensions(this.extensions)
2020-09-09 17:23:24 +08:00
2020-10-23 05:21:52 +08:00
this.extensions.forEach(extension => {
2021-04-16 03:14:33 +08:00
const context = {
2021-04-21 05:11:35 +08:00
name: extension.name,
2020-10-23 05:21:52 +08:00
options: extension.options,
editor: this.editor,
2021-04-16 04:03:45 +08:00
type: getSchemaTypeByName(extension.name, this.schema),
2021-04-16 03:14:33 +08:00
}
2020-10-23 05:21:52 +08:00
2021-04-02 01:06:40 +08:00
if (extension.type === 'mark') {
2021-04-16 03:14:33 +08:00
const keepOnSplit = callOrReturn(getExtensionField(extension, 'keepOnSplit', context)) ?? true
2021-04-02 01:06:40 +08:00
if (keepOnSplit) {
2021-04-16 04:03:45 +08:00
this.splittableMarks.push(extension.name)
2021-04-02 01:06:40 +08:00
}
}
2021-04-16 04:53:02 +08:00
const onBeforeCreate = getExtensionField<AnyConfig['onBeforeCreate']>(
extension,
'onBeforeCreate',
context,
)
if (onBeforeCreate) {
this.editor.on('beforeCreate', onBeforeCreate)
}
2021-04-02 06:07:40 +08:00
2021-04-16 04:53:02 +08:00
const onCreate = getExtensionField<AnyConfig['onCreate']>(
extension,
'onCreate',
context,
)
2020-11-30 21:12:36 +08:00
2021-04-16 04:53:02 +08:00
if (onCreate) {
this.editor.on('create', onCreate)
}
2020-11-30 21:12:36 +08:00
2021-04-16 04:53:02 +08:00
const onUpdate = getExtensionField<AnyConfig['onUpdate']>(
extension,
'onUpdate',
context,
)
2021-04-16 04:53:02 +08:00
if (onUpdate) {
this.editor.on('update', onUpdate)
}
2020-11-30 21:12:36 +08:00
2021-04-16 04:53:02 +08:00
const onSelectionUpdate = getExtensionField<AnyConfig['onSelectionUpdate']>(
extension,
'onSelectionUpdate',
context,
)
if (onSelectionUpdate) {
this.editor.on('selectionUpdate', onSelectionUpdate)
}
2020-11-30 21:12:36 +08:00
2021-04-16 04:53:02 +08:00
const onTransaction = getExtensionField<AnyConfig['onTransaction']>(
extension,
'onTransaction',
context,
)
2020-11-30 21:12:36 +08:00
2021-04-16 04:53:02 +08:00
if (onTransaction) {
this.editor.on('transaction', onTransaction)
}
const onFocus = getExtensionField<AnyConfig['onFocus']>(
extension,
'onFocus',
context,
)
if (onFocus) {
this.editor.on('focus', onFocus)
}
const onBlur = getExtensionField<AnyConfig['onBlur']>(
extension,
'onBlur',
context,
)
if (onBlur) {
this.editor.on('blur', onBlur)
}
const onDestroy = getExtensionField<AnyConfig['onDestroy']>(
extension,
'onDestroy',
context,
)
if (onDestroy) {
this.editor.on('destroy', onDestroy)
}
2020-10-23 05:21:52 +08:00
})
}
2020-04-02 20:34:07 +08:00
static resolve(extensions: Extensions): Extensions {
return ExtensionManager.sort(ExtensionManager.flatten(extensions))
}
static flatten(extensions: Extensions): Extensions {
2021-05-07 00:39:47 +08:00
return extensions
.map(extension => {
const context = {
name: extension.name,
options: extension.options,
}
const addExtensions = getExtensionField<AnyConfig['addExtensions']>(
extension,
'addExtensions',
context,
)
if (addExtensions) {
return this.flatten(addExtensions())
}
return extension
})
// `Infinity` will break TypeScript so we set a number that is probably high enough
.flat(10)
}
static sort(extensions: Extensions): Extensions {
const defaultPriority = 100
return extensions.sort((a, b) => {
2021-04-16 04:53:02 +08:00
const priorityA = getExtensionField<AnyConfig['priority']>(a, 'priority') || defaultPriority
const priorityB = getExtensionField<AnyConfig['priority']>(b, 'priority') || defaultPriority
if (priorityA > priorityB) {
return -1
}
2021-04-16 04:53:02 +08:00
if (priorityA < priorityB) {
return 1
}
return 0
})
}
2021-02-17 01:36:37 +08:00
get commands(): RawCommands {
2021-02-19 05:44:50 +08:00
return this.extensions.reduce((commands, extension) => {
2021-04-16 03:14:33 +08:00
const context = {
2021-04-21 05:11:35 +08:00
name: extension.name,
2021-02-10 21:52:08 +08:00
options: extension.options,
editor: this.editor,
2021-04-16 04:03:45 +08:00
type: getSchemaTypeByName(extension.name, this.schema),
2021-04-16 03:14:33 +08:00
}
2021-02-10 21:52:08 +08:00
2021-04-16 04:53:02 +08:00
const addCommands = getExtensionField<AnyConfig['addCommands']>(
extension,
'addCommands',
context,
)
if (!addCommands) {
2021-02-19 17:54:47 +08:00
return commands
}
2021-02-10 21:52:08 +08:00
return {
2021-02-19 05:44:50 +08:00
...commands,
2021-04-16 04:53:02 +08:00
...addCommands(),
2021-02-10 21:52:08 +08:00
}
2021-02-17 01:36:37 +08:00
}, {} as RawCommands)
2021-02-10 21:52:08 +08:00
}
2021-01-28 16:11:24 +08:00
get plugins(): Plugin[] {
2021-01-29 00:39:57 +08:00
return [...this.extensions]
.reverse()
2020-10-23 05:21:52 +08:00
.map(extension => {
2021-04-16 03:14:33 +08:00
const context = {
2021-04-21 05:11:35 +08:00
name: extension.name,
2020-10-23 05:21:52 +08:00
options: extension.options,
editor: this.editor,
2021-04-16 04:03:45 +08:00
type: getSchemaTypeByName(extension.name, this.schema),
2021-04-16 03:14:33 +08:00
}
2020-10-23 05:21:52 +08:00
2021-02-19 17:54:47 +08:00
const plugins: Plugin[] = []
2021-04-16 03:14:33 +08:00
const addKeyboardShortcuts = getExtensionField<AnyConfig['addKeyboardShortcuts']>(
extension,
'addKeyboardShortcuts',
context,
)
if (addKeyboardShortcuts) {
const bindings = Object.fromEntries(
Object
.entries(addKeyboardShortcuts())
.map(([shortcut, method]) => {
return [shortcut, () => method({ editor: this.editor })]
}),
)
const keyMapPlugin = keymap(bindings)
2021-02-19 17:54:47 +08:00
plugins.push(keyMapPlugin)
}
2021-04-16 03:14:33 +08:00
const addInputRules = getExtensionField<AnyConfig['addInputRules']>(
extension,
'addInputRules',
context,
)
if (this.editor.options.enableInputRules && addInputRules) {
const inputRules = addInputRules()
2021-02-19 17:54:47 +08:00
const inputRulePlugins = inputRules.length
? [inputRulesPlugin({ rules: inputRules })]
: []
plugins.push(...inputRulePlugins)
}
2021-04-16 03:14:33 +08:00
const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(
extension,
'addPasteRules',
context,
)
if (this.editor.options.enablePasteRules && addPasteRules) {
const pasteRulePlugins = addPasteRules()
2021-02-19 17:54:47 +08:00
plugins.push(...pasteRulePlugins)
}
2021-04-16 03:14:33 +08:00
const addProseMirrorPlugins = getExtensionField<AnyConfig['addProseMirrorPlugins']>(
extension,
'addProseMirrorPlugins',
context,
)
2021-04-14 15:48:38 +08:00
2021-04-16 03:14:33 +08:00
if (addProseMirrorPlugins) {
const proseMirrorPlugins = addProseMirrorPlugins()
2021-04-14 15:48:38 +08:00
2021-04-16 03:14:33 +08:00
plugins.push(...proseMirrorPlugins)
2021-02-19 17:54:47 +08:00
}
return plugins
2020-10-23 05:21:52 +08:00
})
.flat()
2020-04-02 14:53:59 +08:00
}
2021-01-29 02:56:35 +08:00
get attributes() {
return getAttributesFromExtensions(this.extensions)
}
2020-04-24 15:32:37 +08:00
get nodeViews() {
2020-10-30 21:55:48 +08:00
const { editor } = this
2020-10-29 16:26:24 +08:00
const { nodeExtensions } = splitExtensions(this.extensions)
return Object.fromEntries(nodeExtensions
2021-04-16 03:14:33 +08:00
.filter(extension => !!getExtensionField(extension, 'addNodeView'))
2020-10-29 16:26:24 +08:00
.map(extension => {
2021-04-16 05:14:47 +08:00
const extensionAttributes = this.attributes.filter(attribute => attribute.type === extension.name)
2021-04-16 03:14:33 +08:00
const context = {
2021-04-21 05:11:35 +08:00
name: extension.name,
2020-10-29 16:26:24 +08:00
options: extension.options,
2020-10-30 21:55:48 +08:00
editor,
2021-04-16 04:03:45 +08:00
type: getNodeType(extension.name, this.schema),
2021-04-16 03:14:33 +08:00
}
const addNodeView = getExtensionField<NodeConfig['addNodeView']>(
extension,
'addNodeView',
context,
)
if (!addNodeView) {
return []
}
2020-10-29 16:26:24 +08:00
const nodeview = (
node: ProsemirrorNode,
view: EditorView,
getPos: (() => number) | boolean,
decorations: Decoration[],
2020-10-30 21:55:48 +08:00
) => {
2020-11-13 23:07:20 +08:00
const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
2020-10-30 21:55:48 +08:00
2021-04-16 03:14:33 +08:00
return addNodeView()({
2020-10-30 21:55:48 +08:00
editor,
node,
getPos,
decorations,
2020-11-13 23:07:20 +08:00
HTMLAttributes,
2020-11-19 05:50:07 +08:00
extension,
2020-10-30 21:55:48 +08:00
})
}
2020-10-29 16:26:24 +08:00
2021-04-16 04:03:45 +08:00
return [extension.name, nodeview]
2020-10-29 16:26:24 +08:00
}))
2020-04-24 15:32:37 +08:00
}
2021-01-20 03:27:51 +08:00
get textSerializers() {
const { editor } = this
const { nodeExtensions } = splitExtensions(this.extensions)
return Object.fromEntries(nodeExtensions
2021-04-16 03:14:33 +08:00
.filter(extension => !!getExtensionField(extension, 'renderText'))
2021-01-20 03:27:51 +08:00
.map(extension => {
2021-04-16 03:14:33 +08:00
const context = {
2021-04-21 05:11:35 +08:00
name: extension.name,
2021-01-20 03:27:51 +08:00
options: extension.options,
editor,
2021-04-16 04:03:45 +08:00
type: getNodeType(extension.name, this.schema),
2021-04-16 03:14:33 +08:00
}
const renderText = getExtensionField<NodeConfig['renderText']>(extension, 'renderText', context)
if (!renderText) {
return []
}
2021-01-20 03:27:51 +08:00
2021-04-16 03:14:33 +08:00
const textSerializer = (props: { node: ProsemirrorNode }) => renderText(props)
2021-01-20 03:27:51 +08:00
2021-04-16 04:03:45 +08:00
return [extension.name, textSerializer]
2021-01-20 03:27:51 +08:00
}))
}
2020-03-06 04:05:01 +08:00
}