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>

test/HtmlUtils-test.tsx

@@ -0,0 +1,66 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { mocked } from 'jest-mock';
+
+import { topicToHtml } from '../src/HtmlUtils';
+import SettingsStore from '../src/settings/SettingsStore';
+
+jest.mock("../src/settings/SettingsStore");
+
+const enableHtmlTopicFeature = () => {
+    mocked(SettingsStore).getValue.mockImplementation((arg) => {
+        return arg === "feature_html_topic";
+    });
+};
+
+describe('HtmlUtils', () => {
+    it('converts plain text topic to HTML', () => {
+        const component = mount(<div>{ topicToHtml("pizza", null, null, false) }</div>);
+        const wrapper = component.render();
+        expect(wrapper.children().first().html()).toEqual("pizza");
+    });
+
+    it('converts plain text topic with emoji to HTML', () => {
+        const component = mount(<div>{ topicToHtml("pizza 🍕", null, null, false) }</div>);
+        const wrapper = component.render();
+        expect(wrapper.children().first().html()).toEqual("pizza <span class=\"mx_Emoji\" title=\":pizza:\">🍕</span>");
+    });
+
+    it('converts literal HTML topic to HTML', async () => {
+        enableHtmlTopicFeature();
+        const component = mount(<div>{ topicToHtml("<b>pizza</b>", null, null, false) }</div>);
+        const wrapper = component.render();
+        expect(wrapper.children().first().html()).toEqual("&lt;b&gt;pizza&lt;/b&gt;");
+    });
+
+    it('converts true HTML topic to HTML', async () => {
+        enableHtmlTopicFeature();
+        const component = mount(<div>{ topicToHtml("**pizza**", "<b>pizza</b>", null, false) }</div>);
+        const wrapper = component.render();
+        expect(wrapper.children().first().html()).toEqual("<b>pizza</b>");
+    });
+
+    it('converts true HTML topic with emoji to HTML', async () => {
+        enableHtmlTopicFeature();
+        const component = mount(<div>{ topicToHtml("**pizza** 🍕", "<b>pizza</b> 🍕", null, false) }</div>);
+        const wrapper = component.render();
+        expect(wrapper.children().first().html())
+            .toEqual("<b>pizza</b> <span class=\"mx_Emoji\" title=\":pizza:\">🍕</span>");
+    });
+});

test/SlashCommands-test.tsx

@@ -0,0 +1,40 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixClient } from 'matrix-js-sdk/src/matrix';
+
+import { getCommand } from '../src/SlashCommands';
+import { createTestClient } from './test-utils';
+import { MatrixClientPeg } from '../src/MatrixClientPeg';
+
+describe('SlashCommands', () => {
+    let client: MatrixClient;
+
+    beforeEach(() => {
+        client = createTestClient();
+        jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(client);
+    });
+
+    describe('/topic', () => {
+        it('sets topic', async () => {
+            const command = getCommand("/topic pizza");
+            expect(command.cmd).toBeDefined();
+            expect(command.args).toBeDefined();
+            await command.cmd.run("room-id", null, command.args);
+            expect(client.setRoomTopic).toHaveBeenCalledWith("room-id", "pizza", undefined);
+        });
+    });
+});

test/editor/serialize-test.ts

@@ -94,5 +94,12 @@ describe('editor/serialize', function() {
             const html = htmlSerializeIfNeeded(model, { useMarkdown: false });
             expect(html).toBe('\\*hello\\* world < hey world!');
         });
+
+        it('plaintext remains plaintext even when forcing html', function() {
+            const pc = createPartCreator();
+            const model = new EditorModel([pc.plain("hello world")], pc);
+            const html = htmlSerializeIfNeeded(model, { forceHTML: true, useMarkdown: false });
+            expect(html).toBe("hello world");
+        });
     });
 });

test/test-utils/test-utils.ts

@@ -116,6 +116,7 @@ export function createTestClient(): MatrixClient {
         mxcUrlToHttp: (mxc) => `http://this.is.a.url/${mxc.substring(6)}`,
         setAccountData: jest.fn(),
         setRoomAccountData: jest.fn(),
+        setRoomTopic: jest.fn(),
         sendTyping: jest.fn().mockResolvedValue({}),
         sendMessage: () => jest.fn().mockResolvedValue({}),
         sendStateEvent: jest.fn().mockResolvedValue(undefined),

test/useTopic-test.tsx

@@ -42,7 +42,7 @@ describe("useTopic", () => {
 
         function RoomTopic() {
             const topic = useTopic(room);
-            return <p>{ topic }</p>;
+            return <p>{ topic.text }</p>;
         }
 
         const wrapper = mount(<RoomTopic />);