fix: add way to cancel inputrules and pasterules (#2368)

Co-authored-by: Philipp Kühn <philippkuehn@MacBook-Pro-von-Philipp.local>

packages/core/src/ExtensionManager.ts

@@ -306,7 +306,7 @@ export class ExtensionManager {
         editor,
         rules: inputRules,
       }),
-      pasteRulesPlugin({
+      ...pasteRulesPlugin({
         editor,
         rules: pasteRules,
       }),

packages/core/src/InputRule.ts

@@ -1,4 +1,9 @@
-import { EditorState, Plugin, TextSelection } from 'prosemirror-state'
+import {
+  EditorState,
+  Plugin,
+  TextSelection,
+  Transaction,
+} from 'prosemirror-state'
 import { Editor } from './Editor'
 import { CommandManager } from './CommandManager'
 import { createChainableState } from './helpers/createChainableState'
@@ -33,7 +38,7 @@ export class InputRule {
     commands: SingleCommands,
     chain: () => ChainedCommands,
     can: () => CanCommands,
-  }) => void
+  }) => Transaction | null
 
   constructor(config: {
     find: InputRuleFinder,
@@ -44,7 +49,7 @@ export class InputRule {
       commands: SingleCommands,
       chain: () => ChainedCommands,
       can: () => CanCommands,
-    }) => void,
+    }) => Transaction | null,
   }) {
     this.find = config.find
     this.handler = config.handler
@@ -87,7 +92,7 @@ function run(config: {
   text: string,
   rules: InputRule[],
   plugin: Plugin,
-}): any {
+}): boolean {
   const {
     editor,
     from,
@@ -148,7 +153,7 @@ function run(config: {
       state,
     })
 
-    rule.handler({
+    const handler = rule.handler({
       state,
       range,
       match,
@@ -158,7 +163,7 @@ function run(config: {
     })
 
     // stop if there are no changes
-    if (!tr.steps.length) {
+    if (!handler || !tr.steps.length) {
       return
     }
 

packages/core/src/PasteRule.ts

@@ -1,4 +1,4 @@
-import { EditorState, Plugin } from 'prosemirror-state'
+import { EditorState, Plugin, Transaction } from 'prosemirror-state'
 import { Editor } from './Editor'
 import { CommandManager } from './CommandManager'
 import { createChainableState } from './helpers/createChainableState'
@@ -34,7 +34,7 @@ export class PasteRule {
     commands: SingleCommands,
     chain: () => ChainedCommands,
     can: () => CanCommands,
-  }) => void
+  }) => Transaction | null
 
   constructor(config: {
     find: PasteRuleFinder,
@@ -45,7 +45,7 @@ export class PasteRule {
       commands: SingleCommands,
       chain: () => ChainedCommands,
       can: () => CanCommands,
-    }) => void,
+    }) => Transaction | null,
   }) {
     this.find = config.find
     this.handler = config.handler
@@ -88,15 +88,14 @@ function run(config: {
   state: EditorState,
   from: number,
   to: number,
-  rules: PasteRule[],
+  rule: PasteRule,
-  plugin: Plugin,
+}): boolean {
-}): any {
   const {
     editor,
     state,
     from,
     to,
-    rules,
+    rule,
   } = config
 
   const { commands, chain, can } = new CommandManager({
@@ -104,6 +103,8 @@ function run(config: {
     state,
   })
 
+  const handlers: (Transaction | null)[] = []
+
   state.doc.nodesBetween(from, to, (node, pos) => {
     if (!node.isTextblock || node.type.spec.code) {
       return
@@ -118,7 +119,6 @@ function run(config: {
       '\ufffc',
     )
 
-    rules.forEach(rule => {
     const matches = pasteRuleMatcherHandler(textToMatch, rule.find)
 
     matches.forEach(match => {
@@ -133,7 +133,7 @@ function run(config: {
         to: state.tr.mapping.map(end),
       }
 
-        rule.handler({
+      const handler = rule.handler({
         state,
         range,
         match,
@@ -141,9 +141,14 @@ function run(config: {
         chain,
         can,
       })
+
+      handlers.push(handler)
     })
   })
-  })
+
+  const success = handlers.every(handler => handler !== null)
+
+  return success
 }
 
 /**
@@ -151,11 +156,12 @@ function run(config: {
  * text that matches any of the given rules to trigger the rule’s
  * action.
  */
-export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }): Plugin {
+export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }): Plugin[] {
   const { editor, rules } = props
   let isProseMirrorHTML = false
 
-  const plugin = new Plugin({
+  const plugins = rules.map(rule => {
+    return new Plugin({
       props: {
         handlePaste: (view, event) => {
           const html = event.clipboardData?.getData('text/html')
@@ -174,9 +180,8 @@ export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }):
         }
 
         // stop if there is no changed range
-      const { doc, before } = transaction
+        const from = oldState.doc.content.findDiffStart(state.doc.content)
-      const from = before.content.findDiffStart(doc.content)
+        const to = oldState.doc.content.findDiffEnd(state.doc.content)
-      const to = before.content.findDiffEnd(doc.content)
 
         if (!isNumber(from) || !to || from === to.b) {
           return
@@ -190,26 +195,23 @@ export function pasteRulesPlugin(props: { editor: Editor, rules: PasteRule[] }):
           transaction: tr,
         })
 
-      run({
+        const handler = run({
           editor,
           state: chainableState,
           from: Math.max(from - 1, 0),
           to: to.b,
-        rules,
+          rule,
-        plugin,
         })
 
         // stop if there are no changes
-      if (!tr.steps.length) {
+        if (!handler || !tr.steps.length) {
           return
         }
 
         return tr
       },
-
+    })
-    // @ts-ignore
-    isPasteRules: true,
   })
 
-  return plugin
+  return plugins
 }

packages/core/src/inputRules/markInputRule.ts

@@ -24,7 +24,7 @@ export function markInputRule(config: {
       const attributes = callOrReturn(config.getAttributes, undefined, match)
 
       if (attributes === false || attributes === null) {
-        return
+        return null
       }
 
       const { tr } = state
@@ -64,6 +64,8 @@ export function markInputRule(config: {
 
         tr.removeStoredMark(config.type)
       }
+
+      return tr
     },
   })
 }

packages/core/src/inputRules/nodeInputRule.ts

@@ -45,6 +45,8 @@ export function nodeInputRule(config: {
       } else if (match[0]) {
         tr.replaceWith(start, end, config.type.create(attributes))
       }
+
+      return tr
     },
   })
 }

packages/core/src/inputRules/textInputRule.ts

@@ -29,7 +29,11 @@ export function textInputRule(config: {
         }
       }
 
-      state.tr.insertText(insert, start, end)
+      const { tr } = state
+
+      tr.insertText(insert, start, end)
+
+      return tr
     },
   })
 }

packages/core/src/inputRules/textblockTypeInputRule.ts

@@ -29,9 +29,12 @@ export function textblockTypeInputRule(config: {
         return null
       }
 
-      state.tr
+      const { tr } = state
-        .delete(range.from, range.to)
+
+      tr.delete(range.from, range.to)
         .setBlockType(range.from, range.from, config.type, attributes)
+
+      return tr
     },
   })
 }

packages/core/src/inputRules/wrappingInputRule.ts

@@ -54,6 +54,8 @@ export function wrappingInputRule(config: {
       ) {
         tr.join(range.from - 1)
       }
+
+      return tr
     },
   })
 }

packages/core/src/pasteRules/markPasteRule.ts

@@ -24,7 +24,7 @@ export function markPasteRule(config: {
       const attributes = callOrReturn(config.getAttributes, undefined, match)
 
       if (attributes === false || attributes === null) {
-        return
+        return null
       }
 
       const { tr } = state
@@ -64,6 +64,8 @@ export function markPasteRule(config: {
 
         tr.removeStoredMark(config.type)
       }
+
+      return tr
     },
   })
 }

packages/core/src/pasteRules/textPasteRule.ts

@@ -29,7 +29,11 @@ export function textPasteRule(config: {
         }
       }
 
-      state.tr.insertText(insert, start, end)
+      const { tr } = state
+
+      tr.insertText(insert, start, end)
+
+      return tr
     },
   })
 }