[$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 contributors@expensify.com 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): moxtrix+05052023@gmail.com

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: @NicMendonca

[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!