yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Cancel editing shortcut on Windows

Browse Source 
fix: Improve display of symbols in keyboard shortcuts dialog
closes #2733
This commit is contained in:
Tom Moor
2022-02-17 23:10:11 -08:00
parent 9db6951434
commit 2ca68c2c80
3 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/Key.ts
View File

@@ -1,10 +1,16 @@
import styled from "styled-components"; import styled from "styled-components";
const Key = styled.kbd` type Props = {
/* Set to true if displaying a single symbol character to disable monospace */
symbol?: boolean;
};
const Key = styled.kbd<Props>`
display: inline-block; display: inline-block;
padding: 4px 6px; padding: 4px 6px;
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, font-size: 11px;
monospace; font-family: ${(props) =>
props.symbol ? props.theme.fontFamily : props.theme.fontFamilyMono};
line-height: 10px; line-height: 10px;
color: ${(props) => props.theme.almostBlack}; color: ${(props) => props.theme.almostBlack};
vertical-align: middle; vertical-align: middle;

53
app/scenes/KeyboardShortcuts.tsx
View File

@@ -4,6 +4,7 @@ import styled from "styled-components";
import Flex from "~/components/Flex"; import Flex from "~/components/Flex";
import InputSearch from "~/components/InputSearch"; import InputSearch from "~/components/InputSearch";
import Key from "~/components/Key"; import Key from "~/components/Key";
import { isMac } from "~/utils/browser";
import { metaDisplay, altDisplay } from "~/utils/keyboard"; import { metaDisplay, altDisplay } from "~/utils/keyboard";
function KeyboardShortcuts() { function KeyboardShortcuts() {
@@ -44,7 +45,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>{altDisplay}</Key> + <Key>h</Key> <Key>Ctrl</Key> + <Key symbol>{altDisplay}</Key> + <Key>h</Key>
</> </>
), ),
label: t("Table of contents"), label: t("Table of contents"),
@@ -52,7 +53,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>.</Key> <Key symbol>{metaDisplay}</Key> + <Key>.</Key>
</> </>
), ),
label: t("Toggle navigation"), label: t("Toggle navigation"),
@@ -60,7 +61,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>f</Key> <Key symbol>{metaDisplay}</Key> + <Key>f</Key>
</> </>
), ),
label: t("Focus search input"), label: t("Focus search input"),
@@ -72,7 +73,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>Enter</Key> <Key symbol>{metaDisplay}</Key> + <Key>Enter</Key>
</> </>
), ),
label: t("Save document and exit"), label: t("Save document and exit"),
@@ -80,7 +81,8 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>⇧</Key> + <Key>p</Key> <Key symbol>{metaDisplay}</Key> + <Key symbol>⇧</Key> +{" "}
<Key>p</Key>
</> </>
), ),
label: t("Publish document and exit"), label: t("Publish document and exit"),
@@ -88,7 +90,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>s</Key> <Key symbol>{metaDisplay}</Key> + <Key>s</Key>
</> </>
), ),
label: t("Save document"), label: t("Save document"),
@@ -96,7 +98,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>Esc</Key> <Key symbol>{isMac() ? metaDisplay : "⇧"}</Key> + <Key>Esc</Key>
</> </>
), ),
label: t("Cancel editing"), label: t("Cancel editing"),
@@ -109,7 +111,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>0</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>0</Key>
</> </>
), ),
label: t("Paragraph"), label: t("Paragraph"),
@@ -117,7 +119,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>1</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>1</Key>
</> </>
), ),
label: t("Large header"), label: t("Large header"),
@@ -125,7 +127,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>2</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>2</Key>
</> </>
), ),
label: t("Medium header"), label: t("Medium header"),
@@ -133,7 +135,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>3</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>3</Key>
</> </>
), ),
label: t("Small header"), label: t("Small header"),
@@ -141,7 +143,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>\</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>\</Key>
</> </>
), ),
label: t("Code block"), label: t("Code block"),
@@ -149,7 +151,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>b</Key> <Key symbol>{metaDisplay}</Key> + <Key>b</Key>
</> </>
), ),
label: t("Bold"), label: t("Bold"),
@@ -157,7 +159,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>i</Key> <Key symbol>{metaDisplay}</Key> + <Key>i</Key>
</> </>
), ),
label: t("Italic"), label: t("Italic"),
@@ -165,7 +167,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>u</Key> <Key symbol>{metaDisplay}</Key> + <Key>u</Key>
</> </>
), ),
label: t("Underline"), label: t("Underline"),
@@ -173,7 +175,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>d</Key> <Key symbol>{metaDisplay}</Key> + <Key>d</Key>
</> </>
), ),
label: t("Strikethrough"), label: t("Strikethrough"),
@@ -181,7 +183,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>k</Key> <Key symbol>{metaDisplay}</Key> + <Key>k</Key>
</> </>
), ),
label: t("Link"), label: t("Link"),
@@ -189,7 +191,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>z</Key> <Key symbol>{metaDisplay}</Key> + <Key>z</Key>
</> </>
), ),
label: t("Undo"), label: t("Undo"),
@@ -197,7 +199,8 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{metaDisplay}</Key> + <Key>⇧</Key> + <Key>z</Key> <Key symbol>{metaDisplay}</Key> + <Key symbol>⇧</Key> +{" "}
<Key>z</Key>
</> </>
), ),
label: t("Redo"), label: t("Redo"),
@@ -210,7 +213,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>7</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>7</Key>
</> </>
), ),
label: t("Todo list"), label: t("Todo list"),
@@ -218,7 +221,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>8</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>8</Key>
</> </>
), ),
label: t("Bulleted list"), label: t("Bulleted list"),
@@ -226,7 +229,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>Ctrl</Key> + <Key>⇧</Key> + <Key>9</Key> <Key>Ctrl</Key> + <Key symbol>⇧</Key> + <Key>9</Key>
</> </>
), ),
label: t("Ordered list"), label: t("Ordered list"),
@@ -238,7 +241,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>⇧</Key> + <Key>Tab</Key> <Key symbol>⇧</Key> + <Key>Tab</Key>
</> </>
), ),
label: t("Outdent list item"), label: t("Outdent list item"),
@@ -246,7 +249,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{altDisplay}</Key> + <Key>↑</Key> <Key symbol>{altDisplay}</Key> + <Key symbol>↑</Key>
</> </>
), ),
label: t("Move list item up"), label: t("Move list item up"),
@@ -254,7 +257,7 @@ function KeyboardShortcuts() {
{ {
shortcut: ( shortcut: (
<> <>
<Key>{altDisplay}</Key> + <Key>↓</Key> <Key symbol>{altDisplay}</Key> + <Key symbol>↓</Key>
</> </>
), ),
label: t("Move list item down"), label: t("Move list item down"),

17
shared/editor/plugins/Keys.ts
View File

@@ -15,19 +15,22 @@ export default class Keys extends Extension {
} }
keys(): Record<string, Command> { keys(): Record<string, Command> {
const onCancel = () => {
if (this.options.onCancel) {
this.options.onCancel();
return true;
}
return false;
};
return { return {
// No-ops prevent Tab escaping the editor bounds // No-ops prevent Tab escaping the editor bounds
Tab: () => true, Tab: () => true,
"Shift-Tab": () => true, "Shift-Tab": () => true,
// Shortcuts for when editor has separate edit mode // Shortcuts for when editor has separate edit mode
Escape: () => { "Mod-Escape": onCancel,
if (this.options.onCancel) { "Shift-Escape": onCancel,
this.options.onCancel();
return true;
}
return false;
},
"Mod-s": () => { "Mod-s": () => {
if (this.options.onSave) { if (this.options.onSave) {
this.options.onSave(); this.options.onSave();