feat: Integrate input rules and paste rules into the core (#1997)

* refactoring

* improve link regex

* WIP: add new markPasteRule und linkify to image mark

* move copy of inputrule to core

* trigger codeblock inputrule on enter

* refactoring

* add regex match to markpasterulematch

* refactoring

* improve link regex

* WIP: add new markPasteRule und linkify to image mark

* move copy of inputrule to core

* trigger codeblock inputrule on enter

* refactoring

* add regex match to markpasterulematch

* update linkify

* wip

* wip

* log

* wip

* remove debug code

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* rename matcher

* add data to ExtendedRegExpMatchArray

* remove logging

* add code option to marks, prevent inputrules in code mark

* remove link regex

* fix codeblock inputrule on enter

* refactoring

* refactoring

* refactoring

* refactoring

* fix position bug

* add test

* export InputRule and PasteRule

* clean up link demo

* fix types

demos/includeDependencies.txt

@@ -5,7 +5,6 @@ prosemirror-commands
 prosemirror-dropcursor
 prosemirror-gapcursor
 prosemirror-history
-prosemirror-inputrules
 prosemirror-keymap
 prosemirror-model
 prosemirror-schema-list

demos/src/Marks/Link/Vue/index.vue

@@ -16,7 +16,6 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Link from '@tiptap/extension-link'
-import Bold from '@tiptap/extension-bold'
 
 export default {
   components: {
@@ -35,14 +34,13 @@ export default {
         Document,
         Paragraph,
         Text,
-        Bold,
         Link.configure({
           openOnClick: false,
         }),
       ],
       content: `
         <p>
-          Wow, this editor has support for links to the whole <strong><a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a></strong>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
+          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
         </p>
         <p>
           By default every link will get a \`rel="noopener noreferrer nofollow"\` attribute. It’s configurable though.

demos/src/Nodes/CodeBlock/Vue/index.spec.js

@@ -126,6 +126,17 @@ context('/src/Nodes/CodeBlock/Vue/', () => {
     })
   })
 
+  it('should make a code block from backtick markdown shortcuts followed by enter', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.clearContent()
+
+      cy.get('.ProseMirror')
+        .type('```{enter}Code')
+        .find('pre>code')
+        .should('contain', 'Code')
+    })
+  })
+
   it('reverts the markdown shortcut when pressing backspace', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.commands.clearContent()

packages/core/package.json

@@ -25,7 +25,6 @@
   ],
   "dependencies": {
     "@types/prosemirror-commands": "^1.0.4",
-    "@types/prosemirror-inputrules": "^1.0.4",
     "@types/prosemirror-keymap": "^1.0.4",
     "@types/prosemirror-model": "^1.13.2",
     "@types/prosemirror-schema-list": "^1.0.3",
@@ -33,7 +32,6 @@
     "@types/prosemirror-transform": "^1.1.4",
     "@types/prosemirror-view": "^1.19.1",
     "prosemirror-commands": "^1.1.11",
-    "prosemirror-inputrules": "^1.1.3",
     "prosemirror-keymap": "^1.1.3",
     "prosemirror-model": "^1.14.3",
     "prosemirror-schema-list": "^1.1.6",

packages/core/src/CommandManager.ts

@@ -1,5 +1,6 @@
-import { EditorState, Transaction } from 'prosemirror-state'
+import { Transaction } from 'prosemirror-state'
 import { Editor } from './Editor'
+import createChainableState from './helpers/createChainableState'
 import {
   SingleCommands,
   ChainedCommands,
@@ -106,7 +107,10 @@ export default class CommandManager {
       tr,
       editor,
       view,
-      state: this.chainableState(tr, state),
+      state: createChainableState({
+        state,
+        transaction: tr,
+      }),
       dispatch: shouldDispatch
         ? () => undefined
         : undefined,
@@ -124,36 +128,4 @@ export default class CommandManager {
     return props
   }
 
-  public chainableState(tr: Transaction, state: EditorState): EditorState {
-    let { selection } = tr
-    let { doc } = tr
-    let { storedMarks } = tr
-
-    return {
-      ...state,
-      schema: state.schema,
-      plugins: state.plugins,
-      apply: state.apply.bind(state),
-      applyTransaction: state.applyTransaction.bind(state),
-      reconfigure: state.reconfigure.bind(state),
-      toJSON: state.toJSON.bind(state),
-      get storedMarks() {
-        return storedMarks
-      },
-      get selection() {
-        return selection
-      },
-      get doc() {
-        return doc
-      },
-      get tr() {
-        selection = tr.selection
-        doc = tr.doc
-        storedMarks = tr.storedMarks
-
-        return tr
-      },
-    }
-  }
-
 }

packages/core/src/Editor.ts

@@ -15,6 +15,7 @@ import getText from './helpers/getText'
 import isNodeEmpty from './helpers/isNodeEmpty'
 import getTextSeralizersFromSchema from './helpers/getTextSeralizersFromSchema'
 import createStyleTag from './utilities/createStyleTag'
+import isFunction from './utilities/isFunction'
 import CommandManager from './CommandManager'
 import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
@@ -184,7 +185,7 @@ export class Editor extends EventEmitter<EditorEvents> {
    * @param handlePlugins Control how to merge the plugin into the existing plugins.
    */
   public registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void {
-    const plugins = typeof handlePlugins === 'function'
+    const plugins = isFunction(handlePlugins)
       ? handlePlugins(plugin, this.state.plugins)
       : [...this.state.plugins, plugin]
 

packages/core/src/Extension.ts

@@ -1,5 +1,6 @@
 import { Plugin, Transaction } from 'prosemirror-state'
-import { InputRule } from 'prosemirror-inputrules'
+import { InputRule } from './InputRule'
+import { PasteRule } from './PasteRule'
 import { Editor } from './Editor'
 import { Node } from './Node'
 import { Mark } from './Mark'
@@ -81,7 +82,7 @@ declare module '@tiptap/core' {
       options: Options,
       editor: Editor,
       parent: ParentConfig<ExtensionConfig<Options>>['addPasteRules'],
-    }) => Plugin[],
+    }) => PasteRule[],
 
     /**
      * ProseMirror plugins

packages/core/src/ExtensionManager.ts

@@ -1,6 +1,7 @@
 import { keymap } from 'prosemirror-keymap'
 import { Schema, Node as ProsemirrorNode } from 'prosemirror-model'
-import { inputRules as inputRulesPlugin } from 'prosemirror-inputrules'
+import { inputRulesPlugin } from './InputRule'
+import { pasteRulesPlugin } from './PasteRule'
 import { EditorView, Decoration } from 'prosemirror-view'
 import { Plugin } from 'prosemirror-state'
 import { Editor } from './Editor'
@@ -210,7 +211,12 @@ export default class ExtensionManager {
     // 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.
-    return ExtensionManager.sort([...this.extensions].reverse())
+    const extensions = ExtensionManager.sort([...this.extensions].reverse())
+
+    const inputRules: any[] = []
+    const pasteRules: any[] = []
+
+    const allPlugins = extensions
       .map(extension => {
         const context = {
           name: extension.name,
@@ -248,12 +254,7 @@ export default class ExtensionManager {
         )
 
         if (this.editor.options.enableInputRules && addInputRules) {
-          const inputRules = addInputRules()
-          const inputRulePlugins = inputRules.length
-            ? [inputRulesPlugin({ rules: inputRules })]
-            : []
-
-          plugins.push(...inputRulePlugins)
+          inputRules.push(...addInputRules())
         }
 
         const addPasteRules = getExtensionField<AnyConfig['addPasteRules']>(
@@ -263,9 +264,7 @@ export default class ExtensionManager {
         )
 
         if (this.editor.options.enablePasteRules && addPasteRules) {
-          const pasteRulePlugins = addPasteRules()
-
-          plugins.push(...pasteRulePlugins)
+          pasteRules.push(...addPasteRules())
         }
 
         const addProseMirrorPlugins = getExtensionField<AnyConfig['addProseMirrorPlugins']>(
@@ -283,6 +282,12 @@ export default class ExtensionManager {
         return plugins
       })
       .flat()
+
+    return [
+      inputRulesPlugin(inputRules),
+      pasteRulesPlugin(pasteRules),
+      ...allPlugins,
+    ]
   }
 
   get attributes() {

packages/core/src/InputRule.ts

@@ -0,0 +1,245 @@
+import { EditorView } from 'prosemirror-view'
+import { EditorState, Plugin, TextSelection } from 'prosemirror-state'
+import createChainableState from './helpers/createChainableState'
+import isRegExp from './utilities/isRegExp'
+import { Range, ExtendedRegExpMatchArray } from './types'
+
+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,
+  }) => void
+
+  constructor(config: {
+    find: InputRuleFinder,
+    handler: (props: {
+      state: EditorState,
+      range: Range,
+      match: ExtendedRegExpMatchArray,
+    }) => void,
+  }) {
+    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: {
+  view: EditorView,
+  from: number,
+  to: number,
+  text: string,
+  rules: InputRule[],
+  plugin: Plugin,
+}): any {
+  const {
+    view,
+    from,
+    to,
+    text,
+    rules,
+    plugin,
+  } = config
+
+  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 maxMatch = 500
+  const textBefore = $from.parent.textBetween(
+    Math.max(0, $from.parentOffset - maxMatch),
+    $from.parentOffset,
+    undefined,
+    '\ufffc',
+  ) + 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,
+    }
+
+    rule.handler({
+      state,
+      range,
+      match,
+    })
+
+    // stop if there are no changes
+    if (!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(rules: InputRule[]): Plugin {
+  const plugin = new Plugin({
+    state: {
+      init() {
+        return null
+      },
+      apply(tr, prev) {
+        const stored = tr.getMeta(this)
+
+        if (stored) {
+          return stored
+        }
+
+        return tr.selectionSet || tr.docChanged
+          ? null
+          : prev
+      },
+    },
+
+    props: {
+      handleTextInput(view, from, to, text) {
+        return run({
+          view,
+          from,
+          to,
+          text,
+          rules,
+          plugin,
+        })
+      },
+
+      handleDOMEvents: {
+        compositionend: view => {
+          setTimeout(() => {
+            const { $cursor } = view.state.selection as TextSelection
+
+            if ($cursor) {
+              run({
+                view,
+                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({
+            view,
+            from: $cursor.pos,
+            to: $cursor.pos,
+            text: '\n',
+            rules,
+            plugin,
+          })
+        }
+
+        return false
+      },
+    },
+
+    // @ts-ignore
+    isInputRules: true,
+  }) as Plugin
+
+  return plugin
+}

packages/core/src/Mark.ts

@@ -5,7 +5,8 @@ import {
   MarkType,
 } from 'prosemirror-model'
 import { Plugin, Transaction } from 'prosemirror-state'
-import { InputRule } from 'prosemirror-inputrules'
+import { InputRule } from './InputRule'
+import { PasteRule } from './PasteRule'
 import mergeDeep from './utilities/mergeDeep'
 import {
   Extensions,
@@ -91,7 +92,7 @@ declare module '@tiptap/core' {
       editor: Editor,
       type: MarkType,
       parent: ParentConfig<MarkConfig<Options>>['addPasteRules'],
-    }) => Plugin[],
+    }) => PasteRule[],
 
     /**
      * ProseMirror plugins
@@ -281,6 +282,15 @@ declare module '@tiptap/core' {
       parent: ParentConfig<MarkConfig<Options>>['spanning'],
     }) => MarkSpec['spanning']),
 
+    /**
+     * Code
+     */
+    code?: boolean | ((this: {
+      name: string,
+      options: Options,
+      parent: ParentConfig<MarkConfig<Options>>['code'],
+    }) => boolean),
+
     /**
      * Parse HTML
      */

packages/core/src/Node.ts

@@ -5,7 +5,8 @@ import {
   NodeType,
 } from 'prosemirror-model'
 import { Plugin, Transaction } from 'prosemirror-state'
-import { InputRule } from 'prosemirror-inputrules'
+import { InputRule } from './InputRule'
+import { PasteRule } from './PasteRule'
 import mergeDeep from './utilities/mergeDeep'
 import {
   Extensions,
@@ -91,7 +92,7 @@ declare module '@tiptap/core' {
       editor: Editor,
       type: NodeType,
       parent: ParentConfig<NodeConfig<Options>>['addPasteRules'],
-    }) => Plugin[],
+    }) => PasteRule[],
 
     /**
      * ProseMirror plugins

packages/core/src/PasteRule.ts

@@ -0,0 +1,177 @@
+import { EditorState, Plugin } from 'prosemirror-state'
+import createChainableState from './helpers/createChainableState'
+import isRegExp from './utilities/isRegExp'
+import { Range, ExtendedRegExpMatchArray } from './types'
+
+export type PasteRuleMatch = {
+  index: number,
+  text: string,
+  replaceWith?: string,
+  match?: RegExpMatchArray,
+  data?: Record<string, any>,
+}
+
+export type PasteRuleFinder =
+  | RegExp
+  | ((text: string) => PasteRuleMatch[] | null | undefined)
+
+export class PasteRule {
+  find: PasteRuleFinder
+
+  handler: (props: {
+    state: EditorState,
+    range: Range,
+    match: ExtendedRegExpMatchArray,
+  }) => void
+
+  constructor(config: {
+    find: PasteRuleFinder,
+    handler: (props: {
+      state: EditorState,
+      range: Range,
+      match: ExtendedRegExpMatchArray,
+    }) => void,
+  }) {
+    this.find = config.find
+    this.handler = config.handler
+  }
+}
+
+const pasteRuleMatcherHandler = (text: string, find: PasteRuleFinder): ExtendedRegExpMatchArray[] => {
+  if (isRegExp(find)) {
+    return [...text.matchAll(find)]
+  }
+
+  const matches = find(text)
+
+  if (!matches) {
+    return []
+  }
+
+  return matches.map(pasteRuleMatch => {
+    const result: ExtendedRegExpMatchArray = []
+
+    result.push(pasteRuleMatch.text)
+    result.index = pasteRuleMatch.index
+    result.input = text
+    result.data = pasteRuleMatch.data
+
+    if (pasteRuleMatch.replaceWith) {
+      if (!pasteRuleMatch.text.includes(pasteRuleMatch.replaceWith)) {
+        console.warn('[tiptap warn]: "pasteRuleMatch.replaceWith" must be part of "pasteRuleMatch.text".')
+      }
+
+      result.push(pasteRuleMatch.replaceWith)
+    }
+
+    return result
+  })
+}
+
+function run(config: {
+  state: EditorState,
+  from: number,
+  to: number,
+  rules: PasteRule[],
+  plugin: Plugin,
+}): any {
+  const {
+    state,
+    from,
+    to,
+    rules,
+  } = config
+
+  state.doc.nodesBetween(from, to, (node, pos) => {
+    if (!node.isTextblock || node.type.spec.code) {
+      return
+    }
+
+    const resolvedFrom = Math.max(from, pos)
+    const resolvedTo = Math.min(to, pos + node.content.size)
+    const textToMatch = node.textBetween(
+      resolvedFrom - pos,
+      resolvedTo - pos,
+      undefined,
+      '\ufffc',
+    )
+
+    rules.forEach(rule => {
+      const matches = pasteRuleMatcherHandler(textToMatch, rule.find)
+
+      matches.forEach(match => {
+        if (match.index === undefined) {
+          return
+        }
+
+        const start = resolvedFrom + match.index
+        const end = start + match[0].length
+        const range = {
+          from: state.tr.mapping.map(start),
+          to: state.tr.mapping.map(end),
+        }
+
+        rule.handler({
+          state,
+          range,
+          match,
+        })
+      })
+    })
+  }, from)
+}
+
+/**
+ * Create an paste rules plugin. When enabled, it will cause pasted
+ * text that matches any of the given rules to trigger the rule’s
+ * action.
+ */
+export function pasteRulesPlugin(rules: PasteRule[]): Plugin {
+  const plugin = new Plugin({
+    appendTransaction: (transactions, oldState, state) => {
+      const transaction = transactions[0]
+
+      // stop if there is not a paste event
+      if (!transaction.getMeta('paste')) {
+        return
+      }
+
+      // stop if there is no changed range
+      const { doc, before } = transaction
+      const from = before.content.findDiffStart(doc.content)
+      const to = before.content.findDiffEnd(doc.content)
+
+      if (!from || !to) {
+        return
+      }
+
+      // build a chainable state
+      // so we can use a single transaction for all paste rules
+      const tr = state.tr
+      const chainableState = createChainableState({
+        state,
+        transaction: tr,
+      })
+
+      run({
+        state: chainableState,
+        from,
+        to: to.b,
+        rules,
+        plugin,
+      })
+
+      // stop if there are no changes
+      if (!tr.steps.length) {
+        return
+      }
+
+      return tr
+    },
+
+    // @ts-ignore
+    isPasteRules: true,
+  })
+
+  return plugin
+}

packages/core/src/commands/undoInputRule.ts

@@ -1,4 +1,3 @@
-import { undoInputRule as originalUndoInputRule } from 'prosemirror-inputrules'
 import { RawCommands } from '../types'
 
 declare module '@tiptap/core' {
@@ -13,5 +12,34 @@ declare module '@tiptap/core' {
 }
 
 export const undoInputRule: RawCommands['undoInputRule'] = () => ({ state, dispatch }) => {
-  return originalUndoInputRule(state, dispatch)
+  const plugins = state.plugins
+
+  for (let i = 0; i < plugins.length; i += 1) {
+    const plugin = plugins[i]
+    let undoable
+
+    // @ts-ignore
+    // eslint-disable-next-line
+    if (plugin.spec.isInputRules && (undoable = plugin.getState(state))) {
+      if (dispatch) {
+        const tr = state.tr
+        const toUndo = undoable.transform
+
+        for (let j = toUndo.steps.length - 1; j >= 0; j -= 1) {
+          tr.step(toUndo.steps[j].invert(toUndo.docs[j]))
+        }
+
+        if (undoable.text) {
+          const marks = tr.doc.resolve(undoable.from).marks()
+          tr.replaceWith(undoable.from, undoable.to, state.schema.text(undoable.text, marks))
+        } else {
+          tr.delete(undoable.from, undoable.to)
+        }
+      }
+
+      return true
+    }
+  }
+
+  return false
 }

packages/core/src/helpers/createChainableState.ts

@@ -0,0 +1,37 @@
+import { EditorState, Transaction } from 'prosemirror-state'
+
+export default function createChainableState(config: {
+  transaction: Transaction,
+  state: EditorState,
+}): EditorState {
+  const { state, transaction } = config
+  let { selection } = transaction
+  let { doc } = transaction
+  let { storedMarks } = transaction
+
+  return {
+    ...state,
+    schema: state.schema,
+    plugins: state.plugins,
+    apply: state.apply.bind(state),
+    applyTransaction: state.applyTransaction.bind(state),
+    reconfigure: state.reconfigure.bind(state),
+    toJSON: state.toJSON.bind(state),
+    get storedMarks() {
+      return storedMarks
+    },
+    get selection() {
+      return selection
+    },
+    get doc() {
+      return doc
+    },
+    get tr() {
+      selection = transaction.selection
+      doc = transaction.doc
+      storedMarks = transaction.storedMarks
+
+      return transaction
+    },
+  }
+}

packages/core/src/helpers/getSchemaByResolvedExtensions.ts

@@ -108,10 +108,11 @@ export default function getSchemaByResolvedExtensions(extensions: Extensions): S
 
     const schema: MarkSpec = cleanUpSchemaItem({
       ...extraMarkFields,
-      inclusive: callOrReturn(getExtensionField<NodeConfig['inclusive']>(extension, 'inclusive', context)),
-      excludes: callOrReturn(getExtensionField<NodeConfig['excludes']>(extension, 'excludes', context)),
-      group: callOrReturn(getExtensionField<NodeConfig['group']>(extension, 'group', context)),
-      spanning: callOrReturn(getExtensionField<NodeConfig['spanning']>(extension, 'spanning', context)),
+      inclusive: callOrReturn(getExtensionField<MarkConfig['inclusive']>(extension, 'inclusive', context)),
+      excludes: callOrReturn(getExtensionField<MarkConfig['excludes']>(extension, 'excludes', context)),
+      group: callOrReturn(getExtensionField<MarkConfig['group']>(extension, 'group', context)),
+      spanning: callOrReturn(getExtensionField<MarkConfig['spanning']>(extension, 'spanning', context)),
+      code: callOrReturn(getExtensionField<MarkConfig['code']>(extension, 'code', context)),
       attrs: Object.fromEntries(extensionAttributes.map(extensionAttribute => {
         return [extensionAttribute.name, { default: extensionAttribute?.attribute?.default }]
       })),

packages/core/src/index.ts

@@ -7,11 +7,17 @@ export * from './Node'
 export * from './Mark'
 export * from './NodeView'
 export * from './Tracker'
+export * from './InputRule'
+export * from './PasteRule'
 export * from './types'
 
 export { default as nodeInputRule } from './inputRules/nodeInputRule'
 export { default as markInputRule } from './inputRules/markInputRule'
+export { default as textblockTypeInputRule } from './inputRules/textblockTypeInputRule'
+export { default as textInputRule } from './inputRules/textInputRule'
+export { default as wrappingInputRule } from './inputRules/wrappingInputRule'
 export { default as markPasteRule } from './pasteRules/markPasteRule'
+export { default as textPasteRule } from './pasteRules/textPasteRule'
 
 export { default as callOrReturn } from './utilities/callOrReturn'
 export { default as mergeAttributes } from './utilities/mergeAttributes'

packages/core/src/inputRules/markInputRule.ts

@@ -1,50 +1,70 @@
-import { InputRule } from 'prosemirror-inputrules'
+import { InputRule, InputRuleFinder } from '../InputRule'
 import { MarkType } from 'prosemirror-model'
 import getMarksBetween from '../helpers/getMarksBetween'
+import callOrReturn from '../utilities/callOrReturn'
+import { ExtendedRegExpMatchArray } from '../types'
 
-export default function (regexp: RegExp, markType: MarkType, getAttributes?: Function): InputRule {
-  return new InputRule(regexp, (state, match, start, end) => {
-    const attributes = getAttributes instanceof Function
-      ? getAttributes(match)
-      : getAttributes
-    const { tr } = state
-    const captureGroup = match[match.length - 1]
-    const fullMatch = match[0]
-    let markEnd = end
+/**
+ * Build an input rule that adds a mark when the
+ * matched text is typed into it.
+ */
+export default function markInputRule(config: {
+  find: InputRuleFinder,
+  type: MarkType,
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+  ,
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match)
 
-    if (captureGroup) {
-      const startSpaces = fullMatch.search(/\S/)
-      const textStart = start + fullMatch.indexOf(captureGroup)
-      const textEnd = textStart + captureGroup.length
-
-      const excludedMarks = getMarksBetween(start, end, state)
-        .filter(item => {
-          // TODO: PR to add excluded to MarkType
-          // @ts-ignore
-          const { excluded } = item.mark.type
-          return excluded.find((type: MarkType) => type.name === markType.name)
-        })
-        .filter(item => item.to > textStart)
-
-      if (excludedMarks.length) {
-        return null
+      if (attributes === false || attributes === null) {
+        return
       }
 
-      if (textEnd < end) {
-        tr.delete(textEnd, end)
+      const { tr } = state
+      const captureGroup = match[match.length - 1]
+      const fullMatch = match[0]
+      let markEnd = range.to
+
+      if (captureGroup) {
+        const startSpaces = fullMatch.search(/\S/)
+        const textStart = range.from + fullMatch.indexOf(captureGroup)
+        const textEnd = textStart + captureGroup.length
+
+        const excludedMarks = getMarksBetween(range.from, range.to, state)
+          .filter(item => {
+            // TODO: PR to add excluded to MarkType
+            // @ts-ignore
+            const { excluded } = item.mark.type
+
+            return excluded.find((type: MarkType) => type.name === config.type.name)
+          })
+          .filter(item => item.to > textStart)
+
+        if (excludedMarks.length) {
+          return null
+        }
+
+        if (textEnd < range.to) {
+          tr.delete(textEnd, range.to)
+        }
+
+        if (textStart > range.from) {
+          tr.delete(range.from + startSpaces, textStart)
+        }
+
+        markEnd = range.from + startSpaces + captureGroup.length
+
+        tr.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}))
+
+        tr.removeStoredMark(config.type)
       }
-
-      if (textStart > start) {
-        tr.delete(start + startSpaces, textStart)
-      }
-
-      markEnd = start + startSpaces + captureGroup.length
-
-      tr.addMark(start + startSpaces, markEnd, markType.create(attributes))
-
-      tr.removeStoredMark(markType)
-    }
-
-    return tr
+    },
   })
 }

packages/core/src/inputRules/nodeInputRule.ts

@@ -1,32 +1,49 @@
-import { InputRule } from 'prosemirror-inputrules'
 import { NodeType } from 'prosemirror-model'
+import { InputRule, InputRuleFinder } from '../InputRule'
+import { ExtendedRegExpMatchArray } from '../types'
+import callOrReturn from '../utilities/callOrReturn'
 
-export default function (regexp: RegExp, type: NodeType, getAttributes?: (match: any) => any): InputRule {
-  return new InputRule(regexp, (state, match, start, end) => {
-    const attributes = getAttributes instanceof Function
-      ? getAttributes(match)
-      : getAttributes
-    const { tr } = state
+/**
+ * Build an input rule that adds a node when the
+ * matched text is typed into it.
+ */
+export default function nodeInputRule(config: {
+  find: InputRuleFinder,
+  type: NodeType,
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+  ,
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
+      const { tr } = state
+      const start = range.from
+      let end = range.to
 
-    if (match[1]) {
-      const offset = match[0].lastIndexOf(match[1])
-      let matchStart = start + offset
-      if (matchStart > end) {
-        matchStart = end
-      } else {
-        end = matchStart + match[1].length
+      if (match[1]) {
+        const offset = match[0].lastIndexOf(match[1])
+        let matchStart = start + offset
+
+        if (matchStart > end) {
+          matchStart = end
+        } else {
+          end = matchStart + match[1].length
+        }
+
+        // insert last typed character
+        const lastChar = match[0][match[0].length - 1]
+        tr.insertText(lastChar, start + match[0].length - 1)
+
+        // insert node from input rule
+        tr.replaceWith(matchStart, end, config.type.create(attributes))
+      } else if (match[0]) {
+        tr.replaceWith(start, end, config.type.create(attributes))
       }
-
-      // insert last typed character
-      const lastChar = match[0][match[0].length - 1]
-      tr.insertText(lastChar, start + match[0].length - 1)
-
-      // insert node from input rule
-      tr.replaceWith(matchStart, end, type.create(attributes))
-    } else if (match[0]) {
-      tr.replaceWith(start, end, type.create(attributes))
-    }
-
-    return tr
+    },
   })
 }

packages/core/src/inputRules/textInputRule.ts

@@ -0,0 +1,35 @@
+import { InputRule, InputRuleFinder } from '../InputRule'
+
+/**
+ * Build an input rule that replaces text when the
+ * matched text is typed into it.
+ */
+export default function textInputRule(config: {
+  find: InputRuleFinder,
+  replace: string,
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      let insert = config.replace
+      let start = range.from
+      const end = range.to
+
+      if (match[1]) {
+        const offset = match[0].lastIndexOf(match[1])
+
+        insert += match[0].slice(offset + match[1].length)
+        start += offset
+
+        const cutOff = start - end
+
+        if (cutOff > 0) {
+          insert = match[0].slice(offset - cutOff, offset) + insert
+          start = end
+        }
+      }
+
+      state.tr.insertText(insert, start, end)
+    },
+  })
+}

packages/core/src/inputRules/textblockTypeInputRule.ts

@@ -0,0 +1,37 @@
+import { InputRule, InputRuleFinder } from '../InputRule'
+import { NodeType } from 'prosemirror-model'
+import { ExtendedRegExpMatchArray } from '../types'
+import callOrReturn from '../utilities/callOrReturn'
+
+/**
+ * Build an input rule that changes the type of a textblock when the
+ * matched text is typed into it. When using a regular expresion you’ll
+ * probably want the regexp to start with `^`, so that the pattern can
+ * only occur at the start of a textblock.
+ */
+export default function textblockTypeInputRule(config: {
+  find: InputRuleFinder,
+  type: NodeType,
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+  ,
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const $start = state.doc.resolve(range.from)
+      const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
+
+      if (!$start.node(-1).canReplaceWith($start.index(-1), $start.indexAfter(-1), config.type)) {
+        return null
+      }
+
+      state.tr
+        .delete(range.from, range.to)
+        .setBlockType(range.from, range.from, config.type, attributes)
+    },
+  })
+}

packages/core/src/inputRules/wrappingInputRule.ts

@@ -0,0 +1,59 @@
+import { InputRule, InputRuleFinder } from '../InputRule'
+import { NodeType, Node as ProseMirrorNode } from 'prosemirror-model'
+import { findWrapping, canJoin } from 'prosemirror-transform'
+import { ExtendedRegExpMatchArray } from '../types'
+import callOrReturn from '../utilities/callOrReturn'
+
+/**
+ * Build an input rule for automatically wrapping a textblock when a
+ * given string is typed. When using a regular expresion you’ll
+ * probably want the regexp to start with `^`, so that the pattern can
+ * only occur at the start of a textblock.
+ *
+ * `type` is the type of node to wrap in.
+ *
+ * By default, if there’s a node with the same type above the newly
+ * wrapped node, the rule will try to join those
+ * two nodes. You can pass a join predicate, which takes a regular
+ * expression match and the node before the wrapped node, and can
+ * return a boolean to indicate whether a join should happen.
+ */
+export default function wrappingInputRule(config: {
+  find: InputRuleFinder,
+  type: NodeType,
+  getAttributes?:
+    | Record<string, any>
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+    | false
+    | null
+  ,
+  joinPredicate?: (match: ExtendedRegExpMatchArray, node: ProseMirrorNode) => boolean,
+}) {
+  return new InputRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
+      const tr = state.tr.delete(range.from, range.to)
+      const $start = tr.doc.resolve(range.from)
+      const blockRange = $start.blockRange()
+      const wrapping = blockRange && findWrapping(blockRange, config.type, attributes)
+
+      if (!wrapping) {
+        return null
+      }
+
+      tr.wrap(blockRange, wrapping)
+
+      const before = tr.doc.resolve(range.from - 1).nodeBefore
+
+      if (
+        before
+        && before.type === config.type
+        && canJoin(tr.doc, range.from - 1)
+        && (!config.joinPredicate || config.joinPredicate(match, before))
+      ) {
+        tr.join(range.from - 1)
+      }
+    },
+  })
+}

packages/core/src/pasteRules/markPasteRule.ts

@@ -1,76 +1,70 @@
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { Slice, Fragment, MarkType } from 'prosemirror-model'
+import { PasteRule, PasteRuleFinder } from '../PasteRule'
+import { MarkType } from 'prosemirror-model'
+import getMarksBetween from '../helpers/getMarksBetween'
+import callOrReturn from '../utilities/callOrReturn'
+import { ExtendedRegExpMatchArray } from '../types'
 
-export default function (
-  regexp: RegExp,
+/**
+ * Build an paste rule that adds a mark when the
+ * matched text is pasted into it.
+ */
+export default function markPasteRule(config: {
+  find: PasteRuleFinder,
   type: MarkType,
   getAttributes?:
     | Record<string, any>
-    | ((match: RegExpExecArray) => Record<string, any>)
+    | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
     | false
     | null
   ,
-): Plugin {
-  const handler = (fragment: Fragment, parent?: any) => {
-    const nodes: any[] = []
+}) {
+  return new PasteRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      const attributes = callOrReturn(config.getAttributes, undefined, match)
 
-    fragment.forEach(child => {
-      if (child.isText && child.text) {
-        const { text } = child
-        let pos = 0
-        let match
-
-        // eslint-disable-next-line
-        while ((match = regexp.exec(text)) !== null) {
-          const outerMatch = Math.max(match.length - 2, 0)
-          const innerMatch = Math.max(match.length - 1, 0)
-
-          if (parent?.type.allowsMarkType(type)) {
-            const start = match.index
-            const matchStart = start + match[0].indexOf(match[outerMatch])
-            const matchEnd = matchStart + match[outerMatch].length
-            const textStart = matchStart + match[outerMatch].lastIndexOf(match[innerMatch])
-            const textEnd = textStart + match[innerMatch].length
-            const attrs = getAttributes instanceof Function
-              ? getAttributes(match)
-              : getAttributes
-
-            if (!attrs && attrs !== undefined) {
-              continue
-            }
-
-            // adding text before markdown to nodes
-            if (matchStart > 0) {
-              nodes.push(child.cut(pos, matchStart))
-            }
-
-            // adding the markdown part to nodes
-            nodes.push(child
-              .cut(textStart, textEnd)
-              .mark(type.create(attrs).addToSet(child.marks)))
-
-            pos = matchEnd
-          }
-        }
-
-        // adding rest of text to nodes
-        if (pos < text.length) {
-          nodes.push(child.cut(pos))
-        }
-      } else {
-        nodes.push(child.copy(handler(child.content, child)))
+      if (attributes === false || attributes === null) {
+        return
       }
-    })
 
-    return Fragment.fromArray(nodes)
-  }
+      const { tr } = state
+      const captureGroup = match[match.length - 1]
+      const fullMatch = match[0]
+      let markEnd = range.to
 
-  return new Plugin({
-    key: new PluginKey('markPasteRule'),
-    props: {
-      transformPasted: slice => {
-        return new Slice(handler(slice.content), slice.openStart, slice.openEnd)
-      },
+      if (captureGroup) {
+        const startSpaces = fullMatch.search(/\S/)
+        const textStart = range.from + fullMatch.indexOf(captureGroup)
+        const textEnd = textStart + captureGroup.length
+
+        const excludedMarks = getMarksBetween(range.from, range.to, state)
+          .filter(item => {
+            // TODO: PR to add excluded to MarkType
+            // @ts-ignore
+            const { excluded } = item.mark.type
+
+            return excluded.find((type: MarkType) => type.name === config.type.name)
+          })
+          .filter(item => item.to > textStart)
+
+        if (excludedMarks.length) {
+          return null
+        }
+
+        if (textEnd < range.to) {
+          tr.delete(textEnd, range.to)
+        }
+
+        if (textStart > range.from) {
+          tr.delete(range.from + startSpaces, textStart)
+        }
+
+        markEnd = range.from + startSpaces + captureGroup.length
+
+        tr.addMark(range.from + startSpaces, markEnd, config.type.create(attributes || {}))
+
+        tr.removeStoredMark(config.type)
+      }
     },
   })
 }

packages/core/src/pasteRules/textPasteRule.ts

@@ -0,0 +1,35 @@
+import { PasteRule, PasteRuleFinder } from '../PasteRule'
+
+/**
+ * Build an paste rule that replaces text when the
+ * matched text is pasted into it.
+ */
+export default function textPasteRule(config: {
+  find: PasteRuleFinder,
+  replace: string,
+}) {
+  return new PasteRule({
+    find: config.find,
+    handler: ({ state, range, match }) => {
+      let insert = config.replace
+      let start = range.from
+      const end = range.to
+
+      if (match[1]) {
+        const offset = match[0].lastIndexOf(match[1])
+
+        insert += match[0].slice(offset + match[1].length)
+        start += offset
+
+        const cutOff = start - end
+
+        if (cutOff > 0) {
+          insert = match[0].slice(offset - cutOff, offset) + insert
+          start = end
+        }
+      }
+
+      state.tr.insertText(insert, start, end)
+    },
+  })
+}

packages/core/src/types.ts

@@ -229,3 +229,7 @@ export type TextSerializer = (props: {
   parent: ProseMirrorNode,
   index: number,
 }) => string
+
+export type ExtendedRegExpMatchArray = RegExpMatchArray & {
+  data?: Record<string, any>,
+}

packages/core/src/utilities/callOrReturn.ts

@@ -1,4 +1,5 @@
 import { MaybeReturnType } from '../types'
+import isFunction from './isFunction'
 
 /**
  * Optionally calls `value` as a function.
@@ -8,7 +9,7 @@ import { MaybeReturnType } from '../types'
  * @param props Optional props to pass to function.
  */
 export default function callOrReturn<T>(value: T, context: any = undefined, ...props: any[]): MaybeReturnType<T> {
-  if (typeof value === 'function') {
+  if (isFunction(value)) {
     if (context) {
       return value.bind(context)(...props)
     }

packages/core/src/utilities/isClass.ts

@@ -1,5 +1,5 @@
-export default function isClass(item: any): boolean {
-  if (item.constructor?.toString().substring(0, 5) !== 'class') {
+export default function isClass(value: any): boolean {
+  if (value.constructor?.toString().substring(0, 5) !== 'class') {
     return false
   }
 

packages/core/src/utilities/isEmptyObject.ts

@@ -1,3 +1,3 @@
-export default function isEmptyObject(object = {}): boolean {
-  return Object.keys(object).length === 0 && object.constructor === Object
+export default function isEmptyObject(value = {}): boolean {
+  return Object.keys(value).length === 0 && value.constructor === Object
 }

packages/core/src/utilities/isFunction.ts

@@ -0,0 +1,3 @@
+export default function isObject(value: any): value is Function {
+  return typeof value === 'function'
+}

packages/core/src/utilities/isObject.ts

@@ -1,10 +1,10 @@
 import isClass from './isClass'
 
-export default function isObject(item: any): boolean {
+export default function isObject(value: any): boolean {
   return (
-    item
-    && typeof item === 'object'
-    && !Array.isArray(item)
-    && !isClass(item)
+    value
+    && typeof value === 'object'
+    && !Array.isArray(value)
+    && !isClass(value)
   )
 }

packages/core/src/utilities/isPlainObject.ts

@@ -1,10 +1,10 @@
 // see: https://github.com/mesqueeb/is-what/blob/88d6e4ca92fb2baab6003c54e02eedf4e729e5ab/src/index.ts
 
-function getType(payload: any): string {
-  return Object.prototype.toString.call(payload).slice(8, -1)
+function getType(value: any): string {
+  return Object.prototype.toString.call(value).slice(8, -1)
 }
 
-export default function isPlainObject(payload: any): payload is Record<string, any> {
-  if (getType(payload) !== 'Object') return false
-  return payload.constructor === Object && Object.getPrototypeOf(payload) === Object.prototype
+export default function isPlainObject(value: any): value is Record<string, any> {
+  if (getType(value) !== 'Object') return false
+  return value.constructor === Object && Object.getPrototypeOf(value) === Object.prototype
 }

packages/core/src/utilities/isRegExp.ts

@@ -1,3 +1,3 @@
-export default function isRegExp(value: any): boolean {
+export default function isRegExp(value: any): value is RegExp {
   return Object.prototype.toString.call(value) === '[object RegExp]'
 }

packages/core/src/utilities/isString.ts

@@ -0,0 +1,3 @@
+export default function isString(value: any): value is string {
+  return typeof value === 'string'
+}

packages/extension-blockquote/package.json

@@ -23,9 +23,6 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
-  "dependencies": {
-    "prosemirror-inputrules": "^1.1.3"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-blockquote/src/blockquote.ts

@@ -1,5 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import { wrappingInputRule } from 'prosemirror-inputrules'
+import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
 
 export interface BlockquoteOptions {
   HTMLAttributes: Record<string, any>,
@@ -72,7 +71,10 @@ export const Blockquote = Node.create<BlockquoteOptions>({
 
   addInputRules() {
     return [
-      wrappingInputRule(inputRegex, this.type),
+      wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-bold/src/bold.ts

@@ -82,15 +82,27 @@ export const Bold = Mark.create<BoldOptions>({
 
   addInputRules() {
     return [
-      markInputRule(starInputRegex, this.type),
-      markInputRule(underscoreInputRegex, this.type),
+      markInputRule({
+        find: starInputRegex,
+        type: this.type,
+      }),
+      markInputRule({
+        find: underscoreInputRegex,
+        type: this.type,
+      }),
     ]
   },
 
   addPasteRules() {
     return [
-      markPasteRule(starPasteRegex, this.type),
-      markPasteRule(underscorePasteRegex, this.type),
+      markPasteRule({
+        find: starPasteRegex,
+        type: this.type,
+      }),
+      markPasteRule({
+        find: underscorePasteRegex,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-bullet-list/package.json

@@ -23,9 +23,6 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
-  "dependencies": {
-    "prosemirror-inputrules": "^1.1.3"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-bullet-list/src/bullet-list.ts

@@ -1,5 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import { wrappingInputRule } from 'prosemirror-inputrules'
+import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
 
 export interface BulletListOptions {
   HTMLAttributes: Record<string, any>,
@@ -55,7 +54,10 @@ export const BulletList = Node.create<BulletListOptions>({
 
   addInputRules() {
     return [
-      wrappingInputRule(inputRegex, this.type),
+      wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-code-block/package.json

@@ -23,9 +23,6 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
-  "dependencies": {
-    "prosemirror-inputrules": "^1.1.3"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-code-block/src/code-block.ts

@@ -1,5 +1,4 @@
-import { Node } from '@tiptap/core'
-import { textblockTypeInputRule } from 'prosemirror-inputrules'
+import { Node, textblockTypeInputRule } from '@tiptap/core'
 
 export interface CodeBlockOptions {
   languageClassPrefix: string,
@@ -21,8 +20,8 @@ declare module '@tiptap/core' {
   }
 }
 
-export const backtickInputRegex = /^```(?<language>[a-z]*)? $/
-export const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/
+export const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/
+export const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/
 
 export const CodeBlock = Node.create<CodeBlockOptions>({
   name: 'codeBlock',
@@ -121,8 +120,16 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
 
   addInputRules() {
     return [
-      textblockTypeInputRule(backtickInputRegex, this.type, ({ groups }: any) => groups),
-      textblockTypeInputRule(tildeInputRegex, this.type, ({ groups }: any) => groups),
+      textblockTypeInputRule({
+        find: backtickInputRegex,
+        type: this.type,
+        getAttributes: ({ groups }) => groups,
+      }),
+      textblockTypeInputRule({
+        find: tildeInputRegex,
+        type: this.type,
+        getAttributes: ({ groups }) => groups,
+      }),
     ]
   },
 })

packages/extension-code/src/code.ts

@@ -40,6 +40,8 @@ export const Code = Mark.create<CodeOptions>({
 
   excludes: '_',
 
+  code: true,
+
   parseHTML() {
     return [
       { tag: 'code' },
@@ -72,13 +74,19 @@ export const Code = Mark.create<CodeOptions>({
 
   addInputRules() {
     return [
-      markInputRule(inputRegex, this.type),
+      markInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
     ]
   },
 
   addPasteRules() {
     return [
-      markPasteRule(pasteRegex, this.type),
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-heading/package.json

@@ -23,9 +23,6 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
-  "dependencies": {
-    "prosemirror-inputrules": "^1.1.3"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-heading/src/heading.ts

@@ -1,5 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import { textblockTypeInputRule } from 'prosemirror-inputrules'
+import { Node, mergeAttributes, textblockTypeInputRule } from '@tiptap/core'
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6
 
@@ -93,7 +92,13 @@ export const Heading = Node.create<HeadingOptions>({
 
   addInputRules() {
     return this.options.levels.map(level => {
-      return textblockTypeInputRule(new RegExp(`^(#{1,${level}})\\s$`), this.type, { level })
+      return textblockTypeInputRule({
+        find: new RegExp(`^(#{1,${level}})\\s$`),
+        type: this.type,
+        getAttributes: {
+          level,
+        },
+      })
     })
   },
 })

packages/extension-highlight/src/highlight.ts

@@ -97,13 +97,19 @@ export const Highlight = Mark.create<HighlightOptions>({
 
   addInputRules() {
     return [
-      markInputRule(inputRegex, this.type),
+      markInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
     ]
   },
 
   addPasteRules() {
     return [
-      markPasteRule(pasteRegex, this.type),
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-horizontal-rule/src/horizontal-rule.ts

@@ -92,7 +92,10 @@ export const HorizontalRule = Node.create<HorizontalRuleOptions>({
 
   addInputRules() {
     return [
-      nodeInputRule(/^(?:---|—-|___\s|\*\*\*\s)$/, this.type),
+      nodeInputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-image/src/image.ts

@@ -79,10 +79,14 @@ export const Image = Node.create<ImageOptions>({
 
   addInputRules() {
     return [
-      nodeInputRule(inputRegex, this.type, match => {
-        const [, alt, src, title] = match
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: match => {
+          const [, alt, src, title] = match
 
-        return { src, alt, title }
+          return { src, alt, title }
+        },
       }),
     ]
   },

packages/extension-italic/src/italic.ts

@@ -81,15 +81,27 @@ export const Italic = Mark.create<ItalicOptions>({
 
   addInputRules() {
     return [
-      markInputRule(starInputRegex, this.type),
-      markInputRule(underscoreInputRegex, this.type),
+      markInputRule({
+        find: starInputRegex,
+        type: this.type,
+      }),
+      markInputRule({
+        find: underscoreInputRegex,
+        type: this.type,
+      }),
     ]
   },
 
   addPasteRules() {
     return [
-      markPasteRule(starPasteRegex, this.type),
-      markPasteRule(underscorePasteRegex, this.type),
+      markPasteRule({
+        find: starPasteRegex,
+        type: this.type,
+      }),
+      markPasteRule({
+        find: underscorePasteRegex,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-link/package.json

@@ -24,6 +24,7 @@
     "@tiptap/core": "^2.0.0-beta.1"
   },
   "dependencies": {
+    "linkifyjs": "^3.0.1",
     "prosemirror-state": "^1.3.4"
   },
   "repository": {

packages/extension-link/src/link.ts

@@ -4,6 +4,7 @@ import {
   mergeAttributes,
 } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
+import { find } from 'linkifyjs'
 
 export interface LinkOptions {
   /**
@@ -39,16 +40,6 @@ declare module '@tiptap/core' {
   }
 }
 
-/**
- * A regex that matches any string that contains a link
- */
-export const pasteRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)/gi
-
-/**
- * A regex that matches an url
- */
-export const pasteRegexExact = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)$/gi
-
 export const Link = Mark.create<LinkOptions>({
   name: 'link',
 
@@ -102,7 +93,19 @@ export const Link = Mark.create<LinkOptions>({
 
   addPasteRules() {
     return [
-      markPasteRule(pasteRegex, this.type, match => ({ href: match[0] })),
+      markPasteRule({
+        find: text => find(text)
+          .filter(link => link.isLink)
+          .map(link => ({
+            text: link.value,
+            index: link.start,
+            data: link,
+          })),
+        type: this.type,
+        getAttributes: match => ({
+          href: match.data?.href,
+        }),
+      }),
     ]
   },
 
@@ -151,12 +154,15 @@ export const Link = Mark.create<LinkOptions>({
                 textContent += node.textContent
               })
 
-              if (!textContent || !textContent.match(pasteRegexExact)) {
+              const link = find(textContent)
+                .find(item => item.isLink && item.value === textContent)
+
+              if (!textContent || !link) {
                 return false
               }
 
               this.editor.commands.setMark(this.type, {
-                href: textContent,
+                href: link.href,
               })
 
               return true

packages/extension-ordered-list/package.json

@@ -23,9 +23,6 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
-  "dependencies": {
-    "prosemirror-inputrules": "^1.1.3"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-ordered-list/src/ordered-list.ts

@@ -1,5 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import { wrappingInputRule } from 'prosemirror-inputrules'
+import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
 
 export interface OrderedListOptions {
   HTMLAttributes: Record<string, any>,
@@ -74,12 +73,12 @@ export const OrderedList = Node.create<OrderedListOptions>({
 
   addInputRules() {
     return [
-      wrappingInputRule(
-        inputRegex,
-        this.type,
-        match => ({ start: +match[1] }),
-        (match, node) => node.childCount + node.attrs.start === +match[1],
-      ),
+      wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: match => ({ start: +match[1] }),
+        joinPredicate: (match, node) => node.childCount + node.attrs.start === +match[1],
+      }),
     ]
   },
 })

packages/extension-strike/src/strike.ts

@@ -83,13 +83,19 @@ export const Strike = Mark.create<StrikeOptions>({
 
   addInputRules() {
     return [
-      markInputRule(inputRegex, this.type),
+      markInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
     ]
   },
 
   addPasteRules() {
     return [
-      markPasteRule(pasteRegex, this.type),
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type,
+      }),
     ]
   },
 })

packages/extension-task-item/package.json

@@ -23,9 +23,6 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
-  "dependencies": {
-    "prosemirror-inputrules": "^1.1.3"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-task-item/src/task-item.ts

@@ -1,5 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import { wrappingInputRule } from 'prosemirror-inputrules'
+import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
 
 export interface TaskItemOptions {
   nested: boolean,
@@ -146,13 +145,13 @@ export const TaskItem = Node.create<TaskItemOptions>({
 
   addInputRules() {
     return [
-      wrappingInputRule(
-        inputRegex,
-        this.type,
-        match => ({
+      wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: match => ({
           checked: match[match.length - 1] === 'x',
         }),
-      ),
+      }),
     ]
   },
 })

packages/extension-typography/package.json

@@ -23,9 +23,6 @@
   "peerDependencies": {
     "@tiptap/core": "^2.0.0-beta.1"
   },
-  "dependencies": {
-    "prosemirror-inputrules": "^1.1.3"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",

packages/extension-typography/src/typography.ts

@@ -1,29 +1,109 @@
-import { Extension } from '@tiptap/core'
-import {
-  emDash,
-  ellipsis,
-  openDoubleQuote,
-  closeDoubleQuote,
-  openSingleQuote,
-  closeSingleQuote,
-  InputRule,
-} from 'prosemirror-inputrules'
+import { Extension, textInputRule } from '@tiptap/core'
 
-export const leftArrow = new InputRule(/<-$/, '←')
-export const rightArrow = new InputRule(/->$/, '→')
-export const copyright = new InputRule(/\(c\)$/, '©')
-export const trademark = new InputRule(/\(tm\)$/, '™')
-export const registeredTrademark = new InputRule(/\(r\)$/, '®')
-export const oneHalf = new InputRule(/1\/2$/, '½')
-export const plusMinus = new InputRule(/\+\/-$/, '±')
-export const notEqual = new InputRule(/!=$/, '≠')
-export const laquo = new InputRule(/<<$/, '«')
-export const raquo = new InputRule(/>>$/, '»')
-export const multiplication = new InputRule(/\d+\s?([*x])\s?\d+$/, '×')
-export const superscriptTwo = new InputRule(/\^2$/, '²')
-export const superscriptThree = new InputRule(/\^3$/, '³')
-export const oneQuarter = new InputRule(/1\/4$/, '¼')
-export const threeQuarters = new InputRule(/3\/4$/, '¾')
+export const emDash = textInputRule({
+  find: /--$/,
+  replace: '—',
+})
+
+export const ellipsis = textInputRule({
+  find: /\.\.\.$/,
+  replace: '…',
+})
+
+export const openDoubleQuote = textInputRule({
+  find: /(?:^|[\s{[(<'"\u2018\u201C])(")$/,
+  replace: '“',
+})
+
+export const closeDoubleQuote = textInputRule({
+  find: /"$/,
+  replace: '”',
+})
+
+export const openSingleQuote = textInputRule({
+  find: /(?:^|[\s{[(<'"\u2018\u201C])(')$/,
+  replace: '‘',
+})
+
+export const closeSingleQuote = textInputRule({
+  find: /'$/,
+  replace: '’',
+})
+
+export const leftArrow = textInputRule({
+  find: /<-$/,
+  replace: '←',
+})
+
+export const rightArrow = textInputRule({
+  find: /->$/,
+  replace: '→',
+})
+
+export const copyright = textInputRule({
+  find: /\(c\)$/,
+  replace: '©',
+})
+
+export const trademark = textInputRule({
+  find: /\(tm\)$/,
+  replace: '™',
+})
+
+export const registeredTrademark = textInputRule({
+  find: /\(r\)$/,
+  replace: '®',
+})
+
+export const oneHalf = textInputRule({
+  find: /1\/2$/,
+  replace: '½',
+})
+
+export const plusMinus = textInputRule({
+  find: /\+\/-$/,
+  replace: '±',
+})
+
+export const notEqual = textInputRule({
+  find: /!=$/,
+  replace: '≠',
+})
+
+export const laquo = textInputRule({
+  find: /<<$/,
+  replace: '«',
+})
+
+export const raquo = textInputRule({
+  find: />>$/,
+  replace: '»',
+})
+
+export const multiplication = textInputRule({
+  find: /\d+\s?([*x])\s?\d+$/,
+  replace: '×',
+})
+
+export const superscriptTwo = textInputRule({
+  find: /\^2$/,
+  replace: '²',
+})
+
+export const superscriptThree = textInputRule({
+  find: /\^3$/,
+  replace: '³',
+})
+
+export const oneQuarter = textInputRule({
+  find: /1\/4$/,
+  replace: '¼',
+})
+
+export const threeQuarters = textInputRule({
+  find: /3\/4$/,
+  replace: '¾',
+})
 
 export const Typography = Extension.create({
   name: 'typography',

tests/cypress/integration/extensions/link.spec.ts

@@ -1,51 +0,0 @@
-/// <reference types="cypress" />
-
-import { pasteRegex } from '@tiptap/extension-link'
-
-describe('link paste rules', () => {
-  const validUrls = [
-    'https://example.com',
-    'https://example.com/with-path',
-    'http://example.com/with-http',
-    'https://www.example.com/with-www',
-    'https://www.example.com/with-numbers-123',
-    'https://www.example.com/with-parameters?var=true',
-    'https://www.example.com/with-multiple-parameters?var=true&foo=bar',
-    'https://www.example.com/with-spaces?var=true&foo=bar+3',
-    'https://www.example.com/with,comma',
-    'https://www.example.com/with(brackets)',
-    'https://www.example.com/with!exclamation!marks',
-    'http://thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com/',
-    'https://example.longtopleveldomain',
-    'https://example-with-dashes.com',
-  ]
-
-  validUrls.forEach(url => {
-    it(`paste regex matches url: ${url}`, {
-      // every second test fails, but the second try succeeds
-      retries: {
-        runMode: 2,
-        openMode: 2,
-      },
-    }, () => {
-      // TODO: Check the regex capture group to see *what* is matched
-      expect(url).to.match(pasteRegex)
-    })
-  })
-
-  const invalidUrls = [
-    'ftp://www.example.com',
-  ]
-
-  invalidUrls.forEach(url => {
-    it(`paste regex doesn’t match url: ${url}`, {
-      // every second test fails, but the second try succeeds
-      retries: {
-        runMode: 2,
-        openMode: 2,
-      },
-    }, () => {
-      expect(url).to.not.match(pasteRegex)
-    })
-  })
-})

yarn.lock

@@ -2100,14 +2100,6 @@
     "@types/prosemirror-model" "*"
     "@types/prosemirror-state" "*"
 
-"@types/prosemirror-inputrules@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-inputrules/-/prosemirror-inputrules-1.0.4.tgz#4cb75054d954aa0f6f42099be05eb6c0e6958bae"
-  integrity sha512-lJIMpOjO47SYozQybUkpV6QmfuQt7GZKHtVrvS+mR5UekA8NMC5HRIVMyaIauJLWhKU6oaNjpVaXdw41kh165g==
-  dependencies:
-    "@types/prosemirror-model" "*"
-    "@types/prosemirror-state" "*"
-
 "@types/prosemirror-keymap@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/prosemirror-keymap/-/prosemirror-keymap-1.0.4.tgz#f73c79810e8d0e0a20d153d84f998f02e5afbc0c"
@@ -5922,6 +5914,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkifyjs@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-3.0.1.tgz#fda7b8d399eceef6fd7427f8a6e5d4f962ae74ed"
+  integrity sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg==
+
 listr2@^3.8.3:
   version "3.12.2"
   resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.12.2.tgz#2d55cc627111603ad4768a9e87c9c7bb9b49997e"
@@ -7163,14 +7160,6 @@ prosemirror-history@^1.2.0:
     prosemirror-transform "^1.0.0"
     rope-sequence "^1.3.0"
 
-prosemirror-inputrules@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz#93f9199ca02473259c30d7e352e4c14022d54638"
-  integrity sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==
-  dependencies:
-    prosemirror-state "^1.0.0"
-    prosemirror-transform "^1.0.0"
-
 prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz#8b481bf8389a5ac40d38dbd67ec3da2c7eac6a6d"