Skip to content
GitHub

Enter Rule

Execute some action when Enter is pressed after a certain text pattern. This is similar to Input Rule.

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

import { defineTextBlockEnterRulefunction defineTextBlockEnterRule({ regex, type, attrs, stop, }: TextBlockEnterRuleOptions): PlainExtension
Defines an enter rule that replaces the matched text with a block node. See also {@link defineEnterRule } .
@paramoptions@public
} from 'prosekit/extensions/enter-rule'
/** * Converts the text block to a heading when pressing `Enter` if the current * line is starting with `#` followed by a space. */ export function defineHeadingEnterRulefunction defineHeadingEnterRule(): PlainExtension
Converts the text block to a heading when pressing `Enter` if the current line is starting with `#` followed by a space.
() {
return defineTextBlockEnterRulefunction defineTextBlockEnterRule({ regex, type, attrs, stop, }: TextBlockEnterRuleOptions): PlainExtension
Defines an enter rule that replaces the matched text with a block node. See also {@link defineEnterRule } .
@paramoptions@public
({
regexregex: RegExp
The regular expression to match against. It should end with `$`.
: /^(#{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. If a function is provided, it will be called with the matched result from the regular expression.
: (matchmatch: RegExpMatchArray) => {
const levelconst level: number: number = matchmatch: RegExpMatchArray[1]?.lengthString.length: number
Returns the length of a String object.
?? 1
return { levellevel: number } }, }) }

Unlike defineHeadingInputRule in Input Rule, this rule will only transform the current text block into a heading and remove the leading # when you press Enter after typing the whole line.

Use defineEnterRule to create an ambiguous enter rule.

import { defineEnterRulefunction defineEnterRule({ regex, handler, stop, }: EnterRuleOptions): PlainExtension
Defines an enter rule. An enter rule applies when the text directly in front of the cursor matches `regex` and user presses Enter. The `regex` should end with `$`.
@paramoptions@public
} from 'prosekit/extensions/enter-rule'
/** * Converts the text before the text cursor into an emoji when pressing `Enter`. */ export function defineEmojiEnterRulefunction defineEmojiEnterRule(): PlainExtension
Converts the text before the text cursor into an emoji when pressing `Enter`.
() {
return defineEnterRulefunction defineEnterRule({ regex, handler, stop, }: EnterRuleOptions): PlainExtension
Defines an enter rule. An enter rule applies when the text directly in front of the cursor matches `regex` and user presses Enter. The `regex` should end with `$`.
@paramoptions@public
({
regexregex: RegExp
The regular expression to match against. It should end with `$`.
: /:(apple|banana):$/,
handlerhandler: EnterRuleHandler
A function to be called when an enter rule is triggered.
: ({ matchmatch: RegExpExecArray
The matched result from the regular expression.
, fromfrom: number
The start position of the matched text.
, toto: number
The end position of the matched text.
, statestate: EditorState
The current editor state.
}) => {
const textconst text: "apple" | "banana" = matchmatch: RegExpExecArray
The matched result from the regular expression.
[1] as 'apple' | 'banana'
const emojiconst emoji: "🍎" | "🍌" = textconst text: "apple" | "banana" === 'apple' ? '🍎' : '🍌' return statestate: EditorState
The current editor state.
.trEditorState.tr: Transaction
Start a [transaction](https://prosemirror.net/docs/ref/#state.Transaction) from this state.
.replaceWithTransform.replaceWith(from: number, to: number, content: Fragment | Node | readonly Node[]): Transaction
Replace the given range with the given content, which may be a fragment, node, or array of nodes.
(fromfrom: number
The start position of the matched text.
, toto: number
The end position of the matched text.
, statestate: EditorState
The current editor state.
.schemaEditorState.schema: Schema<any, any>
The schema of the state's document.
.textSchema<any, any>.text(text: string, marks?: readonly Mark[] | null): Node
Create a text node in the schema. Empty text nodes are not allowed.
(emojiconst emoji: "🍎" | "🍌"))
}, }) }