Render Markdown in Terms

src/lib/components/Terms.tsx

@@ -11,6 +11,7 @@ import type { I18n } from "../i18n";
 import memoize from "memoizee";
 import { useConst } from "powerhooks/useConst";
 import { useConstCallback } from "powerhooks/useConstCallback";
+import { Markdown } from "../tools/Markdown";
 
 export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
 
@@ -74,7 +75,7 @@ const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Te
             headerNode={msg("termsTitle")}
             formNode={
                 <>
-                    <div id="kc-terms-text">{evtTermMarkdown.state}</div>
+                    <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
                     <form className="form-actions" action={url.loginAction} method="POST">
                         <input
                             className={cx(

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -426,7 +426,6 @@ export const kcContextMocks: KcContextBase[] = [
         ...kcContextCommonMock,
         "pageId": "update-user-profile.ftl",
         "profile": {
-            "context": "REGISTRATION_PROFILE" as const,
             attributes,
             attributesByName
         }
@@ -435,6 +434,7 @@ export const kcContextMocks: KcContextBase[] = [
         ...kcContextCommonMock,
         "pageId": "idp-review-user-profile.ftl",
         "profile": {
+            context: "IDP_REVIEW",
             attributes,
             attributesByName
         }

src/lib/i18n/index.tsx

@@ -1,10 +1,10 @@
 import "minimal-polyfills/Object.fromEntries";
 //NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
 import React, { useEffect, useState, useRef } from "react";
-import ReactMarkdown from "react-markdown";
 import type baseMessages from "./generated_messages/18.0.1/login/en";
 import { assert } from "tsafe/assert";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { Markdown } from "../tools/Markdown";
 
 export const fallbackLanguageTag = "en";
 
@@ -234,9 +234,9 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
         })();
 
         return doRenderMarkdown ? (
-            <ReactMarkdown allowDangerousHtml renderers={key === "termsText" ? undefined : { "paragraph": "span" }}>
+            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
                 {messageWithArgsInjectedIfAny}
-            </ReactMarkdown>
+            </Markdown>
         ) : (
             messageWithArgsInjectedIfAny
         );

src/lib/tools/Markdown.ts

@@ -0,0 +1,3 @@
+import Markdown from "react-markdown";
+
+export { Markdown };