Allow extended HTML when showing topic with slash command

Author: Johennes

res/css/_common.scss

@@ -304,8 +304,70 @@ legend {
     overflow-y: auto;
 }
 
-.mx_Dialog strong {
-    font-weight: $font-semi-bold;
+.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 {

src/HtmlUtils.tsx

@@ -618,9 +618,10 @@ export function bodyToHtml(content: IContent, highlights: string[], opts: IOpts
  * @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>): ReactNode {
+export function topicToHtml(topic: string, htmlTopic?: string, ref?: React.Ref<HTMLSpanElement>, allowExtendedHtml: boolean = false): ReactNode {
     if (!SettingsStore.getValue("feature_html_topic")) {
         htmlTopic = null;
     }
@@ -633,7 +634,7 @@ export function topicToHtml(topic: string, htmlTopic?: string, ref?: React.Ref<H
         topicHasEmoji = mightContainEmoji(isFormattedTopic ? htmlTopic : topic);
 
         if (isFormattedTopic) {
-            safeTopic = sanitizeHtml(htmlTopic, topicSanitizeHtmlParams);
+            safeTopic = sanitizeHtml(htmlTopic, allowExtendedHtml ? sanitizeHtmlParams : topicSanitizeHtmlParams);
             if (topicHasEmoji) {
                 safeTopic = formatEmojis(safeTopic, true).join('');
             }

src/SlashCommands.tsx

@@ -480,12 +480,13 @@ export const Commands = [
                 : { text: _t('This room has no topic.') };
 
             const ref = e => e && linkifyElement(e);
-            const body = topicToHtml(topic.text, topic.html, ref);
+            const body = topicToHtml(topic.text, topic.html, ref, true);
 
             Modal.createTrackedDialog('Slash Commands', 'Topic', InfoDialog, {
                 title: room.name,
                 description: <div ref={ref}>{ body }</div>,
                 hasCloseButton: true,
+                className: "markdown-body",
             });
             return success();
         },