@tiptap/core 2.0.0-beta.18 → 2.0.0-beta.182

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 { 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,103 @@ 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,
+        )
+
+        if (addKeyboardShortcuts) {
+          const bindings = Object.fromEntries(
+            Object
+              .entries(addKeyboardShortcuts())
+              .map(([shortcut, method]) => {
+                return [shortcut, () => method({ editor })]
+              }),
+          )
+
+          const keyMapPlugin = keymap(bindings)
 
           plugins.push(keyMapPlugin)
         }
 
-        if (this.editor.options.enableInputRules && extension.config.addInputRules) {
-          const inputRules = extension.config.addInputRules.bind(context)()
-          const inputRulePlugins = inputRules.length
-            ? [inputRulesPlugin({ rules: inputRules })]
-            : []
+        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 +301,18 @@ export default class ExtensionManager {
         return plugins
       })
       .flat()
+
+    return [
+      inputRulesPlugin({
+        editor,
+        rules: inputRules,
+      }),
+      ...pasteRulesPlugin({
+        editor,
+        rules: pasteRules,
+      }),
+      ...allPlugins,
+    ]
   }
 
   get attributes() {
@@ -165,15 +324,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 +352,7 @@ export default class ExtensionManager {
         ) => {
           const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
 
-          return renderer({
+          return addNodeView()({
             editor,
             node,
             getPos,
@@ -193,27 +362,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]
-      }))
-  }
-
 }

package/src/InputRule.ts

@@ -0,0 +1,265 @@
+import { EditorState, Plugin, TextSelection } from 'prosemirror-state'
+
+import { CommandManager } from './CommandManager'
+import { Editor } from './Editor'
+import { createChainableState } from './helpers/createChainableState'
+import { getTextContentFromNodes } from './helpers/getTextContentFromNodes'
+import {
+  CanCommands,
+  ChainedCommands,
+  ExtendedRegExpMatchArray,
+  Range,
+  SingleCommands,
+} from './types'
+import { isRegExp } from './utilities/isRegExp'
+
+export type InputRuleMatch = {
+  index: number,
+  text: string,
+  replaceWith?: string,
+  match?: RegExpMatchArray,
+  data?: Record<string, any>,
+}
+
+export type InputRuleFinder =
+  | RegExp
+  | ((text: string) => InputRuleMatch | null)
+
+export class InputRule {
+  find: InputRuleFinder
+
+  handler: (props: {
+    state: EditorState,
+    range: Range,
+    match: ExtendedRegExpMatchArray,
+    commands: SingleCommands,
+    chain: () => ChainedCommands,
+    can: () => CanCommands,
+  }) => void | null
+
+  constructor(config: {
+    find: InputRuleFinder,
+    handler: (props: {
+      state: EditorState,
+      range: Range,
+      match: ExtendedRegExpMatchArray,
+      commands: SingleCommands,
+      chain: () => ChainedCommands,
+      can: () => CanCommands,
+    }) => void | null,
+  }) {
+    this.find = config.find
+    this.handler = config.handler
+  }
+}
+
+const inputRuleMatcherHandler = (text: string, find: InputRuleFinder): ExtendedRegExpMatchArray | null => {
+  if (isRegExp(find)) {
+    return find.exec(text)
+  }
+
+  const inputRuleMatch = find(text)
+
+  if (!inputRuleMatch) {
+    return null
+  }
+
+  const result: ExtendedRegExpMatchArray = []
+
+  result.push(inputRuleMatch.text)
+  result.index = inputRuleMatch.index
+  result.input = text
+  result.data = inputRuleMatch.data
+
+  if (inputRuleMatch.replaceWith) {
+    if (!inputRuleMatch.text.includes(inputRuleMatch.replaceWith)) {
+      console.warn('[tiptap warn]: "inputRuleMatch.replaceWith" must be part of "inputRuleMatch.text".')
+    }
+
+    result.push(inputRuleMatch.replaceWith)
+  }
+
+  return result
+}
+
+function run(config: {
+  editor: Editor,
+  from: number,
+  to: number,
+  text: string,
+  rules: InputRule[],
+  plugin: Plugin,
+}): boolean {
+  const {
+    editor,
+    from,
+    to,
+    text,
+    rules,
+    plugin,
+  } = config
+  const { view } = editor
+
+  if (view.composing) {
+    return false
+  }
+
+  const $from = view.state.doc.resolve(from)
+
+  if (
+    // check for code node
+    $from.parent.type.spec.code
+    // check for code mark
+    || !!($from.nodeBefore || $from.nodeAfter)?.marks.find(mark => mark.type.spec.code)
+  ) {
+    return false
+  }
+
+  let matched = false
+
+  const textBefore = getTextContentFromNodes($from) + text
+
+  rules.forEach(rule => {
+    if (matched) {
+      return
+    }
+
+    const match = inputRuleMatcherHandler(textBefore, rule.find)
+
+    if (!match) {
+      return
+    }
+
+    const tr = view.state.tr
+    const state = createChainableState({
+      state: view.state,
+      transaction: tr,
+    })
+    const range = {
+      from: from - (match[0].length - text.length),
+      to,
+    }
+
+    const { commands, chain, can } = new CommandManager({
+      editor,
+      state,
+    })
+
+    const handler = rule.handler({
+      state,
+      range,
+      match,
+      commands,
+      chain,
+      can,
+    })
+
+    // stop if there are no changes
+    if (handler === null || !tr.steps.length) {
+      return
+    }
+
+    // store transform as meta data
+    // so we can undo input rules within the `undoInputRules` command
+    tr.setMeta(plugin, {
+      transform: tr,
+      from,
+      to,
+      text,
+    })
+
+    view.dispatch(tr)
+    matched = true
+  })
+
+  return matched
+}
+
+/**
+ * Create an input rules plugin. When enabled, it will cause text
+ * input that matches any of the given rules to trigger the rule’s
+ * action.
+ */
+export function inputRulesPlugin(props: { editor: Editor, rules: InputRule[] }): Plugin {
+  const { editor, rules } = props
+  const plugin = new Plugin({
+    state: {
+      init() {
+        return null
+      },
+      apply(tr, prev) {
+        const stored = tr.getMeta(plugin)
+
+        if (stored) {
+          return stored
+        }
+
+        return tr.selectionSet || tr.docChanged
+          ? null
+          : prev
+      },
+    },
+
+    props: {
+      handleTextInput(view, from, to, text) {
+        return run({
+          editor,
+          from,
+          to,
+          text,
+          rules,
+          plugin,
+        })
+      },
+
+      handleDOMEvents: {
+        compositionend: view => {
+          setTimeout(() => {
+            const { $cursor } = view.state.selection as TextSelection
+
+            if ($cursor) {
+              run({
+                editor,
+                from: $cursor.pos,
+                to: $cursor.pos,
+                text: '',
+                rules,
+                plugin,
+              })
+            }
+          })
+
+          return false
+        },
+      },
+
+      // add support for input rules to trigger on enter
+      // this is useful for example for code blocks
+      handleKeyDown(view, event) {
+        if (event.key !== 'Enter') {
+          return false
+        }
+
+        const { $cursor } = view.state.selection as TextSelection
+
+        if ($cursor) {
+          return run({
+            editor,
+            from: $cursor.pos,
+            to: $cursor.pos,
+            text: '\n',
+            rules,
+            plugin,
+          })
+        }
+
+        return false
+      },
+    },
+
+    // @ts-ignore
+    isInputRules: true,
+  }) as Plugin
+
+  return plugin
+}