Added img attribute caching to ExpensiMark #808

mjasikowski · 2024-09-26T13:10:36Z

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:

…ttributes & videoAttributeCache

…teCache

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

lib/ExpensiMark.ts

mountiny · 2024-09-26T14:04:59Z

lib/ExpensiMark.ts

-                replacement: (_extras, _match, _g1, g2, _g3, g4) => {
-                    if (g4) {
-                        return `![${g4}](${g2})`;
+                regex: /<img[^><]*src\s*=\s*(['"])(.*?)\1(.*?)>(?![^<][\s\S]*?(<\/pre>|<\/code>))/gi,


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

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 · 2024-09-26T14:07:46Z

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

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

mountiny

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

rushatgabhane · 2024-09-27T09:46:52Z

yeah, gimme a moment for checklist

rushatgabhane · 2024-09-27T13:26:44Z

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

I tried:

Pull this branch to expensify-common local repo.
Build the branch cd expensify-common && npm run build
Go to Expensify/App/
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 · 2024-09-27T13:31:32Z

@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 · 2024-09-28T13:01:14Z

That worked, thank you!

rushatgabhane · 2024-09-28T13:08:11Z

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

Disable cache
Type message in composer and send an image attachment
Edit the message
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 · 2024-09-28T13:18:09Z

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

mjasikowski · 2024-09-29T12:22:49Z

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 · 2024-09-29T13:00:01Z

alright, understood

mjasikowski · 2024-10-04T06:33:47Z

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

rushatgabhane · 2024-10-07T01:31:02Z

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 · 2024-10-07T10:56:08Z

I will just move this ahead now

github-actions · 2024-10-07T10:56:47Z

🚀Published to npm in v2.0.97

mjasikowski added 4 commits September 26, 2024 14:30

Added img attribute caching to ExpensiMark.ts, deprecated cacheVideoA…

dc247c3

…ttributes & videoAttributeCache

Added additional comments to mediaAttributeCachingFn and mediaAttribu…

422f1b6

…teCache

Added more media caching tests to ExpensiMark

d30ed4e

Linting fixes

bf3d9a0

mjasikowski self-assigned this Sep 26, 2024

mjasikowski requested review from mountiny and a team September 26, 2024 13:41

mjasikowski marked this pull request as ready for review September 26, 2024 13:41

melvin-bot bot requested review from youssef-lr and removed request for a team September 26, 2024 13:41

mjasikowski mentioned this pull request Sep 26, 2024

[HOLD for payment 2024-11-01] [$250] Editing comment with image attachment fails to load the image when cache expires Expensify/App#42206

Closed

6 tasks

mountiny reviewed Sep 26, 2024

View reviewed changes

Apply suggestions from code review

e0f9c4a

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

mountiny approved these changes Sep 27, 2024

View reviewed changes

mjasikowski changed the title ~~Added img attribute caching to ExpensiMark~~ [Hold Web#43698] Added img attribute caching to ExpensiMark Sep 29, 2024

mjasikowski changed the title ~~[Hold Web#43698] Added img attribute caching to ExpensiMark~~ [Hold Web#43729] Added img attribute caching to ExpensiMark Sep 30, 2024

mjasikowski changed the title ~~[Hold Web#43729] Added img attribute caching to ExpensiMark~~ Added img attribute caching to ExpensiMark Oct 4, 2024

rushatgabhane approved these changes Oct 7, 2024

View reviewed changes

mountiny merged commit fb19129 into main Oct 7, 2024
6 checks passed

mountiny deleted the michal-img-attributes branch October 7, 2024 10:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added img attribute caching to ExpensiMark #808

Added img attribute caching to ExpensiMark #808

mjasikowski commented Sep 26, 2024 •

edited

Loading

mountiny left a comment

mountiny Sep 26, 2024

mjasikowski Sep 27, 2024

mountiny commented Sep 26, 2024

mountiny left a comment

rushatgabhane commented Sep 27, 2024

rushatgabhane commented Sep 27, 2024

mjasikowski commented Sep 27, 2024 •

edited

Loading

rushatgabhane commented Sep 28, 2024

rushatgabhane commented Sep 28, 2024 •

edited

Loading

mjasikowski commented Sep 28, 2024

mjasikowski commented Sep 29, 2024 •

edited

Loading

rushatgabhane commented Sep 29, 2024

mjasikowski commented Oct 4, 2024

rushatgabhane commented Oct 7, 2024 •

edited

Loading

rushatgabhane left a comment

mountiny commented Oct 7, 2024

github-actions bot commented Oct 7, 2024

Added img attribute caching to ExpensiMark #808

Added img attribute caching to ExpensiMark #808

Conversation

mjasikowski commented Sep 26, 2024 • edited Loading

Fixed Issues

Tests

QA

mountiny left a comment

Choose a reason for hiding this comment

mountiny Sep 26, 2024

Choose a reason for hiding this comment

mjasikowski Sep 27, 2024

Choose a reason for hiding this comment

mountiny commented Sep 26, 2024

mountiny left a comment

Choose a reason for hiding this comment

rushatgabhane commented Sep 27, 2024

rushatgabhane commented Sep 27, 2024

mjasikowski commented Sep 27, 2024 • edited Loading

rushatgabhane commented Sep 28, 2024

rushatgabhane commented Sep 28, 2024 • edited Loading

mjasikowski commented Sep 28, 2024

mjasikowski commented Sep 29, 2024 • edited Loading

rushatgabhane commented Sep 29, 2024

mjasikowski commented Oct 4, 2024

rushatgabhane commented Oct 7, 2024 • edited Loading

Web

Mobile

rushatgabhane left a comment

Choose a reason for hiding this comment

mountiny commented Oct 7, 2024

github-actions bot commented Oct 7, 2024

mjasikowski commented Sep 26, 2024 •

edited

Loading

mjasikowski commented Sep 27, 2024 •

edited

Loading

rushatgabhane commented Sep 28, 2024 •

edited

Loading

mjasikowski commented Sep 29, 2024 •

edited

Loading

rushatgabhane commented Oct 7, 2024 •

edited

Loading