Md to HTML for images with cached attributes

Expensify · Sep 25, 2024 · 210bad3 · 210bad3
1 parent 6ce6391
commit 210bad3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/__tests__/ExpensiMark-HTML-test.js b/__tests__/ExpensiMark-HTML-test.js
@@ -2220,6 +2220,18 @@ describe('Image markdown conversion to html tag', () => {
             '<img src="https://example.com/image.png" alt="&#x60;&#x60;&#x60;code&#x60;&#x60;&#x60;" data-raw-href="https://example.com/image.png" data-link-variant="labeled" />';
         expect(parser.replace(testString, {shouldKeepRawInput: true})).toBe(resultString);
     });
+
+    test('Single image with extra cached attribues', () => {
+        const testString = '![test](https://example.com/image.jpg)';
+        const resultString = '<img src="https://example.com/image.jpg" alt="test" data-expensify-height="100" data-expensify-width="100"/>';
+        expect(parser.replace(testString, {
+            extras: {
+                mediaAttributeCache: {
+                    'https://example.com/image.jpg': 'data-expensify-height="100" data-expensify-width="100"'
+                }
+            }
+        })).toBe(resultString);
+    })
 });
 
 describe('room mentions', () => {

diff --git a/lib/ExpensiMark.ts b/lib/ExpensiMark.ts
@@ -249,9 +249,14 @@ export default class ExpensiMark {
             {
                 name: 'image',
                 regex: MARKDOWN_IMAGE_REGEX,
-                replacement: (_extras, _match, g1, g2) => `<img src="${Str.sanitizeURL(g2)}"${g1 ? ` alt="${this.escapeAttributeContent(g1)}"` : ''} />`,
-                rawInputReplacement: (_extras, _match, g1, g2) =>
-                    `<img src="${Str.sanitizeURL(g2)}"${g1 ? ` alt="${this.escapeAttributeContent(g1)}"` : ''} data-raw-href="${g2}" data-link-variant="${typeof g1 === 'string' ? 'labeled' : 'auto'}" />`,
+                replacement: (extras, _match, imgAlt, imgSource) => {
+                    const extraAttrs = extras && extras.mediaAttributeCache && extras.mediaAttributeCache[imgSource];
+                    return `<img src="${Str.sanitizeURL(imgSource)}"${imgAlt ? ` alt="${this.escapeAttributeContent(imgAlt)}"` : ''} ${extraAttrs || ''}/>`;
+                },
+                rawInputReplacement: (extras, _match, imgAlt, imgSource) => {
+                    const extraAttrs = extras && extras.mediaAttributeCache && extras.mediaAttributeCache[imgSource];
+                    return `<img src="${Str.sanitizeURL(imgSource)}"${imgAlt ? ` alt="${this.escapeAttributeContent(imgAlt)}"` : ''} data-raw-href="${imgSource}" data-link-variant="${typeof imgAlt === 'string' ? 'labeled' : 'auto'}" ${extraAttrs || ''}/>`;
+                },
             },
 
             /**
@@ -891,6 +896,7 @@ export default class ExpensiMark {
             if (rule.pre) {
                 replacedText = rule.pre(replacedText);
             }
+
             const replacement = shouldKeepRawInput && rule.rawInputReplacement ? rule.rawInputReplacement : rule.replacement;
             if ('process' in rule) {
                 replacedText = rule.process(replacedText, replacement, shouldKeepRawInput);