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>

res/css/_common.scss

@@ -304,6 +304,73 @@ legend {
     overflow-y: auto;
 }
 
+// Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants.
+.mx_Dialog .markdown-body {
+    font-family: inherit !important;
+    white-space: normal !important;
+    line-height: inherit !important;
+    color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
+    font-size: $font-14px;
+
+    pre,
+    code {
+        font-family: $monospace-font-family !important;
+        background-color: $codeblock-background-color;
+    }
+
+    // this selector wrongly applies to code blocks too but we will unset it in the next one
+    code {
+        white-space: pre-wrap; // don't collapse spaces in inline code blocks
+    }
+
+    pre code {
+        white-space: pre; // we want code blocks to be scrollable and not wrap
+
+        >* {
+            display: inline;
+        }
+    }
+
+    pre {
+        // have to use overlay rather than auto otherwise Linux and Windows
+        // Chrome gets very confused about vertical spacing:
+        // https://github.com/vector-im/vector-web/issues/754
+        overflow-x: overlay;
+        overflow-y: visible;
+
+        &::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+    }
+}
+
+.mx_Dialog .markdown-body h1,
+.mx_Dialog .markdown-body h2,
+.mx_Dialog .markdown-body h3,
+.mx_Dialog .markdown-body h4,
+.mx_Dialog .markdown-body h5,
+.mx_Dialog .markdown-body h6 {
+    font-family: inherit !important;
+    color: inherit;
+}
+
+/* Make h1 and h2 the same size as h3. */
+.mx_Dialog .markdown-body h1,
+.mx_Dialog .markdown-body h2 {
+    font-size: 1.5em;
+    border-bottom: none !important; // override GFM
+}
+
+.mx_Dialog .markdown-body a {
+    color: $accent-alt;
+}
+
+.mx_Dialog .markdown-body blockquote {
+    border-left: 2px solid $blockquote-bar-color;
+    border-radius: 2px;
+    padding: 0 10px;
+}
+
 .mx_Dialog_fixedWidth {
     width: 60vw;
     max-width: 704px;

res/css/views/rooms/_RoomHeader.scss

@@ -166,6 +166,12 @@ limitations under the License.
     display: -webkit-box;
 }
 
+.mx_RoomHeader_topic .mx_Emoji {
+    // Undo font size increase to prevent vertical cropping and ensure the same size
+    // as in plain text emojis
+    font-size: inherit;
+}
+
 .mx_RoomHeader_avatar {
     flex: 0;
     margin: 0 6px 0 7px;