feat(coral): Topic documentation - show empty state and preview

[programmiri]

About this change - What it does

• adds an empty state for documentation ("add documentation" is not implemented, later PR)
• adds a preview for existing documentation ("update documentation" is not implemented, later PR)

Technical background

Approach general:
Since the angular app still uses html to show docs and our users may have saved documentation as html, we decided to go continue with the approach to save the documentation as stringyfied html (at least for now). We still will offer a markdown editor to users. The formatting between html and markdown will happen in frontend (remarkjs together with rehype offers good solutions for that). This provides a more safe input option for us and keeps the door open to change everything to markdown at some point.

• remarkjs also offeres a library, hook-based, as a "more modern solution" (react-remark) which I initially thought of using, because it would make the editing part easy. But this library is not as well supported. It's based on an older version of remarkjs, which means plugin in the newest version don't work. This should have been updated in the next major release, but this information is from May 2022. There seems to be no activity towards that since then.

Styles

We need to add some overrides for styles. For the html elements in documentation the global styles from DS are applied, which means that there are styles on elements that are reseted to be styled with classes etc (which the html in documentation does not have).

After sync with Mustafa I added styles for basic typography elements (where needed). This should cover most cases for user already, if not all. We can update that if needed.

Recording

recording-documentation.mov

Relates to #1298

[mathieu-anderson]

LGTM to me except for my bugbear, but I think we should have comments and/or documentation somewhere about the reponsabilities of react-markdown and the rehype-raw plugins, so the flow of html -> string -> markdown -> string -> html is crystal clear :o

Thank you ^^

[programmiri]

, but I think we should have comments and/or documentation somewhere about the reponsabilities of react-markdown and the rehype-raw plugins, so the flow of html -> string -> markdown -> string -> html is crystal clear

Yes! I would add that in the next PR though, where I add the "add/edit" functionality, because I'm not 1000% sure now how the process will look like in detail (like, which plugins etc) in the end.

[mathieu-anderson]

Yes, the documentation should probably be written last ^^