fix: i18n: Apply Trans component to publish library dialogue (#6564)

This commit is contained in:
Contextualist 2023-05-10 16:39:21 +08:00 committed by GitHub
parent d8965ee823
commit e619e06055
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 463 additions and 1305 deletions

View file

@ -1,5 +1,6 @@
import { useCallback, useState } from "react";
import { t } from "../i18n";
import Trans from "./Trans";
import { jotaiScope } from "../jotai";
import { LibraryItem, LibraryItems, UIAppState } from "../types";
import { useApp, useExcalidrawSetAppState } from "./App";
@ -105,16 +106,19 @@ export const LibraryDropdownMenuButton: React.FC<{
small={true}
>
<p>
{t("publishSuccessDialog.content", {
authorName: publishLibSuccess!.authorName,
})}{" "}
<a
href={publishLibSuccess?.url}
target="_blank"
rel="noopener noreferrer"
>
{t("publishSuccessDialog.link")}
</a>
<Trans
i18nKey="publishSuccessDialog.content"
authorName={publishLibSuccess!.authorName}
link={(el) => (
<a
href={publishLibSuccess?.url}
target="_blank"
rel="noopener noreferrer"
>
{el}
</a>
)}
/>
</p>
<ToolButton
type="button"

View file

@ -3,6 +3,7 @@ import OpenColor from "open-color";
import { Dialog } from "./Dialog";
import { t } from "../i18n";
import Trans from "./Trans";
import { LibraryItems, LibraryItem, UIAppState } from "../types";
import { exportToCanvas, exportToSvg } from "../packages/utils";
@ -402,26 +403,32 @@ const PublishLibrary = ({
{shouldRenderForm ? (
<form onSubmit={onSubmit}>
<div className="publish-library-note">
{t("publishDialog.noteDescription.pre")}
<a
href="https://libraries.excalidraw.com"
target="_blank"
rel="noopener noreferrer"
>
{t("publishDialog.noteDescription.link")}
</a>{" "}
{t("publishDialog.noteDescription.post")}
<Trans
i18nKey="publishDialog.noteDescription"
link={(el) => (
<a
href="https://libraries.excalidraw.com"
target="_blank"
rel="noopener noreferrer"
>
{el}
</a>
)}
/>
</div>
<span className="publish-library-note">
{t("publishDialog.noteGuidelines.pre")}
<a
href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
target="_blank"
rel="noopener noreferrer"
>
{t("publishDialog.noteGuidelines.link")}
</a>
{t("publishDialog.noteGuidelines.post")}
<Trans
i18nKey="publishDialog.noteGuidelines"
link={(el) => (
<a
href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
target="_blank"
rel="noopener noreferrer"
>
{el}
</a>
)}
/>
</span>
<div className="publish-library-note">
@ -515,15 +522,18 @@ const PublishLibrary = ({
/>
</label>
<span className="publish-library-note">
{t("publishDialog.noteLicense.pre")}
<a
href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
target="_blank"
rel="noopener noreferrer"
>
{t("publishDialog.noteLicense.link")}
</a>
{t("publishDialog.noteLicense.post")}
<Trans
i18nKey="publishDialog.noteLicense"
link={(el) => (
<a
href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
target="_blank"
rel="noopener noreferrer"
>
{el}
</a>
)}
/>
</span>
</div>
<div className="publish-library__buttons">

View file

@ -1,6 +1,7 @@
import React from "react";
import * as Sentry from "@sentry/browser";
import { t } from "../i18n";
import Trans from "./Trans";
interface TopErrorBoundaryState {
hasError: boolean;
@ -74,25 +75,31 @@ export class TopErrorBoundary extends React.Component<
<div className="ErrorSplash excalidraw">
<div className="ErrorSplash-messageContainer">
<div className="ErrorSplash-paragraph bigger align-center">
{t("errorSplash.headingMain_pre")}
<button onClick={() => window.location.reload()}>
{t("errorSplash.headingMain_button")}
</button>
<Trans
i18nKey="errorSplash.headingMain"
button={(el) => (
<button onClick={() => window.location.reload()}>{el}</button>
)}
/>
</div>
<div className="ErrorSplash-paragraph align-center">
{t("errorSplash.clearCanvasMessage")}
<button
onClick={() => {
try {
localStorage.clear();
window.location.reload();
} catch (error: any) {
console.error(error);
}
}}
>
{t("errorSplash.clearCanvasMessage_button")}
</button>
<Trans
i18nKey="errorSplash.clearCanvasMessage"
button={(el) => (
<button
onClick={() => {
try {
localStorage.clear();
window.location.reload();
} catch (error: any) {
console.error(error);
}
}}
>
{el}
</button>
)}
/>
<br />
<div className="smaller">
<span role="img" aria-label="warning">
@ -106,16 +113,17 @@ export class TopErrorBoundary extends React.Component<
</div>
<div>
<div className="ErrorSplash-paragraph">
{t("errorSplash.trackedToSentry_pre")}
{this.state.sentryEventId}
{t("errorSplash.trackedToSentry_post")}
{t("errorSplash.trackedToSentry", {
eventId: this.state.sentryEventId,
})}
</div>
<div className="ErrorSplash-paragraph">
{t("errorSplash.openIssueMessage_pre")}
<button onClick={() => this.createGithubIssue()}>
{t("errorSplash.openIssueMessage_button")}
</button>
{t("errorSplash.openIssueMessage_post")}
<Trans
i18nKey="errorSplash.openIssueMessage"
button={(el) => (
<button onClick={() => this.createGithubIssue()}>{el}</button>
)}
/>
</div>
<div className="ErrorSplash-paragraph">
<div className="ErrorSplash-details">