Keyboard Shortcuts in JavaScript Block Editor

The Block Editor control provides comprehensive keyboard shortcuts to enhance productivity and streamline content creation. These shortcuts are organized into different categories based on their functionality, allowing users to quickly access various features without relying on mouse interactions.

Content editing and formatting

Apply bold, italic, underline, and other text formatting with these shortcuts. These work when text is selected inside an editable region.

Actions	Windows	Mac
Bold	`Ctrl` + `B`	`⌘` + `B`
Italic	`Ctrl` + `I`	`⌘` + `I`
Underline	`Ctrl` + `U`	`⌘` + `U`
Strikethrough	`Ctrl` + `Shift` + `X`	`⌘` + `⇧` + `X`
Insert Link	`Ctrl` + `K`	`⌘` + `K`

Block creation and management

Create and manage blocks quickly with these shortcuts. These work when the cursor is inside an empty block or at the start of a new line.

Actions	Windows	Mac
Create Paragraph	`Ctrl` + `Alt` + `P`	`⌘` + `⌥` + `P`
Create Checklist	`Ctrl` + `Shift` + `7`	`⌘` + `⇧` + `7`
Create Bullet List	`Ctrl` + `Shift` + `8`	`⌘` + `⇧` + `8`
Create Numbered List	`Ctrl` + `Shift` + `9`	`⌘` + `⇧` + `9`
Create Heading 1	`Ctrl` + `Alt` + `1`	`⌘` + `⌥` + `1`
Create Heading 2	`Ctrl` + `Alt` + `2`	`⌘` + `⌥` + `2`
Create Heading 3	`Ctrl` + `Alt` + `3`	`⌘` + `⌥` + `3`
Create Heading 4	`Ctrl` + `Alt` + `4`	`⌘` + `⌥` + `4`
Create Quote	`Ctrl` + `Alt` + `Q`	`⌘` + `⌥` + `Q`
Create Code Block	`Ctrl` + `Alt` + `K`	`⌘` + `⌥` + `K`
Create Callout	`Ctrl` + `Alt` + `C`	`⌘` + `⌥` + `C`
Insert Image	`Ctrl` + `Alt` + `/`	`⌘` + `⌥` + `/`
Insert Divider	`Ctrl` + `Shift` + `-`	`⌘` + `⇧` + `-`

Block level actions

Apply block-specific actions such as duplication, deletion, indentation, and movement with these shortcuts.

Note: The following shortcuts support alternative key combinations:

Indent: Ctrl + ] or Tab

Outdent: Ctrl + [ or Shift + Tab

Actions	Windows	Mac
Duplicate Block	`Ctrl` + `D`	`⌘` + `D`
Delete Block	`Ctrl` + `Shift` + `D`	`⌘` + `⇧` + `D`
Move Block Up	`Ctrl` + `Shift` + `↑`	`⌘` + `⇧` + `↑`
Move Block Down	`Ctrl` + `Shift` + `↓`	`⌘` + `⇧` + `↓`
Increase Indent	`Ctrl` + `]` or `Tab`	`⌘` + `]` or `Tab`
Decrease Indent	`Ctrl` + `[` or `Shift` + `Tab`	`⌘` + `[` or `⇧` + `Tab`

General editor operations

These shortcuts cover general editor functionality including undo/redo operations and clipboard actions.

Actions	Windows	Mac
Undo	`Ctrl` + `Z`	`⌘` + `Z`
Redo	`Ctrl` + `Y`	`⌘` + `Y`
Cut	`Ctrl` + `X`	`⌘` + `X`
Copy	`Ctrl` + `C`	`⌘` + `C`
Paste	`Ctrl` + `V`	`⌘` + `V`
Print	`Ctrl` + `P`	`⌘` + `P`

Customizing keyboard shortcuts

You can customize shortcuts for menu-based actions, such as the Slash Command Menu, Block Action Menu, and Context Menu, by modifying the shortcut property in their respective menu settings.

For other operations, you can customize the keyboard shortcuts by configuring the keyConfig property when initializing the Block Editor control. This allows you to override default shortcuts or add new ones according to your application’s requirements.

In the example below, the shortcut for bold formatting is changed to Alt + B and for italic formatting to Alt + I.

const editor = new BlockEditor({
    keyConfig: {
        'bold': 'alt+b',
        'italic': 'alt+i'
    }
});

Search docs

Ask Syncfusion AI Assistant