[HOLD for payment 2025-01-07] [$250] Android - Live mark down is not rendered when Description field is opened after saving it

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.72-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #53367
Email or phone of affected tester (no customers): applausetester+kh16110001@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch ND or hybrid app.
2. Go to FAB > Submit expense > Manual
3. Enter amount > Next
4. Select a recipient
5. Tap Description
6. Enter text with mark down and save
7. Tap Description again

Expected Result:

The description field will show live mark down for the content with mark down

Actual Result:

Live mark down is not rendered when Description field is opened after saving it
The same issue also happens in Private notes, room description and workspace description

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6685420_1733421229321.1733421098511_Screen_Recording_20241206_015121_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021864791346170591685
• Upwork Job ID: 1864791346170591685
• Last Price Increase: 2024-12-12
• Automatic offers:
• ikevin127 | Contributor | 105370678

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Triggered auto assignment to @arosiclair (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[arosiclair]

I reproduced on Android v9.0.72-0. Looks like iOS is unaffected.

[arosiclair]

None of the PRs in the checklist seem to be the issue.

I reproduced in dev with the latest on main, but I also reproduced with the last version, v9.0.71.2 checked out. I'm getting the sense that this never worked as expected. I already updated my staging app from the Play Store so I'm having trouble finding a way to revert it to the last version to confirm.

[arosiclair]

Looks like markdown doesn't render at all in the Description field on v9.0.70-9. This looks like a new feature and not a regression. Removing the blocker label

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021864791346170591685

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[ikevin127]

Edited by proposal-police: This proposal was edited at 2024-12-11 09:47:37 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue

Live markdown is not rendered when Description field is opened after saving it (the same thing happens in Private notes, room description and workspace description fields).

What is the root cause of that problem?

The root of this issue comes from the Android: Native implementation of the applyMarkdownFormatting function call here in the MarkdownTextWatcher.java, specifically the fact that we only call it on afterTextChanged:

@Override
public void afterTextChanged(Editable editable) {
  if (editable instanceof SpannableStringBuilder) {
    mMarkdownUtils.applyMarkdownFormatting((SpannableStringBuilder) editable);
  }
}

the problem with this being evident from the method name -> the live markdown styling is only applied when the after input changes and not when the input is mounted as it happens on iOS: Native for example.

This is also confirmed by the fact that if we change the text or remove a markdown symbol and add it back -> the live markdown will be applied again and show up as expected.

What changes do you think we should make in order to solve the problem?

Note

I don't have a lot of experience with android native code, but I'll give this a shot and hopefully thereact-native-live-markdown maintainers would be kind enough to chime in and correct any technical oversight if we are to move forward with this solution.

What we want here is to apply the live markdown formatting when the input is mounted (regardless of its focus state), to do this we need to apply the following change in the @expensify/react-native-live-markdown repo:

• In MarkdownTextInputDecoratorView.java within the onAttachedToWindow method, add the following logic inside, at the end of the if (previousSibling instanceof ReactEditText) block which will apply the markdown formatting to the input on mount:

// add the imports at the top
import android.text.Editable;
import android.text.SpannableStringBuilder;

// add this inside, at the end of this if block
if (previousSibling instanceof ReactEditText) {
  AssetManager assetManager = getContext().getAssets();
  MarkdownUtils.maybeInitializeRuntime(assetManager);
  mMarkdownUtils = new MarkdownUtils(assetManager);
  mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
  mReactEditText = (ReactEditText) previousSibling;
  mTextWatcher = new MarkdownTextWatcher(mMarkdownUtils);
  mReactEditText.addTextChangedListener(mTextWatcher);
  Editable editable = mReactEditText.getText();     // <- new line
  if (editable instanceof SpannableStringBuilder) {     // <- new line
      mMarkdownUtils.applyMarkdownFormatting((SpannableStringBuilder) editable);     // <- new line
  }     // <- new line
}

The reason we add it there is because at that point the input is mounted and the next logical step would be to apply the markdown formatting. What the new logic does is it extracts the text from the input and applies the markdown formatting.

Or, to make things simpler we can add 1 line instead of the ones above, as suggested in #53645 (comment):

// add this inside, at the end of this if block
if (previousSibling instanceof ReactEditText) {
  AssetManager assetManager = getContext().getAssets();
  MarkdownUtils.maybeInitializeRuntime(assetManager);
  mMarkdownUtils = new MarkdownUtils(assetManager);
  mMarkdownUtils.setMarkdownStyle(mMarkdownStyle);
  mReactEditText = (ReactEditText) previousSibling;
  mTextWatcher = new MarkdownTextWatcher(mMarkdownUtils);
  applyNewStyles();     // <- new line
}

Important

This solution will fix the issue in all inputs where the issue is present, as required by the Expected result.

If there are any other details I missed or some technical oversight, I think that can be further discussed during review.

cc @tomekzaw @BartoszGrajdek for visibility since this is react-native-live-markdown related

Result video

Android: Native

android.mp4

[tomekzaw]

I agree with solution proposed by @ikevin127 in #53645 (comment) but I'd like to understand the issue a bit more since in the live-markdown example app, the Markdown formatting is already applied immediately during first render even without this change.

[ikevin127]

What I'm thinking is that on native, the screen which contains this input remains in the stack (for navigation purposes) and when reopening it and since there was no change, the android native code does not include logic to applyMarkdownFormatting when the screen containing the input is mounted again (revived from the stack).

This is the only explanation that would make sense to me when comparing our case with the live-markdown example app where there's no navigation stack involved as the markdown input is added directly in the App.tsx component.

It's just a hunch though, not entirely sure how to debug this to see why, other than looking at the code and figuring that it's because applyMarkdownFormatting is currently only called in afterTextChanged as mentioned in the proposal.

[melvin-bot]

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

[tomekzaw]

Someone from SWM will also take a look at this to make sure we understand the root cause properly

cc @j-piasecki @Kicu

[ikevin127]

Opened Expensify/react-native-live-markdown#590 PR, tagged @tomekzaw as I'm not sure how review is handled there. Once that PR is merged, will sync up with the team in order to follow up with the version bump PR on E/App.

[ikevin127]

E/App PR #54326 is open and ready for review! 🚀

Note: From react-native-live-markdown version 0.1.209 to 0.1.210 there's only 1 PR and it's the fix mentioned in the comment above, therefore this is a straight-forward bump with only 1 change on the library's side.

@arosiclair I think an Android: Native build on the PR would facilitate testing and help ensure the fix works as expected before we merge the PR.

[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.79-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Bump react-native-live-markdown to 0.1.210 #54326

If no regressions arise, payment will be issued on 2025-01-07. 🎊

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

• @eVoloshchak requires payment through NewDot Manual Requests
• @ikevin127 requires payment automatic offer (Contributor)

[melvin-bot]

@eVoloshchak / @ikevin127 @zanyrenney @eVoloshchak / @ikevin127 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[ikevin127]

cc @zanyrenney for visibility

[zanyrenney]

As per the melvin comment @ikevin127 @eVoloshchak the checklist needs to be completed before payout.

[ikevin127]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/react-native-live-markdown/pull/94/files#r1907922752.

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A.

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

1. Go to FAB > Submit expense > Manual.
2. Enter amount > Next.
3. Select a recipient.
4. Tap Description.
5. Enter text with markdown and save.
6. Tap Description again and verify that the markdown styling is applied when the input page is mounted.

Do we agree 👍 or 👎.

[ikevin127]

@zanyrenney Weird, didn't know that the payment cannot be completed for the Contributor (PR author) unless the C+ checklist is completed (which is usually C+ reviewer's responsability).

will need to be completed before the issue can be closed

As quoted above, #53645 (comment) doesn't mention anything about payment but I guess one can argue that before the issue can be closed equals payments completed 🤷‍♂️

Here's a recent example of issue where I got paid as Contributor (PR author) but the C+ didn't get paid yet because they did not complete their checklist.

Anyway, I completed the checklist myself, thanks for working with us on this! 🙏

[mallenexpensify]

Contributor: @ikevin127 paid $250 via Upwork
Contributor+: @eVoloshchak owed $250 via NewDot

Test case created

• https://github.com/Expensify/Expensify/issues/459106

Reckon we're all done here.

👀 here too on the PR, in case it was missed

Small heads up for the future, please also bump the Podfile.lock when bumping dependencies with native code so in the PRs consuming this one those changes are not necessary 😅

[JmillsExpensify]

$250 approved for @eVoloshchak