update content
This commit is contained in:
Hans Pagel
@@ -3,77 +3,49 @@
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
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> </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.
|
||||
|
||||
## Overwrite keyboard shortcuts
|
||||
|
||||
```js
|
||||
// 1. Import the extension
|
||||
import BulletList from '@tiptap/extension-bullet-list'
|
||||
|
||||
// 2. Overwrite the keyboard shortcuts
|
||||
const CustomBulletList = BulletList()
|
||||
.keys(({ editor }) => ({
|
||||
// ↓ your new keyboard shortcut
|
||||
'Mod-l': () => editor.bulletList(),
|
||||
}))
|
||||
.create() // Don’t forget that!
|
||||
|
||||
// 3. Add the custom extension to your editor
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomBulletList(),
|
||||
// …
|
||||
]
|
||||
})
|
||||
```
|
||||
Tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!
|
||||
|
||||
## Predefined keyboard shortcuts
|
||||
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.
|
||||
|
||||
### Essentials
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------ | --------------------- | ----------------- |
|
||||
| Copy | `Control` `C` | `Cmd` `C` |
|
||||
| Cut | `Control` `X` | `Cmd` `X` |
|
||||
| Paste | `Control` `V` | `Cmd` `V` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------ | ------------------------------- | --------------------------- |
|
||||
| Copy | `Control` `C` | `Cmd` `C` |
|
||||
| Cut | `Control` `X` | `Cmd` `X` |
|
||||
| Paste | `Control` `V` | `Cmd` `V` |
|
||||
| Paste without formatting | `Control` `Shift` `V` | `Cmd` `Shift` `V` |
|
||||
| Undo | `Control` `Z` | `Cmd` `Z` |
|
||||
| Undo | `Control` `Z` | `Cmd` `Z` |
|
||||
| Redo | `Control` `Shift` `Z` | `Cmd` `Shift` `Z` |
|
||||
| Insert or edit link | `Control` `K` | `Cmd` `K` |
|
||||
| Open link | `Alt` `Enter` | `Alt` `Enter` |
|
||||
| Find | `Control` `F` | `Cmd` `F` |
|
||||
| Find and replace | `Control` `H` | `Cmd` `Shift` `H` |
|
||||
| Find again | `Control` `G` | `Cmd` `G` |
|
||||
| Insert or edit link | `Control` `K` | `Cmd` `K` |
|
||||
| Open link | `Alt` `Enter` | `Alt` `Enter` |
|
||||
| Find | `Control` `F` | `Cmd` `F` |
|
||||
| Find and replace | `Control` `H` | `Cmd` `Shift` `H` |
|
||||
| Find again | `Control` `G` | `Cmd` `G` |
|
||||
| Find previous | `Control` `Shift` `G` | `Cmd` `Shift` `G` |
|
||||
| Repeat last action | `Control` `Y` | `Cmd` `Y` |
|
||||
| Add a line break | `Shift` `Enter` | `Shift` `Enter` |
|
||||
| Repeat last action | `Control` `Y` | `Cmd` `Y` |
|
||||
| Add a line break | `Shift` `Enter` | `Shift` `Enter` |
|
||||
|
||||
### Text Formatting
|
||||
| Action | Windows/Linux | macOS |
|
||||
| --------------------- | --------------------------------------------- | ----------------- |
|
||||
| Bold | `Control` `B` | `Cmd` `B` |
|
||||
| Italicize | `Control` `I` | `Cmd` `I` |
|
||||
| Underline | `Control` `U` | `Cmd` `U` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| --------------------- | ------------------------------------------------------- | --------------------------- |
|
||||
| Bold | `Control` `B` | `Cmd` `B` |
|
||||
| Italicize | `Control` `I` | `Cmd` `I` |
|
||||
| Underline | `Control` `U` | `Cmd` `U` |
|
||||
| Strikethrough | `Alt` `Shift` `5` | `Cmd` `Shift` `X` |
|
||||
| Superscript | `Control` `.` | `Cmd` `.` |
|
||||
| Subscript | `Control` `,` | `Cmd` `,` |
|
||||
| Superscript | `Control` `.` | `Cmd` `.` |
|
||||
| Subscript | `Control` `,` | `Cmd` `,` |
|
||||
| Copy text formatting | `Control` `Alt` `C` | `Cmd` `Alt` `C` |
|
||||
| Paste text formatting | `Control` `Alt` `V` | `Cmd` `Alt` `V` |
|
||||
| Clear text formatting | `Control` <code>\</code><br>`Control` `Space` | `Cmd` `\` |
|
||||
| Clear text formatting | `Control` <code>\</code><br>`Control` `Space` | `Cmd` `\` |
|
||||
| Increase font size | `Control` `Shift` `>` | `Cmd` `Shift` `>` |
|
||||
| Decrease font size | `Control` `Shift` `<` | `Cmd` `Shift` `<` |
|
||||
|
||||
### Paragraph Formatting
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------ | --------------------- | --------------------- |
|
||||
| Increase paragraph indentation | `Control` `]` | `Cmd` `]` |
|
||||
| Decrease paragraph indentation | `Control` `[` | `Cmd` `[` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------ | ------------------------------- | ------------------------------- |
|
||||
| Increase paragraph indentation | `Control` `]` | `Cmd` `]` |
|
||||
| Decrease paragraph indentation | `Control` `[` | `Cmd` `[` |
|
||||
| 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` |
|
||||
@@ -91,14 +63,48 @@ new Editor({
|
||||
| Move paragraph down | `Control` `Shift` `↓` | `Control` `Shift` `↓` |
|
||||
|
||||
### Text Selection
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------------------------- | --------------------- | ----------------- |
|
||||
| Select all | `Control` `A` | `Cmd` `A` |
|
||||
| Extend selection one character to left | `Shift` `←` | `Shift` `←` |
|
||||
| Extend selection one character to right | `Shift` `→` | `Shift` `→` |
|
||||
| Extend selection one line up | `Shift` `↑` | `Shift` `↑` |
|
||||
| Extend selection one line down | `Shift` `↓` | `Shift` `↓` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------------------------- | ------------------------------- | --------------------------- |
|
||||
| Select all | `Control` `A` | `Cmd` `A` |
|
||||
| Extend selection one character to left | `Shift` `←` | `Shift` `←` |
|
||||
| Extend selection one character to right | `Shift` `→` | `Shift` `→` |
|
||||
| Extend selection one line up | `Shift` `↑` | `Shift` `↑` |
|
||||
| Extend selection one line down | `Shift` `↓` | `Shift` `↓` |
|
||||
| Extend selection one paragraph up | `Alt` `Shift` `↑` | `Alt` `Shift` `↑` |
|
||||
| Extend selection one paragraph down | `Alt` `Shift` `↓` | `Alt` `Shift` `↓` |
|
||||
| Extend selection to the beginning of the document | `Control` `Shift` `↑` | `Cmd` `Shift` `↑` |
|
||||
| Extend selection to the end of the document | `Control` `Shift` `↓` | `Cmd` `Shift` `↓` |
|
||||
|
||||
## 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> </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
|
||||
'Mod-l': () => this.editor.bulletList(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 3. Add the custom extension to your editor
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomBulletList(),
|
||||
// …
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user