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 { defineInputRule function defineInputRule(rule: InputRule): PlainExtension
Defines an input rule extension. } from 'prosekit/extensions/input-rule'
import { InputRule class 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 defineEllipsis function defineEllipsis(): PlainExtension
Converts three dots to an ellipsis character. () {
const rule const 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 defineInputRule function defineInputRule(rule: InputRule): PlainExtension
Defines an input rule extension. (rule const 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) } 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 defineHeadingInputRule function 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) ({
regex regex: 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$/,
type type: string | NodeType
The node type to replace the matched text with. : 'heading',
attrs attrs?: Attrs | ((match: RegExpMatchArray) => Attrs | null) | null | undefined
Attributes to set on the node. : (match match: RegExpMatchArray
) => {
const level const level: number
: number = match match: RegExpMatchArray
[1]?.length String.length: number
Returns the length of a String object. ?? 1
return { level level: 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) } 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 defineBlockquoteInputRule function 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) ({
regex regex: 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/,
type type: string | NodeType
The type of node to wrap in. : 'blockquote',
})
}