import { keymap } from 'prosemirror-keymap' import { Schema, Node as ProsemirrorNode } from 'prosemirror-model' import { inputRulesPlugin } from './InputRule' import { pasteRulesPlugin } from './PasteRule' import { EditorView, Decoration } from 'prosemirror-view' import { Plugin } from 'prosemirror-state' import { Editor } from './Editor' import { Extensions, RawCommands, AnyConfig } from './types' import getExtensionField from './helpers/getExtensionField' import getSchemaByResolvedExtensions from './helpers/getSchemaByResolvedExtensions' import getSchemaTypeByName from './helpers/getSchemaTypeByName' import getNodeType from './helpers/getNodeType' import splitExtensions from './helpers/splitExtensions' import getAttributesFromExtensions from './helpers/getAttributesFromExtensions' import getRenderedAttributes from './helpers/getRenderedAttributes' import callOrReturn from './utilities/callOrReturn' import findDuplicates from './utilities/findDuplicates' import { NodeConfig } from '.' export default class ExtensionManager { editor: Editor schema: Schema extensions: Extensions splittableMarks: string[] = [] constructor(extensions: Extensions, editor: Editor) { this.editor = editor this.extensions = ExtensionManager.resolve(extensions) this.schema = getSchemaByResolvedExtensions(this.extensions) this.extensions.forEach(extension => { // store extension storage in editor this.editor.extensionStorage[extension.name] = extension.storage const context = { name: extension.name, options: extension.options, storage: extension.storage, editor: this.editor, type: getSchemaTypeByName(extension.name, this.schema), } if (extension.type === 'mark') { const keepOnSplit = callOrReturn(getExtensionField(extension, 'keepOnSplit', context)) ?? true if (keepOnSplit) { this.splittableMarks.push(extension.name) } } const onBeforeCreate = getExtensionField( extension, 'onBeforeCreate', context, ) if (onBeforeCreate) { this.editor.on('beforeCreate', onBeforeCreate) } const onCreate = getExtensionField( extension, 'onCreate', context, ) if (onCreate) { this.editor.on('create', onCreate) } const onUpdate = getExtensionField( extension, 'onUpdate', context, ) if (onUpdate) { this.editor.on('update', onUpdate) } const onSelectionUpdate = getExtensionField( extension, 'onSelectionUpdate', context, ) if (onSelectionUpdate) { this.editor.on('selectionUpdate', onSelectionUpdate) } const onTransaction = getExtensionField( extension, 'onTransaction', context, ) if (onTransaction) { this.editor.on('transaction', onTransaction) } const onFocus = getExtensionField( extension, 'onFocus', context, ) if (onFocus) { this.editor.on('focus', onFocus) } const onBlur = getExtensionField( extension, 'onBlur', context, ) if (onBlur) { this.editor.on('blur', onBlur) } const onDestroy = getExtensionField( extension, 'onDestroy', context, ) if (onDestroy) { this.editor.on('destroy', onDestroy) } }) } static resolve(extensions: Extensions): Extensions { const resolvedExtensions = ExtensionManager.sort(ExtensionManager.flatten(extensions)) const duplicatedNames = findDuplicates(resolvedExtensions.map(extension => extension.name)) if (duplicatedNames.length) { console.warn(`[tiptap warn]: Duplicate extension names found: [${duplicatedNames.map(item => `'${item}'`).join(', ')}]. This can lead to issues.`) } return resolvedExtensions } static flatten(extensions: Extensions): Extensions { return extensions .map(extension => { const context = { name: extension.name, options: extension.options, storage: extension.storage, } const addExtensions = getExtensionField( extension, 'addExtensions', context, ) if (addExtensions) { return [ extension, ...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) => { const priorityA = getExtensionField(a, 'priority') || defaultPriority const priorityB = getExtensionField(b, 'priority') || defaultPriority if (priorityA > priorityB) { return -1 } if (priorityA < priorityB) { return 1 } return 0 }) } get commands(): RawCommands { return this.extensions.reduce((commands, extension) => { const context = { name: extension.name, options: extension.options, storage: extension.storage, editor: this.editor, type: getSchemaTypeByName(extension.name, this.schema), } const addCommands = getExtensionField( extension, 'addCommands', context, ) if (!addCommands) { return commands } return { ...commands, ...addCommands(), } }, {} as RawCommands) } get plugins(): Plugin[] { const { editor } = this // With ProseMirror, first plugins within an array are executed first. // In tiptap, we provide the ability to override plugins, // so it feels more natural to run plugins at the end of an array first. // That’s why we have to reverse the `extensions` array and sort again // based on the `priority` option. const extensions = ExtensionManager.sort([...this.extensions].reverse()) const inputRules: any[] = [] const pasteRules: any[] = [] const allPlugins = extensions .map(extension => { const context = { name: extension.name, options: extension.options, storage: extension.storage, editor, type: getSchemaTypeByName(extension.name, this.schema), } const plugins: Plugin[] = [] const addKeyboardShortcuts = getExtensionField( extension, 'addKeyboardShortcuts', context, ) if (addKeyboardShortcuts) { const bindings = Object.fromEntries( Object .entries(addKeyboardShortcuts()) .map(([shortcut, method]) => { return [shortcut, () => method({ editor })] }), ) const keyMapPlugin = keymap(bindings) plugins.push(keyMapPlugin) } const addInputRules = getExtensionField( extension, 'addInputRules', context, ) if (editor.options.enableInputRules && addInputRules) { inputRules.push(...addInputRules()) } const addPasteRules = getExtensionField( extension, 'addPasteRules', context, ) if (editor.options.enablePasteRules && addPasteRules) { pasteRules.push(...addPasteRules()) } const addProseMirrorPlugins = getExtensionField( extension, 'addProseMirrorPlugins', context, ) if (addProseMirrorPlugins) { const proseMirrorPlugins = addProseMirrorPlugins() plugins.push(...proseMirrorPlugins) } return plugins }) .flat() return [ inputRulesPlugin({ editor, rules: inputRules, }), pasteRulesPlugin({ editor, rules: pasteRules, }), ...allPlugins, ] } get attributes() { return getAttributesFromExtensions(this.extensions) } get nodeViews() { const { editor } = this const { nodeExtensions } = splitExtensions(this.extensions) return Object.fromEntries(nodeExtensions .filter(extension => !!getExtensionField(extension, 'addNodeView')) .map(extension => { const extensionAttributes = this.attributes.filter(attribute => attribute.type === extension.name) const context = { name: extension.name, options: extension.options, storage: extension.storage, editor, type: getNodeType(extension.name, this.schema), } const addNodeView = getExtensionField( extension, 'addNodeView', context, ) if (!addNodeView) { return [] } const nodeview = ( node: ProsemirrorNode, view: EditorView, getPos: (() => number) | boolean, decorations: Decoration[], ) => { const HTMLAttributes = getRenderedAttributes(node, extensionAttributes) return addNodeView()({ editor, node, getPos, decorations, HTMLAttributes, extension, }) } return [extension.name, nodeview] })) } }