added new options for nodeInputRules for block replacements (#4289)

ueberdosis · Aug 10, 2023 · a922f09 · a922f09
1 parent 7e7057e
commit a922f09
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/packages/core/src/inputRules/nodeInputRule.ts b/packages/core/src/inputRules/nodeInputRule.ts
@@ -1,4 +1,5 @@
 import { NodeType } from '@tiptap/pm/model'
+import { TextSelection } from '@tiptap/pm/state'
 
 import { InputRule, InputRuleFinder } from '../InputRule.js'
 import { ExtendedRegExpMatchArray } from '../types.js'
@@ -9,8 +10,32 @@ import { callOrReturn } from '../utilities/callOrReturn.js'
  * matched text is typed into it.
  */
 export function nodeInputRule(config: {
+  /**
+   * The regex to match.
+   */
   find: InputRuleFinder
+
+  /**
+   * The node type to add.
+   */
   type: NodeType
+
+  /**
+   * Should the input rule replace the node or append to it
+   * If true, the node will be replaced
+   */
+  blockReplace?: boolean
+
+  /**
+   * Insert empty paragraph after inserting the node
+   * Only works if blockReplace is true
+   */
+  addExtraNewline?: boolean
+
+  /**
+   * A function that returns the attributes for the node
+   * can also be an object of attributes
+   */
   getAttributes?:
     | Record<string, any>
     | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
@@ -22,9 +47,11 @@ export function nodeInputRule(config: {
     handler: ({ state, range, match }) => {
       const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
       const { tr } = state
-      const start = range.from
+      const start = config.blockReplace ? range.from - 1 : range.from
       let end = range.to
 
+      const newNode = config.type.create(attributes)
+
       if (match[1]) {
         const offset = match[0].lastIndexOf(match[1])
         let matchStart = start + offset
@@ -41,9 +68,28 @@ export function nodeInputRule(config: {
         tr.insertText(lastChar, start + match[0].length - 1)
 
         // insert node from input rule
-        tr.replaceWith(matchStart, end, config.type.create(attributes))
+        tr.replaceWith(matchStart, end, newNode)
       } else if (match[0]) {
-        tr.replaceWith(start, end, config.type.create(attributes))
+        tr.replaceWith(start, end, newNode)
+      }
+
+      if (config.blockReplace && config.addExtraNewline) {
+        const { $to } = tr.selection
+        const posAfter = $to.end()
+
+        if ($to.nodeAfter) {
+          tr.setSelection(TextSelection.create(tr.doc, $to.pos))
+        } else {
+          // add node after horizontal rule if it’s the end of the document
+          const node = $to.parent.type.contentMatch.defaultType?.create()
+
+          if (node) {
+            tr.insert(posAfter, node)
+            tr.setSelection(TextSelection.create(tr.doc, posAfter))
+          }
+        }
+
+        tr.scrollIntoView()
       }
     },
   })

diff --git a/packages/extension-horizontal-rule/src/horizontal-rule.ts b/packages/extension-horizontal-rule/src/horizontal-rule.ts
@@ -76,6 +76,8 @@ export const HorizontalRule = Node.create<HorizontalRuleOptions>({
       nodeInputRule({
         find: /^(?:---|—-|___\s|\*\*\*\s)$/,
         type: this.type,
+        blockReplace: true,
+        addExtraNewline: true,
       }),
     ]
   },