Advanced markdown editor for sending messages

[447011]

Replace the current input message box with react-md-editor.

Use this package:
https://github.com/uiwjs/react-md-editor

This is how you set it up for next.js:
https://github.com/uiwjs/react-md-editor#support-nextjs

What does success look like?

Functionality:

• Bold
• Italic (we might remove that)
• Strikethrough (we might remove that)
• Link
• Quote
• Code (we might remove that)
• Codeblock
• Ordered list (we might remove that)
• Unordered list (we might remove that)
• Write mode
• Split screen mode (we might remove that)
• Preview mode
• Full screen mode (we might remove that)

Additonal notes

Mobile

Make sure everything works great on mobile.

There should be minimal custom code outside of the provided props from the editor

Try to use the default props and functionality from the component.

https://uiwjs.github.io/react-md-editor/#props

Security

We'll need to sanitize the content.

https://uiwjs.github.io/react-md-editor/#security

Display messages

We'll also need to display the messages correctly. Probably we'll add custom CSS inside of the message component:

<style>
h1 { @apply text-2xl }
strong { @apply text-bold }
...
</style>