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 { defineTextBlockEnterRule function defineTextBlockEnterRule({ regex, type, attrs, stop, }: TextBlockEnterRuleOptions): PlainExtension
Defines an enter rule that replaces the matched text with a block node.
See also
{@link
defineEnterRule
}
. } 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 defineHeadingEnterRule function defineHeadingEnterRule(): PlainExtension
Converts the text block to a heading when pressing `Enter` if the current
line is starting with `#` followed by a space. () {
return defineTextBlockEnterRule function defineTextBlockEnterRule({ regex, type, attrs, stop, }: TextBlockEnterRuleOptions): PlainExtension
Defines an enter rule that replaces the matched text with a block node.
See also
{@link
defineEnterRule
}
. ({
regex TextBlockEnterRuleOptions.regex: RegExp
The regular expression to match against. It should end with `$`. : /^(#{1,6})\s.*$/,
type TextBlockEnterRuleOptions.type: string | NodeType
The node type to replace the matched text with. : 'heading',
attrs TextBlockEnterRuleOptions.attrs?: 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. : (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
}
},
})
}
Unlike
defineHeadingInputRule
in Input Rule, this rule will only transform the current text block into a heading and remove the leading#
when you pressEnter
after typing the whole line.
Use defineEnterRule
to create an ambiguous enter rule.
import { defineEnterRule function 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 `$`. } from 'prosekit/extensions/enter-rule'
/**
* Converts the text before the text cursor into an emoji when pressing `Enter`.
*/
export function defineEmojiEnterRule function defineEmojiEnterRule(): PlainExtension
Converts the text before the text cursor into an emoji when pressing `Enter`. () {
return defineEnterRule function 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 `$`. ({
regex regex: RegExp
The regular expression to match against. It should end with `$`. : /:(apple|banana):$/,
handler handler: EnterRuleHandler
A function to be called when an enter rule is triggered. : ({ match match: RegExpExecArray
The matched result from the regular expression. , from from: number
The start position of the matched text. , to to: number
The end position of the matched text. , state state: EditorState
The current editor state. }) => {
const text const text: "apple" | "banana"
= match match: RegExpExecArray
The matched result from the regular expression. [1] as 'apple' | 'banana'
const emoji const emoji: "🍎" | "🍌"
= text const text: "apple" | "banana"
=== 'apple' ? '🍎' : '🍌'
return state state: EditorState
The current editor state. .tr EditorState.tr: Transaction
Start a [transaction](https://prosemirror.net/docs/ref/#state.Transaction) from this state. .replaceWith Transform.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. (from from: number
The start position of the matched text. , to to: number
The end position of the matched text. , state state: EditorState
The current editor state. .schema EditorState.schema: Schema<any, any>
The schema of the state's document. .text Schema<any, any>.text(text: string, marks?: readonly Mark[] | null): Node
Create a text node in the schema. Empty text nodes are not
allowed. (emoji const emoji: "🍎" | "🍌"
))
},
})
}