Add support for MD / HTML in room topics

[Johennes]

Requires matrix-org/matrix-js-sdk#2272
For element-hq/element-web#21671
MSC: matrix-org/matrix-spec-proposals#3765

Fixes element-hq/element-web#5180

This allows to enter MD / HTML for room topics in the following places:

• /topic command
• Room settings overlay
• Space settings overlay

The HTML rendering is displayed in these places:

• /topic command
• Room header
• Space home

Fixes: element-hq/element-web#5180

Screenshots (after)

Screenshots (before)

---

Here's what your changelog entry will look like:

✨ Features

• Add support for MD / HTML in room topics (#8215). Fixes Handle markdown in topics element-hq/element-web#5180. Contributed by @Johennes.

Preview: https://pr8215--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[codecov]

Codecov Report

Merging #8215 (78f8d38) into develop (3e31fdb) will increase coverage by 0.02%.
The diff coverage is 55.81%.

❗ Current head 78f8d38 differs from pull request most recent head ec16b10. Consider uploading reports for the commit ec16b10 to get more accurate results

@@             Coverage Diff             @@
##           develop    #8215      +/-   ##
===========================================
+ Coverage    30.85%   30.87%   +0.02%     
===========================================
  Files          893      893              
  Lines        50793    50824      +31     
  Branches     12928    12941      +13     
===========================================
+ Hits         15671    15691      +20     
- Misses       35122    35133      +11     

Impacted Files	Coverage Δ
src/SlashCommands.tsx	4.26% <0.00%> (-0.03%)	⬇️
src/components/structures/SpaceRoomView.tsx	4.36% <ø> (ø)
...onents/views/room_settings/RoomProfileSettings.tsx	0.00% <0.00%> (ø)
...omponents/views/spaces/SpaceSettingsGeneralTab.tsx	2.17% <0.00%> (-0.05%)	⬇️
src/settings/Settings.tsx	57.14% <ø> (ø)
src/HtmlUtils.tsx	41.33% <71.42%> (+2.71%)	⬆️
src/components/views/elements/RoomTopic.tsx	78.57% <83.33%> (+5.84%)	⬆️
src/components/views/rooms/RoomHeader.tsx	72.94% <100.00%> (ø)
src/editor/serialize.ts	63.91% <100.00%> (+0.75%)	⬆️

[turt2live]

generally seems fine - just a few points where we might want to consider a different approach.

[turt2live]

overall looks good - just the minor nitpicks here + a comment in the CSS please :)

[Johennes]

All comments addressed. There is an open discussion on the MSC about whether or not m.topic and m.message should be allowed to deviate in future (and if not, that would affect the key in the event content). I'm not sure if that should block this PR though.

[turt2live]

something appears to have gone very wrong with your merge - suggest a reset & rebase before review can really be completed.

[Johennes]

something appears to have gone very wrong with your merge - suggest a reset & rebase before review can really be completed.

Yeah, I screwed up after pulling in the suggested and applied changes from GitHub. The final diff was actually correct, just the history messed up. Unfortunately, there were a myriad of commits inbetween so the only sensible way I found to fix this was to reset and commit the diff as a single commit. Hope that's ok.

[turt2live]

generally still seems fine - just nervous about landing such a change, still.

For the CSS: if we're not copy/pasting the styles from somewhere, please put a comment surrounding the whole block to note that the !important overrides are actually doing a thing.

[turt2live]

also you have CI failures + merge conflicts, sorry. Please do a merge commit if possible to avoid having to have the whole thing re-reviewed :)

[Johennes]

also you have CI failures + merge conflicts, sorry. Please do a merge commit if possible to avoid having to have the whole thing re-reviewed :)

Builds are green except for the e2e tests. I'm not sure if those failures are due to my changes though as the log doesn't seem related at all:

2022-05-09T18:27:50.219Z  * enterprise_erin logs out:
2022-05-09T18:27:50.219Z    * enterprise_erin navigates to user menu ... done
2022-05-09T18:27:50.269Z    * enterprise_erin clicks the 'Sign Out' button ... done
2022-05-09T18:27:50.323Z  * enterprise_erin waits for redirect to config.json (as external page) ... done
failure:  AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:
+ actual - expected

+ '1'
- 'some-new-version'
    at /__w/matrix-react-sdk/matrix-react-sdk/test/end-to-end-tests/lib/src/scenarios/update.js:58:25
    at Generator.next (<anonymous>)
    at fulfilled (/__w/matrix-react-sdk/matrix-react-sdk/test/end-to-end-tests/lib/src/scenarios/update.js:20:58)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  generatedMessage: true,
  code: 'ERR_ASSERTION',
  actual: '1',
  expected: 'some-new-version',
  operator: 'strictEqual'
}

I also don't have rights to re-run builds so I cannot retrigger them.

[turt2live]

almost there - apologies for the delay in the review.

please note a reopened conversation on the previous review as well.

[turt2live]

[Johennes]

Thanks @turt2live! 🙌

And PS: I don't have write access so could you please merge this for me?

[t3chguy]

@Johennes lets hold this off until tomorrow after the RC, we avoid merging large changes right before an RC cut

[Johennes]

Is this safe to merge now?

[turt2live]

I'm going to land this without working cypress tests as I believe the CI is just horribly confused about branches or context or something. Will monitor develop.