Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use i18n

Browse Source
This commit is contained in:
Aakansha Doshi 2023-09-21 18:18:44 +05:30
parent 7c1889efc0
commit 8654958aba
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/MermaidToExcalidraw.tsx
View File

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

7
src/locales/en.json
View File

@ -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." "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"
} }
} }