@tiptap/core 2.0.0-beta.20 → 2.0.0-beta.200

package/src/ExtensionManager.ts

@@ -1,19 +1,25 @@
 import { keymap } from 'prosemirror-keymap'
-import { Schema, Node as ProsemirrorNode } from 'prosemirror-model'
-import { inputRules as inputRulesPlugin } from 'prosemirror-inputrules'
-import { EditorView, Decoration } from 'prosemirror-view'
+import { Node as ProsemirrorNode, Schema } from 'prosemirror-model'
 import { Plugin } from 'prosemirror-state'
-import { Editor } from './Editor'
-import { Extensions, NodeViewRenderer, RawCommands } from './types'
-import getSchema from './helpers/getSchema'
-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 { Decoration, EditorView } from 'prosemirror-view'
 
-export default class ExtensionManager {
+import { Mark, NodeConfig } from '.'
+import { Editor } from './Editor'
+import { getAttributesFromExtensions } from './helpers/getAttributesFromExtensions'
+import { getExtensionField } from './helpers/getExtensionField'
+import { getNodeType } from './helpers/getNodeType'
+import { getRenderedAttributes } from './helpers/getRenderedAttributes'
+import { getSchemaByResolvedExtensions } from './helpers/getSchemaByResolvedExtensions'
+import { getSchemaTypeByName } from './helpers/getSchemaTypeByName'
+import { isExtensionRulesEnabled } from './helpers/isExtensionRulesEnabled'
+import { splitExtensions } from './helpers/splitExtensions'
+import { inputRulesPlugin } from './InputRule'
+import { pasteRulesPlugin } from './PasteRule'
+import { AnyConfig, Extensions, RawCommands } from './types'
+import { callOrReturn } from './utilities/callOrReturn'
+import { findDuplicates } from './utilities/findDuplicates'
+
+export class ExtensionManager {
 
   editor: Editor
 
@@ -25,67 +31,162 @@ export default class ExtensionManager {
 
   constructor(extensions: Extensions, editor: Editor) {
     this.editor = editor
-    this.extensions = this.sort(extensions)
-    this.schema = getSchema(this.extensions)
+    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.config.name, this.schema),
+        type: getSchemaTypeByName(extension.name, this.schema),
       }
 
       if (extension.type === 'mark') {
-        const keepOnSplit = callOrReturn(extension.config.keepOnSplit, context) ?? true
+        const keepOnSplit = callOrReturn(getExtensionField(extension, 'keepOnSplit', context)) ?? true
 
         if (keepOnSplit) {
-          this.splittableMarks.push(extension.config.name)
+          this.splittableMarks.push(extension.name)
         }
       }
 
-      if (typeof extension.config.onCreate === 'function') {
-        this.editor.on('create', extension.config.onCreate.bind(context))
+      const onBeforeCreate = getExtensionField<AnyConfig['onBeforeCreate']>(
+        extension,
+        'onBeforeCreate',
+        context,
+      )
+
+      if (onBeforeCreate) {
+        this.editor.on('beforeCreate', onBeforeCreate)
       }
 
-      if (typeof extension.config.onUpdate === 'function') {
-        this.editor.on('update', extension.config.onUpdate.bind(context))
+      const onCreate = getExtensionField<AnyConfig['onCreate']>(
+        extension,
+        'onCreate',
+        context,
+      )
+
+      if (onCreate) {
+        this.editor.on('create', onCreate)
       }
 
-      if (typeof extension.config.onSelectionUpdate === 'function') {
-        this.editor.on('selectionUpdate', extension.config.onSelectionUpdate.bind(context))
+      const onUpdate = getExtensionField<AnyConfig['onUpdate']>(
+        extension,
+        'onUpdate',
+        context,
+      )
+
+      if (onUpdate) {
+        this.editor.on('update', onUpdate)
       }
 
-      if (typeof extension.config.onViewUpdate === 'function') {
-        this.editor.on('viewUpdate', extension.config.onViewUpdate.bind(context))
+      const onSelectionUpdate = getExtensionField<AnyConfig['onSelectionUpdate']>(
+        extension,
+        'onSelectionUpdate',
+        context,
+      )
+
+      if (onSelectionUpdate) {
+        this.editor.on('selectionUpdate', onSelectionUpdate)
       }
 
-      if (typeof extension.config.onTransaction === 'function') {
-        this.editor.on('transaction', extension.config.onTransaction.bind(context))
+      const onTransaction = getExtensionField<AnyConfig['onTransaction']>(
+        extension,
+        'onTransaction',
+        context,
+      )
+
+      if (onTransaction) {
+        this.editor.on('transaction', onTransaction)
       }
 
-      if (typeof extension.config.onFocus === 'function') {
-        this.editor.on('focus', extension.config.onFocus.bind(context))
+      const onFocus = getExtensionField<AnyConfig['onFocus']>(
+        extension,
+        'onFocus',
+        context,
+      )
+
+      if (onFocus) {
+        this.editor.on('focus', onFocus)
       }
 
-      if (typeof extension.config.onBlur === 'function') {
-        this.editor.on('blur', extension.config.onBlur.bind(context))
+      const onBlur = getExtensionField<AnyConfig['onBlur']>(
+        extension,
+        'onBlur',
+        context,
+      )
+
+      if (onBlur) {
+        this.editor.on('blur', onBlur)
       }
 
-      if (typeof extension.config.onDestroy === 'function') {
-        this.editor.on('destroy', extension.config.onDestroy.bind(context))
+      const onDestroy = getExtensionField<AnyConfig['onDestroy']>(
+        extension,
+        'onDestroy',
+        context,
+      )
+
+      if (onDestroy) {
+        this.editor.on('destroy', onDestroy)
       }
     })
   }
 
-  private sort(extensions: Extensions) {
+  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<AnyConfig['addExtensions']>(
+          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) => {
-      if ((a.config.priority || defaultPriority) > (b.config.priority || defaultPriority)) {
+      const priorityA = getExtensionField<AnyConfig['priority']>(a, 'priority') || defaultPriority
+      const priorityB = getExtensionField<AnyConfig['priority']>(b, 'priority') || defaultPriority
+
+      if (priorityA > priorityB) {
         return -1
       }
 
-      if ((a.config.priority || defaultPriority) < (b.config.priority || defaultPriority)) {
+      if (priorityA < priorityB) {
         return 1
       }
 
@@ -96,57 +197,112 @@ export default class ExtensionManager {
   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.config.name, this.schema),
+        type: getSchemaTypeByName(extension.name, this.schema),
       }
 
-      if (!extension.config.addCommands) {
+      const addCommands = getExtensionField<AnyConfig['addCommands']>(
+        extension,
+        'addCommands',
+        context,
+      )
+
+      if (!addCommands) {
         return commands
       }
 
       return {
         ...commands,
-        ...extension.config.addCommands.bind(context)(),
+        ...addCommands(),
       }
     }, {} as RawCommands)
   }
 
   get plugins(): Plugin[] {
-    return [...this.extensions]
-      .reverse()
+    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,
-          editor: this.editor,
-          type: getSchemaTypeByName(extension.config.name, this.schema),
+          storage: extension.storage,
+          editor,
+          type: getSchemaTypeByName(extension.name, this.schema),
         }
 
         const plugins: Plugin[] = []
 
-        if (extension.config.addKeyboardShortcuts) {
-          const keyMapPlugin = keymap(extension.config.addKeyboardShortcuts.bind(context)())
+        const addKeyboardShortcuts = getExtensionField<AnyConfig['addKeyboardShortcuts']>(
+          extension,
+          'addKeyboardShortcuts',
+          context,
+        )
+
+        let defaultBindings: Record<string, () => boolean> = {}
 
-          plugins.push(keyMapPlugin)
+        // bind exit handling
+        if (extension.type === 'mark' && extension.config.exitable) {
+          defaultBindings.ArrowRight = () => Mark.handleExit({ editor, mark: (extension as Mark) })
         }
 
-        if (this.editor.options.enableInputRules && extension.config.addInputRules) {
-          const inputRules = extension.config.addInputRules.bind(context)()
-          const inputRulePlugins = inputRules.length
-            ? [inputRulesPlugin({ rules: inputRules })]
-            : []
+        if (addKeyboardShortcuts) {
+          const bindings = Object.fromEntries(
+            Object
+              .entries(addKeyboardShortcuts())
+              .map(([shortcut, method]) => {
+                return [shortcut, () => method({ editor })]
+              }),
+          )
 
-          plugins.push(...inputRulePlugins)
+          defaultBindings = { ...defaultBindings, ...bindings }
         }
 
-        if (this.editor.options.enablePasteRules && extension.config.addPasteRules) {
-          const pasteRulePlugins = extension.config.addPasteRules.bind(context)()
+        const keyMapPlugin = keymap(defaultBindings)
+
+        plugins.push(keyMapPlugin)
+
+        const addInputRules = getExtensionField<AnyConfig['addInputRules']>(
+          extension,
+          'addInputRules',
+          context,
+        )
 
-          plugins.push(...pasteRulePlugins)
+        if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
+          inputRules.push(...addInputRules())
         }
 
-        if (extension.config.addProseMirrorPlugins) {
-          const proseMirrorPlugins = extension.config.addProseMirrorPlugins.bind(context)()
+        const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(
+          extension,
+          'addPasteRules',
+          context,
+        )
+
+        if (isExtensionRulesEnabled(extension, editor.options.enablePasteRules) && addPasteRules) {
+          pasteRules.push(...addPasteRules())
+        }
+
+        const addProseMirrorPlugins = getExtensionField<AnyConfig['addProseMirrorPlugins']>(
+          extension,
+          'addProseMirrorPlugins',
+          context,
+        )
+
+        if (addProseMirrorPlugins) {
+          const proseMirrorPlugins = addProseMirrorPlugins()
 
           plugins.push(...proseMirrorPlugins)
         }
@@ -154,6 +310,18 @@ export default class ExtensionManager {
         return plugins
       })
       .flat()
+
+    return [
+      inputRulesPlugin({
+        editor,
+        rules: inputRules,
+      }),
+      ...pasteRulesPlugin({
+        editor,
+        rules: pasteRules,
+      }),
+      ...allPlugins,
+    ]
   }
 
   get attributes() {
@@ -165,15 +333,25 @@ export default class ExtensionManager {
     const { nodeExtensions } = splitExtensions(this.extensions)
 
     return Object.fromEntries(nodeExtensions
-      .filter(extension => !!extension.config.addNodeView)
+      .filter(extension => !!getExtensionField(extension, 'addNodeView'))
       .map(extension => {
-        const extensionAttributes = this.attributes.filter(attribute => attribute.type === extension.config.name)
+        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.config.name, this.schema),
+          type: getNodeType(extension.name, this.schema),
+        }
+        const addNodeView = getExtensionField<NodeConfig['addNodeView']>(
+          extension,
+          'addNodeView',
+          context,
+        )
+
+        if (!addNodeView) {
+          return []
         }
-        const renderer = extension.config.addNodeView?.call(context) as NodeViewRenderer
 
         const nodeview = (
           node: ProsemirrorNode,
@@ -183,7 +361,7 @@ export default class ExtensionManager {
         ) => {
           const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
 
-          return renderer({
+          return addNodeView()({
             editor,
             node,
             getPos,
@@ -193,27 +371,7 @@ export default class ExtensionManager {
           })
         }
 
-        return [extension.config.name, nodeview]
+        return [extension.name, nodeview]
       }))
   }
-
-  get textSerializers() {
-    const { editor } = this
-    const { nodeExtensions } = splitExtensions(this.extensions)
-
-    return Object.fromEntries(nodeExtensions
-      .filter(extension => !!extension.config.renderText)
-      .map(extension => {
-        const context = {
-          options: extension.options,
-          editor,
-          type: getNodeType(extension.config.name, this.schema),
-        }
-
-        const textSerializer = (props: { node: ProsemirrorNode }) => extension.config.renderText?.call(context, props)
-
-        return [extension.config.name, textSerializer]
-      }))
-  }
-
 }