use i18n

src/components/MermaidToExcalidraw.tsx

@@ -17,6 +17,8 @@ import "./MermaidToExcalidraw.scss";
 
 import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
 import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
+import { t } from "../i18n";
+import Trans from "./Trans";
 
 const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
 const MERMAID_EXAMPLE =
@@ -197,17 +199,18 @@ const MermaidToExcalidraw = ({
       title={
         <>
           <p style={{ marginBottom: "5px", marginTop: "2px" }}>
-            Mermaid to Excalidraw
+            {t("mermaid.title")}
           </p>
           <span
             style={{ fontSize: "15px", fontStyle: "italic", fontWeight: 500 }}
           >
-            Currently only{" "}
-            <a href="https://mermaid.js.org/syntax/flowchart.html">
-              flowcharts
-            </a>{" "}
-            are supported. The other types will be rendered as image in
-            Excalidraw. <br />
+            <Trans
+              i18nKey="mermaid.description"
+              flowchartLink={(el) => (
+                <a href="https://mermaid.js.org/syntax/flowchart.html">{el}</a>
+              )}
+            />
+            <br />
           </span>
         </>
       }
@@ -217,7 +220,7 @@ const MermaidToExcalidraw = ({
           className="mermaid-to-excalidraw-wrapper-text"
           style={{ display: "flex", flexDirection: "column" }}
         >
-          <label>Mermaid Syntax</label>
+          <label>{t("mermaid.syntax")}</label>
 
           <textarea
             style={{
@@ -234,7 +237,7 @@ const MermaidToExcalidraw = ({
           className="mermaid-to-excalidraw-wrapper-preview"
           style={{ display: "flex", flexDirection: "column" }}
         >
-          <label>Preview</label>
+          <label>{t("mermaid.preview")}</label>
           <div className="mermaid-to-excalidraw-wrapper-preview-canvas">
             {error && <ErrorComp error={error} />}
             {loading && <Spinner size="2rem" />}
@@ -244,7 +247,7 @@ const MermaidToExcalidraw = ({
             className="mermaid-to-excalidraw-wrapper-preview-insert"
             onSelect={onSelect}
           >
-            Insert{" "}
+            {t("mermaid.button")}
             <span style={{ paddingLeft: "8px", display: "flex" }}>
               {ArrowRightIcon}
             </span>

src/locales/en.json

@@ -496,5 +496,12 @@
         "description": "Loading external drawing will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first by using one of the options below."
       }
     }
+  },
+  "mermaid": {
+    "title": "Mermaid to Excalidraw",
+    "button": "Insert",
+    "description": "Currently only <flowchartLink>flowcharts</flowchartLink> are supported. The other types will be rendered as image in Excalidraw.",
+    "syntax": "Mermaid Syntax",
+    "preview": "Preview"
   }
 }