From 60aaa03202763307a82991c38997d166f8f44d65 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Sun, 14 Jul 2024 08:11:17 +0200
Subject: [PATCH] Annotate i18n nodes

---
 src/account/i18n/useI18n.tsx | 22 ++++++++++++++++++----
 src/login/i18n/useI18n.tsx   | 22 ++++++++++++++++++----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/account/i18n/useI18n.tsx b/src/account/i18n/useI18n.tsx
index 0ce471d8..fb19f1c4 100644
--- a/src/account/i18n/useI18n.tsx
+++ b/src/account/i18n/useI18n.tsx
@@ -13,10 +13,11 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
     const { withJsx } = (() => {
         const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>();
 
-        function renderHtmlString(htmlString: string): JSX.Element {
+        function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element {
+            const { htmlString, msgKey } = params;
             return (
                 <div
-                    style={{ display: "inline-block" }}
+                    data-kc-msg={msgKey}
                     dangerouslySetInnerHTML={{
                         __html: htmlString
                     }}
@@ -37,8 +38,8 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
 
             const i18n: I18n = {
                 ...i18n_noJsx,
-                msg: (...args) => renderHtmlString(i18n_noJsx.msgStr(...args)),
-                advancedMsg: (...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(...args))
+                msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
+                advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey })
             };
 
             cache.set(i18n_noJsx, i18n);
@@ -49,6 +50,19 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
         return { withJsx };
     })();
 
+    add_style: {
+        const attributeName = "data-kc-i18n";
+
+        // Check if already exists in head
+        if (document.querySelector(`style[${attributeName}]`) !== null) {
+            break add_style;
+        }
+
+        const styleElement = document.createElement("style");
+        styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
+        (styleElement.textContent = `[data-kc-msg] { display: inline-block; }`), document.head.prepend(styleElement);
+    }
+
     const { getI18n } = createGetI18n(messagesByLanguageTag);
 
     function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
diff --git a/src/login/i18n/useI18n.tsx b/src/login/i18n/useI18n.tsx
index 0ce471d8..fb19f1c4 100644
--- a/src/login/i18n/useI18n.tsx
+++ b/src/login/i18n/useI18n.tsx
@@ -13,10 +13,11 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
     const { withJsx } = (() => {
         const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>();
 
-        function renderHtmlString(htmlString: string): JSX.Element {
+        function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element {
+            const { htmlString, msgKey } = params;
             return (
                 <div
-                    style={{ display: "inline-block" }}
+                    data-kc-msg={msgKey}
                     dangerouslySetInnerHTML={{
                         __html: htmlString
                     }}
@@ -37,8 +38,8 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
 
             const i18n: I18n = {
                 ...i18n_noJsx,
-                msg: (...args) => renderHtmlString(i18n_noJsx.msgStr(...args)),
-                advancedMsg: (...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(...args))
+                msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
+                advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey })
             };
 
             cache.set(i18n_noJsx, i18n);
@@ -49,6 +50,19 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
         return { withJsx };
     })();
 
+    add_style: {
+        const attributeName = "data-kc-i18n";
+
+        // Check if already exists in head
+        if (document.querySelector(`style[${attributeName}]`) !== null) {
+            break add_style;
+        }
+
+        const styleElement = document.createElement("style");
+        styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
+        (styleElement.textContent = `[data-kc-msg] { display: inline-block; }`), document.head.prepend(styleElement);
+    }
+
     const { getI18n } = createGetI18n(messagesByLanguageTag);
 
     function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {