Input Rules
Input rules are a powerful feature in Tiptap that allow you to automatically transform text as you type. They can be used to create shortcuts for formatting, inserting content, or triggering commands based on specific patterns in the text.
What are input rules?
Input rules are pattern-based triggers that watch for specific text input and automatically transform it into something else. For example, typing **bold**
can automatically turn the text into bold formatting, or typing 1.
at the start of a line can create an ordered list. Input rules are especially useful for implementing Markdown-like shortcuts and improving the user experience.
How do input rules work in Tiptap?
Tiptap uses input rules under the hood to provide many of its default shortcuts (like lists, blockquotes, and marks). Input rules are defined as regular expressions that match user input. When the pattern is detected, the rule executes a transformation—such as applying a mark, inserting a node, or running a command.
Input rules are typically registered inside extensions (nodes, marks, or generic extensions) using the addInputRules()
method. Tiptap provides helper functions like markInputRule
and nodeInputRule
to simplify the creation of input rules for marks and nodes.
Understanding markInputRule
and nodeInputRule
Tiptap provides two helper functions to simplify the creation of input rules:
markInputRule
: For applying marks (like bold, italic, highlight) based on a pattern.nodeInputRule
: For inserting or transforming nodes (like images, figures, custom blocks) based on a pattern.
Both functions accept a configuration object with at least these properties:
find
: A regular expression to match the input pattern.type
: The mark or node type to apply/insert.getAttributes
(optional): A function to extract and return attributes from the regex match.
Extracting information with getAttributes
The getAttributes
function allows you to extract data from the matched input and pass it as attributes to the node or mark. This is especially useful for nodes like images or figures, where you want to capture values like src
, alt
, or title
from the user's input.
Example: Using getAttributes
in a node input rule
addInputRules() {
return [
nodeInputRule({
find: /!\[(.*?)\]\((.*?)(?:\s+"(.*?)")?\)$/, // Matches 
type: this.type,
getAttributes: match => {
const [, alt, src, title] = match
return { src, alt, title }
},
}),
]
},
In this example, when a user types something like 
, the input rule extracts the alt
, src
, and title
from the match and passes them as attributes to the node.
Example: Using getAttributes
in a mark input rule
addInputRules() {
return [
markInputRule({
find: /\*\*([^*]+)\*\*$/, // Matches **bold**
type: this.type,
getAttributes: match => {
// You can extract custom attributes here if needed
return {}
},
}),
]
},
Tips
- The
match
parameter ingetAttributes
is the result of the regular expression, so you can destructure it to get the captured groups. - You can use
getAttributes
to set any attributes your node or mark supports, such ashref
for links,src
for images, or custom data fields. - If you don’t need to extract attributes, you can omit
getAttributes
.
For more details, see the ProseMirror input rules docs.