From 8cebf049d4d0525b2da98bce5bf4aa34edda0488 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Fri, 9 Sep 2022 17:24:43 +0200
Subject: [PATCH] Render Markdown in Terms

---
 src/lib/components/Terms.tsx                          | 3 ++-
 src/lib/getKcContext/kcContextMocks/kcContextMocks.ts | 2 +-
 src/lib/i18n/index.tsx                                | 6 +++---
 src/lib/tools/Markdown.ts                             | 3 +++
 4 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/tools/Markdown.ts

diff --git a/src/lib/components/Terms.tsx b/src/lib/components/Terms.tsx
index 2d54a8ee..8c3dd523 100644
--- a/src/lib/components/Terms.tsx
+++ b/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(
diff --git a/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts b/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts
index aaedc65c..98db5287 100644
--- a/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts
+++ b/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
         }
diff --git a/src/lib/i18n/index.tsx b/src/lib/i18n/index.tsx
index 289ce92c..8b74c175 100644
--- a/src/lib/i18n/index.tsx
+++ b/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
         );
diff --git a/src/lib/tools/Markdown.ts b/src/lib/tools/Markdown.ts
new file mode 100644
index 00000000..1471542a
--- /dev/null
+++ b/src/lib/tools/Markdown.ts
@@ -0,0 +1,3 @@
+import Markdown from "react-markdown";
+
+export { Markdown };