diff --git a/__tests__/ExpensiMark-HTML-test.js b/__tests__/ExpensiMark-HTML-test.js
index 1417cc5a..eda96c1b 100644
--- a/__tests__/ExpensiMark-HTML-test.js
+++ b/__tests__/ExpensiMark-HTML-test.js
@@ -2097,7 +2097,7 @@ describe('Video markdown conversion to html tag', () => {
expect(parser.replace(testString, {shouldKeepRawInput: true})).toBe(resultString);
})
- test('Single video with extra cached attribues', () => {
+ test('Single video with extra cached attributes with videoAttributeCache', () => {
const testString = '![test](https://example.com/video.mp4)';
const resultString = '';
expect(parser.replace(testString, {
@@ -2109,6 +2109,18 @@ describe('Video markdown conversion to html tag', () => {
})).toBe(resultString);
})
+ test('Single video with extra cached attributes with mediaAttributeCache', () => {
+ const testString = '![test](https://example.com/video.mp4)';
+ const resultString = '';
+ expect(parser.replace(testString, {
+ extras: {
+ mediaAttributeCache: {
+ 'https://example.com/video.mp4': 'data-expensify-height="100" data-expensify-width="100"'
+ }
+ }
+ })).toBe(resultString);
+ })
+
test('Text containing image and video', () => {
const testString = 'An image of a banana: ![banana](https://example.com/banana.png) and a video of a banana: ![banana](https://example.com/banana.mp4)';
const resultString = 'An image of a banana:
and a video of a banana: ';
@@ -2220,6 +2232,31 @@ describe('Image markdown conversion to html tag', () => {
'
';
expect(parser.replace(testString, {shouldKeepRawInput: true})).toBe(resultString);
});
+
+ test('Single image with extra cached attributes using mediaAttributeCache', () => {
+ const testString = '![test](https://example.com/image.jpg)';
+ const resultString = '
';
+ expect(parser.replace(testString, {
+ extras: {
+ mediaAttributeCache: {
+ 'https://example.com/image.jpg': 'data-expensify-height="100" data-expensify-width="100"'
+ }
+ }
+ })).toBe(resultString);
+ })
+
+ test('Single image with extra cached attributes using videAttributeCache', () => {
+ const testString = '![test](https://example.com/image.jpg)';
+ const resultString = '
';
+ expect(parser.replace(testString, {
+ extras: {
+ videoAttributeCache: {
+ 'https://example.com/image.jpg': 'data-expensify-height="100" data-expensify-width="100"'
+ }
+ }
+ })).toBe(resultString);
+ })
+
});
describe('room mentions', () => {
diff --git a/__tests__/ExpensiMark-Markdown-test.js b/__tests__/ExpensiMark-Markdown-test.js
index 1ebfd21a..6daaab21 100644
--- a/__tests__/ExpensiMark-Markdown-test.js
+++ b/__tests__/ExpensiMark-Markdown-test.js
@@ -867,6 +867,50 @@ describe('Image tag conversion to markdown', () => {
const resultString = '![```code```](https://example.com/image.png)';
expect(parser.htmlToMarkdown(testString)).toBe(resultString);
});
+
+ test('Cache extra attributes for img with alt with mediaAttributeCachingFn', () => {
+ const mediaAttributeCachingFn = jest.fn();
+ const testString = '
';
+ const resultString = '![altText](https://example.com/image.png)';
+ const extras = {
+ mediaAttributeCachingFn,
+ };
+ expect(parser.htmlToMarkdown(testString, extras)).toBe(resultString);
+ expect(mediaAttributeCachingFn).toHaveBeenCalledWith("https://example.com/image.png", 'data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source"')
+ });
+
+ test('Cache extra attributes for img with alt with cacheVideoAttributes', () => {
+ const cacheVideoAttributes = jest.fn();
+ const testString = '
';
+ const resultString = '![altText](https://example.com/image.png)';
+ const extras = {
+ cacheVideoAttributes,
+ };
+ expect(parser.htmlToMarkdown(testString, extras)).toBe(resultString);
+ expect(cacheVideoAttributes).toHaveBeenCalledWith("https://example.com/image.png", 'data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source"')
+ });
+
+ test('Cache extra attributes for img without alt with mediaAttributeCachingFn', () => {
+ const mediaAttributeCachingFn = jest.fn();
+ const testString = '
';
+ const resultString = '!(https://example.com/image.png)';
+ const extras = {
+ mediaAttributeCachingFn,
+ };
+ expect(parser.htmlToMarkdown(testString, extras)).toBe(resultString);
+ expect(mediaAttributeCachingFn).toHaveBeenCalledWith("https://example.com/image.png", 'data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source"')
+ });
+
+ test('Cache extra attributes for img without alt with cacheVideoAttributes', () => {
+ const cacheVideoAttributes = jest.fn();
+ const testString = '
';
+ const resultString = '!(https://example.com/image.png)';
+ const extras = {
+ cacheVideoAttributes,
+ };
+ expect(parser.htmlToMarkdown(testString, extras)).toBe(resultString);
+ expect(cacheVideoAttributes).toHaveBeenCalledWith("https://example.com/image.png", 'data-expensify-width="100" data-expensify-height="500" data-name="newName" data-expensify-source="expensify-source"')
+ });
});
describe('Video tag conversion to markdown', () => {
diff --git a/lib/ExpensiMark.ts b/lib/ExpensiMark.ts
index 0a17a763..680119cc 100644
--- a/lib/ExpensiMark.ts
+++ b/lib/ExpensiMark.ts
@@ -1,3 +1,5 @@
+import str from "./str";
+
'worklet';
import Str from './str';
@@ -9,8 +11,16 @@ import * as Utils from './utils';
type Extras = {
reportIDToName?: Record;
accountIDToName?: Record;
+ /**
+ * @deprecated Replaced with mediaAttributeCachingFn
+ */
cacheVideoAttributes?: (vidSource: string, attrs: string) => void;
+ /**
+ * @deprecated Replaced with mediaAttributeCache
+ */
videoAttributeCache?: Record;
+ mediaAttributeCachingFn?: (mediaSource: string, attrs: string) => void;
+ mediaAttributeCache?: Record;
};
const EXTRAS_DEFAULT = {};
@@ -62,6 +72,18 @@ const MARKDOWN_VIDEO_REGEX = new RegExp(
const SLACK_SPAN_NEW_LINE_TAG = '';
export default class ExpensiMark {
+
+ getAttributeCache = (extras?: Extras) => {
+ if (!extras) {
+ return { attrCachingFn: undefined, attrCache: undefined };
+ }
+
+ return {
+ attrCachingFn: extras.mediaAttributeCachingFn ?? extras.cacheVideoAttributes,
+ attrCache: extras.mediaAttributeCache ?? extras.videoAttributeCache
+ };
+ };
+
static Log = new Logger({
serverLoggingCallback: () => undefined,
// eslint-disable-next-line no-console
@@ -171,11 +193,13 @@ export default class ExpensiMark {
* @return Returns the HTML video tag
*/
replacement: (extras, _match, videoName, videoSource) => {
- const extraAttrs = extras && extras.videoAttributeCache && extras.videoAttributeCache[videoSource];
+ const attrCache = this.getAttributeCache(extras).attrCache;
+ const extraAttrs = attrCache && attrCache[videoSource];
return ``;
},
rawInputReplacement: (extras, _match, videoName, videoSource) => {
- const extraAttrs = extras && extras.videoAttributeCache && extras.videoAttributeCache[videoSource];
+ const attrCache = this.getAttributeCache(extras).attrCache;
+ const extraAttrs = attrCache && attrCache[videoSource];
return ``;
},
},
@@ -245,13 +269,21 @@ export default class ExpensiMark {
* tag.
* Additional sanitization is done to the alt attribute to prevent parsing it further to html by later
* rules.
+ * Additional tags from cache are applied to the result HTML.
*/
{
name: 'image',
regex: MARKDOWN_IMAGE_REGEX,
- replacement: (_extras, _match, g1, g2) => `
`,
- rawInputReplacement: (_extras, _match, g1, g2) =>
- `
`,
+ replacement: (extras, _match, imgAlt, imgSource) => {
+ const attrCache = this.getAttributeCache(extras).attrCache;
+ const extraAttrs = attrCache && attrCache[imgSource];
+ return `
`;
+ },
+ rawInputReplacement: (extras, _match, imgAlt, imgSource) => {
+ const attrCache = this.getAttributeCache(extras).attrCache;
+ const extraAttrs = attrCache && attrCache[imgSource];
+ return `
`;
+ },
},
/**
@@ -658,14 +690,39 @@ export default class ExpensiMark {
{
name: 'image',
- regex: /
<]*src\s*=\s*(['"])(.*?)\1(?:[^><]*alt\s*=\s*(['"])(.*?)\3)?[^><]*>*(?![^<][\s\S]*?(<\/pre>|<\/code>))/gi,
- replacement: (_extras, _match, _g1, g2, _g3, g4) => {
- if (g4) {
- return `![${g4}](${g2})`;
+ regex: /
<]*src\s*=\s*(['"])(.*?)\1(.*?)>(?![^<][\s\S]*?(<\/pre>|<\/code>))/gi,
+ /**
+ * @param extras - The extras object
+ * @param match - The full match
+ * @param _g1 - The first capture group (the quote)
+ * @param imgSource - The second capture group - src attribute value
+ * @param imgAttrs - The third capture group - any attributes after src
+ * @returns The markdown image tag
+ */
+ replacement: (extras, _match, _g1, imgSource, imgAttrs) => {
+ // Extract alt attribute from imgAttrs
+ let altText = '';
+ const altRegex = /alt\s*=\s*(['"])(.*?)\1/i;
+ const altMatch = imgAttrs.match(altRegex);
+ const attrCachingFn = this.getAttributeCache(extras).attrCachingFn;
+ let attributes = imgAttrs;
+ if (altMatch) {
+ altText = altMatch[2];
+ // Remove the alt attribute from imgAttrs
+ attributes = attributes.replace(altRegex, '');
}
-
- return `!(${g2})`;
- },
+ // Remove trailing slash and extra whitespace
+ attributes = attributes.replace(/\s*\/\s*$/, '').trim();
+ // Cache attributes without alt and trailing slash
+ if (imgAttrs && attrCachingFn && typeof attrCachingFn === 'function') {
+ attrCachingFn(imgSource, attributes);
+ }
+ // Return the markdown image tag
+ if (altText) {
+ return `![${altText}](${imgSource})`;
+ }
+ return `!(${imgSource})`;
+ }
},
{
@@ -681,8 +738,10 @@ export default class ExpensiMark {
* @returns The markdown video tag
*/
replacement: (extras, _match, _g1, videoSource, videoAttrs, videoName) => {
- if (videoAttrs && extras && extras.cacheVideoAttributes && typeof extras.cacheVideoAttributes === 'function') {
- extras.cacheVideoAttributes(videoSource, videoAttrs);
+ const attrCachingFn = this.getAttributeCache(extras).attrCachingFn;
+
+ if (videoAttrs && attrCachingFn && typeof attrCachingFn === 'function') {
+ attrCachingFn(videoSource, videoAttrs);
}
if (videoName) {
return `![${videoName}](${videoSource})`;