Skip to main content
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

ShortcutAction
Mod-bToggle bold formatting
Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input Rules

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