From 210bad35bfb6525c4705f02252d3f0035839878c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Jasikowski?= <michal@expensify.com>
Date: Wed, 25 Sep 2024 14:36:59 +0200
Subject: [PATCH] Md to HTML for images with cached attributes

---
 __tests__/ExpensiMark-HTML-test.js | 12 ++++++++++++
 lib/ExpensiMark.ts                 | 12 +++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/__tests__/ExpensiMark-HTML-test.js b/__tests__/ExpensiMark-HTML-test.js
index 488088d4..32ca9e03 100644
--- 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
index b125b578..b6942ba9 100644
--- 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);