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

Remove dependency to react-markdown in the main bundle.

Browse Source
This commit is contained in:
Joseph Garrone 2024-05-27 01:09:49 +02:00
parent 338642094d
commit fbe5a1f477
1 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/login/i18n/i18n.tsx
View File

@ -5,7 +5,6 @@ import fallbackMessages from "./baseMessages/en";
import { getMessages } from "./baseMessages"; import { getMessages } from "./baseMessages";
import { assert } from "tsafe/assert"; import { assert } from "tsafe/assert";
import type { KcContext } from "../kcContext/KcContext"; import type { KcContext } from "../kcContext/KcContext";
import { Markdown } from "keycloakify/tools/Markdown";
export const fallbackLanguageTag = "en"; export const fallbackLanguageTag = "en";
@ -133,8 +132,8 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> { }): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
const { fallbackMessages, messages } = params; const { fallbackMessages, messages } = params;
function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined { function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
const { key, args, doRenderMarkdown } = props; const { key, args, doRenderAsHtml } = props;
const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key]; const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
@ -163,23 +162,29 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
return; return;
} }
messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg); messageWithArgsInjected = messageWithArgsInjected.replace(
new RegExp(`\\{${i + startIndex}\\}`, "g"),
arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
);
}); });
return messageWithArgsInjected; return messageWithArgsInjected;
})(); })();
return doRenderMarkdown ? ( return doRenderAsHtml ? (
<Markdown allowDangerousHtml renderers={{ paragraph: "span" }}> <span
{messageWithArgsInjectedIfAny} // NOTE: The message is trusted. The arguments are not but are escaped.
</Markdown> dangerouslySetInnerHTML={{
__html: messageWithArgsInjectedIfAny
}}
/>
) : ( ) : (
messageWithArgsInjectedIfAny messageWithArgsInjectedIfAny
); );
} }
function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string { function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
const { key, args, doRenderMarkdown } = props; const { key, args, doRenderAsHtml } = props;
const match = key.match(/^\$\{([^{]+)\}$/); const match = key.match(/^\$\{([^{]+)\}$/);
@ -188,26 +193,26 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
const out = resolveMsg({ const out = resolveMsg({
key: keyUnwrappedFromCurlyBraces, key: keyUnwrappedFromCurlyBraces,
args, args,
doRenderMarkdown doRenderAsHtml
}); });
return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any; return (out !== undefined ? out : doRenderAsHtml ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
} }
return { return {
msgStr: (key, ...args) => resolveMsg({ key, args, doRenderMarkdown: false }) as string, msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
msg: (key, ...args) => resolveMsg({ key, args, doRenderMarkdown: true }) as JSX.Element, msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
advancedMsg: (key, ...args) => advancedMsg: (key, ...args) =>
resolveMsgAdvanced({ resolveMsgAdvanced({
key, key,
args, args,
doRenderMarkdown: true doRenderAsHtml: true
}) as JSX.Element, }) as JSX.Element,
advancedMsgStr: (key, ...args) => advancedMsgStr: (key, ...args) =>
resolveMsgAdvanced({ resolveMsgAdvanced({
key, key,
args, args,
doRenderMarkdown: false doRenderAsHtml: false
}) as string }) as string
}; };
} }