The Bold extension adds support for bold text formatting with keyboard shortcuts, input rules, and commands.
Installation
npm install @prosekit/extensions
Usage
Add the bold extension to your editor:
import { defineBold } from '@prosekit/extensions/bold'
import { createEditor } from '@prosekit/core'
const editor = createEditor({
extensions: [
// ... other extensions
defineBold(),
],
})
API Reference
defineBold()
Defines the complete bold extension including:
- Mark specification for
<strong> and <b> HTML tags
- Commands for toggling bold
- Keyboard shortcuts
- Input rules for Markdown-style syntax
Returns: BoldExtension
Commands
toggleBold
Toggles bold formatting on the current selection or at the cursor position.
editor.commands.toggleBold()
Keyboard Shortcuts
| Shortcut | Action |
|---|
Mod-b | Toggle bold formatting |
Mod is Cmd on macOS and Ctrl on Windows/Linux.
The extension supports Markdown-style input rules:
- Type
**text** to create bold text
- The asterisks will be automatically removed and the text will be formatted as bold
HTML Output
Bold text is rendered as <strong> elements:
<strong>Bold text</strong>
Parsing
The extension recognizes the following HTML elements and styles when parsing content:
<strong> tag
<b> tag (excluding elements with font-weight: normal)
- Elements with
font-weight: bold, font-weight: bolder, or numeric weights 500+
Advanced Configuration
If you need more control, you can use the individual components:
import {
defineBoldSpec,
defineBoldCommands,
defineBoldKeymap,
defineBoldInputRule
} from '@prosekit/extensions/bold'
const editor = createEditor({
extensions: [
defineBoldSpec(), // Just the mark definition
defineBoldCommands(), // Just the commands
defineBoldKeymap(), // Just the keyboard shortcuts
defineBoldInputRule(), // Just the input rules
],
})
- Italic - Italic text formatting
- Underline - Underline text formatting
- Strike - Strikethrough text formatting
- Code - Inline code formatting