Add Markdown support for user messages

[Mounayer]

Describe your feature request

In pr #1562 , a WSIWYG editor has been added to the text input area, however, when a text is sent, it is displayed in unrendered markdown. The idea is to use marked to conditionally render certain elements in the user's sent message into markdown, and leave others untouched.

The WSIWYG editor currently converts the following into markdown:

• bold
• italic
• code blocks
• code spans

The sent user messages should display those specific elements converted into markdown, and leave the rest untouched and unconverted, such as headings.

Screenshots

An example of how a user message is currently displayed:

Implementation idea

The idea is to create a custom renderer which might be done using marked to be used when the message sender is the user.

The renderer allows certain modifications, such as explicitly specifying what it should and should not convert, something like:

	const renderer = new marked.Renderer();

	renderer.list = (body, _ordered) => {
		return body;
	};
	renderer.heading = (text: string, _level: number) => {
		return text;
	};
	// continue to disable unwanted features

	// enable what we need
	renderer.code = (code: string) => `<pre><code>${code}</code></pre>`;
	renderer.codespan = (text: string) => `<code>${text}</code>`;
	renderer.strong = (text: string) => `<strong>${text}</strong>`;
	renderer.em = (text: string) => `<em>${text}</em>`;

However any other implementation ideas are welcome!

[Mounayer]

@nsarrazin I'd love to take this if that's alright! I can combine this issue with my already existing PR too if you'd prefer, unless you have some other ideas :)

[Mounayer]

I just noticed that the MarkdownRenderer component, renders all markdown, do I use this, or should I make it selective for messages that are from the user? Additionally, I noticed an issue.. a function exists to escape HTML -- using it makes the HTML interpreted as a string. And as far as I can see there's no use for it, because we use DOMPurify too.

Here is how it currently is on the live version and main:

Here is how it is after removing the function call to escape html:

I think I should use the same MarkdownRenderer component to accomplish my task, let me know if you have any ideas!