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.
Idea: Utilize the existing
Markupfor live preview within the
Details: Modify the
Markupto 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
Markupsupports live editing seamlessly.
Idea: Separate the preview and editing components.
Details: Use Markup for generating a read-only preview(which it does), and introduce a new
ParagraphBlockwhich 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.