tiptap/docs/api/keyboard-shortcuts.md

104 lines
6.4 KiB
Markdown
Raw Normal View History

---
tableOfContents: true
---
# Keyboard Shortcuts
## Introduction
2020-10-30 23:13:47 +08:00
tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, youll probably want to change those keyboard shortcuts to your liking. Lets have a look at what we defined for you, and show you how to change it then!
2020-09-24 21:10:44 +08:00
2020-11-06 05:16:18 +08:00
Funfact: We built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
2020-11-05 21:45:52 +08:00
2020-09-24 21:10:44 +08:00
## Predefined keyboard shortcuts
2020-10-28 23:32:06 +08:00
Most of the core extensions register their own keyboard shortcuts. Depending on what set of extension you use, not all of the below listed keyboard shortcuts work for your editor.
2020-09-24 21:10:44 +08:00
### Essentials
| Command | Windows/Linux | macOS |
2020-10-28 23:32:06 +08:00
| ------------------------ | ------------------------------- | --------------------------- |
| Copy | `Control` `C` | `Cmd` `C` |
| Cut | `Control` `X` | `Cmd` `X` |
| Paste | `Control` `V` | `Cmd` `V` |
| Paste without formatting | `Control` `Shift` `V` | `Cmd` `Shift` `V` |
2020-10-28 23:32:06 +08:00
| Undo | `Control` `Z` | `Cmd` `Z` |
| Redo | `Control` `Shift` `Z` | `Cmd` `Shift` `Z` |
2020-10-28 23:32:06 +08:00
| Add a line break | `Shift` `Enter` | `Shift` `Enter` |
2020-09-24 21:10:44 +08:00
### Text Formatting
| Command | Windows/Linux | macOS |
2020-11-19 08:16:10 +08:00
| ------------- | ------------------------------- | --------------------------- |
| Bold | `Control` `B` | `Cmd` `B` |
| Italicize | `Control` `I` | `Cmd` `I` |
| Underline | `Control` `U` | `Cmd` `U` |
| Strikethrough | `Control` `Shift` `X` | `Cmd` `Shift` `X` |
| Highlight | `Control` `Shift` `H` | `Cmd` `Shift` `H` |
| Code | `Control` `E` | `Cmd` `E` |
2020-09-24 21:10:44 +08:00
### Paragraph Formatting
| Command | Windows/Linux | macOS |
2020-11-19 08:16:10 +08:00
| ----------------------- | ------------------------------- | --------------------------- |
| Apply normal text style | `Control` `Alt` `0` | `Cmd` `Alt` `0` |
| Apply heading style 1 | `Control` `Alt` `1` | `Cmd` `Alt` `1` |
| Apply heading style 2 | `Control` `Alt` `2` | `Cmd` `Alt` `2` |
| Apply heading style 3 | `Control` `Alt` `3` | `Cmd` `Alt` `3` |
| Apply heading style 4 | `Control` `Alt` `4` | `Cmd` `Alt` `4` |
| Apply heading style 5 | `Control` `Alt` `5` | `Cmd` `Alt` `5` |
| Apply heading style 6 | `Control` `Alt` `6` | `Cmd` `Alt` `6` |
| Ordered list | `Control` `Shift` `7` | `Cmd` `Shift` `7` |
| Bullet list | `Control` `Shift` `8` | `Cmd` `Shift` `8` |
| Task list | `Control` `Shift` `9` | `Cmd` `Shift` `9` |
2020-11-19 08:16:10 +08:00
| Blockquote | `Control` `Shift` `B` | `Cmd` `Shift` `B` |
| Left align | `Control` `Shift` `L` | `Cmd` `Shift` `L` |
| Center align | `Control` `Shift` `E` | `Cmd` `Shift` `E` |
| Right align | `Control` `Shift` `R` | `Cmd` `Shift` `R` |
| Justify | `Control` `Shift` `J` | `Cmd` `Shift` `J` |
| Code block | `Control` `Alt` `C` | `Cmd` `Alt` `C` |
2021-06-09 17:57:54 +08:00
| Subscript | `Control` `,` | `Cmd` `,` |
| Superscript | `Control` `.` | `Cmd` `.` |
2020-11-19 08:16:10 +08:00
<!--| Toggle task| `Control`&nbsp;`Enter` | `Cmd`&nbsp;`Enter` | -->
2020-09-24 21:10:44 +08:00
### Text Selection
| Command | Windows/Linux | macOS |
2020-10-28 23:32:06 +08:00
| ------------------------------------------------- | ------------------------------- | --------------------------- |
| Select all | `Control`&nbsp;`A` | `Cmd`&nbsp;`A` |
| Extend selection one character to left | `Shift`&nbsp;`←` | `Shift`&nbsp;`←` |
| Extend selection one character to right | `Shift`&nbsp;`→` | `Shift`&nbsp;`→` |
| Extend selection one line up | `Shift`&nbsp;`↑` | `Shift`&nbsp;`↑` |
| Extend selection one line down | `Shift`&nbsp;`↓` | `Shift`&nbsp;`↓` |
| Extend selection to the beginning of the document | `Control`&nbsp;`Shift`&nbsp;`↑` | `Cmd`&nbsp;`Shift`&nbsp;`↑` |
2020-11-19 08:16:10 +08:00
| Extend selection to the end of the document | `Control`&nbsp;`Shift`&nbsp;`↓` | `Cmd`&nbsp;`Shift`&nbsp;`↓` |
2020-10-28 23:32:06 +08:00
## Overwrite keyboard shortcuts
Keyboard shortcuts may be strings like `'Shift-Control-Enter'`. Keys are based on the strings that can appear in `event.key`, concatenated with a `-`. There is a little tool called [keycode.info](https://keycode.info/), which shows the `event.key` interactively.
Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use `Space` as an alias for the <code>&nbsp;</code>.
Modifiers can be given in any order. `Shift`, `Alt`, `Control` and `Cmd` are recognized. For characters that are created by holding shift, the `Shift` prefix is implied, and should not be added explicitly.
You can use `Mod` as a shorthand for `Cmd` on Mac and `Control` on other platforms.
Here is an example how you can overwrite the keyboard shortcuts for an existing extension:
```js
// 1. Import the extension
import BulletList from '@tiptap/extension-bullet-list'
// 2. Overwrite the keyboard shortcuts
const CustomBulletList = BulletList.extend({
addKeyboardShortcuts() {
return {
// ↓ your new keyboard shortcut
2020-11-18 18:33:33 +08:00
'Mod-l': () => this.editor.commands.toggleBulletList(),
2020-10-28 23:32:06 +08:00
}
},
})
// 3. Add the custom extension to your editor
new Editor({
extensions: [
CustomBulletList(),
// …
2021-02-04 17:39:46 +08:00
],
2020-10-28 23:32:06 +08:00
})
```