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 1/4] 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;

From 70b4308bab3173a3ed3ee0b164c158dbfd0beba6 Mon Sep 17 00:00:00 2001
From: Steffen Kolmer <steffen@kolmer.net>
Date: Fri, 27 Aug 2021 21:59:22 +0200
Subject: [PATCH 2/4] Fix eslint error

---
 src/components/views/rooms/RoomPreviewBar.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index 4358a2351f..c73c066338 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -495,7 +495,10 @@ export default class RoomPreviewBar extends React.Component {
                 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"]} />;
+                    reasonElement = <InviteReason
+                        reason={memberEventContent.reason}
+                        htmlReason={memberEventContent["io.element.html_reason"]}
+                    />;
                 }
 
                 primaryActionHandler = this.props.onJoinClick;

From e661c017e3e5498af5f70119db70d0fa00c57f21 Mon Sep 17 00:00:00 2001
From: Steffen Kolmer <steffen@kolmer.net>
Date: Sat, 28 Aug 2021 13:48:33 +0200
Subject: [PATCH 3/4] Moved custom field name to a const

---
 src/components/views/rooms/RoomPreviewBar.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index c73c066338..f3201d2a3d 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -28,6 +28,8 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import InviteReason from "../elements/InviteReason";
 
+const MemberEventHtmlReasonField = "io.element.html_reason";
+
 const MessageCase = Object.freeze({
     NotLoggedIn: "NotLoggedIn",
     Joining: "Joining",
@@ -497,7 +499,7 @@ export default class RoomPreviewBar extends React.Component {
                 if (memberEventContent.reason) {
                     reasonElement = <InviteReason
                         reason={memberEventContent.reason}
-                        htmlReason={memberEventContent["io.element.html_reason"]}
+                        htmlReason={memberEventContent[MemberEventHtmlReasonField]}
                     />;
                 }
 

From c32a77c3b2c8cff17b54f166b41ac78c46106f39 Mon Sep 17 00:00:00 2001
From: Steffen Kolmer <steffen@kolmer.net>
Date: Wed, 1 Sep 2021 22:40:42 +0200
Subject: [PATCH 4/4] Use helper function to get event content

---
 src/components/views/rooms/RoomPreviewBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index f3201d2a3d..89b493595f 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -494,7 +494,7 @@ export default class RoomPreviewBar extends React.Component {
                 }
 
                 const myUserId = MatrixClientPeg.get().getUserId();
-                const memberEventContent = this.props.room.currentState.getMember(myUserId).events.member.event.content;
+                const memberEventContent = this.props.room.currentState.getMember(myUserId).events.member.getContent();
 
                 if (memberEventContent.reason) {
                     reasonElement = <InviteReason