@tiptap/core 2.0.0-beta.22 → 2.0.0-beta.220

package/src/ExtensionManager.ts

@@ -1,20 +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 { 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'
-
-export default class ExtensionManager {
+import { keymap } from '@tiptap/pm/keymap'
+import { Node as ProsemirrorNode, Schema } from '@tiptap/pm/model'
+import { Plugin } from '@tiptap/pm/state'
+import { Decoration, EditorView } from '@tiptap/pm/view'
 
+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
 
   schema: Schema
@@ -25,67 +30,145 @@ 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.onBeforeCreate === 'function') {
-        this.editor.on('beforeCreate', extension.config.onBeforeCreate.bind(context))
+      const onBeforeCreate = getExtensionField<AnyConfig['onBeforeCreate']>(
+        extension,
+        'onBeforeCreate',
+        context,
+      )
+
+      if (onBeforeCreate) {
+        this.editor.on('beforeCreate', onBeforeCreate)
       }
 
-      if (typeof extension.config.onCreate === 'function') {
-        this.editor.on('create', extension.config.onCreate.bind(context))
+      const onCreate = getExtensionField<AnyConfig['onCreate']>(extension, 'onCreate', context)
+
+      if (onCreate) {
+        this.editor.on('create', onCreate)
       }
 
-      if (typeof extension.config.onUpdate === 'function') {
-        this.editor.on('update', extension.config.onUpdate.bind(context))
+      const onUpdate = getExtensionField<AnyConfig['onUpdate']>(extension, 'onUpdate', context)
+
+      if (onUpdate) {
+        this.editor.on('update', onUpdate)
       }
 
-      if (typeof extension.config.onSelectionUpdate === 'function') {
-        this.editor.on('selectionUpdate', extension.config.onSelectionUpdate.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 +179,110 @@ 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> = {}
+
+        // bind exit handling
+        if (extension.type === 'mark' && extension.config.exitable) {
+          defaultBindings.ArrowRight = () => Mark.handleExit({ editor, mark: extension as Mark })
+        }
+
+        if (addKeyboardShortcuts) {
+          const bindings = Object.fromEntries(
+            Object.entries(addKeyboardShortcuts()).map(([shortcut, method]) => {
+              return [shortcut, () => method({ editor })]
+            }),
+          )
 
-          plugins.push(keyMapPlugin)
+          defaultBindings = { ...defaultBindings, ...bindings }
         }
 
-        if (this.editor.options.enableInputRules && extension.config.addInputRules) {
-          const inputRules = extension.config.addInputRules.bind(context)()
-          const inputRulePlugins = inputRules.length
-            ? [inputRulesPlugin({ rules: inputRules })]
-            : []
+        const keyMapPlugin = keymap(defaultBindings)
+
+        plugins.push(keyMapPlugin)
+
+        const addInputRules = getExtensionField<AnyConfig['addInputRules']>(
+          extension,
+          'addInputRules',
+          context,
+        )
 
-          plugins.push(...inputRulePlugins)
+        if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
+          inputRules.push(...addInputRules())
         }
 
-        if (this.editor.options.enablePasteRules && extension.config.addPasteRules) {
-          const pasteRulePlugins = extension.config.addPasteRules.bind(context)()
+        const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(
+          extension,
+          'addPasteRules',
+          context,
+        )
 
-          plugins.push(...pasteRulePlugins)
+        if (isExtensionRulesEnabled(extension, editor.options.enablePasteRules) && addPasteRules) {
+          pasteRules.push(...addPasteRules())
         }
 
-        if (extension.config.addProseMirrorPlugins) {
-          const proseMirrorPlugins = extension.config.addProseMirrorPlugins.bind(context)()
+        const addProseMirrorPlugins = getExtensionField<AnyConfig['addProseMirrorPlugins']>(
+          extension,
+          'addProseMirrorPlugins',
+          context,
+        )
+
+        if (addProseMirrorPlugins) {
+          const proseMirrorPlugins = addProseMirrorPlugins()
 
           plugins.push(...proseMirrorPlugins)
         }
@@ -154,6 +290,18 @@ export default class ExtensionManager {
         return plugins
       })
       .flat()
+
+    return [
+      inputRulesPlugin({
+        editor,
+        rules: inputRules,
+      }),
+      ...pasteRulesPlugin({
+        editor,
+        rules: pasteRules,
+      }),
+      ...allPlugins,
+    ]
   }
 
   get attributes() {
@@ -164,56 +312,50 @@ export default class ExtensionManager {
     const { editor } = this
     const { nodeExtensions } = splitExtensions(this.extensions)
 
-    return Object.fromEntries(nodeExtensions
-      .filter(extension => !!extension.config.addNodeView)
-      .map(extension => {
-        const extensionAttributes = this.attributes.filter(attribute => attribute.type === extension.config.name)
-        const context = {
-          options: extension.options,
-          editor,
-          type: getNodeType(extension.config.name, this.schema),
-        }
-        const renderer = extension.config.addNodeView?.call(context) as NodeViewRenderer
-
-        const nodeview = (
-          node: ProsemirrorNode,
-          view: EditorView,
-          getPos: (() => number) | boolean,
-          decorations: Decoration[],
-        ) => {
-          const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
-
-          return renderer({
+    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,
-            node,
-            getPos,
-            decorations,
-            HTMLAttributes,
+            type: getNodeType(extension.name, this.schema),
+          }
+          const addNodeView = getExtensionField<NodeConfig['addNodeView']>(
             extension,
-          })
-        }
-
-        return [extension.config.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]
-      }))
+            '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]
+        }),
+    )
   }
-
 }