feat: implement tag support in I18nApi#translate

Author: florianduros

…components/src/core/i18n/I18nApi.test.ts …omponents/src/core/i18n/I18nApi.test.tsxpackages/shared-components/src/core/i18n/I18nApi.test.ts renamed to packages/shared-components/src/core/i18n/I18nApi.test.tsx packages/shared-components/src/core/i18n/I18nApi.test.ts renamed to 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,19 @@ 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, {}, { world: <strong>World!</strong> })).toStrictEqual(
+            <span>
+                Hello, <strong>World!</strong>
+            </span>,
+        );
+    });
 });

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): string {
+        if (tags) return _t(key, variables, tags) as string;
         return _t(key, variables);
     }