agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Annotate i18n nodes

Browse Source
This commit is contained in:
Joseph Garrone
2024-07-14 08:11:17 +02:00
parent 3392ab8385
commit 60aaa03202
2 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/account/i18n/useI18n.tsx
View File

@ -13,10 +13,11 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
const { withJsx } = (() => { const { withJsx } = (() => {
const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>(); 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 ( return (
<div <div
style={{ display: "inline-block" }} data-kc-msg={msgKey}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: htmlString __html: htmlString
}} }}
@ -37,8 +38,8 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
const i18n: I18n = { const i18n: I18n = {
...i18n_noJsx, ...i18n_noJsx,
msg: (...args) => renderHtmlString(i18n_noJsx.msgStr(...args)), msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
advancedMsg: (...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(...args)) advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey })
}; };
cache.set(i18n_noJsx, i18n); cache.set(i18n_noJsx, i18n);
@ -49,6 +50,19 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
return { withJsx }; 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); const { getI18n } = createGetI18n(messagesByLanguageTag);
function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } { function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {

22
src/login/i18n/useI18n.tsx
View File

@ -13,10 +13,11 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
const { withJsx } = (() => { const { withJsx } = (() => {
const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>(); 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 ( return (
<div <div
style={{ display: "inline-block" }} data-kc-msg={msgKey}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: htmlString __html: htmlString
}} }}
@ -37,8 +38,8 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
const i18n: I18n = { const i18n: I18n = {
...i18n_noJsx, ...i18n_noJsx,
msg: (...args) => renderHtmlString(i18n_noJsx.msgStr(...args)), msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
advancedMsg: (...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(...args)) advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey })
}; };
cache.set(i18n_noJsx, i18n); cache.set(i18n_noJsx, i18n);
@ -49,6 +50,19 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
return { withJsx }; 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); const { getI18n } = createGetI18n(messagesByLanguageTag);
function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } { function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {