Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Meta key shortcuts not bound correctly in Windows browsers #1753

Merged
merged 1 commit into from
Dec 30, 2020
Merged

fix: Meta key shortcuts not bound correctly in Windows browsers #1753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/components/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ErrorBoundary from "components/ErrorBoundary";
import Tooltip from "components/Tooltip";
import embeds from "../embeds";
import isInternalUrl from "utils/isInternalUrl";
import { isMetaKey } from "utils/keyboard";
import { uploadFile } from "utils/uploadFile";

const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
Expand Down Expand Up @@ -49,7 +50,7 @@ function Editor(props: PropsWithRef) {
return;
}

if (isInternalUrl(href) && !event.metaKey && !event.shiftKey) {
if (isInternalUrl(href) && !isMetaKey(event) && !event.shiftKey) {
// relative
let navigateTo = href;

Expand Down
3 changes: 2 additions & 1 deletion app/components/InputSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { withRouter, type RouterHistory } from "react-router-dom";
import styled, { withTheme } from "styled-components";
import Input from "./Input";
import { type Theme } from "types";
import { meta } from "utils/keyboard";
import { searchUrl } from "utils/routeHelpers";

type Props = {
Expand All @@ -25,7 +26,7 @@ class InputSearch extends React.Component<Props> {
input: ?Input;
@observable focused: boolean = false;

@keydown("meta+f")
@keydown(`${meta}+f`)
focus(ev: SyntheticEvent<>) {
ev.preventDefault();

Expand Down
5 changes: 3 additions & 2 deletions app/components/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import Modal from "components/Modal";
import Sidebar from "components/Sidebar";
import SettingsSidebar from "components/Sidebar/Settings";
import { type Theme } from "types";
import { meta } from "utils/keyboard";
import {
homeUrl,
searchUrl,
Expand Down Expand Up @@ -65,7 +66,7 @@ class Layout extends React.Component<Props> {
window.document.body.style.background = props.theme.background;
}

@keydown("meta+.")
@keydown(`${meta}+.`)
handleToggleSidebar() {
this.props.ui.toggleCollapsedSidebar();
}
Expand All @@ -80,7 +81,7 @@ class Layout extends React.Component<Props> {
this.keyboardShortcutsOpen = false;
};

@keydown(["t", "/", "meta+k"])
@keydown(["t", "/", `${meta}+k`])
goToSearch(ev: SyntheticEvent<>) {
if (this.props.ui.editMode) return;
ev.preventDefault();
Expand Down
5 changes: 3 additions & 2 deletions app/scenes/Document/components/Document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import References from "./References";
import { type LocationWithState, type Theme } from "types";
import { isCustomDomain } from "utils/domains";
import { emojiToUrl } from "utils/emoji";
import { meta } from "utils/keyboard";
import {
collectionUrl,
documentMoveUrl,
Expand Down Expand Up @@ -163,15 +164,15 @@ class DocumentScene extends React.Component<Props> {
}
}

@keydown("meta+shift+p")
@keydown(`${meta}+shift+p`)
onPublish(ev) {
ev.preventDefault();
const { document } = this.props;
if (document.publishedAt) return;
this.onSave({ publish: true, done: true });
}

@keydown("meta+ctrl+h")
@keydown(`${meta}+ctrl+h`)
onToggleTableOfContents(ev) {
if (!this.props.readOnly) return;

Expand Down
7 changes: 4 additions & 3 deletions app/scenes/Document/components/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import DocumentMetaWithViews from "components/DocumentMetaWithViews";
import Editor from "components/Editor";
import Flex from "components/Flex";
import HoverPreview from "components/HoverPreview";
import { isMetaKey } from "utils/keyboard";
import { documentHistoryUrl } from "utils/routeHelpers";

type Props = {
Expand Down Expand Up @@ -53,7 +54,7 @@ class DocumentEditor extends React.Component<Props> {
handleTitleKeyDown = (event: SyntheticKeyboardEvent<>) => {
if (event.key === "Enter") {
event.preventDefault();
if (event.metaKey) {
if (isMetaKey(event)) {
this.props.onSave({ done: true });
return;
}
Expand All @@ -67,12 +68,12 @@ class DocumentEditor extends React.Component<Props> {
this.focusAtStart();
return;
}
if (event.key === "p" && event.metaKey && event.shiftKey) {
if (event.key === "p" && isMetaKey(event) && event.shiftKey) {
event.preventDefault();
this.props.onSave({ publish: true, done: true });
return;
}
if (event.key === "s" && event.metaKey) {
if (event.key === "s" && isMetaKey(event)) {
event.preventDefault();
this.props.onSave({});
return;
Expand Down
8 changes: 4 additions & 4 deletions app/scenes/Document/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import Tooltip from "components/Tooltip";
import DocumentMenu from "menus/DocumentMenu";
import NewChildDocumentMenu from "menus/NewChildDocumentMenu";
import TemplatesMenu from "menus/TemplatesMenu";
import { meta } from "utils/keyboard";
import { metaDisplay } from "utils/keyboard";
import { newDocumentUrl, editDocumentUrl } from "utils/routeHelpers";

type Props = {
Expand Down Expand Up @@ -172,7 +172,7 @@ class Header extends React.Component<Props> {
tooltip={
ui.tocVisible ? t("Hide contents") : t("Show contents")
}
shortcut={`ctrl+${meta}+h`}
shortcut={`ctrl+${metaDisplay}+h`}
delay={250}
placement="bottom"
>
Expand Down Expand Up @@ -250,7 +250,7 @@ class Header extends React.Component<Props> {
<Action>
<Tooltip
tooltip={t("Save")}
shortcut={`${meta}+enter`}
shortcut={`${metaDisplay}+enter`}
delay={500}
placement="bottom"
>
Expand Down Expand Up @@ -321,7 +321,7 @@ class Header extends React.Component<Props> {
<Action>
<Tooltip
tooltip={t("Publish")}
shortcut={`${meta}+shift+p`}
shortcut={`${metaDisplay}+shift+p`}
delay={500}
placement="bottom"
>
Expand Down
30 changes: 17 additions & 13 deletions app/scenes/KeyboardShortcuts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import styled from "styled-components";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
import Key from "components/Key";
import { meta } from "utils/keyboard";
import { metaDisplay } from "utils/keyboard";

function KeyboardShortcuts() {
const { t } = useTranslation();
Expand Down Expand Up @@ -41,9 +41,13 @@ function KeyboardShortcuts() {
</Keys>
<Label>{t("Jump to dashboard")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Ctrl</Key> + <Key>h</Key>
<Key>{metaDisplay}</Key> + <Key>Ctrl</Key> + <Key>h</Key>
</Keys>
<Label>{t("Table of contents")}</Label>
<Keys>
<Key>{metaDisplay}</Key> + <Key>.</Key>
</Keys>
<Label>{t("Toggle sidebar")}</Label>
Comment on lines +47 to +50
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add missing (newly added) shortcut for toggling sidebar while we're here.

<Keys>
<Key>?</Key>
</Keys>
Expand All @@ -53,47 +57,47 @@ function KeyboardShortcuts() {
<h2>{t("Editor")}</h2>
<List>
<Keys>
<Key>{meta}</Key> + <Key>Enter</Key>
<Key>{metaDisplay}</Key> + <Key>Enter</Key>
</Keys>
<Label>{t("Save and exit document edit mode")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Shift</Key> + <Key>p</Key>
<Key>{metaDisplay}</Key> + <Key>Shift</Key> + <Key>p</Key>
</Keys>
<Label>{t("Publish and exit document edit mode")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>s</Key>
<Key>{metaDisplay}</Key> + <Key>s</Key>
</Keys>
<Label>{t("Save document and continue editing")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Esc</Key>
<Key>{metaDisplay}</Key> + <Key>Esc</Key>
</Keys>
<Label>{t("Cancel editing")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>b</Key>
<Key>{metaDisplay}</Key> + <Key>b</Key>
</Keys>
<Label>{t("Bold")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>i</Key>
<Key>{metaDisplay}</Key> + <Key>i</Key>
</Keys>
<Label>{t("Italic")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>u</Key>
<Key>{metaDisplay}</Key> + <Key>u</Key>
</Keys>
<Label>{t("Underline")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>d</Key>
<Key>{metaDisplay}</Key> + <Key>d</Key>
</Keys>
<Label>{t("Strikethrough")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>k</Key>
<Key>{metaDisplay}</Key> + <Key>k</Key>
</Keys>
<Label>{t("Link")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>z</Key>
<Key>{metaDisplay}</Key> + <Key>z</Key>
</Keys>
<Label>{t("Undo")}</Label>
<Keys>
<Key>{meta}</Key> + <Key>Shift</Key> + <Key>z</Key>
<Key>{metaDisplay}</Key> + <Key>Shift</Key> + <Key>z</Key>
</Keys>
<Label>{t("Redo")}</Label>
</List>
Expand Down
6 changes: 3 additions & 3 deletions app/scenes/Search/Search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import StatusFilter from "./components/StatusFilter";
import UserFilter from "./components/UserFilter";
import NewDocumentMenu from "menus/NewDocumentMenu";
import { type LocationWithState } from "types";
import { meta } from "utils/keyboard";
import { metaDisplay } from "utils/keyboard";
import { newDocumentUrl, searchUrl } from "utils/routeHelpers";

type Props = {
Expand Down Expand Up @@ -279,8 +279,8 @@ class Search extends React.Component<Props> {
<Fade>
<HelpText small>
<Trans>
Use the <strong>{{ meta }}+K</strong> shortcut to search from
anywhere in your knowledge base
Use the <strong>{{ meta: metaDisplay }}+K</strong> shortcut to
search from anywhere in your knowledge base
</Trans>
</HelpText>
</Fade>
Expand Down
9 changes: 8 additions & 1 deletion app/utils/keyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
// @flow
const isMac = window.navigator.platform === "MacIntel";

export const meta = window.navigator.platform === "MacIntel" ? "⌘" : "Ctrl";
export const metaDisplay = isMac ? "⌘" : "Ctrl";

export const meta = isMac ? "cmd" : "ctrl";

export function isMetaKey(event: KeyboardEvent) {
return isMac ? event.metaKey : event.ctrlKey;
}
1 change: 1 addition & 0 deletions shared/i18n/locales/en_US/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@
"Jump to search": "Jump to search",
"Jump to dashboard": "Jump to dashboard",
"Table of contents": "Table of contents",
"Toggle sidebar": "Toggle sidebar",
"Open this guide": "Open this guide",
"Editor": "Editor",
"Save and exit document edit mode": "Save and exit document edit mode",
Expand Down