diff --git a/packages/shared-components/src/core/i18n/I18nApi.test.ts b/packages/shared-components/src/core/i18n/I18nApi.test.tsx similarity index 54% rename from packages/shared-components/src/core/i18n/I18nApi.test.ts rename to packages/shared-components/src/core/i18n/I18nApi.test.tsx index a9fd287c4f..75f4ae6d8a 100644 --- a/packages/shared-components/src/core/i18n/I18nApi.test.ts +++ b/packages/shared-components/src/core/i18n/I18nApi.test.tsx @@ -6,6 +6,7 @@ */ import { describe, it, expect } from "vitest"; +import React from "react"; import { I18nApi } from "./I18nApi"; @@ -20,4 +21,21 @@ describe("I18nApi", () => { expect(i18n.translate("hello.world" as TranslationKey)).toBe("Hello, World!"); }); + + it("can register a translation and use it with tags", () => { + const i18n = new I18nApi(); + i18n.register({ + ["hello.world" as TranslationKey]: { + en: "Hello, World!", + }, + }); + + expect( + i18n.translate("hello.world" as TranslationKey, {}, { Bold: (sub) => {sub} }), + ).toStrictEqual( + + Hello, World! + , + ); + }); }); diff --git a/packages/shared-components/src/core/i18n/I18nApi.ts b/packages/shared-components/src/core/i18n/I18nApi.ts index c15d1c3204..66ed14dbec 100644 --- a/packages/shared-components/src/core/i18n/I18nApi.ts +++ b/packages/shared-components/src/core/i18n/I18nApi.ts @@ -5,7 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -import { type I18nApi as II18nApi, type Variables, type Translations } from "@element-hq/element-web-module-api"; +import { + type I18nApi as II18nApi, + type Variables, + type Translations, + type Tags, +} from "@element-hq/element-web-module-api"; import { humanizeTime } from "../utils/humanize"; import { _t, getLocale, registerTranslations } from "./i18n"; @@ -41,8 +46,12 @@ export class I18nApi implements II18nApi { * Perform a translation, with optional variables * @param key - The key to translate * @param variables - Optional variables to interpolate into the translation + * @param tags - Optional tags to interpolate into the translation */ - public translate(this: void, key: TranslationKey, variables?: Variables): string { + public translate(this: void, key: TranslationKey, variables?: Variables): string; + public translate(this: void, key: TranslationKey, variables: Variables | undefined, tags: Tags): React.ReactNode; + public translate(this: void, key: TranslationKey, variables?: Variables, tags?: Tags): React.ReactNode | string { + if (tags) return _t(key, variables, tags); return _t(key, variables); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7feb5f30f4..220a6247e4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,8 +7,8 @@ settings: catalogs: default: '@element-hq/element-web-module-api': - specifier: 1.12.0 - version: 1.12.0 + specifier: 1.13.0 + version: 1.13.0 '@element-hq/element-web-playwright-common': specifier: 2.4.0 version: 2.4.0 @@ -140,7 +140,7 @@ importers: version: 0.6.0 '@element-hq/element-web-playwright-common': specifier: 'catalog:' - version: 2.4.0(@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1) + version: 2.4.0(@element-hq/element-web-module-api@1.13.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1) '@nx-tools/nx-container': specifier: ^7.2.1 version: 7.2.1(@nx/devkit@22.5.3(nx@22.5.4))(@nx/js@22.5.3(@babel/traverse@7.29.0)(nx@22.5.4))(dotenv@17.4.0)(nx@22.5.4)(tslib@2.8.1) @@ -336,7 +336,7 @@ importers: version: 7.28.6 '@element-hq/element-web-module-api': specifier: 'catalog:' - version: 1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4) + version: 1.13.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4) '@element-hq/web-shared-components': specifier: workspace:* version: link:../../packages/shared-components @@ -465,7 +465,7 @@ importers: version: 1.0.3 matrix-js-sdk: specifier: github:matrix-org/matrix-js-sdk#develop - version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b + version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/f17f013f1e0d68622e9dd2f863689b7cd0ae09d1 matrix-widget-api: specifier: ^1.17.0 version: 1.17.0 @@ -598,7 +598,7 @@ importers: version: 0.18.0 '@element-hq/element-web-playwright-common': specifier: 'catalog:' - version: 2.4.0(@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1) + version: 2.4.0(@element-hq/element-web-module-api@1.13.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1) '@element-hq/element-web-playwright-common-local': specifier: workspace:* version: link:../../packages/playwright-common @@ -937,7 +937,7 @@ importers: dependencies: '@element-hq/element-web-module-api': specifier: 'catalog:' - version: 1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4) + version: 1.13.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4) '@matrix-org/spec': specifier: ^1.7.0 version: 1.16.0 @@ -2395,8 +2395,8 @@ packages: '@element-hq/element-call-embedded@0.18.0': resolution: {integrity: sha512-Fg2VlORZWkQ9t9OJTcWFXCwVzlHVLtkaiCF0qFTCOZSYYHlA3kXDRM8TagjLkIoOVR6y+9xZldbwejgKYUS9xw==} - '@element-hq/element-web-module-api@1.12.0': - resolution: {integrity: sha512-fLhHFiL1UbRjolpgera3osHHxhSzfnDGTRhaDEv1UsrHRHwMu3hb/IcyXNqGhLXkJiuX8XoOH0aetaAUqQ0YQA==} + '@element-hq/element-web-module-api@1.13.0': + resolution: {integrity: sha512-3QXejLpXHK52e/BM61zeFQt1pnmKEfhFsooKI3OOXa5M9io683q1eA986TquZTDHoorm0Q+4TyxjYD3j2Nkp8A==} engines: {node: '>=20.0.0'} peerDependencies: '@matrix-org/react-sdk-module-api': '*' @@ -9845,8 +9845,8 @@ packages: matrix-events-sdk@0.0.1: resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==} - matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b: - resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b} + matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/f17f013f1e0d68622e9dd2f863689b7cd0ae09d1: + resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/f17f013f1e0d68622e9dd2f863689b7cd0ae09d1} version: 41.3.0 engines: {node: '>=22.0.0'} @@ -14907,7 +14907,7 @@ snapshots: '@element-hq/element-call-embedded@0.18.0': {} - '@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4)': + '@element-hq/element-web-module-api@1.13.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4)': dependencies: '@types/react': 19.2.10 '@types/react-dom': 19.2.3(@types/react@19.2.10) @@ -14916,10 +14916,10 @@ snapshots: '@matrix-org/react-sdk-module-api': 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4) matrix-web-i18n: 3.6.0 - '@element-hq/element-web-playwright-common@2.4.0(@element-hq/element-web-module-api@1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1)': + '@element-hq/element-web-playwright-common@2.4.0(@element-hq/element-web-module-api@1.13.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4))(@playwright/test@1.59.1)(playwright-core@1.59.1)': dependencies: '@axe-core/playwright': 4.11.1(playwright-core@1.59.1) - '@element-hq/element-web-module-api': 1.12.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4) + '@element-hq/element-web-module-api': 1.13.0(@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.4))(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(matrix-web-i18n@3.6.0)(react@19.2.4) '@playwright/test': 1.59.1 '@testcontainers/postgresql': 11.11.0 glob: 13.0.6 @@ -23464,7 +23464,7 @@ snapshots: matrix-events-sdk@0.0.1: {} - matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6371e4b25206dcd459d19375f5d046993ce11b1b: + matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/f17f013f1e0d68622e9dd2f863689b7cd0ae09d1: dependencies: '@babel/runtime': 7.28.6 '@matrix-org/matrix-sdk-crypto-wasm': 18.0.0 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 7251cf86ce..44f4f651b6 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -17,7 +17,7 @@ catalog: "@playwright/test": 1.59.1 "playwright-core": 1.59.1 # Module API - "@element-hq/element-web-module-api": 1.12.0 + "@element-hq/element-web-module-api": 1.13.0 # Compound "@vector-im/compound-design-tokens": 8.0.0 "@vector-im/compound-web": 8.4.0