feat: More prominent keyboard shortcuts in hints (#10057)

* Initial

* Memoize

* Styling

* Use double angle brackets for keyboard shortcuts

* Use rem in gap

* Use an existing function for substituting tags in a string

* Revert styling

* Avoid unique key warnings

* Styling

* getTransChildren -> nodesFromTextWithTags

* Use height and padding instead of padding only

* Initial new idea

* WIP shortcut substitutions

* Use simple regex for parsing shortcuts

* Use single shortcut for combos

* Use kbd instead of span

* shortcutFromKeyString -> getTaggedShortcutKey

* Bug fix

* FlowChart -> Flowchart

* memo is useless here

* Trigger CI

* Translate in getShortcutKey

* More normalized shortcuts

* improve shortcut normalization and replacement & support multi-key tagged shortcuts

* fix regex

* tweak css

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/excalidraw/shortcut.ts

@@ -0,0 +1,19 @@
+import { isDarwin } from "@excalidraw/common";
+
+import { t } from "./i18n";
+
+export const getShortcutKey = (shortcut: string): string =>
+  shortcut
+    .replace(
+      /\b(Opt(?:ion)?|Alt)\b/i,
+      isDarwin ? t("keys.option") : t("keys.alt"),
+    )
+    .replace(/\bShift\b/i, t("keys.shift"))
+    .replace(/\b(Enter|Return)\b/i, t("keys.enter"))
+    .replace(
+      /\b(Ctrl|Cmd|Command|CtrlOrCmd)\b/gi,
+      isDarwin ? t("keys.cmd") : t("keys.ctrl"),
+    )
+    .replace(/\b(Esc(?:ape)?)\b/i, t("keys.escape"))
+    .replace(/\b(Space(?:bar)?)\b/i, t("keys.spacebar"))
+    .replace(/\b(Del(?:ete)?)\b/i, t("keys.delete"));