@tiptap/core 2.0.0-beta.99 → 2.0.0-rc.2

package/src/ExtensionManager.ts

@@ -1,22 +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, 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 { NodeConfig } from '.'
-
-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
@@ -31,9 +34,13 @@ export default class ExtensionManager {
     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),
       }
@@ -56,21 +63,13 @@ export default class ExtensionManager {
         this.editor.on('beforeCreate', onBeforeCreate)
       }
 
-      const onCreate = getExtensionField<AnyConfig['onCreate']>(
-        extension,
-        'onCreate',
-        context,
-      )
+      const onCreate = getExtensionField<AnyConfig['onCreate']>(extension, 'onCreate', context)
 
       if (onCreate) {
         this.editor.on('create', onCreate)
       }
 
-      const onUpdate = getExtensionField<AnyConfig['onUpdate']>(
-        extension,
-        'onUpdate',
-        context,
-      )
+      const onUpdate = getExtensionField<AnyConfig['onUpdate']>(extension, 'onUpdate', context)
 
       if (onUpdate) {
         this.editor.on('update', onUpdate)
@@ -96,31 +95,19 @@ export default class ExtensionManager {
         this.editor.on('transaction', onTransaction)
       }
 
-      const onFocus = getExtensionField<AnyConfig['onFocus']>(
-        extension,
-        'onFocus',
-        context,
-      )
+      const onFocus = getExtensionField<AnyConfig['onFocus']>(extension, 'onFocus', context)
 
       if (onFocus) {
         this.editor.on('focus', onFocus)
       }
 
-      const onBlur = getExtensionField<AnyConfig['onBlur']>(
-        extension,
-        'onBlur',
-        context,
-      )
+      const onBlur = getExtensionField<AnyConfig['onBlur']>(extension, 'onBlur', context)
 
       if (onBlur) {
         this.editor.on('blur', onBlur)
       }
 
-      const onDestroy = getExtensionField<AnyConfig['onDestroy']>(
-        extension,
-        'onDestroy',
-        context,
-      )
+      const onDestroy = getExtensionField<AnyConfig['onDestroy']>(extension, 'onDestroy', context)
 
       if (onDestroy) {
         this.editor.on('destroy', onDestroy)
@@ -129,34 +116,45 @@ export default class ExtensionManager {
   }
 
   static resolve(extensions: Extensions): Extensions {
-    return ExtensionManager.sort(ExtensionManager.flatten(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,
-        }
-
-        const addExtensions = getExtensionField<AnyConfig['addExtensions']>(
-          extension,
-          'addExtensions',
-          context,
-        )
-
-        if (addExtensions) {
-          return [
+    return (
+      extensions
+        .map(extension => {
+          const context = {
+            name: extension.name,
+            options: extension.options,
+            storage: extension.storage,
+          }
+
+          const addExtensions = getExtensionField<AnyConfig['addExtensions']>(
             extension,
-            ...this.flatten(addExtensions()),
-          ]
-        }
+            'addExtensions',
+            context,
+          )
 
-        return extension
-      })
-      // `Infinity` will break TypeScript so we set a number that is probably high enough
-      .flat(10)
+          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 {
@@ -183,6 +181,7 @@ export default class ExtensionManager {
       const context = {
         name: extension.name,
         options: extension.options,
+        storage: extension.storage,
         editor: this.editor,
         type: getSchemaTypeByName(extension.name, this.schema),
       }
@@ -205,13 +204,25 @@ export default class ExtensionManager {
   }
 
   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,
+          storage: extension.storage,
+          editor,
           type: getSchemaTypeByName(extension.name, this.schema),
         }
 
@@ -223,33 +234,35 @@ export default class ExtensionManager {
           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: this.editor })]
-              }),
+            Object.entries(addKeyboardShortcuts()).map(([shortcut, method]) => {
+              return [shortcut, () => method({ editor })]
+            }),
           )
 
-          const keyMapPlugin = keymap(bindings)
-
-          plugins.push(keyMapPlugin)
+          defaultBindings = { ...defaultBindings, ...bindings }
         }
 
+        const keyMapPlugin = keymap(defaultBindings)
+
+        plugins.push(keyMapPlugin)
+
         const addInputRules = getExtensionField<AnyConfig['addInputRules']>(
           extension,
           'addInputRules',
           context,
         )
 
-        if (this.editor.options.enableInputRules && addInputRules) {
-          const inputRules = addInputRules()
-          const inputRulePlugins = inputRules.length
-            ? [inputRulesPlugin({ rules: inputRules })]
-            : []
-
-          plugins.push(...inputRulePlugins)
+        if (isExtensionRulesEnabled(extension, editor.options.enableInputRules) && addInputRules) {
+          inputRules.push(...addInputRules())
         }
 
         const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(
@@ -258,10 +271,8 @@ export default class ExtensionManager {
           context,
         )
 
-        if (this.editor.options.enablePasteRules && addPasteRules) {
-          const pasteRulePlugins = addPasteRules()
-
-          plugins.push(...pasteRulePlugins)
+        if (isExtensionRulesEnabled(extension, editor.options.enablePasteRules) && addPasteRules) {
+          pasteRules.push(...addPasteRules())
         }
 
         const addProseMirrorPlugins = getExtensionField<AnyConfig['addProseMirrorPlugins']>(
@@ -279,6 +290,18 @@ export default class ExtensionManager {
         return plugins
       })
       .flat()
+
+    return [
+      inputRulesPlugin({
+        editor,
+        rules: inputRules,
+      }),
+      ...pasteRulesPlugin({
+        editor,
+        rules: pasteRules,
+      }),
+      ...allPlugins,
+    ]
   }
 
   get attributes() {
@@ -289,72 +312,50 @@ export default class ExtensionManager {
     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,
-          editor,
-          type: getNodeType(extension.name, this.schema),
-        }
-        const addNodeView = getExtensionField<NodeConfig['addNodeView']>(
-          extension,
-          'addNodeView',
-          context,
-        )
-
-        if (!addNodeView) {
-          return []
-        }
-
-        const nodeview = (
-          node: ProsemirrorNode,
-          view: EditorView,
-          getPos: (() => number) | boolean,
-          decorations: Decoration[],
-        ) => {
-          const HTMLAttributes = getRenderedAttributes(node, extensionAttributes)
-
-          return addNodeView()({
+    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.name, nodeview]
-      }))
-  }
-
-  get textSerializers() {
-    const { editor } = this
-    const { nodeExtensions } = splitExtensions(this.extensions)
-
-    return Object.fromEntries(nodeExtensions
-      .filter(extension => !!getExtensionField(extension, 'renderText'))
-      .map(extension => {
-        const context = {
-          name: extension.name,
-          options: extension.options,
-          editor,
-          type: getNodeType(extension.name, this.schema),
-        }
-
-        const renderText = getExtensionField<NodeConfig['renderText']>(extension, 'renderText', context)
-
-        if (!renderText) {
-          return []
-        }
-
-        const textSerializer = (props: { node: ProsemirrorNode }) => renderText(props)
+            'addNodeView',
+            context,
+          )
 
-        return [extension.name, textSerializer]
-      }))
+          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]
+        }),
+    )
   }
-
 }

package/src/InputRule.ts

@@ -0,0 +1,260 @@
+import { EditorState, Plugin, TextSelection } from '@tiptap/pm/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 = [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
+}