expensify-common 2.0.15 → 2.0.16

package/dist/CONST.d.ts

@@ -774,6 +774,7 @@ declare const CONST: {
             readonly prompt: "What software are you moving to and why?";
         };
     };
+    readonly VIDEO_EXTENSIONS: readonly ["mp4", "mov", "avi", "wmv", "flv", "mkv", "webm", "3gp", "m4v", "mpg", "mpeg", "ogv"];
 };
 /**
  * UI Constants

package/dist/CONST.js

@@ -817,6 +817,7 @@ const CONST = {
             prompt: 'What software are you moving to and why?',
         },
     },
+    VIDEO_EXTENSIONS: ['mp4', 'mov', 'avi', 'wmv', 'flv', 'mkv', 'webm', '3gp', 'm4v', 'mpg', 'mpeg', 'ogv'],
 };
 exports.CONST = CONST;
 /**

package/dist/ExpensiMark.d.ts

@@ -39,7 +39,13 @@ declare type Rule = {
 declare type ExtrasObject = {
     reportIDToName?: Record<string, string>;
     accountIDToName?: Record<string, string>;
+    cacheVideoAttributes?: (vidSource: string, attrs: string) => void;
 };
+
+declare type ExtraParamsForReplaceFunc = {
+    videoAttributeCache?: Record<string, string>;
+};
+
 export default class ExpensiMark {
     static Log: Logger;
     static setLogger(logger: Logger): void;
@@ -66,11 +72,13 @@ export default class ExpensiMark {
             filterRules,
             shouldEscapeText,
             shouldKeepRawInput,
+            extras,
         }?: {
             filterRules?: Name[];
             disabledRules?: Name[];
             shouldEscapeText?: boolean;
             shouldKeepRawInput?: boolean;
+            extras?: ExtraParamsForReplaceFunc;
         },
     ): string;
     /**

package/dist/ExpensiMark.js

@@ -33,6 +33,7 @@ const Logger_1 = __importDefault(require("./Logger"));
 const Utils = __importStar(require("./utils"));
 const MARKDOWN_LINK_REGEX = new RegExp(`\\[([^\\][]*(?:\\[[^\\][]*][^\\][]*)*)]\\(${UrlPatterns.MARKDOWN_URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`, 'gi');
 const MARKDOWN_IMAGE_REGEX = new RegExp(`\\!(?:\\[([^\\][]*(?:\\[[^\\][]*][^\\][]*)*)])?\\(${UrlPatterns.MARKDOWN_URL_REGEX}\\)(?![^<]*(<\\/pre>|<\\/code>))`, 'gi');
+const MARKDOWN_VIDEO_REGEX = new RegExp(`\\!(?:\\[([^\\][]*(?:\\[[^\\][]*][^\\][]*)*)])?\\(((${UrlPatterns.MARKDOWN_URL_REGEX})\\.(?:${Constants.CONST.VIDEO_EXTENSIONS.join('|')}))\\)(?![^<]*(<\\/pre>|<\\/code>))`, 'gi');
 const SLACK_SPAN_NEW_LINE_TAG = '<span class="c-mrkdwn__br" data-stringify-type="paragraph-break" style="box-sizing: inherit; display: block; height: unset;"></span>';
 class ExpensiMark {
     /**
@@ -129,7 +130,33 @@ class ExpensiMark {
                 replacement: '<h1>$1</h1>',
             },
             /**
-             * Converts markdown style images to img tags e.g. ![Expensify](https://www.expensify.com/attachment.png)
+             * Converts markdown style video to video tags e.g. ![Expensify](https://www.expensify.com/attachment.mp4)
+             * We need to convert before image rules since they will not try to create a image tag from an existing video URL
+             * Extras arg could contain the attribute cache for the video tag which is cached during the html-to-markdown conversion
+             */
+            {
+                name: 'video',
+                regex: MARKDOWN_VIDEO_REGEX,
+                /**
+                 * @param {string} match
+                 * @param {string} videoName - The first capture group - video name
+                 * @param {string} videoSource - The second capture group - video URL
+                 * @param {any[]} args - The rest capture groups and `extras` object. args[args.length-1] will the `extras` object
+                 * @return {string} Returns the HTML video tag
+                 */
+                replacement: (match, videoName, videoSource, ...args) => {
+                    const extras = args[args.length - 1];
+                    const extraAttrs = extras && extras.videoAttributeCache && extras.videoAttributeCache[videoSource];
+                    return `<video data-expensify-source="${str_1.default.sanitizeURL(videoSource)}" ${extraAttrs || ''}>${videoName ? `${videoName}` : ''}</video>`;
+                },
+                rawInputReplacement: (match, videoName, videoSource, ...args) => {
+                    const extras = args[args.length - 1];
+                    const extraAttrs = extras && extras.videoAttributeCache && extras.videoAttributeCache[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>`;
+                },
+            },
+            /**
+             * Converts markdown style images to image tags e.g. ![Expensify](https://www.expensify.com/attachment.png)
              * We need to convert before linking rules since they will not try to create a link from an existing img
              * tag.
              * Additional sanitization is done to the alt attribute to prevent parsing it further to html by later
@@ -476,6 +503,29 @@ class ExpensiMark {
                     return `!(${g2})`;
                 },
             },
+            {
+                name: 'video',
+                regex: /<video[^><]*data-expensify-source\s*=\s*(['"])(\S*?)\1(.*?)>([^><]*)<\/video>*(?![^<][\s\S]*?(<\/pre>|<\/code>))/gi,
+                /**
+                 * @param {string} match The full match
+                 * @param {string} g1 {string} The first capture group
+                 * @param {string} videoSource - the second capture group - video source (video URL)
+                 * @param {string} videoAttrs - the third capture group - video attributes (data-expensify-width, data-expensify-height, etc...)
+                 * @param {string} videoName - the fourth capture group will be the video file name (the text between opening and closing video tags)
+                 * @param {any[]} args The rest of the arguments. args[args.length-1] will the `extras` object
+                 * @returns {string} Returns the markdown video tag
+                 */
+                replacement: (match, g1, videoSource, videoAttrs, videoName, ...args) => {
+                    const extras = args[args.length - 1];
+                    if (videoAttrs && extras && extras.cacheVideoAttributes && typeof extras.cacheVideoAttributes === 'function') {
+                        extras.cacheVideoAttributes(videoSource, videoAttrs);
+                    }
+                    if (videoName) {
+                        return `![${videoName}](${videoSource})`;
+                    }
+                    return `!(${videoSource})`;
+                },
+            },
             {
                 name: 'reportMentions',
                 regex: /<mention-report reportID="(\d+)" *\/>/gi,
@@ -630,7 +680,7 @@ class ExpensiMark {
      *
      * @returns {String}
      */
-    replace(text, { filterRules = [], shouldEscapeText = true, shouldKeepRawInput = false, disabledRules = [] } = {}) {
+    replace(text, { filterRules = [], shouldEscapeText = true, shouldKeepRawInput = false, disabledRules = [], extras } = {}) {
         // This ensures that any html the user puts into the comment field shows as raw html
         let replacedText = shouldEscapeText ? Utils.escape(text) : text;
         const rules = this.getHtmlRuleset(filterRules, disabledRules, shouldKeepRawInput);
@@ -640,11 +690,12 @@ class ExpensiMark {
                 replacedText = rule.pre(replacedText);
             }
             const replacementFunction = shouldKeepRawInput && rule.rawInputReplacement ? rule.rawInputReplacement : rule.replacement;
+            const replacementFnWithExtraParams = typeof replacementFunction === 'function' ? (...args) => replacementFunction(...args, extras) : replacementFunction;
             if (rule.process) {
-                replacedText = rule.process(replacedText, replacementFunction, shouldKeepRawInput);
+                replacedText = rule.process(replacedText, replacementFnWithExtraParams, shouldKeepRawInput);
             }
             else {
-                replacedText = replacedText.replace(rule.regex, replacementFunction);
+                replacedText = replacedText.replace(rule.regex, replacementFnWithExtraParams);
             }
             // Post-process text after applying regex
             if (rule.post) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify-common",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "author": "Expensify, Inc.",
   "description": "Expensify libraries and components shared across different repos",
   "homepage": "https://expensify.com",