feat: editor redesign 🔥 (#5780)

* Placed eraser into shape switcher (top toolbar).
Redesigned top toolbar.

* Redesigned zoom and undo-redo buttons.

* Started redesigning left toolbar.

* Redesigned help dialog.

* Colour picker now somewhat in line with new design

* [WIP] Changed a bunch of icons.
TODO: organise new icons.

* [WIP] Organised a bunch of icons. Still some to do

* [WIP] Started working on hamburger menu.

* Fixed some bugs with hamburger menu.

* Menu and left toolbar positioning.

* Added some more items to hamburger menu.

* Changed some icons.

* Modal/dialog styling & bunch of fixes.

* Some more dialog improvements & fixes.

* Mobile menu changes.

* Menu can now be closed with outside click.

* Collab avatars and button changes.

* Icon sizing. Left toolbar positioning.

* Implemented welcome screen rendering logic.

* [WIP] Welcome screen content + design.

* Some more welcome screen content and design.

* Merge fixes.

* Tweaked icon set.

* Welcome screen darkmode fix.

* Content updates.

* Various small fixes & adjustments.
Moved language selection into menu.
Fixed some problematic icons.
Slightly moved encryption icon.

* Sidebar header redesign.

* Libraries content rendering logic + some styling.

* Somem more library sidebar styling.

* Publish library dialog styling.

* scroll-back-to-content btn styling

* ColorPicker positioning.

* Library button styling.

* ColorPicker positioning "fix".

* Misc adjustments.

* PenMode button changes.

* Trying to make mobile somewhat usable.

* Added a couple of icons.

* Added some shortcuts.

* Prevent welcome screen flickering.
Fix issue with welcome screen interactivity.
Don't show sidebar button when docked.

* Icon sizing on smaller screens.

* Sidebar styling changes.

* Alignment button... well... alignments.

* Fix inconsistent padding in left toolbar.

* HintViewer changes.

* Hamburger menu changes.

* Move encryption badge back to its original pos.

* Arrowhead changes.
Active state, colours + stronger shadow.

* Added new custom font.

* Fixed bug with library button not rendering.

* Fixed issue with lang selection colours.

* Add tooltips for undo, redo.

* Address some dark mode contrast issues.

* (Re)introduce counter for selectedItems in sidebar

* [WIP] Tweaked bounding box colour & padding.

* Dashed bounding box for remote clients.

* Some more bounding box tweaks.

* Removed docking animation for now...

* Address some RTL issues.

* Welcome screen responsiveness.

* use lighter selection color in dark mode & align naming

* use rounded corners for transform handles

* use lighter gray for welcomeScreen text in dark mode

* disable selection on dialog buttons

* change selection button icon

* fix library item width being flexible

* library: visually align spinner with first section heading

* lint

* fix scrollbar color in dark mode & make thinner

* adapt properties panel max-height

* add shrotcut label to save-to-current-file

* fix unrelated `useOutsideClick` firing for active modal

* add promo color to e+ menu item

* fix type

* lowered button size

* fix transform handles raidus not accounting for zoom

* attempt fix for excal logo on safari

* final fix for excal logo on safari

* fixing fhd resolution button sized

* remove TODO shortcut

* Collab related styling changes.
Expanding avatar list no longer offsets top toolbar.
Added active state & collaborator count badge for collab button.

* Tweaked collab button active colours.

* Added active style to collab btn in hamburger menu

* Remove unnecessary comment.

* Added back promo link for non (signed in) E+ users

* Go to E+ button added for signed in E+ users.

* Close menu & dropdown on modal close.

* tweak icons & fix rendering on smaller sizes [part one]

* align welcomeScreen icons with other UI

* switch icon resize mq to `device-width`

* disable welcomeScreen items `:hover` when selecting on canvas

* change selection box color and style

* reduce selection padding and fix group selection styling

* improve collab cursor styling

- make name borders round
- hide status when "active"
- remove black/gray colors

* add Twitter to hamburger menu

* align collab button

* add shortcut for image export dialog

* revert yarn.lock

* fix more tabler icons

* slightly better-looking penMode button

* change penMode button & tooltip

* revert hamburger menu icon

* align padding on lang picker & canvas bg

* updated robot txt to allow twitter bot and fb bot

* added new OG and tweaked the OG state

* add tooltip to collab button

* align style for scroll-to-content button

* fix pointer-events around toolbar

* fix decor arrow positioning and RTL

* fix welcomeScreen-item active state in dark mode

* change `load` button copy

* prevent shadow anim when opening a docked sidebar

* update E+ links ga params

* show redirect-to-eplus welcomeScreen subheading for signed-in users

* make more generic

* add ga for eplus redirect button

* change copy and icons for hamburger export buttons

* update snaps

* trim the username to account for trailing spaces

* tweaks around decor breakpoints

* fix linear element editor test

* remove .env change

* remove `it.only`

Co-authored-by: dwelle <luzar.david@gmail.com>
Co-authored-by: Maielo <maielo.mv@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/components/HelpDialog.tsx

@@ -4,32 +4,36 @@ import { isDarwin, isWindows } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./HelpDialog.scss";
+import { ExternalLinkIcon } from "./icons";
 
 const Header = () => (
-  <div className="HelpDialog--header">
+  <div className="HelpDialog__header">
     <a
-      className="HelpDialog--btn"
+      className="HelpDialog__btn"
       href="https://github.com/excalidraw/excalidraw#documentation"
       target="_blank"
       rel="noopener noreferrer"
     >
       {t("helpDialog.documentation")}
+      <div className="HelpDialog__link-icon">{ExternalLinkIcon}</div>
     </a>
     <a
-      className="HelpDialog--btn"
+      className="HelpDialog__btn"
       href="https://blog.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
     >
       {t("helpDialog.blog")}
+      <div className="HelpDialog__link-icon">{ExternalLinkIcon}</div>
     </a>
     <a
-      className="HelpDialog--btn"
+      className="HelpDialog__btn"
       href="https://github.com/excalidraw/excalidraw/issues"
       target="_blank"
       rel="noopener noreferrer"
     >
       {t("helpDialog.github")}
+      <div className="HelpDialog__link-icon">{ExternalLinkIcon}</div>
     </a>
   </div>
 );
@@ -37,88 +41,61 @@ const Header = () => (
 const Section = (props: { title: string; children: React.ReactNode }) => (
   <>
     <h3>{props.title}</h3>
-    {props.children}
+    <div className="HelpDialog__islands-container">{props.children}</div>
   </>
 );
 
-const Columns = (props: { children: React.ReactNode }) => (
-  <div
-    style={{
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-      justifyContent: "space-between",
-    }}
-  >
-    {props.children}
-  </div>
-);
-
-const Column = (props: { children: React.ReactNode }) => (
-  <div style={{ width: "49%" }}>{props.children}</div>
-);
-
 const ShortcutIsland = (props: {
   caption: string;
   children: React.ReactNode;
+  className?: string;
 }) => (
-  <div className="HelpDialog--island">
-    <h3 className="HelpDialog--island-title">{props.caption}</h3>
-    {props.children}
+  <div className={`HelpDialog__island ${props.className}`}>
+    <h4 className="HelpDialog__island-title">{props.caption}</h4>
+    <div className="HelpDialog__island-content">{props.children}</div>
   </div>
 );
 
-const Shortcut = (props: {
+function* intersperse(as: JSX.Element[][], delim: string | null) {
+  let first = true;
+  for (const x of as) {
+    if (!first) {
+      yield delim;
+    }
+    first = false;
+    yield x;
+  }
+}
+
+const Shortcut = ({
+  label,
+  shortcuts,
+  isOr = true,
+}: {
   label: string;
   shortcuts: string[];
-  isOr: boolean;
+  isOr?: boolean;
 }) => {
+  const splitShortcutKeys = shortcuts.map((shortcut) => {
+    const keys = shortcut.endsWith("++")
+      ? [...shortcut.slice(0, -2).split("+"), "+"]
+      : shortcut.split("+");
+
+    return keys.map((key) => <ShortcutKey key={key}>{key}</ShortcutKey>);
+  });
+
   return (
-    <div className="HelpDialog--shortcut">
-      <div
-        style={{
-          display: "flex",
-          margin: "0",
-          padding: "4px 8px",
-          alignItems: "center",
-        }}
-      >
-        <div
-          style={{
-            lineHeight: 1.4,
-          }}
-        >
-          {props.label}
-        </div>
-        <div
-          style={{
-            display: "flex",
-            flex: "0 0 auto",
-            justifyContent: "flex-end",
-            marginInlineStart: "auto",
-            minWidth: "30%",
-          }}
-        >
-          {props.shortcuts.map((shortcut, index) => (
-            <React.Fragment key={index}>
-              <ShortcutKey>{shortcut}</ShortcutKey>
-              {props.isOr &&
-                index !== props.shortcuts.length - 1 &&
-                t("helpDialog.or")}
-            </React.Fragment>
-          ))}
-        </div>
+    <div className="HelpDialog__shortcut">
+      <div>{label}</div>
+      <div className="HelpDialog__key-container">
+        {[...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)]}
       </div>
     </div>
   );
 };
 
-Shortcut.defaultProps = {
-  isOr: true,
-};
-
 const ShortcutKey = (props: { children: React.ReactNode }) => (
-  <kbd className="HelpDialog--key" {...props} />
+  <kbd className="HelpDialog__key" {...props} />
 );
 
 export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
@@ -137,286 +114,276 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
       >
         <Header />
         <Section title={t("helpDialog.shortcuts")}>
-          <Columns>
-            <Column>
-              <ShortcutIsland caption={t("helpDialog.tools")}>
-                <Shortcut
-                  label={t("toolBar.selection")}
-                  shortcuts={["V", "1"]}
-                />
-                <Shortcut
-                  label={t("toolBar.rectangle")}
-                  shortcuts={["R", "2"]}
-                />
-                <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-                <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
-                <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
-                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
-                <Shortcut
-                  label={t("toolBar.freedraw")}
-                  shortcuts={["Shift + P", "X", "7"]}
-                />
-                <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
-                <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
-                <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
-                <Shortcut
-                  label={t("toolBar.eraser")}
-                  shortcuts={[getShortcutKey("E")]}
-                />
-                <Shortcut
-                  label={t("helpDialog.editSelectedShape")}
-                  shortcuts={[
-                    getShortcutKey("Enter"),
-                    t("helpDialog.doubleClick"),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.textNewLine")}
-                  shortcuts={[
-                    getShortcutKey("Enter"),
-                    getShortcutKey("Shift+Enter"),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.textFinish")}
-                  shortcuts={[
-                    getShortcutKey("Esc"),
-                    getShortcutKey("CtrlOrCmd+Enter"),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.curvedArrow")}
-                  shortcuts={[
-                    "A",
-                    t("helpDialog.click"),
-                    t("helpDialog.click"),
-                    t("helpDialog.click"),
-                  ]}
-                  isOr={false}
-                />
-                <Shortcut
-                  label={t("helpDialog.curvedLine")}
-                  shortcuts={[
-                    "L",
-                    t("helpDialog.click"),
-                    t("helpDialog.click"),
-                    t("helpDialog.click"),
-                  ]}
-                  isOr={false}
-                />
-                <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
-                <Shortcut
-                  label={t("helpDialog.preventBinding")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd")]}
-                />
-                <Shortcut
-                  label={t("toolBar.link")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+K")]}
-                />
-              </ShortcutIsland>
-              <ShortcutIsland caption={t("helpDialog.view")}>
-                <Shortcut
-                  label={t("buttons.zoomIn")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd++")]}
-                />
-                <Shortcut
-                  label={t("buttons.zoomOut")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
-                />
-                <Shortcut
-                  label={t("buttons.resetZoom")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
-                />
-                <Shortcut
-                  label={t("helpDialog.zoomToFit")}
-                  shortcuts={["Shift+1"]}
-                />
-                <Shortcut
-                  label={t("helpDialog.zoomToSelection")}
-                  shortcuts={["Shift+2"]}
-                />
-                <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
-                <Shortcut
-                  label={t("buttons.zenMode")}
-                  shortcuts={[getShortcutKey("Alt+Z")]}
-                />
-                <Shortcut
-                  label={t("labels.showGrid")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
-                />
-                <Shortcut
-                  label={t("labels.viewMode")}
-                  shortcuts={[getShortcutKey("Alt+R")]}
-                />
-                <Shortcut
-                  label={t("labels.toggleTheme")}
-                  shortcuts={[getShortcutKey("Alt+Shift+D")]}
-                />
-                <Shortcut
-                  label={t("stats.title")}
-                  shortcuts={[getShortcutKey("Alt+/")]}
-                />
-              </ShortcutIsland>
-            </Column>
-            <Column>
-              <ShortcutIsland caption={t("helpDialog.editor")}>
-                <Shortcut
-                  label={t("labels.selectAll")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
-                />
-                <Shortcut
-                  label={t("labels.multiSelect")}
-                  shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
-                />
-                <Shortcut
-                  label={t("helpDialog.deepSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.deepBoxSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`),
-                  ]}
-                />
-                <Shortcut
-                  label={t("labels.moveCanvas")}
-                  shortcuts={[
-                    getShortcutKey(`Space+${t("helpDialog.drag")}`),
-                    getShortcutKey(`Wheel+${t("helpDialog.drag")}`),
-                  ]}
-                  isOr={true}
-                />
-                <Shortcut
-                  label={t("labels.cut")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+X")]}
-                />
-                <Shortcut
-                  label={t("labels.copy")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
-                />
-                <Shortcut
-                  label={t("labels.paste")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
-                />
-                <Shortcut
-                  label={t("labels.copyAsPng")}
-                  shortcuts={[getShortcutKey("Shift+Alt+C")]}
-                />
-                <Shortcut
-                  label={t("labels.copyStyles")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Alt+C")]}
-                />
-                <Shortcut
-                  label={t("labels.pasteStyles")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Alt+V")]}
-                />
-                <Shortcut
-                  label={t("labels.delete")}
-                  shortcuts={[getShortcutKey("Del")]}
-                />
-                <Shortcut
-                  label={t("labels.sendToBack")}
-                  shortcuts={[
-                    isDarwin
-                      ? getShortcutKey("CtrlOrCmd+Alt+[")
-                      : getShortcutKey("CtrlOrCmd+Shift+["),
-                  ]}
-                />
-                <Shortcut
-                  label={t("labels.bringToFront")}
-                  shortcuts={[
-                    isDarwin
-                      ? getShortcutKey("CtrlOrCmd+Alt+]")
-                      : getShortcutKey("CtrlOrCmd+Shift+]"),
-                  ]}
-                />
-                <Shortcut
-                  label={t("labels.sendBackward")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
-                />
-                <Shortcut
-                  label={t("labels.bringForward")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
-                />
-                <Shortcut
-                  label={t("labels.alignTop")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Up")]}
-                />
-                <Shortcut
-                  label={t("labels.alignBottom")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Down")]}
-                />
-                <Shortcut
-                  label={t("labels.alignLeft")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Left")]}
-                />
-                <Shortcut
-                  label={t("labels.alignRight")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Right")]}
-                />
-                <Shortcut
-                  label={t("labels.duplicateSelection")}
-                  shortcuts={[
-                    getShortcutKey("CtrlOrCmd+D"),
-                    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.toggleElementLock")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+L")]}
-                />
-                <Shortcut
-                  label={t("buttons.undo")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
-                />
-                <Shortcut
-                  label={t("buttons.redo")}
-                  shortcuts={
-                    isWindows
-                      ? [
-                          getShortcutKey("CtrlOrCmd+Y"),
-                          getShortcutKey("CtrlOrCmd+Shift+Z"),
-                        ]
-                      : [getShortcutKey("CtrlOrCmd+Shift+Z")]
-                  }
-                />
-                <Shortcut
-                  label={t("labels.group")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+G")]}
-                />
-                <Shortcut
-                  label={t("labels.ungroup")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+G")]}
-                />
-                <Shortcut
-                  label={t("labels.flipHorizontal")}
-                  shortcuts={[getShortcutKey("Shift+H")]}
-                />
-                <Shortcut
-                  label={t("labels.flipVertical")}
-                  shortcuts={[getShortcutKey("Shift+V")]}
-                />
-                <Shortcut
-                  label={t("labels.showStroke")}
-                  shortcuts={[getShortcutKey("S")]}
-                />
-                <Shortcut
-                  label={t("labels.showBackground")}
-                  shortcuts={[getShortcutKey("G")]}
-                />
-                <Shortcut
-                  label={t("labels.decreaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}
-                />
-                <Shortcut
-                  label={t("labels.increaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+>")]}
-                />
-              </ShortcutIsland>
-            </Column>
-          </Columns>
+          <ShortcutIsland
+            className="HelpDialog__island--tools"
+            caption={t("helpDialog.tools")}
+          >
+            <Shortcut label={t("toolBar.selection")} shortcuts={["V", "1"]} />
+            <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
+            <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
+            <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
+            <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
+            <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
+            <Shortcut
+              label={t("toolBar.freedraw")}
+              shortcuts={["Shift + P", "X", "7"]}
+            />
+            <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
+            <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
+            <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
+            <Shortcut
+              label={t("toolBar.eraser")}
+              shortcuts={[getShortcutKey("E")]}
+            />
+            <Shortcut
+              label={t("helpDialog.editSelectedShape")}
+              shortcuts={[getShortcutKey("Enter"), t("helpDialog.doubleClick")]}
+            />
+            <Shortcut
+              label={t("helpDialog.textNewLine")}
+              shortcuts={[
+                getShortcutKey("Enter"),
+                getShortcutKey("Shift+Enter"),
+              ]}
+            />
+            <Shortcut
+              label={t("helpDialog.textFinish")}
+              shortcuts={[
+                getShortcutKey("Esc"),
+                getShortcutKey("CtrlOrCmd+Enter"),
+              ]}
+            />
+            <Shortcut
+              label={t("helpDialog.curvedArrow")}
+              shortcuts={[
+                "A",
+                t("helpDialog.click"),
+                t("helpDialog.click"),
+                t("helpDialog.click"),
+              ]}
+              isOr={false}
+            />
+            <Shortcut
+              label={t("helpDialog.curvedLine")}
+              shortcuts={[
+                "L",
+                t("helpDialog.click"),
+                t("helpDialog.click"),
+                t("helpDialog.click"),
+              ]}
+              isOr={false}
+            />
+            <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
+            <Shortcut
+              label={t("helpDialog.preventBinding")}
+              shortcuts={[getShortcutKey("CtrlOrCmd")]}
+            />
+            <Shortcut
+              label={t("toolBar.link")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+K")]}
+            />
+          </ShortcutIsland>
+          <ShortcutIsland
+            className="HelpDialog__island--view"
+            caption={t("helpDialog.view")}
+          >
+            <Shortcut
+              label={t("buttons.zoomIn")}
+              shortcuts={[getShortcutKey("CtrlOrCmd++")]}
+            />
+            <Shortcut
+              label={t("buttons.zoomOut")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+-")]}
+            />
+            <Shortcut
+              label={t("buttons.resetZoom")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+0")]}
+            />
+            <Shortcut
+              label={t("helpDialog.zoomToFit")}
+              shortcuts={["Shift+1"]}
+            />
+            <Shortcut
+              label={t("helpDialog.zoomToSelection")}
+              shortcuts={["Shift+2"]}
+            />
+            <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
+            <Shortcut
+              label={t("buttons.zenMode")}
+              shortcuts={[getShortcutKey("Alt+Z")]}
+            />
+            <Shortcut
+              label={t("labels.showGrid")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
+            />
+            <Shortcut
+              label={t("labels.viewMode")}
+              shortcuts={[getShortcutKey("Alt+R")]}
+            />
+            <Shortcut
+              label={t("labels.toggleTheme")}
+              shortcuts={[getShortcutKey("Alt+Shift+D")]}
+            />
+            <Shortcut
+              label={t("stats.title")}
+              shortcuts={[getShortcutKey("Alt+/")]}
+            />
+          </ShortcutIsland>
+          <ShortcutIsland
+            className="HelpDialog__island--editor"
+            caption={t("helpDialog.editor")}
+          >
+            <Shortcut
+              label={t("labels.selectAll")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+A")]}
+            />
+            <Shortcut
+              label={t("labels.multiSelect")}
+              shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
+            />
+            <Shortcut
+              label={t("helpDialog.deepSelect")}
+              shortcuts={[getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`)]}
+            />
+            <Shortcut
+              label={t("helpDialog.deepBoxSelect")}
+              shortcuts={[getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`)]}
+            />
+            <Shortcut
+              label={t("labels.moveCanvas")}
+              shortcuts={[
+                getShortcutKey(`Space+${t("helpDialog.drag")}`),
+                getShortcutKey(`Wheel+${t("helpDialog.drag")}`),
+              ]}
+              isOr={true}
+            />
+            <Shortcut
+              label={t("labels.cut")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+X")]}
+            />
+            <Shortcut
+              label={t("labels.copy")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+C")]}
+            />
+            <Shortcut
+              label={t("labels.paste")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
+            />
+            <Shortcut
+              label={t("labels.copyAsPng")}
+              shortcuts={[getShortcutKey("Shift+Alt+C")]}
+            />
+            <Shortcut
+              label={t("labels.copyStyles")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Alt+C")]}
+            />
+            <Shortcut
+              label={t("labels.pasteStyles")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Alt+V")]}
+            />
+            <Shortcut
+              label={t("labels.delete")}
+              shortcuts={[getShortcutKey("Del")]}
+            />
+            <Shortcut
+              label={t("labels.sendToBack")}
+              shortcuts={[
+                isDarwin
+                  ? getShortcutKey("CtrlOrCmd+Alt+[")
+                  : getShortcutKey("CtrlOrCmd+Shift+["),
+              ]}
+            />
+            <Shortcut
+              label={t("labels.bringToFront")}
+              shortcuts={[
+                isDarwin
+                  ? getShortcutKey("CtrlOrCmd+Alt+]")
+                  : getShortcutKey("CtrlOrCmd+Shift+]"),
+              ]}
+            />
+            <Shortcut
+              label={t("labels.sendBackward")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+[")]}
+            />
+            <Shortcut
+              label={t("labels.bringForward")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+]")]}
+            />
+            <Shortcut
+              label={t("labels.alignTop")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Up")]}
+            />
+            <Shortcut
+              label={t("labels.alignBottom")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Down")]}
+            />
+            <Shortcut
+              label={t("labels.alignLeft")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Left")]}
+            />
+            <Shortcut
+              label={t("labels.alignRight")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Right")]}
+            />
+            <Shortcut
+              label={t("labels.duplicateSelection")}
+              shortcuts={[
+                getShortcutKey("CtrlOrCmd+D"),
+                getShortcutKey(`Alt+${t("helpDialog.drag")}`),
+              ]}
+            />
+            <Shortcut
+              label={t("helpDialog.toggleElementLock")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+L")]}
+            />
+            <Shortcut
+              label={t("buttons.undo")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
+            />
+            <Shortcut
+              label={t("buttons.redo")}
+              shortcuts={
+                isWindows
+                  ? [
+                      getShortcutKey("CtrlOrCmd+Y"),
+                      getShortcutKey("CtrlOrCmd+Shift+Z"),
+                    ]
+                  : [getShortcutKey("CtrlOrCmd+Shift+Z")]
+              }
+            />
+            <Shortcut
+              label={t("labels.group")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+G")]}
+            />
+            <Shortcut
+              label={t("labels.ungroup")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+G")]}
+            />
+            <Shortcut
+              label={t("labels.flipHorizontal")}
+              shortcuts={[getShortcutKey("Shift+H")]}
+            />
+            <Shortcut
+              label={t("labels.flipVertical")}
+              shortcuts={[getShortcutKey("Shift+V")]}
+            />
+            <Shortcut
+              label={t("labels.showStroke")}
+              shortcuts={[getShortcutKey("S")]}
+            />
+            <Shortcut
+              label={t("labels.showBackground")}
+              shortcuts={[getShortcutKey("G")]}
+            />
+            <Shortcut
+              label={t("labels.decreaseFontSize")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}
+            />
+            <Shortcut
+              label={t("labels.increaseFontSize")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+>")]}
+            />
+          </ShortcutIsland>
         </Section>
       </Dialog>
     </>