feat: Live preview message composer

[imf-ali]

Proposed changes (including videos or screenshots)

Make the message composer live preview feature instead of just adding markdown tokens that styles/parse the message in the Message List.

Here is my proposal

Steps to test or reproduce

The following markdown preview should be enabled -

• Bold
• Italic
• Strike
• Plain Context
• Line Break
• Paragraph
• Link
• Tasks
• Code line
• Color
• Big Emoji
• Emoji
• Inline Code
• Heading
• Quote
• Blockquote
• Ordered list
• Unordered list

Current Working

screen-capture.online-video-cutter.com.1.mp4

[changeset-bot]

⚠️ No Changeset found

Latest commit: 92edba0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

All committers have signed the CLA.

[imf-ali]

Code line added

Output:

[imf-ali]

Inline code

Output

[tassoevan]

Rocket.Chat uses it's own parser (@rocket.chat/message-parser) instead of Markdown because we do not follow the CommonMark specification. Also, this parser outputs a structure that is not HTML, therefore it's not the format I'd personally pass to Quill to render. Maybe doing a translation between the message parser AST output and Quill's Deltas is the way to go.

[imf-ali]

#31731
Attaching this PR for reference, as came up with new implementation suggested by @tassoevan and @hugocostadev