Render output with rehype-react

[eatyourgreens]

Remove dangerouslySetInnerHTML. Render the HTML output with rehype-react.

[eatyourgreens]

This works in PFE. 👍

[goplayoutside3]

For documentation, what was the reason behind adding rehype here?

---

Linking some related comments:
Comment in FEM PR 5253 asking about dangerouslySetInnerHTML: zooniverse/front-end-monorepo#5352 (review)

Comment in FEM PR 5253 explaining that utils.getHTML(markdown) now sanitises the output HTML string with DOMPurify, before it's passed to Rehype in FEM's Markdownz component: zooniverse/front-end-monorepo#5352 (comment)

[eatyourgreens]

For documentation, what was the reason behind adding rehype here?

To replace dangerouslySetInnerHTML with React children here:

markdownz/src/components/markdown.jsx

Lines 52 to 56 in 8bc941b

	return createElement(tag, {
	className: `markdown ${className}`,
	children: parsedHTML,
	ref: (element) => { this.root = element; }
	});

The Markdown component now renders a React component tree, rather than HTML strings.

[eatyourgreens]

I've added an example in #216, showing how you can safely render markdown as JSX.

[goplayoutside3]

Cool, thank you!