Configure i18n and add simplified chinese (#99)

src/components/EditorCanvas/Area.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Popover, Input, Toast } from "@douyinfe/semi-ui";
+import { Button, Popover, Input } from "@douyinfe/semi-ui";
 import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
 import {
   Tab,
@@ -17,7 +17,8 @@ import {
   useSaveState,
   useTransform,
 } from "../../hooks";
-import ColorPalette from "../ColorPalette";
+import ColorPalette from "../ColorPicker";
+import { useTranslation } from "react-i18next";
 
 export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
   const [hovered, setHovered] = useState(false);
@@ -191,14 +192,15 @@ function EditPopoverContent({ data }) {
   const { setSaveState } = useSaveState();
   const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
+  const { t } = useTranslation();
 
   return (
     <div className="popover-theme">
-      <div className="font-semibold mb-2 ms-1">Edit subject area</div>
+      <div className="font-semibold mb-2 ms-1">{t("edit")}</div>
       <div className="w-[280px] flex items-center mb-2">
         <Input
           value={data.name}
-          placeholder="Name"
+          placeholder={t("name")}
           className="me-2"
           onChange={(value) => updateArea(data.id, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
@@ -212,7 +214,10 @@ function EditPopoverContent({ data }) {
                 aid: data.id,
                 undo: editField,
                 redo: { name: e.target.value },
-                message: `Edit area name to ${e.target.value}`,
+                message: t("edit_area", {
+                  areaName: e.target.value,
+                  extra: "[name]",
+                }),
               },
             ]);
             setRedoStack([]);
@@ -232,7 +237,10 @@ function EditPopoverContent({ data }) {
                       aid: data.id,
                       undo: { color: data.color },
                       redo: { color: c },
-                      message: `Edit area color to ${c}`,
+                      message: t("edit_area", {
+                        areaName: data.name,
+                        extra: "[color]",
+                      }),
                     },
                   ]);
                   setRedoStack([]);
@@ -263,12 +271,9 @@ function EditPopoverContent({ data }) {
           icon={<IconDeleteStroked />}
           type="danger"
           block
-          onClick={() => {
-            Toast.success(`Area deleted!`);
-            deleteArea(data.id, true);
-          }}
+          onClick={() => deleteArea(data.id, true)}
         >
-          Delete
+          {t("delete")}
         </Button>
       </div>
     </div>

src/components/EditorCanvas/Canvas.jsx

@@ -20,8 +20,11 @@ import {
   useNotes,
   useLayout,
 } from "../../hooks";
+import { useTranslation } from "react-i18next";
+import { diagram } from "../../data/heroDiagram";
 
 export default function Canvas() {
+  const { t } = useTranslation();
   const { tables, updateTable, relationships, addRelationship } = useTables();
   const { areas, updateArea } = useAreas();
   const { notes, updateNote } = useNotes();
@@ -278,7 +281,10 @@ export default function Canvas() {
           toX: info.x,
           toY: info.y,
           id: dragging.id,
-          message: `Move ${info.name} to (${info.x}, ${info.y})`,
+          message: t("move_element", {
+            coords: `(${info.x}, ${info.y})`,
+            name: info.name,
+          }),
         },
       ]);
       setRedoStack([]);
@@ -291,7 +297,10 @@ export default function Canvas() {
           action: Action.PAN,
           undo: { x: panning.x, y: panning.y },
           redo: transform.pan,
-          message: `Move diagram to (${transform.pan?.x}, ${transform.pan?.y})`,
+          message: t("move_element", {
+            coords: `(${transform?.pan.x}, ${transform?.pan.y})`,
+            name: diagram,
+          }),
         },
       ]);
       setRedoStack([]);
@@ -321,7 +330,10 @@ export default function Canvas() {
             height: initCoords.height,
           },
           redo: areas[areaResize.id],
-          message: `Resize area`,
+          message: t("edit_area", {
+            areaName: areas[areaResize.id].name,
+            extra: "[resize]",
+          }),
         },
       ]);
       setRedoStack([]);
@@ -350,7 +362,7 @@ export default function Canvas() {
       tables[linkingLine.startTableId].fields[linkingLine.startFieldId].type !==
       tables[hoveredTable.tableId].fields[hoveredTable.field].type
     ) {
-      Toast.info("Cannot connect");
+      Toast.info(t("connot_connect"));
       return;
     }
     if (

src/components/EditorCanvas/Note.jsx

@@ -6,7 +6,7 @@ import {
   State,
   noteThemes,
 } from "../../data/constants";
-import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
+import { Input, Button, Popover } from "@douyinfe/semi-ui";
 import {
   IconEdit,
   IconDeleteStroked,
@@ -19,6 +19,7 @@ import {
   useNotes,
   useSaveState,
 } from "../../hooks";
+import { useTranslation } from "react-i18next";
 
 export default function Note({ data, onMouseDown }) {
   const w = 180;
@@ -27,6 +28,7 @@ export default function Note({ data, onMouseDown }) {
   const [editField, setEditField] = useState({});
   const [hovered, setHovered] = useState(false);
   const { layout } = useLayout();
+  const { t } = useTranslation();
   const { setSaveState } = useSaveState();
   const { updateNote, deleteNote } = useNotes();
   const { setUndoStack, setRedoStack } = useUndoRedo();
@@ -54,7 +56,10 @@ export default function Note({ data, onMouseDown }) {
         nid: data.id,
         undo: editField,
         redo: { content: e.target.value, height: newHeight },
-        message: `Edit note content to "${e.target.value}"`,
+        message: t("edit_note", {
+          noteTitle: e.target.value,
+          extra: "[content]",
+        }),
       },
     ]);
     setRedoStack([]);
@@ -168,11 +173,11 @@ export default function Note({ data, onMouseDown }) {
                   stopPropagation
                   content={
                     <div className="popover-theme">
-                      <div className="font-semibold mb-2 ms-1">Edit note</div>
+                      <div className="font-semibold mb-2 ms-1">{t("edit")}</div>
                       <div className="w-[280px] flex items-center mb-2">
                         <Input
                           value={data.title}
-                          placeholder="Title"
+                          placeholder={t("title")}
                           className="me-2"
                           onChange={(value) =>
                             updateNote(data.id, { title: value })
@@ -190,7 +195,10 @@ export default function Note({ data, onMouseDown }) {
                                 nid: data.id,
                                 undo: editField,
                                 redo: { title: e.target.value },
-                                message: `Edit note title to "${e.target.value}"`,
+                                message: t("edit_note", {
+                                  noteTitle: e.target.value,
+                                  extra: "[title]",
+                                }),
                               },
                             ]);
                             setRedoStack([]);
@@ -199,7 +207,9 @@ export default function Note({ data, onMouseDown }) {
                         <Popover
                           content={
                             <div className="popover-theme">
-                              <div className="font-medium mb-1">Theme</div>
+                              <div className="font-medium mb-1">
+                                {t("theme")}
+                              </div>
                               <hr />
                               <div className="py-3">
                                 {noteThemes.map((c) => (
@@ -216,7 +226,10 @@ export default function Note({ data, onMouseDown }) {
                                           nid: data.id,
                                           undo: { color: data.color },
                                           redo: { color: c },
-                                          message: `Edit note color to ${c}`,
+                                          message: t("edit_note", {
+                                            noteTitle: data.title,
+                                            extra: "[color]",
+                                          }),
                                         },
                                       ]);
                                       setRedoStack([]);
@@ -249,12 +262,9 @@ export default function Note({ data, onMouseDown }) {
                           icon={<IconDeleteStroked />}
                           type="danger"
                           block
-                          onClick={() => {
-                            Toast.success(`Note deleted!`);
-                            deleteNote(data.id, true);
-                          }}
+                          onClick={() => deleteNote(data.id, true)}
                         >
-                          Delete
+                          {t("delete")}
                         </Button>
                       </div>
                     </div>

src/components/EditorCanvas/Table.jsx

@@ -13,9 +13,10 @@ import {
   IconDeleteStroked,
   IconKeyStroked,
 } from "@douyinfe/semi-icons";
-import { Popover, Tag, Button, Toast, SideSheet } from "@douyinfe/semi-ui";
+import { Popover, Tag, Button, SideSheet } from "@douyinfe/semi-ui";
 import { useLayout, useSettings, useTables, useSelect } from "../../hooks";
 import TableInfo from "../EditorSidePanel/TablesTab/TableInfo";
+import { useTranslation } from "react-i18next";
 
 export default function Table(props) {
   const [hoveredField, setHoveredField] = useState(-1);
@@ -29,6 +30,7 @@ export default function Table(props) {
   const { layout } = useLayout();
   const { deleteTable, deleteField } = useTables();
   const { settings } = useSettings();
+  const { t } = useTranslation();
   const { selectedElement, setSelectedElement } = useSelect();
 
   const height =
@@ -110,9 +112,9 @@ export default function Table(props) {
                   content={
                     <div className="popover-theme">
                       <div className="mb-2">
-                        <strong>Comment :</strong>{" "}
+                        <strong>{t("comment")}:</strong>{" "}
                         {tableData.comment === "" ? (
-                          "No comment"
+                          t("not_set")
                         ) : (
                           <div>{tableData.comment}</div>
                         )}
@@ -123,10 +125,10 @@ export default function Table(props) {
                             tableData.indices.length === 0 ? "" : "block"
                           }`}
                         >
-                          Indices :
+                          {t("indices")}:
                         </strong>{" "}
                         {tableData.indices.length === 0 ? (
-                          "No indices"
+                          t("not_set")
                         ) : (
                           <div>
                             {tableData.indices.map((index, k) => (
@@ -156,12 +158,9 @@ export default function Table(props) {
                         type="danger"
                         block
                         style={{ marginTop: "8px" }}
-                        onClick={() => {
-                          Toast.success(`Table deleted!`);
-                          deleteTable(tableData.id);
-                        }}
+                        onClick={() => deleteTable(tableData.id)}
                       >
-                        Delete table
+                        {t("delete")}
                       </Button>
                     </div>
                   }
@@ -196,37 +195,31 @@ export default function Table(props) {
                     <hr />
                     {e.primary && (
                       <Tag color="blue" className="me-2 my-2">
-                        Primary
+                        {t("primary")}
                       </Tag>
                     )}
                     {e.unique && (
                       <Tag color="amber" className="me-2 my-2">
-                        Unique
+                        {t("unique")}
                       </Tag>
                     )}
                     {e.notNull && (
                       <Tag color="purple" className="me-2 my-2">
-                        Not null
+                        {t("not_null")}
                       </Tag>
                     )}
                     {e.increment && (
                       <Tag color="green" className="me-2 my-2">
-                        Increment
+                        {t("autoincrement")}
                       </Tag>
                     )}
                     <p>
-                      <strong>Default: </strong>
-                      {e.default === "" ? "Not set" : e.default}
+                      <strong>{t("default_value")}: </strong>
+                      {e.default === "" ? t("not_set") : e.default}
                     </p>
                     <p>
-                      <strong>Comment: </strong>
-                      {e.comment === "" ? (
-                        "No comment"
-                      ) : (
-                        <div className="max-w-[260px] break-words">
-                          {e.comment}
-                        </div>
-                      )}
+                      <strong>{t("comment")}: </strong>
+                      {e.comment === "" ? t("not_set") : e.comment}
                     </p>
                   </div>
                 }
@@ -242,7 +235,7 @@ export default function Table(props) {
         </div>
       </foreignObject>
       <SideSheet
-        title="Edit table"
+        title={t("edit")}
         size="small"
         visible={
           selectedElement.element === ObjectType.TABLE &&