Merge pull request #265 from Open-STEM/FranksDev

Language support for Blockly

Author: fgrossman

public/CHANGELOG.txt

@@ -1,4 +1,4 @@
-# Version 2.0.23
+# Version 2.0.26
 
 #### XRPCode V2 Beta What’s New
 * Rewritten with modern web tools for more solid and expandable future

src/assets/images/privacy.svg

@@ -3,7 +3,7 @@ import { registerFieldColour } from '@blockly/field-colour';
 import { BlocklyWorkspace, Workspace } from 'react-blockly';
 import BlocklyConfigs from '@components/blockly/xrp_blockly_configs';
 import * as Blockly from 'blockly/core';
-import { setBlocklyLocale } from '@/utils/blockly-locales';
+import { applyBlocklyLocale, refreshBlocklyWorkspace } from '@/utils/blockly-locales';
 import AppMgr, { EventType, LoginStatus, Themes } from '@/managers/appmgr';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -214,8 +214,9 @@ function blocklyToPython(ws: Workspace) {
  * @returns
  */
 function BlocklyEditor({ tabId, tabName }: BlocklyEditorProps) {
-    /** Bumped when the shared toolbox JSON is updated (e.g. after XRP connect). */
+    /** Bumped when the shared toolbox JSON is updated (e.g. after XRP connect or language change). */
     const [toolboxRevision, setToolboxRevision] = useState(0);
+    const [language, setLanguage] = useState(i18n.language);
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [name, setName] = useState<string>(tabName);
     const nameRef = useRef(name);
@@ -259,8 +260,8 @@ function BlocklyEditor({ tabId, tabName }: BlocklyEditorProps) {
 
     // Shallow copy gives react-blockly a new reference so its updateToolbox effect runs.
     const toolboxConfiguration = useMemo(
-        () => ({ ...BlocklyConfigs.ToolboxJson }),
-        [toolboxRevision],
+        () => ({ ...BlocklyConfigs.getLocalizedToolboxJson() }) as typeof BlocklyConfigs.ToolboxJson,
+        [toolboxRevision, language],
     );
 
     useEffect(() => {
@@ -438,17 +439,27 @@ function BlocklyEditor({ tabId, tabName }: BlocklyEditorProps) {
             }
         }
 
-        // Set up language based on stored preference
-        const setupLanguage = () => {
-            const storedLanguage = localStorage.getItem(StorageKeys.LANGUAGE) || 'en';
-            setBlocklyLocale(storedLanguage);
-        };
-        
-        // Call setupLanguage to initialize Blockly locale
-        setupLanguage();
+        applyBlocklyLocale(i18n.language);
 
     }, [saveEditor, tabId, restoreViewportForTab, persistViewport, evaluateEditBlocked]);
 
+    useEffect(() => {
+        const handleLanguageChanged = (lang: string) => {
+            applyBlocklyLocale(lang);
+            setLanguage(lang);
+            setToolboxRevision((prev) => prev + 1);
+            const ws = EditorMgr.getInstance().getEditorSession(tabId)?.workspace;
+            if (ws) {
+                refreshBlocklyWorkspace(ws);
+            }
+        };
+
+        i18n.on('languageChanged', handleLanguageChanged);
+        return () => {
+            i18n.off('languageChanged', handleLanguageChanged);
+        };
+    }, [tabId]);
+
     useEffect(() => {
         evaluateEditBlocked();
     }, [evaluateEditBlocked]);

src/components/blockly.tsx

@@ -1,14 +1,53 @@
 
 import '@components/blockly/xrp_blocks';
-import '@components/blockly/xrp_blocks_python'
+import '@components/blockly/xrp_blocks_python';
+import i18n from '@/utils/i18n';
 
 const InitialJson = {};
 
+export const BlocklyCategoryIds = {
+    INDIVIDUAL_MOTORS: 'individualMotors',
+    DRIVE_TRAIN: 'driveTrain',
+    SERVOS: 'servos',
+    SENSORS: 'sensors',
+    REFLECTANCE: 'reflectance',
+    CONTROL_BOARD: 'controlBoard',
+    GAMEPAD: 'gamepad',
+    THIRD_PARTY: 'thirdParty',
+} as const;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ToolboxCategory = Record<string, any>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function localizeToolboxCategory(category: ToolboxCategory): ToolboxCategory {
+    const localized = { ...category };
+    if (localized.categoryId) {
+        localized.name = i18n.t(`blockly.toolbox.${localized.categoryId}`);
+    }
+    if (Array.isArray(localized.contents)) {
+        localized.contents = localized.contents.map((item: ToolboxCategory) =>
+            item.kind === 'CATEGORY' ? localizeToolboxCategory(item) : item,
+        );
+    }
+    return localized;
+}
+
+export function getLocalizedToolboxJson() {
+    return {
+        ...ToolboxJson,
+        contents: (ToolboxJson.contents as ToolboxCategory[]).map((item) =>
+            item.kind === 'CATEGORY' ? localizeToolboxCategory(item) : item,
+        ),
+    };
+}
+
 const ToolboxJson = {
     kind: "categoryToolbox",
     "contents": [
         {
             "kind": "CATEGORY",
+            "categoryId": "individualMotors",
             "name": "Individual Motors",
             "colour": "#a55b65", // crimson red
             "contents": [
@@ -50,6 +89,7 @@ const ToolboxJson = {
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "driveTrain",
             "name": "DriveTrain",
             "colour": "#a5675b", // rust orange
             "contents": [
@@ -113,6 +153,7 @@ const ToolboxJson = {
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "servos",
             "name": "Servos",
             "colour": "#a55ba5", // purple/pink
             "contents": [
@@ -127,11 +168,13 @@ const ToolboxJson = {
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "sensors",
             "name": "Sensors",
             "colour": "#80a55b", // LIGHT GREEN
             "contents": [
                 {
                 "kind": "CATEGORY",
+                "categoryId": "distance",
                 "name": "Distance",
                 "colour": "#80a55b",
                 "contents": [
@@ -142,6 +185,7 @@ const ToolboxJson = {
                 ]},
                 {
                     "kind": "CATEGORY",
+                    "categoryId": "reflectance",
                     "name": "Reflectance",
                     "colour": "#80a55b",
                     "contents": [
@@ -156,6 +200,7 @@ const ToolboxJson = {
                 ]},
                 {
                     "kind": "CATEGORY",
+                    "categoryId": "gyro",
                     "name": "Gyro",
                     "colour": "#80a55b",
                     "contents": [
@@ -174,6 +219,7 @@ const ToolboxJson = {
                 ]},
                 {
                     "kind": "CATEGORY",
+                    "categoryId": "accelerometer",
                     "name": "Accelerometer",
                     "colour": "#80a55b",
                     "contents": [
@@ -194,6 +240,7 @@ const ToolboxJson = {
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "controlBoard",
             "name": "Control Board",
             "colour": "#5ba580", // cool green
             "contents": [
@@ -217,6 +264,7 @@ const ToolboxJson = {
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "webServer",
             "name": "Web Server",
             "colour": "#5b99a5", // turquoise
             "contents": [
@@ -264,6 +312,7 @@ const ToolboxJson = {
             ]
         },{
             "kind": "CATEGORY",
+            "categoryId": "dashboard",
             "name": "Dashboard",
             "colour": "#0080ff", // bright blue
             "contents": [
@@ -291,6 +340,7 @@ const ToolboxJson = {
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "gamepad",
             "name": "Gamepad",
             "colour": "#ff9248", // turquoise
             "contents": [
@@ -346,6 +396,7 @@ const ToolboxJson = {
                     "type": "logic_ternary"
                 }
             ],
+            "categoryId": "logic",
             "name": "Logic",
             "colour": "#5b80a5" // slate blue
         },
@@ -383,6 +434,7 @@ const ToolboxJson = {
                     "type": "controls_flow_statements"
                 }
             ],
+            "categoryId": "loops",
             "name": "Loops",
             "colour": "#5ba55b" // grass green
         },
@@ -449,6 +501,7 @@ const ToolboxJson = {
                     "type": "math_random_float"
                 }
             ],
+            "categoryId": "math",
             "name": "Math",
             "colour": "#5b67a5" // indigo blue
         },
@@ -520,6 +573,7 @@ const ToolboxJson = {
                     "type": "text_prompt_ext"
                 }
             ],
+            "categoryId": "text",
             "name": "Text",
             "colour": "#5ba58c" // seafoam green
         },
@@ -582,17 +636,20 @@ const ToolboxJson = {
                     "type": "lists_sort"
                 }
             ],
+            "categoryId": "lists",
             "name": "Lists",
             "colour": "#745ba5" // eggplant purple
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "variables",
             "name": "Variables",
             "colour": "#a55b80", // fuschia
             "custom": "VARIABLE"
         },
         {
             "kind": "CATEGORY",
+            "categoryId": "functions",
             "name": "Functions",
             "colour": "#995ba5", // purple
             "custom": "PROCEDURE"
@@ -608,7 +665,9 @@ const ToolboxJson = {
 
 const BlocklyConfigs = {
     InitialJson,
-    ToolboxJson
-}
+    ToolboxJson,
+    getLocalizedToolboxJson,
+    BlocklyCategoryIds,
+};
 
 export default BlocklyConfigs;