First combining of Blockly localization along with react localization

Author: alan412

public/locales/en/translation.json

@@ -19,6 +19,8 @@
         "title": "Add Tab",
         "newItemPlaceholder": "Add Module",
         "search": "Search..."
-
-    }    
+    },
+    "BLOCKLY":{
+        "OF_TYPE": "of type"
+    }   
 }

src/App.tsx

@@ -47,6 +47,7 @@ import * as ChangeFramework from './blocks/utils/change_framework'
 import { mutatorOpenListener } from './blocks/mrc_param_container'
 import { TOOLBOX_UPDATE_EVENT } from './blocks/mrc_mechanism_component_holder';
 import { antdThemeFromString } from './reactComponents/ThemeModal';
+import i18n from './i18n/config';
 
 /** Storage key for shown toolbox categories. */
 const SHOWN_TOOLBOX_CATEGORIES_KEY = 'shownPythonToolboxCategories';

src/blocks/mrc_component.ts

@@ -69,7 +69,7 @@ const COMPONENT = {
     this.setStyle(MRC_STYLE_COMPONENTS);
     this.appendDummyInput()
       .appendField(new Blockly.FieldTextInput(''), FIELD_NAME)
-      .appendField('of type')
+      .appendField(Blockly.Msg.OF_TYPE)
       .appendField(createFieldNonEditableText(''), FIELD_TYPE);
     this.setPreviousStatement(true, OUTPUT_NAME);
     this.setNextStatement(true, OUTPUT_NAME);

src/blocks/tokens.ts

@@ -0,0 +1,10 @@
+import * as Blockly from 'blockly/core';
+
+export const customTokens = (t: (key: string) => string): typeof Blockly.Msg => {
+  return {
+    ADD_COMMENT: t('BLOCKLY.ADD_COMMENT'),
+    REMOVE_COMMENT: t('BLOCKLY.REMOVE_COMMENT'),
+    DUPLICATE_COMMENT: t('BLOCKLY.DUPLICATE_COMMENT'),
+    OF_TYPE: t('BLOCKLY.OF_TYPE'),
+  };
+};

src/reactComponents/BlocklyComponent.tsx

@@ -20,11 +20,16 @@
  */
 import * as React from 'react';
 import * as Blockly from 'blockly/core';
-import * as locale from 'blockly/msg/en';
+import * as En from 'blockly/msg/en';
+import * as Es from 'blockly/msg/es';
+import { customTokens } from '../blocks/tokens';
+
 import { themes } from '../themes/mrc_themes';
 import {pluginInfo as HardwareConnectionsPluginInfo} from '../blocks/utils/connection_checker';
 
 import 'blockly/blocks'; // Includes standard blocks like controls_if, logic_compare, etc.
+import { useTranslation } from 'react-i18next';
+
 
 /** Interface for methods exposed by the BlocklyComponent. */
 export interface BlocklyComponentType {
@@ -78,6 +83,10 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
       const blocklyDiv = React.useRef<HTMLDivElement | null>(null);
       const workspaceRef = React.useRef<Blockly.WorkspaceSvg | null>(null);
 
+      const { t, i18n } = useTranslation();
+      // const { t } = useTranslation();
+      
+
       const getBlocklyTheme = (): Blockly.Theme => {
         const blocklyTheme = 'mrc_theme_' + theme.replace(/-/g, '_');
         // Find the theme by key
@@ -133,8 +142,18 @@ const BlocklyComponent = React.forwardRef<BlocklyComponentType | null, BlocklyCo
         }
 
         // Set Blockly locale
-        Blockly.setLocale(locale as any);
-
+        switch (i18n.language) {
+          case 'es':
+            Blockly.setLocale(Es as any);
+            break;
+          case 'en':
+            Blockly.setLocale(En as any);
+            break;
+          default:
+            Blockly.setLocale(En as any);
+            break;
+        }
+        Blockly.setLocale(customTokens(t));
         // Create workspace
         const workspaceConfig = createWorkspaceConfig();
         const workspace = Blockly.inject(blocklyDiv.current, workspaceConfig);