Allow to use basic html formatting in invite reasons

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}
             >

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;