Add i18n support

Author: alan412

package-lock.json

@@ -10,11 +10,14 @@
     "@types/react-dom": "^19.0.2",
     "antd": "^5.22.1",
     "blockly": "^11.1.1",
+    "i18next": "^24.2.2",
+    "i18next-http-backend": "^3.0.2",
     "jszip": "^3.10.1",
     "lucide-react": "^0.460.0",
     "re-resizable": "^6.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.4.1",
     "react-syntax-highlighter": "^15.6.1",
     "web-vitals": "^2.1.4"
   },

package.json

@@ -0,0 +1,6 @@
+{
+    "project_delete": "i18n: Delete Project",
+    "project_rename": "i18n: Rename Project",
+    "project_copy": "i18n: Copy Project"
+}
+ 

public/locales/en/translation.json

@@ -35,6 +35,8 @@ import {
   UploadOutlined,
 } from '@ant-design/icons';
 
+import { useTranslation } from "react-i18next";
+
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
@@ -117,6 +119,8 @@ const App: React.FC = () => {
   const PURPOSE_RENAME_MODULE = 'RenameModule';
   const PURPOSE_COPY_MODULE = 'CopyModule';
 
+  const { t } = useTranslation();
+
   const ignoreEffect = () => {
     if (!import.meta.env.MODE || import.meta.env.MODE === 'development') {
       // Development mode.
@@ -308,9 +312,9 @@ const App: React.FC = () => {
 
     if (module != null) {
       if (module.moduleType == commonStorage.MODULE_TYPE_PROJECT) {
-        setRenameTooltip('Rename Project');
-        setCopyTooltip('Copy Project');
-        setDeleteTooltip('Delete Project');
+        setRenameTooltip(t('project_rename'));
+        setCopyTooltip(t('project_copy'));
+        setDeleteTooltip(t('project_delete'));
       } else if (module.moduleType == commonStorage.MODULE_TYPE_MECHANISM) {
         setRenameTooltip('Rename Mechanism');
         setCopyTooltip('Copy Mechanism');

src/App.tsx

@@ -0,0 +1,41 @@
+// src/i18n/config.ts
+
+// Core i18next library.
+import i18n from "i18next";      
+import HttpApi from "i18next-http-backend";                
+// Bindings for React: allow components to
+// re-render when language changes.
+import { initReactI18next } from "react-i18next";
+
+i18n
+  // Wire up the backend as a plugin.
+  .use(HttpApi)
+  // Add React bindings as a plugin.
+  .use(initReactI18next)
+  // Initialize the i18next instance.
+  .init({
+    // Config options
+
+    // Specifies the default language (locale) used
+    // when a user visits our site for the first time.
+    // We use English here, but feel free to use
+    // whichever locale you want.                   
+    lng: "en",
+
+    // Fallback locale used when a translation is
+    // missing in the active locale. Again, use your
+    // preferred locale here. 
+    fallbackLng: "en",
+
+    // Normally, we want `escapeValue: true` as it
+    // ensures that i18next escapes any code in
+    // translation messages, safeguarding against
+    // XSS (cross-site scripting) attacks. However,
+    // React does this escaping itself, so we turn 
+    // it off in i18next.
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

src/i18n/config.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import "./i18n/config.ts"
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(