Added img attribute caching

src/libs/Parser.ts

@@ -1,9 +1,10 @@
 // eslint-disable-next-line no-restricted-imports
 import {ExpensiMark} from 'expensify-common';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 import Log from './Log';
 import * as ReportConnection from './ReportConnection';
+import { Extras } from 'expensify-common/dist/ExpensiMark';
 
 const accountIDToNameMap: Record<string, string> = {};
 
@@ -20,27 +21,20 @@
     },
 });
 
-type Extras = {
-    reportIDToName?: Record<string, string>;
-    accountIDToName?: Record<string, string>;
-    cacheVideoAttributes?: (vidSource: string, attrs: string) => void;
-    videoAttributeCache?: Record<string, string>;
-};
-
 class ExpensiMarkWithContext extends ExpensiMark {
     htmlToMarkdown(htmlString: string, extras?: Extras): string {
         return super.htmlToMarkdown(htmlString, {
             reportIDToName: extras?.reportIDToName ?? ReportConnection.getAllReportsNameMap(),
             accountIDToName: extras?.accountIDToName ?? accountIDToNameMap,
-            cacheVideoAttributes: extras?.cacheVideoAttributes,
+            mediaAttributeCachingFn: extras?.mediaAttributeCachingFn,
         });
     }
 
     htmlToText(htmlString: string, extras?: Extras): string {
         return super.htmlToText(htmlString, {
             reportIDToName: extras?.reportIDToName ?? ReportConnection.getAllReportsNameMap(),
             accountIDToName: extras?.accountIDToName ?? accountIDToNameMap,
-            cacheVideoAttributes: extras?.cacheVideoAttributes,
+            mediaAttributeCachingFn: extras?.mediaAttributeCachingFn,
         });
     }
 

src/libs/actions/Report.ts

@@ -1566,24 +1566,24 @@
  *
  * @param newCommentText text of the comment after editing.
  * @param originalCommentMarkdown original markdown of the comment before editing.
- * @param videoAttributeCache cache of video attributes ([videoSource]: videoAttributes)
+ * @param mediaAttributeCache cache of media attributes - img and video ([mediaSource]: mediaAttributes)
  */
-function handleUserDeletedLinksInHtml(newCommentText: string, originalCommentMarkdown: string, videoAttributeCache?: Record<string, string>): string {
+function handleUserDeletedLinksInHtml(newCommentText: string, originalCommentMarkdown: string, mediaAttributeCache?: Record<string, string>): string {
     if (newCommentText.length > CONST.MAX_MARKUP_LENGTH) {
         return newCommentText;
     }
 
     const textWithMention = ReportUtils.completeShortMention(newCommentText);
 
     const htmlForNewComment = Parser.replace(textWithMention, {
-        extras: {videoAttributeCache},
+        extras: {mediaAttributeCache},
     });
     const removedLinks = Parser.getRemovedMarkdownLinks(originalCommentMarkdown, textWithMention);
     return removeLinksFromHtml(htmlForNewComment, removedLinks);
 }
 
 /** Saves a new message for a comment. Marks the comment as edited, which will be reflected in the UI. */
-function editReportComment(reportID: string, originalReportAction: OnyxEntry<ReportAction>, textForNewComment: string, videoAttributeCache?: Record<string, string>) {
+function editReportComment(reportID: string, originalReportAction: OnyxEntry<ReportAction>, textForNewComment: string, mediaAttributeCache?: Record<string, string>) {
     const originalReportID = ReportUtils.getOriginalReportID(reportID, originalReportAction);
 
     if (!originalReportID || !originalReportAction) {
@@ -1600,7 +1600,7 @@
     if (originalCommentMarkdown === textForNewComment) {
         return;
     }
-    const htmlForNewComment = handleUserDeletedLinksInHtml(textForNewComment, originalCommentMarkdown, videoAttributeCache);
+    const htmlForNewComment = handleUserDeletedLinksInHtml(textForNewComment, originalCommentMarkdown, mediaAttributeCache);
 
     const reportComment = Parser.htmlToText(htmlForNewComment);
 

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -80,8 +80,8 @@
 
 const shouldUseForcedSelectionRange = shouldUseEmojiPickerSelection();
 
-// video source -> video attributes
-const draftMessageVideoAttributeCache = new Map<string, string>();
+// video or img source -> video or img attributes
+const draftMessageMediaAttributeCache = new Map<string, string>();
 
 function ReportActionItemMessageEdit(
     {action, draftMessage, reportID, policyID, index, isGroupPolicyReport, shouldDisableEmojiPicker = false}: ReportActionItemMessageEditProps,
@@ -126,11 +126,15 @@
     const isCommentPendingSaved = useRef(false);
 
     useEffect(() => {
-        draftMessageVideoAttributeCache.clear();
+        draftMessageMediaAttributeCache.clear();
 
         const originalMessage = Parser.htmlToMarkdown(ReportActionsUtils.getReportActionHtml(action), {
-            cacheVideoAttributes: (videoSource, attrs) => draftMessageVideoAttributeCache.set(videoSource, attrs),
+            mediaAttributeCachingFn: (mediaSource, attrs) => draftMessageMediaAttributeCache.set(mediaSource, attrs),
         });
+
+        console.log(ReportActionsUtils.getReportActionHtml(action), 'orgAction');
+        console.log(draftMessageMediaAttributeCache, 'cachedAttributes');
+
         if (ReportActionsUtils.isDeletedAction(action) || !!(action.message && draftMessage === originalMessage) || !!(prevDraftMessage === draftMessage || isCommentPendingSaved.current)) {
             return;
         }
@@ -329,7 +333,8 @@
             ReportActionContextMenu.showDeleteModal(reportID, action, true, deleteDraft, () => focusEditAfterCancelDelete(textInputRef.current));
             return;
         }
-        Report.editReportComment(reportID, action, trimmedNewDraft, Object.fromEntries(draftMessageVideoAttributeCache));
+
+        Report.editReportComment(reportID, action, trimmedNewDraft, Object.fromEntries(draftMessageMediaAttributeCache));
         deleteDraft();
     }, [action, deleteDraft, draft, reportID]);