fix: retain the short format for menus

Author: microbit-matt-hillsdon

src/actions/clipboard.ts

@@ -101,7 +101,7 @@ export class Clipboard {
    */
   private registerCutContextMenuAction() {
     const cutAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Cut (${formatActionShortcut('cut')})`,
+      displayText: (scope) => `Cut (${formatActionShortcut('cut', 'short')})`,
       preconditionFn: (scope) => {
         const ws = scope.block?.workspace;
         if (!ws) return 'hidden';
@@ -196,7 +196,7 @@ export class Clipboard {
    */
   private registerCopyContextMenuAction() {
     const copyAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Copy (${formatActionShortcut('copy')})`,
+      displayText: (scope) => `Copy (${formatActionShortcut('copy', 'short')})`,
       preconditionFn: (scope) => {
         const ws = scope.block?.workspace;
         if (!ws) return 'hidden';
@@ -305,7 +305,8 @@ export class Clipboard {
    */
   private registerPasteContextMenuAction() {
     const pasteAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Paste (${formatActionShortcut('paste')})`,
+      displayText: (scope) =>
+        `Paste (${formatActionShortcut('paste', 'short')})`,
       preconditionFn: (scope: ScopeWithConnection) => {
         const block = scope.block ?? scope.connection?.getSourceBlock();
         const ws = block?.workspace as WorkspaceSvg | null;

src/actions/enter.ts

@@ -104,7 +104,7 @@ export class EnterAction {
     } else if (nodeType === ASTNode.types.BLOCK) {
       const block = curNode.getLocation() as Block;
       if (!this.tryShowFullBlockFieldEditor(block)) {
-        const shortcut = formatActionShortcut('list_shortcuts');
+        const shortcut = formatActionShortcut('list_shortcuts', 'short');
         const message = `Press ${shortcut} for help on keyboard controls`;
         dialog.alert(message);
       }

src/shortcut_dialog.ts

@@ -139,15 +139,16 @@ export class ShortcutDialog {
   }
 
   private actionShortcutsToHTML(action: string) {
-    const shortcuts = actionShortcutsForPlatform(action);
+    const shortcuts = actionShortcutsForPlatform(action, 'long');
     return shortcuts.map((keys) => this.actionShortcutToHTML(keys)).join(' / ');
   }
 
   private actionShortcutToHTML(keys: string[]) {
+    const separator = navigator.platform.startsWith('Mac') ? '' : ' + ';
     return [
       `<span class="shortcut-combo">`,
       ...keys.map((key, index) => {
-        return `<span class="key">${key}</span>${index < keys.length - 1 ? ' + ' : ''}`;
+        return `<span class="key">${key}</span>${index < keys.length - 1 ? separator : ''}`;
       }),
       `</span>`,
     ].join('');
@@ -298,7 +299,7 @@ Blockly.Css.register(`
   border: 1px solid var(--key-border-color);
   border-radius: 8px;
   display: inline-block;
-  margin: 0 8px;
+  margin: 0 4px;
   min-width: 2em;
   padding: .3em .5em;
   text-align: center;

src/shortcut_formatting.ts

@@ -7,19 +7,32 @@ const isMacPlatform = navigator.platform.startsWith('Mac');
  * Format the primary shortcut for this platform in a user facing format.
  *
  * @param action The action name, e.g. "cut".
+ * @param format The key format.
  * @returns The formatted shortcut.
  */
-export function formatActionShortcut(action: string): string {
-  const parts = actionShortcutsForPlatform(action)[0];
-  return parts.join(' + ');
+export function formatActionShortcut(
+  action: string,
+  format: ShortcutFormat,
+): string {
+  const parts = actionShortcutsForPlatform(action, format)[0];
+  return parts.join(isMacPlatform ? ' ' : ' + ');
 }
 
-const modifierNames: Record<string, string> = {
-  'Control': 'Ctrl',
-  'Meta': '⌘ Command',
-  'Alt': isMacPlatform ? '⌥ Option' : 'Alt',
+const modifierNamesByFormat: Record<ShortcutFormat, Record<string, string>> = {
+  long: {
+    'Control': 'Ctrl',
+    'Meta': '⌘ Command',
+    'Alt': isMacPlatform ? '⌥ Option' : 'Alt',
+  },
+  short: {
+    'Control': 'Ctrl',
+    'Meta': '⌘',
+    'Alt': isMacPlatform ? '⌥' : 'Alt',
+  },
 };
 
+export type ShortcutFormat = 'long' | 'short';
+
 /**
  * Find the relevant shortcuts for the given action for the current platform.
  * Keys are returned in a user facing format.
@@ -28,9 +41,14 @@ const modifierNames: Record<string, string> = {
  * current platform or tagged them with a platform.
  *
  * @param action The action name, e.g. "cut".
+ * @param format The key format.
  * @returns The formatted shortcuts.
  */
-export function actionShortcutsForPlatform(action: string): string[][] {
+export function actionShortcutsForPlatform(
+  action: string,
+  format: ShortcutFormat,
+): string[][] {
+  const modifierNames = modifierNamesByFormat[format];
   const shortcuts = ShortcutRegistry.registry.getKeyCodesByShortcutName(action);
   // See ShortcutRegistry.createSerializedKey for the starting format.
   const named = shortcuts.map((shortcut) => {