expensify-common 2.0.95 → 2.0.97

package/dist/ExpensiMark.d.ts

@@ -2,9 +2,26 @@ import Logger from './Logger';
 type Extras = {
     reportIDToName?: Record<string, string>;
     accountIDToName?: Record<string, string>;
+    /**
+     * @deprecated Replaced with mediaAttributeCachingFn
+     */
     cacheVideoAttributes?: (vidSource: string, attrs: string) => void;
+    /**
+     * @deprecated Replaced with mediaAttributeCache
+     */
     videoAttributeCache?: Record<string, string>;
+    /**
+     * Function used to cache HTML tag attributes during conversion to and from Markdown
+     * @param mediaSource URI to media source
+     * @param attrs Additional attributes to be cached
+     */
+    mediaAttributeCachingFn?: (mediaSource: string, attrs: string) => void;
+    /**
+     * Key/value cache for HTML tag attributes, where the key is media source URI, value is cached attributes
+     */
+    mediaAttributeCache?: Record<string, string>;
 };
+export type { Extras };
 type ReplacementFn = (extras: Extras, ...matches: string[]) => string;
 type Replacement = ReplacementFn | string;
 type ProcessFn = (textToProcess: string, replacement: Replacement, shouldKeepRawInput: boolean) => string;
@@ -36,6 +53,10 @@ type TruncateOptions = {
     removeImageTag?: boolean;
 };
 export default class ExpensiMark {
+    getAttributeCache: (extras?: Extras) => {
+        attrCachingFn: ((vidSource: string, attrs: string) => void) | undefined;
+        attrCache: Record<string, string> | undefined;
+    };
     static Log: Logger;
     /**
      * Set the logger to use for logging inside of the ExpensiMark class
@@ -175,4 +196,3 @@ export default class ExpensiMark {
      */
     replaceTextWithExtras(text: string, regexp: RegExp, extras: Extras, replacement: Replacement): string;
 }
-export {};

package/dist/ExpensiMark.js

@@ -46,6 +46,16 @@ class ExpensiMark {
         ExpensiMark.Log = logger;
     }
     constructor() {
+        this.getAttributeCache = (extras) => {
+            var _a, _b;
+            if (!extras) {
+                return { attrCachingFn: undefined, attrCache: undefined };
+            }
+            return {
+                attrCachingFn: (_a = extras.mediaAttributeCachingFn) !== null && _a !== void 0 ? _a : extras.cacheVideoAttributes,
+                attrCache: (_b = extras.mediaAttributeCache) !== null && _b !== void 0 ? _b : extras.videoAttributeCache,
+            };
+        };
         /**
          * The list of rules that we have to exclude in shouldKeepWhitespaceRules list.
          */
@@ -99,11 +109,13 @@ 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 `<video data-expensify-source="${str_1.default.sanitizeURL(videoSource)}" ${extraAttrs || ''}>${videoName ? `${videoName}` : ''}</video>`;
                 },
                 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 `<video data-expensify-source="${str_1.default.sanitizeURL(videoSource)}" data-raw-href="${videoSource}" data-link-variant="${typeof videoName === 'string' ? 'labeled' : 'auto'}" ${extraAttrs || ''}>${videoName ? `${videoName}` : ''}</video>`;
                 },
             },
@@ -167,12 +179,21 @@ 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) => `<img src="${str_1.default.sanitizeURL(g2)}"${g1 ? ` alt="${this.escapeAttributeContent(g1)}"` : ''} />`,
-                rawInputReplacement: (_extras, _match, g1, g2) => `<img src="${str_1.default.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 attrCache = this.getAttributeCache(extras).attrCache;
+                    const extraAttrs = attrCache && attrCache[imgSource];
+                    return `<img src="${str_1.default.sanitizeURL(imgSource)}"${imgAlt ? ` alt="${this.escapeAttributeContent(imgAlt)}"` : ''} ${extraAttrs || ''}/>`;
+                },
+                rawInputReplacement: (extras, _match, imgAlt, imgSource) => {
+                    const attrCache = this.getAttributeCache(extras).attrCache;
+                    const extraAttrs = attrCache && attrCache[imgSource];
+                    return `<img src="${str_1.default.sanitizeURL(imgSource)}"${imgAlt ? ` alt="${this.escapeAttributeContent(imgAlt)}"` : ''} data-raw-href="${imgSource}" data-link-variant="${typeof imgAlt === 'string' ? 'labeled' : 'auto'}" ${extraAttrs || ''}/>`;
+                },
             },
             /**
              * Converts markdown style links to anchor tags e.g. [Expensify](https://www.expensify.com)
@@ -543,12 +564,38 @@ class ExpensiMark {
             },
             {
                 name: 'image',
-                regex: /<img[^><]*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: /<img[^><]*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, '');
+                    }
+                    // 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 `!(${g2})`;
+                    return `!(${imgSource})`;
                 },
             },
             {
@@ -564,8 +611,9 @@ 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})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify-common",
-  "version": "2.0.95",
+  "version": "2.0.97",
   "author": "Expensify, Inc.",
   "description": "Expensify libraries and components shared across different repos",
   "homepage": "https://expensify.com",
@@ -68,7 +68,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jit-grunt": "^0.10.0",
     "prettier": "^3.3.3",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.2"
   },
   "browserify": {
     "transform": [