[HOLD for payment August 4) Fix message Editing and pasting issues.

[parasharrajat]

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

---

ISSUES

1. Editing a message with special characters reveals the html coding instead of the character
   https://expensify.slack.com/archives/C01GTK53T8Q/p1626788118010700

2. Pasting into the compose box on desktop has unexpected formatting behavior when pasted from the Notes.app in macOS
   https://expensify.slack.com/archives/C01GTK53T8Q/p1626721005471400

Action Performed:

1. Edit a message that contains &. it shows &
2. Paste the Text from Note.app to composer.

Expected Result:

Describe what you think should've happened

1. Special Chars encoding should not be visible.
2. pasting the text from Notes.app and similar should not show unexpected formatting.

Actual Result:

Describe what actually happened

1. Editing a message with special char shows encoded char.
2. Pasting the text has extra data & unexpected Formatting.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
Yes.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: latest
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @alexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[parasharrajat]

Proposal

1. We need to escape our message before we show that for editing.
   To fix this we update https://github.com/Expensify/expensify-common/blob/7d8408c5c78792394eee8e079f115b1380221a23/lib/ExpensiMark.js#L301

    htmlToMarkdown(htmlString) {
        let generatedMarkdown = _.unescape(htmlString);
 

2. We should exclude all the tags that are not visible on UI but could be contained in HTML. For now, I can think of style and script.

For this, we need to add a new rule to this.htmlToMarkdownRules in ExpensiMark. We can add any number on tags here. for example, list tags as we don't support them.

  // Used to Exclude tags
            {
                name: 'exclude',
                regex: /<(script|style)(?:"[^"]*"|'[^']*'|[^'">])*>(.*?)<\/\1>(?![^<]*(<\/pre>|<\/code>))/gi,
                replacement: '',
            }

[MelvinBot]

Triggered auto assignment to @Luke9389 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

This issue needs attention. Thanks