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'
|
2020-11-30 16:42:53 +08:00
|
|
|
import getSchema from './helpers/getSchema'
|
|
|
|
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
|
2021-04-08 00:29:16 +08:00
|
|
|
this.extensions = this.sort(extensions)
|
2020-10-23 15:20:26 +08:00
|
|
|
this.schema = getSchema(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 = {
|
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-03-09 16:50:03 +08:00
|
|
|
|
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
|
|
|
|
2021-04-08 00:29:16 +08:00
|
|
|
private sort(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) {
|
2021-04-08 00:29:16 +08:00
|
|
|
return -1
|
|
|
|
}
|
|
|
|
|
2021-04-16 04:53:02 +08:00
|
|
|
if (priorityA < priorityB) {
|
2021-04-08 00:29:16 +08:00
|
|
|
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-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 = {
|
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 keyMapPlugin = keymap(addKeyboardShortcuts())
|
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 03:14:33 +08:00
|
|
|
const name = getExtensionField<NodeConfig['name']>(extension, 'name')
|
|
|
|
const extensionAttributes = this.attributes.filter(attribute => attribute.type === name)
|
|
|
|
const context = {
|
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-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
|
|
|
}
|