[HOLD for payment 2024-10-24] [Live Markdown] Show the inline image in the live preview

[thienlnam]

https://expensify.slack.com/archives/C0671JDRKQW/p1712266105476139?thread_ts=1711736045.870539&cid=C0671JDRKQW

Problem:

While the live markdown preview now successfully avoids exceptions when rendering inline images, it currently does not display these images as expected. Users expect to see a real-time preview of all markdown elements, including images, to ensure their content is formatted correctly before publishing or saving. This lack of functionality in the previewer impacts user confidence in the document's final appearance, leading to a disjointed editing experience.

Solution:

Enhance the live markdown previewer to correctly parse and display inline images within the markdown content. This will involve updating the markdown parsing logic to handle image URLs and embed them appropriately in the preview pane. The update should support a variety of image formats and ensure that image links are not broken during the preview.

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @anmurali (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[thienlnam]

cc @tomekzaw

[melvin-bot]

Triggered auto assignment to @dubielzyk-expensify (Design), see these Stack Overflow questions for more details.

[thienlnam]

We'll need some design input here on how we should show the images in the composer for live markdown

[tomekzaw]

We'd like to implement this feature in Live Markdown.

[dubielzyk-expensify]

Started a discussion here. Think there's a few things to agree on before we move forward with it.

[anmurali]

@tomekzaw looks like we made a decision on that slack thread on how to proceed. Any updates here on progress since then?

[tomekzaw]

I've asked @Skalakid from SWM to prepare a PoC on web, he's working on it.

[thienlnam]

Any update on this one @Skalakid?

[Skalakid]

Hi @thienlnam, I'm still building inline images PoC. I had to take a quick break from that because I needed to fix some other critical bugs. Now, most of them are fixed and I'm fully focused on the inline images feature. I was able to add an image preview from the URL into the Live Markdown Input. When testing I noticed that there are some problems with cursor positioning and with image preview reloading. These problems are blocking us from adding this feature, especially the one with cursor positioning. We will need to make some web parser logic changes to fix them. The parser changes will enable us to add new markdown features quicker and easier and will allow us to use more styling options without introducing critical layout bugs.

[quinthar]

@Skalakid what are the next steps, and your ETA?

[Skalakid]

The current steps are:

1. Change Live Markdown web parser logic
2. Enable using all CSS styles in Live Markdown and prevent adding too many new lines while doing it
3. Implement inline images

More info about ETA in Slack thread

[anmurali]

Update from @Skalakid 3hours ago here

I continued refactoring in Live Markdown for the web. By changing the web parser logic, I could simplify some of the most complex parts of the code and fix most of the new parser edge cases. Also, I started changing the cursor position setting algorithm and planning new markdown styling logic

[Skalakid]

04.09.2024

Hi, the PR is waiting for the internal review. Once we merge it I will prepare the PR to the E/App

[Skalakid]

10.09.2024

Hi, the PR is still being reviewed and we are fixing all blocker bugs and possible regressions. We are trying our best to merge it as soon as possible

[Skalakid]

13.09.2024

Hi, the inline image previews has been finally merged into the library - PR! I will create the PR to the E/App with the bump 😄

[Skalakid]

16.09.2024

Hello, here I created a PR to the E/App that enables inline images preview on web

[hungvu193]

@thienlnam I review #49250, can you please assign me to this issue? TIA.

[Skalakid]

Hello, since the original PR was reverted, I will create another one that will fix reported critical issues

[Skalakid]

Here is a new PR to the E/App that enables inline image preview feature on web

[hungvu193]

Here is a new PR to the E/App that enables inline image preview feature on web

I'll take a look at it today

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.49-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add inline images preview to the Live Markdown Input on the web #50047

If no regressions arise, payment will be issued on 2024-10-24. 🎊

For reference, here are some details about the assignees on this issue:

• @tomekzaw does not require payment (Contractor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@tomekzaw] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@anmurali] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[thienlnam]

We'll also need a C+ paying to @hungvu193 here as well

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @hungvu193 owed $250 via NewDot
• Contributor: @tomekzaw is from an agency-contributor and not due payment

BugZero Checklist (@anmurali)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct