From 6da11f375dfb4c057a87ca50ca9acb04e6c60a59 Mon Sep 17 00:00:00 2001
From: Steffen Kolmer <steffen@kolmer.net>
Date: Fri, 27 Aug 2021 21:44:34 +0200
Subject: [PATCH] Allow to use basic html formatting in invite reasons

---
 src/components/views/elements/InviteReason.tsx | 4 +++-
 src/components/views/rooms/RoomPreviewBar.js   | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/InviteReason.tsx b/src/components/views/elements/InviteReason.tsx
index dff5c7d6bd..865a5be747 100644
--- a/src/components/views/elements/InviteReason.tsx
+++ b/src/components/views/elements/InviteReason.tsx
@@ -16,11 +16,13 @@ limitations under the License.
 
 import classNames from "classnames";
 import React from "react";
+import { sanitizedHtmlNode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     reason: string;
+    htmlReason?: string;
 }
 
 interface IState {
@@ -51,7 +53,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         });
 
         return <div className={classes}>
-            <div className="mx_InviteReason_reason">{ this.props.reason }</div>
+            <div className="mx_InviteReason_reason">{ this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason }</div>
             <div className="mx_InviteReason_view"
                 onClick={this.onViewClick}
             >
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index b8a4315e2d..4358a2351f 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -492,9 +492,10 @@ export default class RoomPreviewBar extends React.Component {
                 }
 
                 const myUserId = MatrixClientPeg.get().getUserId();
-                const reason = this.props.room.currentState.getMember(myUserId).events.member.event.content.reason;
-                if (reason) {
-                    reasonElement = <InviteReason reason={reason} />;
+                const memberEventContent = this.props.room.currentState.getMember(myUserId).events.member.event.content;
+
+                if (memberEventContent.reason) {
+                    reasonElement = <InviteReason reason={memberEventContent.reason} htmlReason={memberEventContent["io.element.html_reason"]} />;
                 }
 
                 primaryActionHandler = this.props.onJoinClick;