Skip to content
GitHub

Input Rule

Execute some action when a certain pattern is typed. This is based on the prosemirror-inputrules.

You can directly pass an InputRule instance to defineInputRule.

import { defineInputRulefunction defineInputRule(rule: InputRule): PlainExtension
Defines an input rule extension.
@paramrule - The ProseMirror input rule to add.@public
} from 'prosekit/extensions/input-rule'
import { InputRuleclass InputRule
Input rules are regular expressions describing a piece of text that, when typed, causes something to happen. This might be changing two dashes into an emdash, wrapping a paragraph starting with `"> "` into a blockquote, or something entirely different.
} from 'prosekit/pm/inputrules'
/** * Converts three dots to an ellipsis character. */ function defineEllipsisfunction defineEllipsis(): PlainExtension
Converts three dots to an ellipsis character.
() {
const ruleconst rule: InputRule = new InputRule
new InputRule(match: RegExp, handler: string | ((state: EditorState, match: RegExpMatchArray, start: number, end: number) => Transaction | null), options?: {
    undoable?: boolean;
    inCode?: boolean | "only";
    inCodeMark?: boolean;
}): InputRule
Create an input rule. The rule applies when the user typed something and the text directly in front of the cursor matches `match`, which should end with `$`. The `handler` can be a string, in which case the matched text, or the first matched group in the regexp, is replaced by that string. Or a it can be a function, which will be called with the match array produced by [`RegExp.exec`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec), as well as the start and end of the matched range, and which can return a [transaction](https://prosemirror.net/docs/ref/#state.Transaction) that describes the rule's effect, or null to indicate the input was not handled.
(/\.{3}$/, '…')
return defineInputRulefunction defineInputRule(rule: InputRule): PlainExtension
Defines an input rule extension.
@paramrule - The ProseMirror input rule to add.@public
(ruleconst rule: InputRule)
}

Use defineTextBlockInputRule to create a new input rule that can change the current text block into a different node type.

import { defineTextBlockInputRule
function defineTextBlockInputRule({ regex, type, attrs, }: {
    regex: RegExp;
    type: string | NodeType;
    attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null);
}): PlainExtension
Defines an input rule that changes the type of a textblock when the matched text is typed into it. See also [textblockTypeInputRule](https://prosemirror.net/docs/ref/#inputrules.textblockTypeInputRule)
@paramoptions@public
} from 'prosekit/extensions/input-rule'
/** * Converts the text block to a heading when `#` is typed at the start of a new * line followed by a space. */ export function defineHeadingInputRulefunction defineHeadingInputRule(): PlainExtension
Converts the text block to a heading when `#` is typed at the start of a new line followed by a space.
() {
return defineTextBlockInputRule
function defineTextBlockInputRule({ regex, type, attrs, }: {
    regex: RegExp;
    type: string | NodeType;
    attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null);
}): PlainExtension
Defines an input rule that changes the type of a textblock when the matched text is typed into it. See also [textblockTypeInputRule](https://prosemirror.net/docs/ref/#inputrules.textblockTypeInputRule)
@paramoptions@public
({
regexregex: RegExp
The regular expression to match against, which should end with `$`. It usually also starts with `^` to that it is only matched at the start of a textblock.
: /^(#{1,6})\s$/,
typetype: string | NodeType
The node type to replace the matched text with.
: 'heading',
attrsattrs?: Attrs | ((match: RegExpMatchArray) => Attrs | null) | null | undefined
Attributes to set on the node.
: (matchmatch: RegExpMatchArray) => {
const levelconst level: number: number = matchmatch: RegExpMatchArray[1]?.lengthString.length: number
Returns the length of a String object.
?? 1
return { levellevel: number } }, }) }

Use defineWrappingInputRule to create a new input rule that can change the current text block into a different node type.

import { defineWrappingInputRule
function defineWrappingInputRule({ regex, type, attrs, join, }: {
    regex: RegExp;
    type: string | NodeType;
    attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null);
    join?: (match: RegExpMatchArray, node: Node) => boolean;
}): PlainExtension
Defines an input rule for automatically wrapping a textblock when a given string is typed. See also [wrappingInputRule](https://prosemirror.net/docs/ref/#inputrules.wrappingInputRule)
@paramoptions@public
} from 'prosekit/extensions/input-rule'
/** * Wraps the text block in a blockquote when `>` is typed at the start of a new * line followed by a space. */ export function defineBlockquoteInputRulefunction defineBlockquoteInputRule(): PlainExtension
Wraps the text block in a blockquote when `>` is typed at the start of a new line followed by a space.
() {
return defineWrappingInputRule
function defineWrappingInputRule({ regex, type, attrs, join, }: {
    regex: RegExp;
    type: string | NodeType;
    attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null);
    join?: (match: RegExpMatchArray, node: Node) => boolean;
}): PlainExtension
Defines an input rule for automatically wrapping a textblock when a given string is typed. See also [wrappingInputRule](https://prosemirror.net/docs/ref/#inputrules.wrappingInputRule)
@paramoptions@public
({
regexregex: RegExp
The regular expression to match against, which should end with `$`. It usually also starts with `^` to that it is only matched at the start of a textblock.
: /^>\s/,
typetype: string | NodeType
The type of node to wrap in.
: 'blockquote',
}) }