rework keyboard shortcuts
This commit is contained in:
Hans Pagel
@@ -124,15 +124,15 @@ context('/api/marks/highlight', () => {
|
||||
|
||||
it('the keyboard shortcut should highlight the selected text', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, key: 'e' })
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'h' })
|
||||
.find('mark')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('the keyboard shortcut should toggle the selected text highlighted', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, key: 'e' })
|
||||
.trigger('keydown', { modKey: true, key: 'e' })
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'h' })
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'h' })
|
||||
.find('mark')
|
||||
.should('not.exist')
|
||||
})
|
||||
|
||||
@@ -64,15 +64,15 @@ context('/api/marks/strike', () => {
|
||||
|
||||
it('the keyboard shortcut should strike the selected text', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, key: 'd' })
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'x' })
|
||||
.find('s')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('the keyboard shortcut should toggle the selected text striked', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { modKey: true, key: 'd' })
|
||||
.trigger('keydown', { modKey: true, key: 'd' })
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'x' })
|
||||
.trigger('keydown', { modKey: true, shiftKey: true, key: 'x' })
|
||||
.find('s')
|
||||
.should('not.exist')
|
||||
})
|
||||
|
||||
@@ -73,7 +73,7 @@ context('/api/nodes/blockquote', () => {
|
||||
|
||||
it('the keyboard shortcut should make the selected line a blockquote', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: '9' })
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: 'b' })
|
||||
.find('blockquote')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
@@ -83,13 +83,13 @@ context('/api/nodes/blockquote', () => {
|
||||
.should('not.exist')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: '9' })
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: 'b' })
|
||||
.find('blockquote')
|
||||
.should('contain', 'Example Text')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('{selectall}')
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: '9' })
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: 'b' })
|
||||
|
||||
cy.get('.ProseMirror blockquote')
|
||||
.should('not.exist')
|
||||
|
||||
@@ -49,3 +49,17 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,20 +53,20 @@ context('/api/nodes/code-block', () => {
|
||||
|
||||
it('the keyboard shortcut should make the selected line a code block', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: 'c' })
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: 'c' })
|
||||
.find('pre')
|
||||
.should('contain', 'Example Text')
|
||||
})
|
||||
|
||||
it('the keyboard shortcut should toggle the code block', () => {
|
||||
cy.get('.ProseMirror')
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: 'c' })
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: 'c' })
|
||||
.find('pre')
|
||||
.should('contain', 'Example Text')
|
||||
|
||||
cy.get('.ProseMirror')
|
||||
.type('{selectall}')
|
||||
.trigger('keydown', { shiftKey: true, modKey: true, key: 'c' })
|
||||
.trigger('keydown', { modKey: true, altKey: true, key: 'c' })
|
||||
|
||||
cy.get('.ProseMirror pre')
|
||||
.should('not.exist')
|
||||
|
||||
@@ -23,11 +23,18 @@ yarn add @tiptap/extension-text-align
|
||||
| textAlign | alignment | Set the text align to the specified value. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
### Windows/Linux
|
||||
* `Ctrl` `Shift` `L` Left
|
||||
* `Ctrl` `Shift` `E` Center
|
||||
* `Ctrl` `Shift` `R` Right
|
||||
* `Ctrl` `Shift` `J` Justify
|
||||
|
||||
### macOS
|
||||
* `Cmd` `Shift` `L` Left
|
||||
* `Cmd` `Shift` `E` Center
|
||||
* `Cmd` `Shift` `R` Right
|
||||
* `Cmd` `Shift` `J` Justify
|
||||
|
||||
## Source code
|
||||
[packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)
|
||||
|
||||
|
||||
@@ -10,14 +10,7 @@ Funfact: We built a [keyboard shortcut learning app](https://mouseless.app), to
|
||||
## 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.
|
||||
|
||||
### Ideas
|
||||
* Task List ⌥⌘L (iaWriter)
|
||||
* Mark Task Complete ⌘. (iaWriter)
|
||||
* Text Highlight ⌘E (Paper)
|
||||
|
||||
### Essentials
|
||||
❌ = untested
|
||||
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------ | ------------------------------- | --------------------------- |
|
||||
| Copy | `Control` `C` | `Cmd` `C` |
|
||||
@@ -26,50 +19,39 @@ Most of the core extensions register their own keyboard shortcuts. Depending on
|
||||
| Paste without formatting | `Control` `Shift` `V` | `Cmd` `Shift` `V` |
|
||||
| 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` |
|
||||
| ❌ Find previous | `Control` `Shift` `G` | `Cmd` `Shift` `G` |
|
||||
| ❌ 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` |
|
||||
| ❌ Strikethrough | `Alt` `Shift` `5` | `Cmd` `Shift` `X` |
|
||||
| ❌ 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` `\`<br>`Control` `Space` | `Cmd` `\` |
|
||||
| ❌ Increase font size | `Control` `Shift` `>` | `Cmd` `Shift` `>` |
|
||||
| ❌ Decrease font size | `Control` `Shift` `<` | `Cmd` `Shift` `<` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------- | ------------------------------- | --------------------------- |
|
||||
| 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` |
|
||||
|
||||
### Paragraph Formatting
|
||||
| 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` |
|
||||
| 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` |
|
||||
| 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` |
|
||||
| ❌ Numbered list | `Control` `Shift` `7` | `Cmd` `Shift` `7` |
|
||||
| ❌ Bulleted list | `Control` `Shift` `8` | `Cmd` `Shift` `8` |
|
||||
| ❌ Move paragraph up | `Control` `Shift` `↑` | `Control` `Shift` `↑` |
|
||||
| ❌ Move paragraph down | `Control` `Shift` `↓` | `Control` `Shift` `↓` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ----------------------- | ------------------------------- | --------------------------- |
|
||||
| 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` |
|
||||
| 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` |
|
||||
| Task list | `Control` `Shift` `L` | `Cmd` `Shift` `L` |
|
||||
| Code block | `Control` `Alt` `C` | `Cmd` `Alt` `C` |
|
||||
|
||||
<!--| Toggle task| `Control` `Enter` | `Cmd` `Enter` | -->
|
||||
|
||||
### Text Selection
|
||||
| Action | Windows/Linux | macOS |
|
||||
@@ -79,10 +61,8 @@ Most of the core extensions register their own keyboard shortcuts. Depending on
|
||||
| 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` `↓` |
|
||||
| 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.
|
||||
|
||||
@@ -23,7 +23,8 @@ yarn add @tiptap/extension-code
|
||||
| code | — | Mark text as inline code. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* `Alt` <code>`</code>
|
||||
* Windows/Linux: `Control` `E`
|
||||
* macOS: `Cmd` `E`
|
||||
|
||||
## Source code
|
||||
[packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
|
||||
|
||||
@@ -23,8 +23,8 @@ yarn add @tiptap/extension-highlight
|
||||
| highlight | color | Mark text as highlighted, optionally pass a specific color. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `E`
|
||||
* macOS: `Cmd` `E`
|
||||
* Windows/Linux: `Control` `Shift` `H`
|
||||
* macOS: `Cmd` `Shift` `H`
|
||||
|
||||
## Source code
|
||||
[packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/)
|
||||
|
||||
@@ -27,8 +27,8 @@ yarn add @tiptap/extension-strike
|
||||
| strike | — | Mark text as strikethrough. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `D`
|
||||
* macOS: `Cmd` `D`
|
||||
* Windows/Linux: `Control` `Shift` `X`
|
||||
* macOS: `Cmd` `Shift` `X`
|
||||
|
||||
## Source code
|
||||
[packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
|
||||
|
||||
@@ -24,8 +24,8 @@ yarn add @tiptap/extension-blockquote
|
||||
| blockquote | — | Wrap content in a blockquote. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `Shift` `9`
|
||||
* macOS: `Cmd` `Shift` `9`
|
||||
* Windows/Linux: `Control` `Shift` `B`
|
||||
* macOS: `Cmd` `Shift` `B`
|
||||
|
||||
## Source code
|
||||
[packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
|
||||
|
||||
@@ -27,7 +27,8 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
|
||||
| bulletList | — | Toggle a bullet list. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* `Control` `Shift` `8`
|
||||
* Windows/Linux: `Control` `Shift` `8`
|
||||
* macOS: `Cmd` `Shift` `8`
|
||||
|
||||
## Source code
|
||||
[packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
|
||||
|
||||
@@ -28,8 +28,8 @@ yarn add @tiptap/extension-code-block
|
||||
| codeBlock | — | Wrap content in a code block. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `Shift` `C`
|
||||
* macOS: `Cmd` `Shift` `C`
|
||||
* Windows/Linux: `Control` `Alt` `C`
|
||||
* macOS: `Cmd` `Alt` `C`
|
||||
|
||||
## Source code
|
||||
[packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
|
||||
|
||||
@@ -27,7 +27,8 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
|
||||
| orderedList | — | Toggle an ordered list. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* `Control` `Shift` `9`
|
||||
* Windows/Linux: `Control` `Shift` `7`
|
||||
* macOS: `Cmd` `Shift` `7`
|
||||
|
||||
## Source code
|
||||
[packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
|
||||
|
||||
@@ -26,6 +26,10 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
|
||||
| -------- | ---------- | ------------------- |
|
||||
| taskList | — | Toggle a task list. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `Shift` `L`
|
||||
* macOS: `Cmd` `Shift` `L`
|
||||
|
||||
## Source code
|
||||
[packages/extension-task-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user