App Live Markdown Preview

Proposal

https://expensify.slack.com/archives/CC7NECV4L/p1675122898707719

Design Doc: https://docs.google.com/document/d/1rcmXjgwvsM3MtdQnkJlMs6IS-i8SHJd0Vs7B_U0K3UU/edit

Proposal: Implement a Live Markdown Preview feature in NewDot Context: Markdown is a text formatting syntax that we use in NewDot to add rich text formatting to messages. It allows users to add basic formatting such as bold, italic, bullet points, headings, links, etc. to their messages without having to use HTML or other complex formatting tools.

Problem: As NewDot becomes more widely used for group communication, it’s essential to offer ways to effectively format and structure messages to improve productivity and avoid miscommunication similar to how we do resyncs in WN. The problem is that without a visual representation of the final message, it can be difficult for users to confirm that their message is correctly formatted and conveys the intended information. Inconsistent or improperly formatted messages can hinder effective communication and decrease productivity, especially for users who are not familiar with markdown.

Solution: To enhance user experience and improve communication, add a live markdown preview feature in the chat application. This will allow users to preview their message format in real-time and make any necessary adjustments before sending the message, resulting in clearer and more easily understood communications. The live markdown preview feature is already present in Slack, and gives you the assurance that the message you are crafting, will show up exactly like you expect once sent. The implementation will be done in collaboration with Callstack, utilizing the Design Doc process, and will be executed as a concurrent project. The live markdown preview feature is a front-end focused project and will not impact any internal employees or ongoing newsletters.

Tasks

[x] Post Proposal (full Problem/Solution statement) in #expensify-open-source
[x] Wait at least one full business day, and until the post has a majority (2/3) of positive reactions (👍)
[x] Paste Proposal in the space above with a link to the Slack thread
[x] Email [email protected] and paste in the Proposal
[x] Fill out the High-level overview of the problem, Timeline, and Terminology sections of the Design Doc
[x] Email [email protected] (continue the same email chain as before) with the link to your Design Doc
[x] Host a pre-design meeting (example) in #expensify-open-source to discuss any necessary details in public before filling out the High-level of proposed solution section.
[x] Fill out the High-level of proposed solution section
[x] Email [email protected] again with links to the doc and pre-design conversation in Slack
[x] Add the DesignDocReview label to get the High-level of proposed solution section reviewed
[x] Respond to any questions or concerns and bring up blockers in Slack to get a consensus if necessary
[x] Confirm that the doc has the minimum necessary number of reviews before proceeding
[x] Host another pre-design meeting in #expensify-open-source to ask for engineering feedback on the technical solution.
[x] Fill out the Detailed implementation of the solution and related sections.
[x] Re-add the DesignDocReview label to this issue
[ ] Respond to any questions or concerns and bring up blockers in Slack to get consensus if necessary
[ ] Confirm that the doc has the minimum necessary number of reviews before proceeding
[ ] Email [email protected] one last time to let them know the Design Doc is moving into the implementation phase
[ ] Implement the changes
[ ] Send out a follow up email to [email protected] once everything has been implemented and do a Project Wrap-Up retrospective that provides:
- Summary of what we accomplished with this project
- What went well?
- What could we have done better?
- What did we learn?

Feb 06 '23 18:02 thienlnam

Hey @thienlnam 👋 I'd love to take care of this feature 🙂

Feb 08 '23 11:02 matkoson

@matkoson Is currently working on writing out the high level. Additionally, please make sure to work inside the design doc so we can keep track of what else needs to be done

Feb 14 '23 17:02 thienlnam

@matkoson Is currently out sick for the week, will be back on Monday

Feb 17 '23 02:02 thienlnam

@thienlnam, @matkoson Whoops! This issue is 2 days overdue. Let's get this updated quick!

Feb 20 '23 20:02 MelvinBot

@thienlnam, @matkoson Huh... This is 4 days overdue. Who can take care of this?

Feb 22 '23 20:02 MelvinBot

hey @thienlnam, I've updated the 'High-level overview of the problem, Timeline, and Terminology sections' of the Design Doc.

Feb 24 '23 09:02 matkoson

@thienlnam, @matkoson Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

Feb 27 '23 20:02 MelvinBot

@matkoson Has been wrapping up the DD high level, and should be finished with it tomorrow

Feb 28 '23 22:02 thienlnam

@matkoson is working on updating the high level and then working on a high level solution that doesn't require a webview

Mar 06 '23 10:03 thienlnam

@thienlnam I've updated the high level, and should have no-webview solution proposal by tommorrow.

Mar 08 '23 10:03 matkoson

:wave: Hello Generalist Track Team - you have been assigned to review this High Level Design Doc. Please, treat this as a priority. Review this Stack Overflow for some tips on reviewing a design doc. Once you are done, simply press the Add "Reviewed Doc" comment button in the right hand side K2 pannel or follow these instructions.

@sonialiap (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15824
@mlouiser (Expensifier / Graduate) - https://github.com/Expensify/App/issues/15825
@mateocole (Project Manager) - https://github.com/Expensify/App/issues/15826
@zsgreenwald (Project Manager) - https://github.com/Expensify/App/issues/15827
@isabelastisser (Product Manager) - https://github.com/Expensify/App/issues/15828
@conorpendergrast (Product Manager) - https://github.com/Expensify/App/issues/15829
@quinthar (Generalist) - https://github.com/Expensify/App/issues/15830
@shawnborton (Generalist) - https://github.com/Expensify/App/issues/15831
@kortneywynn (Accounting Technical Team) - https://github.com/Expensify/App/issues/15832

Mar 10 '23 12:03 MelvinBot

Just sent out the high level design doc! Waiting on reviews now while @matkoson is working on figuring out the technical details

Mar 10 '23 12:03 thienlnam

@thienlnam , I put the below on hold pending Live Markdown Preview, if you disagree, please comment on the issue below.

https://github.com/Expensify/App/issues/15866

Mar 11 '23 00:03 mallenexpensify

Can you link to the design doc in here? I'm not seeing it. Perhaps update the original comment to make it super obvious?