Add support for MD / HTML in room topics (#8215)

* Add support for MD / HTML in room topics

Setting MD / HTML supported:
- /topic command
- Room settings overlay
- Space settings overlay

Display of MD / HTML supported:
- /topic command
- Room header
- Space home

Based on extensible events as defined in [MSC1767]

Fixes: vector-im/element-web#5180
Signed-off-by: Johannes Marbach <johannesm@element.io>

[MSC1767]: matrix-org/matrix-spec-proposals#1767

* Fix build error

* Add comment to explain origin of styles

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Empty commit to retrigger build

* Fix import grouping

* Fix useTopic test

* Add tests for HtmlUtils

* Add slash command test

* Add further serialize test

* Fix ternary formatting

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Add blank line

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Properly mock SettingsStore access

* Remove trailing space

* Assert on HTML content and add test for plain text in HTML parameter

* Appease the linter

* Fix JSDoc comment

* Fix toEqual call formatting

* Repurpose test for literal HTML case

* Empty commit to fix CI

Co-authored-by: Travis Ralston <travpc@gmail.com>
Co-authored-by: Travis Ralston <travisr@matrix.org>

src/HtmlUtils.tsx

@@ -323,6 +323,18 @@ const composerSanitizeHtmlParams: IExtendedSanitizeOptions = {
     },
 };
 
+// reduced set of allowed tags to avoid turning topics into Myspace
+const topicSanitizeHtmlParams: IExtendedSanitizeOptions = {
+    ...sanitizeHtmlParams,
+    allowedTags: [
+        'font', // custom to matrix for IRC-style font coloring
+        'del', // for markdown
+        'a', 'sup', 'sub',
+        'b', 'i', 'u', 'strong', 'em', 'strike', 'br', 'div',
+        'span',
+    ],
+};
+
 abstract class BaseHighlighter<T extends React.ReactNode> {
     constructor(public highlightClass: string, public highlightLink: string) {
     }
@@ -606,6 +618,57 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
         </span>;
 }
 
+/**
+ * Turn a room topic into html
+ * @param topic plain text topic
+ * @param htmlTopic optional html topic
+ * @param ref React ref to attach to any React components returned
+ * @param allowExtendedHtml whether to allow extended HTML tags such as headings and lists
+ * @return The HTML-ified node.
+ */
+export function topicToHtml(
+    topic: string,
+    htmlTopic?: string,
+    ref?: React.Ref<HTMLSpanElement>,
+    allowExtendedHtml = false,
+): ReactNode {
+    if (!SettingsStore.getValue("feature_html_topic")) {
+        htmlTopic = null;
+    }
+
+    let isFormattedTopic = !!htmlTopic;
+    let topicHasEmoji = false;
+    let safeTopic = "";
+
+    try {
+        topicHasEmoji = mightContainEmoji(isFormattedTopic ? htmlTopic : topic);
+
+        if (isFormattedTopic) {
+            safeTopic = sanitizeHtml(htmlTopic, allowExtendedHtml ? sanitizeHtmlParams : topicSanitizeHtmlParams);
+            if (topicHasEmoji) {
+                safeTopic = formatEmojis(safeTopic, true).join('');
+            }
+        }
+    } catch {
+        isFormattedTopic = false; // Fall back to plain-text topic
+    }
+
+    let emojiBodyElements: ReturnType<typeof formatEmojis>;
+    if (!isFormattedTopic && topicHasEmoji) {
+        emojiBodyElements = formatEmojis(topic, false);
+    }
+
+    return isFormattedTopic ?
+        <span
+            key="body"
+            ref={ref}
+            dangerouslySetInnerHTML={{ __html: safeTopic }}
+            dir="auto"
+        /> : <span key="body" ref={ref} dir="auto">
+            { emojiBodyElements || topic }
+        </span>;
+}
+
 /**
  * Linkifies the given string. This is a wrapper around 'linkifyjs/string'.
  *