Added img attribute caching to ExpensiMark

[mjasikowski]

This PR adds caching for additional attributes to the <img> tags when converted to and back from Markdown.

Due to naming weirdness (current cache fields are named videoAttributeCache and cacheVideoAttributes), new fields were created on the Extras object:

• mediaAttributeCachingFn replacing cacheVideoAttributes
• mediaAttributeCache replacing videoAttributeCache

Replaced fields are marked as deprecated in JS doc and will be removed after this PR is deployed and NewDot is modified so it doesn't use the deprecated fields anymore.

Logic-wise, only the deprecated properties and the new ones won't ever be used simultanously, hence caching function selection is done by detecting the presence of either deprecated or new fields.

https://github.com/Expensify/Web-Expensify/pull/43729 needs to be merged first for App tests to be doable.

Fixed Issues

Expensify/App#42206

Tests

Added tests to ExpensiMark-HTML-test.js and ExpensiMark-Markdown-test.js to test the conversion logic.
Added tests to ExpensiMark-test.js to test caching function selection logic.

QA

After this is deployed, test in NewDot:

• Disable cache in your browser
• Create a message with text and an image attachment
• Send the message
• Edit the text in the message
• Verify the image thumbnail is displayed correctly
• Verify that the image can be clicked on
• Refresh the page in your browser
• Edit the text in the message once again
• Verify the image thumbnail is displayed correctly
• Verify that no errors appear in the JS console

[mountiny]

Thanks for adding the unit tests, that is very reassuring. My main question before approving is to make sure to understand the regex changes

[mountiny]

Can you please "breakdown" the regex changes you made here? I see you have taken out the altRegex, but I can also see some other changes in latter part of the regex

[mjasikowski]

• removed(?:[^><]*alt\s*=\s*(['"])(.*?)\3)? in favor of (.*?) to capture all attributes after src (including alt)
• simplified closing tag matching ([^><]*>* to (.*?)>

and that's pretty much it.

[mountiny]

Asked Rushat for testing on this PR https://expensify.slack.com/archives/C02NK2DQWUX/p1727359643953779

[mountiny]

Thanks! @rushatgabhane have you been able to test it?

[rushatgabhane]

yeah, gimme a moment for checklist

[rushatgabhane]

@mjasikowski im not able to build this. Could you please help me out?

I tried:

1. Pull this branch to expensify-common local repo.
2. Build the branch cd expensify-common && npm run build
3. Go to Expensify/App/
4. Install expensify-common from local directory - npm i expensify-common ../expensify-common --save

I also tried directly installing the branch to Expensify/App using npm i git+https://github.com/Expensify/expensify-common.git#michal-img-attributes

error: Module not found: Error: Can't resolve 'expensify-common' in '/Users/rushatgabhane/code/App/src/pages/workspace/reportFields

[mjasikowski]

@rushatgabhane I had a similar problem and couldn't figure it out (troubles with npm link), so I just built expensify-common and copied over the contents of dist to ./App/node-modules/expensify-common so it's updated in place

[rushatgabhane]

That worked, thank you!

[rushatgabhane]

@mjasikowski so im having a few issues with opening the image. Steps i followed

1. Disable cache
2. Type message in composer and send an image attachment
3. Edit the message
4. Tap the image to open it

Expected: Image loads.
Actual: the image does not load.

I am able to load the image if I don't edit its text. i.e. skip step 3.

Screen.Recording.2024-09-28.at.18.mp4

[mjasikowski]

@rushatgabhane thanks for testing, I'll take another look on Monday - it may be that we need a small API addition.

[mjasikowski]

It seems that the API also strips the tags, so that is fixed with https://github.com/Expensify/Web-Expensify/pull/43729
We're holding with full tests until the above is merged.

[rushatgabhane]

alright, understood

[mjasikowski]

@rushatgabhane the backend PR is now deployed to production, so this is no longer held and ready for testing

[rushatgabhane]

Web

Screen.Recording.2024-10-07.at.07.05.34.mov

Mobile

Screen.Recording.2024-10-07.at.07.26.15.mov

[rushatgabhane]

LGTM

[mountiny]

I will just move this ahead now

[github-actions]

🚀Published to npm in v2.0.97