tsc

app/components/DocumentExplorer.tsx

@@ -15,6 +15,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { NavigationNode } from "@shared/types";
+import { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
@@ -25,7 +26,6 @@ import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
-import { isModKey } from "~/utils/keyboard";
 import { ancestors, descendants } from "~/utils/tree";
 
 type Props = {

app/components/InputSearchPage.tsx

@@ -4,9 +4,9 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
+import { isModKey } from "@shared/utils/keyboard";
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
-import { isModKey } from "~/utils/keyboard";
 import { searchPath } from "~/utils/routeHelpers";
 import Input, { Outline } from "./Input";
 

app/components/Layout.tsx

@@ -4,6 +4,7 @@ import { Helmet } from "react-helmet-async";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
+import { isModKey } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
@@ -13,7 +14,6 @@ import useAutoRefresh from "~/hooks/useAutoRefresh";
 import useKeyDown from "~/hooks/useKeyDown";
 import { MenuProvider } from "~/hooks/useMenuContext";
 import useStores from "~/hooks/useStores";
-import { isModKey } from "~/utils/keyboard";
 
 type Props = {
   children?: React.ReactNode;

app/components/Sidebar/App.tsx

@@ -5,6 +5,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
@@ -14,7 +15,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
-import { metaDisplay } from "~/utils/keyboard";
 import { homePath, draftsPath, searchPath } from "~/utils/routeHelpers";
 import TeamLogo from "../TeamLogo";
 import Tooltip from "../Tooltip";

app/components/Sidebar/Settings.tsx

@@ -5,12 +5,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
+import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
 import useStores from "~/hooks/useStores";
 import isCloudHosted from "~/utils/isCloudHosted";
-import { metaDisplay } from "~/utils/keyboard";
 import { settingsPath } from "~/utils/routeHelpers";
 import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";

app/components/Sidebar/Shared.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
+import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
@@ -12,7 +13,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { hover } from "~/styles";
 import history from "~/utils/history";
-import { metaDisplay } from "~/utils/keyboard";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";

app/components/Tooltip.tsx

@@ -1,4 +1,5 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
+import { transparentize } from "polished";
 import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { s } from "@shared/styles";
@@ -25,7 +26,18 @@ function Tooltip({ shortcut, content: tooltip, delay = 500, ...rest }: Props) {
   if (shortcut) {
     content = (
       <>
-        {tooltip} &middot; <Shortcut>{shortcut}</Shortcut>
+        {tooltip}{" "}
+        {typeof shortcut === "string" ? (
+          shortcut
+            .split("+")
+            .map((key) => (
+              <Shortcut key={key}>
+                {key.length === 1 ? key.toUpperCase() : key}
+              </Shortcut>
+            ))
+        ) : (
+          <Shortcut>{shortcut}</Shortcut>
+        )}
       </>
     );
   }
@@ -37,16 +49,17 @@ function Tooltip({ shortcut, content: tooltip, delay = 500, ...rest }: Props) {
 
 const Shortcut = styled.kbd`
   position: relative;
-  top: -2px;
+  top: -1px;
 
+  margin-left: 2px;
   display: inline-block;
   padding: 2px 4px;
-  font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-    monospace;
+  font-size: 12px;
+  font-family: ${s("fontFamilyMono")};
   line-height: 10px;
-  color: ${s("tooltipBackground")};
+  color: ${s("tooltipText")};
+  border: 1px solid ${(props) => transparentize(0.75, props.theme.tooltipText)};
   vertical-align: middle;
-  background-color: ${s("tooltipText")};
   border-radius: 3px;
 `;
 

app/editor/components/FindAndReplace.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import { usePopoverState } from "reakit/Popover";
 import styled, { useTheme } from "styled-components";
 import { depths, s } from "@shared/styles";
+import { altDisplay, isModKey, metaDisplay } from "@shared/utils/keyboard";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
@@ -21,7 +22,6 @@ import Tooltip from "~/components/Tooltip";
 import useKeyDown from "~/hooks/useKeyDown";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import Desktop from "~/utils/Desktop";
-import { altDisplay, isModKey, metaDisplay } from "~/utils/keyboard";
 import { useEditor } from "./EditorContext";
 
 type Props = {

app/editor/components/ToolbarMenu.tsx

@@ -108,8 +108,9 @@ function ToolbarMenu(props: Props) {
 
           return (
             <Tooltip
-              content={item.label === item.tooltip ? undefined : item.tooltip}
               key={index}
+              shortcut={item.shortcut}
+              content={item.label === item.tooltip ? undefined : item.tooltip}
             >
               {item.children ? (
                 <ToolbarDropdown active={isActive && !item.label} item={item} />

app/editor/components/Tooltip.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
-import Tooltip from "~/components/Tooltip";
-
-type Props = {
-  /** The content to display in the tooltip. */
-  content?: string;
-  children?: React.ReactNode;
-};
+import Tooltip, { Props } from "~/components/Tooltip";
 
 const WrappedTooltip: React.FC<Props> = ({
   children,

app/editor/menus/block.tsx

@@ -26,8 +26,8 @@ import * as React from "react";
 import styled from "styled-components";
 import Image from "@shared/editor/components/Img";
 import { MenuItem } from "@shared/editor/types";
+import { metaDisplay } from "@shared/utils/keyboard";
 import { Dictionary } from "~/hooks/useDictionary";
-import { metaDisplay } from "~/utils/keyboard";
 
 const Img = styled(Image)`
   border-radius: 2px;

app/editor/menus/formatting.tsx

@@ -28,6 +28,7 @@ import { isInList } from "@shared/editor/queries/isInList";
 import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
+import { metaDisplay } from "@shared/utils/keyboard";
 import CircleIcon from "~/components/Icons/CircleIcon";
 import { Dictionary } from "~/hooks/useDictionary";
 
@@ -63,6 +64,7 @@ export default function formattingMenuItems(
     {
       name: "strong",
       tooltip: dictionary.strong,
+      shortcut: `${metaDisplay}+B`,
       icon: <BoldIcon />,
       active: isMarkActive(schema.marks.strong),
       visible: !isCode && (!isMobile || !isEmpty),
@@ -70,6 +72,7 @@ export default function formattingMenuItems(
     {
       name: "em",
       tooltip: dictionary.em,
+      shortcut: `${metaDisplay}+I`,
       icon: <ItalicIcon />,
       active: isMarkActive(schema.marks.em),
       visible: !isCode && (!isMobile || !isEmpty),
@@ -77,12 +80,14 @@ export default function formattingMenuItems(
     {
       name: "strikethrough",
       tooltip: dictionary.strikethrough,
+      shortcut: `${metaDisplay}+D`,
       icon: <StrikethroughIcon />,
       active: isMarkActive(schema.marks.strikethrough),
       visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       tooltip: dictionary.mark,
+      shortcut: `${metaDisplay}+Ctrl+H`,
       icon: highlight ? (
         <CircleIcon color={highlight.mark.attrs.color || Highlight.colors[0]} />
       ) : (
@@ -114,6 +119,7 @@ export default function formattingMenuItems(
     {
       name: "code_inline",
       tooltip: dictionary.codeInline,
+      shortcut: `${metaDisplay}+E`,
       icon: <CodeIcon />,
       active: isMarkActive(schema.marks.code_inline),
       visible: !isCodeBlock && (!isMobile || !isEmpty),
@@ -125,6 +131,7 @@ export default function formattingMenuItems(
     {
       name: "heading",
       tooltip: dictionary.heading,
+      shortcut: `⇧+Ctrl+1`,
       icon: <Heading1Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 1 }),
       attrs: { level: 1 },
@@ -133,6 +140,7 @@ export default function formattingMenuItems(
     {
       name: "heading",
       tooltip: dictionary.subheading,
+      shortcut: `⇧+Ctrl+2`,
       icon: <Heading2Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 2 }),
       attrs: { level: 2 },
@@ -141,6 +149,7 @@ export default function formattingMenuItems(
     {
       name: "heading",
       tooltip: dictionary.subheading,
+      shortcut: `⇧+Ctrl+3`,
       icon: <Heading3Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 3 }),
       attrs: { level: 3 },
@@ -149,6 +158,7 @@ export default function formattingMenuItems(
     {
       name: "blockquote",
       tooltip: dictionary.quote,
+      shortcut: `${metaDisplay}+]`,
       icon: <BlockQuoteIcon />,
       active: isNodeActive(schema.nodes.blockquote),
       attrs: { level: 2 },
@@ -161,6 +171,7 @@ export default function formattingMenuItems(
     {
       name: "checkbox_list",
       tooltip: dictionary.checkboxList,
+      shortcut: `⇧+Ctrl+7`,
       icon: <TodoListIcon />,
       keywords: "checklist checkbox task",
       active: isNodeActive(schema.nodes.checkbox_list),
@@ -169,6 +180,7 @@ export default function formattingMenuItems(
     {
       name: "bullet_list",
       tooltip: dictionary.bulletList,
+      shortcut: `⇧+Ctrl+8`,
       icon: <BulletedListIcon />,
       active: isNodeActive(schema.nodes.bullet_list),
       visible: !isCodeBlock && (!isMobile || isEmpty),
@@ -176,6 +188,7 @@ export default function formattingMenuItems(
     {
       name: "ordered_list",
       tooltip: dictionary.orderedList,
+      shortcut: `⇧+Ctrl+9`,
       icon: <OrderedListIcon />,
       active: isNodeActive(schema.nodes.ordered_list),
       visible: !isCodeBlock && (!isMobile || isEmpty),
@@ -183,6 +196,7 @@ export default function formattingMenuItems(
     {
       name: "outdentList",
       tooltip: dictionary.outdent,
+      shortcut: `⇧+Tab`,
       icon: <OutdentIcon />,
       visible:
         isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
@@ -190,6 +204,7 @@ export default function formattingMenuItems(
     {
       name: "indentList",
       tooltip: dictionary.indent,
+      shortcut: `Tab`,
       icon: <IndentIcon />,
       visible:
         isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
@@ -197,12 +212,14 @@ export default function formattingMenuItems(
     {
       name: "outdentCheckboxList",
       tooltip: dictionary.outdent,
+      shortcut: `⇧+Tab`,
       icon: <OutdentIcon />,
       visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
     },
     {
       name: "indentCheckboxList",
       tooltip: dictionary.indent,
+      shortcut: `Tab`,
       icon: <IndentIcon />,
       visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
     },
@@ -213,6 +230,7 @@ export default function formattingMenuItems(
     {
       name: "link",
       tooltip: dictionary.createLink,
+      shortcut: `${metaDisplay}+K`,
       icon: <LinkIcon />,
       attrs: { href: "" },
       visible: !isCodeBlock && (!isMobile || !isEmpty),
@@ -220,6 +238,7 @@ export default function formattingMenuItems(
     {
       name: "comment",
       tooltip: dictionary.comment,
+      shortcut: `${metaDisplay}+⌥+M`,
       icon: <CommentIcon />,
       label: isCodeBlock ? dictionary.comment : undefined,
       active: isMarkActive(schema.marks.comment, { resolved: false }),

app/hooks/useEditorClickHandlers.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useHistory } from "react-router-dom";
+import { isModKey } from "@shared/utils/keyboard";
 import { isInternalUrl } from "@shared/utils/urls";
-import { isModKey } from "~/utils/keyboard";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { isHash } from "~/utils/urls";
 

app/hooks/useKeyDown.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
+import { isModKey } from "@shared/utils/keyboard";
 import isTextInput from "~/utils/isTextInput";
-import { isModKey } from "~/utils/keyboard";
 
 type Callback = (event: KeyboardEvent) => void;
 

app/scenes/Document/components/Document.tsx

@@ -29,6 +29,7 @@ import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { TextHelper } from "@shared/utils/TextHelper";
 import { parseDomain } from "@shared/utils/domains";
 import { determineIconType } from "@shared/utils/icon";
+import { isModKey } from "@shared/utils/keyboard";
 import RootStore from "~/stores/RootStore";
 import Document from "~/models/Document";
 import Revision from "~/models/Revision";
@@ -47,7 +48,6 @@ import type { Editor as TEditor } from "~/editor";
 import { SearchResult } from "~/editor/components/LinkEditor";
 import { client } from "~/utils/ApiClient";
 import { emojiToUrl } from "~/utils/emoji";
-import { isModKey } from "~/utils/keyboard";
 
 import {
   documentHistoryPath,

app/scenes/Document/components/DocumentTitle.tsx

@@ -15,6 +15,7 @@ import {
   getCurrentDateTimeAsString,
   getCurrentTimeAsString,
 } from "@shared/utils/date";
+import { isModKey } from "@shared/utils/keyboard";
 import { DocumentValidation } from "@shared/validations";
 import ContentEditable, { RefHandle } from "~/components/ContentEditable";
 import { useDocumentContext } from "~/components/DocumentContext";
@@ -22,7 +23,6 @@ import Icon, { IconTitleWrapper } from "~/components/Icon";
 import { PopoverButton } from "~/components/IconPicker/components/PopoverButton";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
-import { isModKey } from "~/utils/keyboard";
 
 const IconPicker = React.lazy(() => import("~/components/IconPicker"));
 

app/scenes/Document/components/Header.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import { NavigationNode } from "@shared/types";
+import { altDisplay, metaDisplay } from "@shared/utils/keyboard";
 import { Theme } from "~/stores/UiStore";
 import Document from "~/models/Document";
 import Revision from "~/models/Revision";
@@ -43,7 +44,6 @@ import DocumentMenu from "~/menus/DocumentMenu";
 import NewChildDocumentMenu from "~/menus/NewChildDocumentMenu";
 import TableOfContentsMenu from "~/menus/TableOfContentsMenu";
 import TemplatesMenu from "~/menus/TemplatesMenu";
-import { altDisplay, metaDisplay } from "~/utils/keyboard";
 import { documentEditPath } from "~/utils/routeHelpers";
 import ObservingBanner from "./ObservingBanner";
 import PublicBreadcrumb from "./PublicBreadcrumb";
@@ -134,7 +134,7 @@ function DocumentHeader({
           ? t("Show contents")
           : `${t("Show contents")} (${t("available when headings are added")})`
       }
-      shortcut={`ctrl+${altDisplay}+h`}
+      shortcut={`Ctrl+${altDisplay}+h`}
       placement="bottom"
     >
       <Button

app/scenes/KeyboardShortcuts.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { isMac } from "@shared/utils/browser";
+import { metaDisplay, altDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import InputSearch from "~/components/InputSearch";
 import Key from "~/components/Key";
-import { metaDisplay, altDisplay } from "~/utils/keyboard";
 
 function KeyboardShortcuts() {
   const { t } = useTranslation();

shared/utils/keyboard.ts

@@ -1,4 +1,4 @@
-import { isMac } from "@shared/utils/browser";
+import { isMac } from "./browser";
 
 export const altDisplay = isMac() ? "⌥" : "Alt";