Live Markdown Preview

[thienlnam]

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

• Post Proposal (full Problem/Solution statement) in #expensify-open-source
• Wait at least one full business day, and until the post has a majority (2/3) of positive reactions (👍)
• Paste Proposal in the space above with a link to the Slack thread
• Email [email protected] and paste in the Proposal
• Fill out the High-level overview of the problem, Timeline, and Terminology sections of the Design Doc
• Email [email protected] (continue the same email chain as before) with the link to your Design Doc
• 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.
• Fill out the High-level of proposed solution section
• Email [email protected] again with links to the doc and pre-design conversation in Slack
• Add the DesignDocReview label to get the High-level of proposed solution section reviewed
• Respond to any questions or concerns and bring up blockers in Slack to get a consensus if necessary
• Confirm that the doc has the minimum necessary number of reviews before proceeding
• Host another pre-design meeting in #expensify-open-source to ask for engineering feedback on the technical solution.
• Fill out the Detailed implementation of the solution and related sections.
• 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?

[matkoson]

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

[thienlnam]

@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

[thienlnam]

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

[MelvinBot]

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

[MelvinBot]

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

[matkoson]

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

[MelvinBot]

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

[thienlnam]

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

[thienlnam]

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

[matkoson]

Hey 👋 I've updated the POC here https://github.com/Expensify/App/compare/main...matkoson:feat/live-markdown-preview-poc?expand=1. OSS post explaining the new approach coming later today.

[thienlnam]

Could you please open a draft PR so it's easier for us to review the changes?

[matkoson]

@thienlnam on it from yesterday, will post the link here once it's OK for review(aiming for today)

[matkoson]

Sorry for the wait. The ETA is a few hours at most. I will keep you updated and provide the PR link in this conversation. @thienlnam

[thienlnam]

Could you let us know what blockers you have running into? The last ETA we received was for 5 days ago from #14872 (comment)

Additionally - it would be great to get the slack post here so we can point people towards the new solution

[matkoson]

👋 POC code for the Aztec proposal can be found here 👉- #22464

[TomaszFrackowiak]

Thread about the Aztec solution - here

[thienlnam]

Left some comment in the PR but @matkoson is working on making the prototype build on iOS

As for the thread about the Aztec solution - seems like we have general agreement so looking good to move forward here

[matkoson]

@thienlnam I've made significant progress on solving native bindings issues - I expect major POC update to be released today, for all platforms. EDIT: had some additional problems with crashes when formatting text on multiline composer, new ETA is -1 day.

[matkoson]

Hey @thienlnam - finishing last changes to the POC code and adding the final documentation. Once that is done, I will push the changes and notify you immediately.

[matkoson]

@thienlnam Hey 👋, wrapping up the update! 🤞

[thienlnam]

@matkoson Did something happen with the update? Noticed the POC still is broken, and has many conflicts

[matkoson]

@thienlnam I've had an issue with Composer crashing on the first render, which was caused by Aztec not updating the React ref, for some reason. When I dug into its codebase, I found out that the focus callback triggered by Aztec-based focus events was leading to a focus loops, and it seems to have been a root cause as the loop prevented the setting of the React ref for TextStateInput component, which Aztec uses for text input state management. I found a fix in the main gutenberg editor repo, which wasn't included in my Aztec version, so at least this crashed is gone 🎉. Now, I still need to solve all those conflicts, as there're a few, as you correctly pointed out ☹️

[matkoson]

Hey, @thienlnam, 👋 I’m almost done with the conflicts, but I’ll be able to finish on August 16th. I’m out of the office today, and tomorrow is a bank holiday in Poland 😕

[thienlnam]

Sounds good, will await an update then!

[thienlnam]

Mat has been on sick leave, still awaiting the PR to resolve merge conflicts

[thienlnam]

Same, discussing options internally

[thienlnam]

We're taking a different direction with this so I'm closing out this old issue and creating a new one here: #27977

Thread for context: https://expensify.slack.com/archives/C01SKUP7QR0/p1693954407135859