Live Preview Message Composer

Development
1

I was trying to add Live Preview Message Composer feature to the project. After some research and analysis, I have identified two possible approaches to achieve the live preview feature.

Approach 1:

  • Idea: Utilize the existing Markup for live preview within the MessageComposerInput component.

  • Details: Modify the Markup to allow real-time editing and rendering of the message as the user types.

  • Pros: Consistency in codebase, as both preview and editing functionalities are handled within the same component.

  • Cons: Potential challenges in ensuring the Markup supports live editing seamlessly.

Approach 2:

  • Idea: Separate the preview and editing components.

  • Details: Use Markup for generating a read-only preview(which it does), and introduce a new ParagraphBlock which supports editing.

  • Pros: Clear separation of concerns, potentially easier to implement live editing in a dedicated editing component.

  • Cons: May require additional components and synchronization between preview and editing components.

I am reaching out to seek your guidance on which approach might align better with the project’s goals and Rocket.Chat’s code architecture. Additionally, I would appreciate any insights or considerations you may have regarding the technical aspects of either option.

My current understanding about the feature

Message is edited in MessageComposerInput and when enter is pressed, text is parsed using @rocket.chat/message-parser/parse (grammar.pegjs) into tokens. Tokens contains details like type of block and content of block. In RoomBody text is send to MarkUp which parses the text into tokens again and calls appropriate ParagraphBlock for all token.

Thank you for your time and assistance. I look forward to your feedback and further discussions on the project.

Best regards,
Diwakar Gupta

CC: @hugocosta @martin.schoeler1