[$250] mWeb - Compose box- Selected text isn't applied format

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.67-0
Reproducible in staging?: Y
Reproducible in production?: Y
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:**N/A
Email or phone of affected tester (no customers): [email protected]

Action Performed:

1. Open https://staging.new.expensify.com/
2. At compose box of any conversation, type 1 line
3. Select all text, choose Format: Bold and send message
4. Type another line
5. Select all text, choose Format: Italic and send message
6. Type another line
7. Select all text, choose Format: Underline and send message

Expected Result:

Selected texts should apply choosing format

Actual Result:

Selected texts isn't applied choosing format

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

Bug6658637_1731058296145.Qotm2966_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861616540479439769
• Upwork Job ID: 1861616540479439769
• Last Price Increase: 2024-11-27

Issue Owner

Current Issue Owner: @mananjadhav

[melvin-bot]

Triggered auto assignment to @kadiealexander (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/~021861616540479439769

[melvin-bot]

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

[bernhardoj]

Proposal

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

Selected text isn't formatted when selecting format option from the context menu.

What is the root cause of that problem?

When we have an element with contenteditable, the context menu will show the "Format" option. However, the live markdown currently doesn't handle the format command.

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

There are 3 "Format" options, Bold, Italic, and Underline. Currently, we don't have a markdown for Underline. To handle the Bold and Italic format, we need to add new cases for bold and italic format command here.
https://github.com/Expensify/react-native-live-markdown/blob/cec2feae7463398b8d377a231be8671e1698e4a0/src/MarkdownTextInput.web.tsx#L349-L358

case 'formatBold':
  newInputUpdate = parseText(
    divRef.current,
    `${parsedText.slice(0, contentSelection.current.start)}*${parsedText.slice(contentSelection.current.start, contentSelection.current.end)}*${parsedText.slice(contentSelection.current.end)}`,
    processedMarkdownStyle,
    newCursorPosition + 2,
    true
  );
  break
case 'formatItalic':
  newInputUpdate = parseText(
    divRef.current,
    `${parsedText.slice(0, contentSelection.current.start)}_${parsedText.slice(contentSelection.current.start, contentSelection.current.end)}_${parsedText.slice(contentSelection.current.end)}`,
    processedMarkdownStyle,
    newCursorPosition + 2,
    true
  );
  break

The way the format logic work is by "wrapping" the selected text with the markdown (* for bold, _ for italic). The new selection will be added by 2 because we add 2 * or _.

But the Underline format still won't do anything because we don't have a markdown for that, and because the live markdown also handles the styling manually, so the alternative is to disable the "Format" option. We can do that by setting the contenteditable to "plaintext-only"
https://github.com/Expensify/react-native-live-markdown/blob/cec2feae7463398b8d377a231be8671e1698e4a0/src/MarkdownTextInput.web.tsx#L724

contentEditable: disabled ? 'false' : 'plaintext-only',

Based on the doc, "plaintext-only" is available on most browsers except Firefox, but this Format context menu is only available on Safari, so I think it's not a problem.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable#browser_compatibility

[mananjadhav]

Reviewing.

[melvin-bot]

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

[kadiealexander]

Bumped @mananjadhav for review here.

[mananjadhav]

I checked @bernhardoj's proposal. I think we can go ahead with this. But before we finalize I want to understand if we could remove the Underline option from the Format menu? (Atleast on Whatsapp I don't see it), whereas Slack removes the format option for me.

Nevertheless we can use @bernhardoj's proposal as they've mentioned the alternative for removing the Format menu as well.

Tagging @Expensify/design for the input as well.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @blimpich, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

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

[shawnborton]

Oh interesting, I didn't even know you could do this from iOS. I suppose we could make it so that whatever style you picked from the native menu (bold, italic, etc) was applied via our markdown styles, as in we'd prepend and append a * if you picked bold. Is something like that possible?

[dubielzyk-expensify]

That'd be great if that's possible. If not, I wonder if we could hide or turn off that formatting menu altogether.

[bernhardoj]

I suppose we could make it so that whatever style you picked from the native menu (bold, italic, etc) was applied via our markdown styles, as in we'd prepend and append a * if you picked bold. Is something like that possible?

It's possible which is my main solution, however, the Format option includes Underline, but we don't have an underline markdown. I don't see a way to select which format to show, but we can hide entirely with my alternative solution.

[shawnborton]

I think it's fine if we don't have an underline markdown for now, at least we'll get the benefit of bold and italic working.

[dannymcclain]

I'm fine with making just bold and italic work or hiding that format menu item altogether. I also didn't even realize it was there haha.

[bernhardoj]

Thanks for the confirmation. Opened the PR on live markdown repo here: Expensify/react-native-live-markdown#556

Waiting for the review from the live markdown team.

[mananjadhav]

However, this PR only implements Format menu on web. I believe the same feature is missing on native iOS. Are there any plans to implement this missing feature also in native iOS?

@bernhardoj That's a good question raised here. Do we not need it for native?

[bernhardoj]

Replied on the PR

[mananjadhav]

Keeping the conversation here to understand the scope. @bernhardoj I can see Format option in the native iOS Whatsapp. When clicked these are the options I see. This is what I also meant if we could hide just the underline. This translates to markdown btw.

[bernhardoj]

But it's not available on our app, so I'm not sure how we can handle it.

[melvin-bot]

@mananjadhav, @blimpich, @bernhardoj, @kadiealexander, @dubielzyk-expensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@mananjadhav @blimpich @bernhardoj @kadiealexander @dubielzyk-expensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[blimpich]

Issue is assigned, automation didn't work quite right for some reason. Conversation is active in the PR.

[mananjadhav]

The conversation is the in Expensify/react-native-live-markdown repo. May be that's why.

[melvin-bot]

@mananjadhav, @blimpich, @bernhardoj, @kadiealexander, @dubielzyk-expensify Eep! 4 days overdue now. Issues have feelings too...

[blimpich]

Looks like we're waiting on reviews on the PR @bernhardoj @mananjadhav?

[bernhardoj]

Yes, I bumped on the PR

[melvin-bot]

@mananjadhav, @blimpich, @bernhardoj, @kadiealexander, @dubielzyk-expensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[dubielzyk-expensify]

Not overdue

[melvin-bot]

@mananjadhav, @blimpich, @bernhardoj, @kadiealexander, @dubielzyk-expensify 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[blimpich]

Waiting on reviews, bumped the agency reviewers in the PR.

[melvin-bot]

@mananjadhav @blimpich @bernhardoj @kadiealexander @dubielzyk-expensify this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot]

@mananjadhav, @blimpich, @bernhardoj, @kadiealexander, @dubielzyk-expensify 12 days overdue. Walking. Toward. The. Light...

[melvin-bot]

This issue has not been updated in over 14 days. @mananjadhav, @blimpich, @bernhardoj, @kadiealexander, @dubielzyk-expensify eroding to Weekly issue.

[blimpich]

Still waiting on reviews. Holidays are slowing down the review process for this one I think.