refactor: Use localizable messages.

Author: gonfunko

src/actions/clipboard.ts

@@ -9,6 +9,7 @@ import {
   Gesture,
   ShortcutRegistry,
   Events,
+  Msg,
   utils as blocklyUtils,
   clipboard,
   ICopyData,
@@ -104,7 +105,8 @@ export class Clipboard {
    */
   private registerCutContextMenuAction() {
     const cutAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Cut (${getShortActionShortcut('cut')})`,
+      displayText: (scope) =>
+        Msg['CUT_SHORTCUT'].replace('%1', getShortActionShortcut('cut')),
       preconditionFn: (scope) => {
         const ws = scope.block?.workspace;
         if (!ws) return 'hidden';
@@ -199,7 +201,8 @@ export class Clipboard {
    */
   private registerCopyContextMenuAction() {
     const copyAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Copy (${getShortActionShortcut('copy')})`,
+      displayText: (scope) =>
+        Msg['COPY_SHORTCUT'].replace('%1', getShortActionShortcut('copy')),
       preconditionFn: (scope) => {
         const ws = scope.block?.workspace;
         if (!ws) return 'hidden';
@@ -304,7 +307,8 @@ export class Clipboard {
    */
   private registerPasteContextMenuAction() {
     const pasteAction: ContextMenuRegistry.RegistryItem = {
-      displayText: (scope) => `Paste (${getShortActionShortcut('paste')})`,
+      displayText: (scope) =>
+        Msg['PASTE_SHORTCUT'].replace('%1', getShortActionShortcut('paste')),
       preconditionFn: (scope: ContextMenuRegistry.Scope) => {
         let block;
         if (scope.focusedNode instanceof Blockly.Block) {

src/actions/delete.ts

@@ -7,10 +7,12 @@
 import {
   ContextMenuRegistry,
   Gesture,
+  Msg,
   ShortcutRegistry,
   utils as BlocklyUtils,
   LineCursor,
 } from 'blockly';
+import {getShortActionShortcut} from '../shortcut_formatting';
 import * as Constants from '../constants';
 import type {WorkspaceSvg} from 'blockly';
 import {Navigation} from '../navigation';
@@ -102,16 +104,17 @@ export class DeleteAction {
 
     const deleteItem: ContextMenuRegistry.RegistryItem = {
       displayText: (scope) => {
+        const shortcut = getShortActionShortcut(this.deleteShortcutName);
         if (!this.oldContextMenuItem) {
-          return 'Delete block (Del)';
+          return Msg['DELETE_BLOCK'].replace('%1', shortcut);
         }
 
         type DisplayTextFn = (p1: ContextMenuRegistry.Scope) => string;
         // Use the original item's text, which is dynamic based on the number
         // of blocks that will be deleted.
         const oldDisplayText = this.oldContextMenuItem
           .displayText as DisplayTextFn;
-        return oldDisplayText(scope) + ' (Del)';
+        return oldDisplayText(scope) + ` (${shortcut})`;
       },
       preconditionFn: (scope, menuOpenEvent: Event) => {
         const ws = scope.block?.workspace;

src/actions/edit.ts

@@ -4,8 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ContextMenuRegistry, LineCursor} from 'blockly';
+import {ContextMenuRegistry, LineCursor, Msg} from 'blockly';
 import {Navigation} from 'src/navigation';
+import {getShortActionShortcut} from '../shortcut_formatting';
+import * as Constants from '../constants';
 
 /**
  * Action to edit a block.  This just moves the cursor to the first
@@ -50,7 +52,10 @@ export class EditAction {
    */
   private registerContextMenuAction() {
     const editAboveItem: ContextMenuRegistry.RegistryItem = {
-      displayText: 'Edit Block contents (→︎)',
+      displayText: Msg['EDIT_BLOCK_CONTENTS'].replace(
+        '%1',
+        getShortActionShortcut(Constants.SHORTCUT_NAMES.RIGHT),
+      ),
       preconditionFn: (scope: ContextMenuRegistry.Scope, menuOpenEvent) => {
         if (menuOpenEvent instanceof PointerEvent) return 'hidden';
         const workspace = scope.block?.workspace;

src/actions/enter.ts

@@ -6,6 +6,7 @@
 
 import {
   Events,
+  Msg,
   ShortcutRegistry,
   utils as BlocklyUtils,
   getFocusManager,

src/actions/insert.ts

@@ -6,9 +6,11 @@
 
 import {
   ContextMenuRegistry,
+  Msg,
   ShortcutRegistry,
   utils as BlocklyUtils,
 } from 'blockly';
+import {getShortActionShortcut} from '../shortcut_formatting';
 import * as Constants from '../constants';
 import type {WorkspaceSvg} from 'blockly';
 import {Navigation} from '../navigation';
@@ -69,7 +71,10 @@ export class InsertAction {
   private registerContextMenuAction() {
     const insertAboveItem: ContextMenuRegistry.RegistryItem = {
       displayText: () => {
-        return 'Insert Block (I)';
+        return Msg['INSERT_BLOCK'].replace(
+          '%1',
+          getShortActionShortcut(this.insertShortcutName),
+        );
       },
       preconditionFn: (
         scope: ContextMenuRegistry.Scope,

src/actions/move.ts

@@ -7,12 +7,14 @@
 import {
   BlockSvg,
   ContextMenuRegistry,
+  Msg,
   ShortcutRegistry,
   utils,
   WorkspaceSvg,
 } from 'blockly';
 import {Direction} from '../drag_direction';
 import {Mover} from './mover';
+import {getShortActionShortcut} from '../shortcut_formatting';
 
 const KeyCodes = utils.KeyCodes;
 const createSerializedKey = ShortcutRegistry.registry.createSerializedKey.bind(
@@ -28,7 +30,7 @@ export class MoveActions {
   private shortcuts: ShortcutRegistry.KeyboardShortcut[] = [
     // Begin and end move.
     {
-      name: 'Start move',
+      name: Msg['START_MOVE'],
       preconditionFn: (workspace) => {
         const startBlock = this.getCurrentBlock(workspace);
         return !!startBlock && this.mover.canMove(workspace, startBlock);
@@ -42,14 +44,14 @@ export class MoveActions {
       keyCodes: [KeyCodes.M],
     },
     {
-      name: 'Finish move',
+      name: Msg['FINISH_MOVE'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) => this.mover.finishMove(workspace),
       keyCodes: [KeyCodes.ENTER, KeyCodes.SPACE],
       allowCollision: true,
     },
     {
-      name: 'Abort move',
+      name: Msg['ABORT_MOVE'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) => this.mover.abortMove(workspace),
       keyCodes: [KeyCodes.ESC],
@@ -58,31 +60,31 @@ export class MoveActions {
 
     // Constrained moves.
     {
-      name: 'Move left, constrained',
+      name: Msg['MOVE_LEFT_CONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveConstrained(workspace, Direction.Left),
       keyCodes: [KeyCodes.LEFT],
       allowCollision: true,
     },
     {
-      name: 'Move right constrained',
+      name: Msg['MOVE_RIGHT_CONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveConstrained(workspace, Direction.Right),
       keyCodes: [KeyCodes.RIGHT],
       allowCollision: true,
     },
     {
-      name: 'Move up, constrained',
+      name: Msg['MOVE_UP_CONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveConstrained(workspace, Direction.Up),
       keyCodes: [KeyCodes.UP],
       allowCollision: true,
     },
     {
-      name: 'Move down constrained',
+      name: Msg['MOVE_DOWN_CONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveConstrained(workspace, Direction.Down),
@@ -92,7 +94,7 @@ export class MoveActions {
 
     // Unconstrained moves.
     {
-      name: 'Move left, unconstrained',
+      name: Msg['MOVE_LEFT_UNCONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveUnconstrained(workspace, Direction.Left),
@@ -102,7 +104,7 @@ export class MoveActions {
       ],
     },
     {
-      name: 'Move right, unconstrained',
+      name: Msg['MOVE_RIGHT_UNCONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveUnconstrained(workspace, Direction.Right),
@@ -112,7 +114,7 @@ export class MoveActions {
       ],
     },
     {
-      name: 'Move up unconstrained',
+      name: Msg['MOVE_UP_UNCONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveUnconstrained(workspace, Direction.Up),
@@ -122,7 +124,7 @@ export class MoveActions {
       ],
     },
     {
-      name: 'Move down, unconstrained',
+      name: Msg['MOVE_DOWN_UNCONSTRAINED'],
       preconditionFn: (workspace) => this.mover.isMoving(workspace),
       callback: (workspace) =>
         this.mover.moveUnconstrained(workspace, Direction.Down),
@@ -135,7 +137,10 @@ export class MoveActions {
 
   menuItems: ContextMenuRegistry.RegistryItem[] = [
     {
-      displayText: 'Move Block (M)',
+      displayText: Msg['MOVE_BLOCK'].replace(
+        '%1',
+        getShortActionShortcut(Msg['START_MOVE']),
+      ),
       preconditionFn: (scope, menuOpenEvent) => {
         const workspace = scope.block?.workspace as WorkspaceSvg | null;
         if (!workspace || menuOpenEvent instanceof PointerEvent)

src/constants.ts

@@ -12,6 +12,8 @@
  * @author [email protected] (Abby Schmiedt)
  */
 
+import {Msg} from 'blockly/core';
+
 /**
  * Keyboard navigation states.
  * The different parts of Blockly that the user navigates between.
@@ -70,29 +72,31 @@ export const SHORTCUT_CATEGORIES: Record<
   // better text because temporarily the name in the table is derived from
   // these id-like names.
   Array<SHORTCUT_NAMES | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'delete'>
-> = {
-  'General': [
-    SHORTCUT_NAMES.MENU,
-    SHORTCUT_NAMES.EDIT_OR_CONFIRM,
-    SHORTCUT_NAMES.EXIT,
-    SHORTCUT_NAMES.TOOLBOX,
-    SHORTCUT_NAMES.CLEAN_UP,
-    SHORTCUT_NAMES.LIST_SHORTCUTS,
-  ],
-  'Editing': [
-    SHORTCUT_NAMES.INSERT,
-    'delete',
-    SHORTCUT_NAMES.DISCONNECT,
-    'cut',
-    'copy',
-    'paste',
-    'undo',
-    'redo',
-  ],
-  'Code navigation': [
-    SHORTCUT_NAMES.UP,
-    SHORTCUT_NAMES.DOWN,
-    SHORTCUT_NAMES.RIGHT,
-    SHORTCUT_NAMES.LEFT,
-  ],
-};
+> = {};
+
+SHORTCUT_CATEGORIES[Msg['SHORTCUTS_GENERAL']] = [
+  SHORTCUT_NAMES.MENU,
+  SHORTCUT_NAMES.EDIT_OR_CONFIRM,
+  SHORTCUT_NAMES.EXIT,
+  SHORTCUT_NAMES.TOOLBOX,
+  SHORTCUT_NAMES.CLEAN_UP,
+  SHORTCUT_NAMES.LIST_SHORTCUTS,
+];
+
+SHORTCUT_CATEGORIES[Msg['SHORTCUTS_EDITING']] = [
+  SHORTCUT_NAMES.INSERT,
+  'delete',
+  SHORTCUT_NAMES.DISCONNECT,
+  'cut',
+  'copy',
+  'paste',
+  'undo',
+  'redo',
+];
+
+SHORTCUT_CATEGORIES[Msg['SHORTCUTS_CODE_NAVIGATION']] = [
+  SHORTCUT_NAMES.UP,
+  SHORTCUT_NAMES.DOWN,
+  SHORTCUT_NAMES.RIGHT,
+  SHORTCUT_NAMES.LEFT,
+];

src/hints.ts

@@ -6,7 +6,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {WorkspaceSvg, Toast} from 'blockly';
+import {Msg, WorkspaceSvg, Toast} from 'blockly';
 import {SHORTCUT_NAMES} from './constants';
 import {getShortActionShortcut} from './shortcut_formatting';
 
@@ -104,7 +104,7 @@ export function clearPasteHints(workspace: WorkspaceSvg) {
  */
 export function showHelpHint(workspace: WorkspaceSvg) {
   const shortcut = getShortActionShortcut('list_shortcuts');
-  const message = `Press ${shortcut} for help on keyboard controls`;
+  const message = Msg['HELP_PROMPT'].replace('%1', shortcut);
   const id = helpHintId;
   Toast.show(workspace, {message, id});
 }

src/navigation_controller.ts

@@ -239,10 +239,10 @@ export class NavigationController {
       ShortcutRegistry.registry.register(shortcut);
     }
     this.deleteAction.install();
-    this.editAction.install();
     this.insertAction.install();
     this.workspaceMovement.install();
     this.arrowNavigation.install();
+    this.editAction.install();
     this.exitAction.install();
     this.enterAction.install();
     this.disconnectAction.install();

src/shortcut_dialog.ts

@@ -6,7 +6,7 @@
 
 import * as Blockly from 'blockly/core';
 import * as Constants from './constants';
-import {ShortcutRegistry} from 'blockly/core';
+import {Msg, ShortcutRegistry} from 'blockly/core';
 import {
   getLongActionShortcutsAsKeys,
   upperCaseFirst,
@@ -39,16 +39,16 @@ export class ShortcutDialog {
   getPlatform() {
     const {platform, userAgent} = navigator;
     if (platform.startsWith('Win')) {
-      return 'Windows';
+      return Msg['WINDOWS'];
     } else if (platform.startsWith('Mac')) {
-      return 'macOS';
+      return Msg['MAC_OS'];
     } else if (/\bCrOS\b/.test(userAgent)) {
       // Order is important because platform matches the Linux case below.
-      return 'ChromeOS';
+      return Msg['CHROME_OS'];
     } else if (platform.includes('Linux')) {
-      return 'Linux';
+      return Msg['LINUX'];
     } else {
-      return 'Unknown';
+      return Msg['UNKNOWN'];
     }
   }