From 2453a2eb8209af3464928d4f878975ec241e33b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Jasikowski?= Date: Thu, 26 Sep 2024 09:43:25 +0200 Subject: [PATCH 1/2] Added attribute caching for img --- src/libs/Parser.ts | 8 ++++---- src/libs/actions/Report.ts | 10 +++++----- .../home/report/ReportActionItemMessageEdit.tsx | 15 ++++++++++----- 3 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/libs/Parser.ts b/src/libs/Parser.ts index 9d791b1d4f7b..08af8b819e17 100644 --- a/src/libs/Parser.ts +++ b/src/libs/Parser.ts @@ -23,8 +23,8 @@ Onyx.connect({ type Extras = { reportIDToName?: Record; accountIDToName?: Record; - cacheVideoAttributes?: (vidSource: string, attrs: string) => void; - videoAttributeCache?: Record; + mediaAttributeCachingFn?: (mediaSource: string, attrs: string) => void; + mediaAttributeCache?: Record; }; class ExpensiMarkWithContext extends ExpensiMark { @@ -32,7 +32,7 @@ class ExpensiMarkWithContext extends ExpensiMark { return super.htmlToMarkdown(htmlString, { reportIDToName: extras?.reportIDToName ?? ReportConnection.getAllReportsNameMap(), accountIDToName: extras?.accountIDToName ?? accountIDToNameMap, - cacheVideoAttributes: extras?.cacheVideoAttributes, + mediaAttributeCachingFn: extras?.mediaAttributeCachingFn, }); } @@ -40,7 +40,7 @@ class ExpensiMarkWithContext extends ExpensiMark { return super.htmlToText(htmlString, { reportIDToName: extras?.reportIDToName ?? ReportConnection.getAllReportsNameMap(), accountIDToName: extras?.accountIDToName ?? accountIDToNameMap, - cacheVideoAttributes: extras?.cacheVideoAttributes, + mediaAttributeCachingFn: extras?.mediaAttributeCachingFn, }); } diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index e53cac804b90..8fa079a7ac8b 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -1566,9 +1566,9 @@ function removeLinksFromHtml(html: string, links: string[]): string { * * @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 { +function handleUserDeletedLinksInHtml(newCommentText: string, originalCommentMarkdown: string, mediaAttributeCache?: Record): string { if (newCommentText.length > CONST.MAX_MARKUP_LENGTH) { return newCommentText; } @@ -1576,14 +1576,14 @@ function handleUserDeletedLinksInHtml(newCommentText: string, originalCommentMar 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, textForNewComment: string, videoAttributeCache?: Record) { +function editReportComment(reportID: string, originalReportAction: OnyxEntry, textForNewComment: string, mediaAttributeCache?: Record) { const originalReportID = ReportUtils.getOriginalReportID(reportID, originalReportAction); if (!originalReportID || !originalReportAction) { @@ -1600,7 +1600,7 @@ function editReportComment(reportID: string, originalReportAction: OnyxEntry video attributes -const draftMessageVideoAttributeCache = new Map(); +// video or img source -> video or img attributes +const draftMessageMediaAttributeCache = new Map(); function ReportActionItemMessageEdit( {action, draftMessage, reportID, policyID, index, isGroupPolicyReport, shouldDisableEmojiPicker = false}: ReportActionItemMessageEditProps, @@ -126,11 +126,15 @@ function ReportActionItemMessageEdit( 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 @@ function ReportActionItemMessageEdit( 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]); From cb393764a526e6416c117d0234d44725e516f948 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Jasikowski?= Date: Thu, 26 Sep 2024 09:46:49 +0200 Subject: [PATCH 2/2] Importing Extras from ExpensiMark.ts to remove redundant types in App --- src/libs/Parser.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/libs/Parser.ts b/src/libs/Parser.ts index 08af8b819e17..45748d097d70 100644 --- a/src/libs/Parser.ts +++ b/src/libs/Parser.ts @@ -4,6 +4,7 @@ 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 = {}; @@ -20,13 +21,6 @@ Onyx.connect({ }, }); -type Extras = { - reportIDToName?: Record; - accountIDToName?: Record; - mediaAttributeCachingFn?: (mediaSource: string, attrs: string) => void; - mediaAttributeCache?: Record; -}; - class ExpensiMarkWithContext extends ExpensiMark { htmlToMarkdown(htmlString: string, extras?: Extras): string { return super.htmlToMarkdown(htmlString, {