From 8b79181dee03a7b8ea3abdf84c58d49213de6ecb Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Tue, 28 Jan 2025 22:25:25 +0300
Subject: [PATCH 01/13] add reportActionID in image markdown link

---
 src/ROUTES.ts                                 |  6 ++++-
 src/components/AttachmentModal.tsx            |  5 ++++
 .../AttachmentCarousel/Pager/index.tsx        |  2 +-
 .../AttachmentCarousel/extractAttachments.ts  | 15 ------------
 .../AttachmentCarousel/index.native.tsx       | 10 ++++----
 .../Attachments/AttachmentCarousel/index.tsx  | 23 ++++++++++++-------
 .../Attachments/AttachmentCarousel/types.ts   |  3 +++
 .../HTMLRenderers/ImageRenderer.tsx           |  2 +-
 .../HTMLRenderers/VideoRenderer.tsx           |  2 +-
 src/libs/Navigation/types.ts                  |  1 +
 src/pages/home/report/ReportAttachments.tsx   |  3 +++
 11 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 9972c03d7b686..595edc88d1c0b 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -343,6 +343,7 @@ const ROUTES = {
         route: 'attachment',
         getRoute: (
             reportID: string | undefined,
+            reportActionID: string | undefined,
             type: ValueOf<typeof CONST.ATTACHMENT_TYPE>,
             url: string,
             accountID?: number,
@@ -355,8 +356,11 @@ const ROUTES = {
             const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : '';
             const fileNameParam = fileName ? `&fileName=${fileName}` : '';
             const attachmentLinkParam = attachmentLink ? `&attachmentLink=${attachmentLink}` : '';
+            const reportActionParam = reportActionID ? `&reportActionID=${reportActionID}` : '';
 
-            return `attachment?source=${encodeURIComponent(url)}&type=${type as string}${reportParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
+            return `attachment?source=${encodeURIComponent(url)}&type=${
+                type as string
+            }${reportParam}${reportActionParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
         },
     },
     REPORT_PARTICIPANTS: {
diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 74ff19f21a46f..1b5b11ba33c88 100644
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -69,6 +69,9 @@ type AttachmentModalProps = {
     /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */
     source?: AvatarSource;
 
+    /** The report action id linked to the attachment. */
+    reportActionID?: string;
+
     /** Optional callback to fire when we want to preview an image and approve it for use. */
     onConfirm?: ((file: FileObject) => void) | null;
 
@@ -161,6 +164,7 @@ function AttachmentModal({
     isLoading = false,
     shouldShowNotFoundPage = false,
     type = undefined,
+    reportActionID,
     accountID = undefined,
     shouldDisableSendButton = false,
     attachmentLink = '',
@@ -552,6 +556,7 @@ function AttachmentModal({
                                 <AttachmentCarousel
                                     accountID={accountID}
                                     type={type}
+                                    reportActionID={reportActionID}
                                     report={report}
                                     onNavigate={onNavigate}
                                     onClose={closeModal}
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index f02867376c7ed..751424fee3401 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -126,7 +126,7 @@ function AttachmentCarouselPager(
         >
             <CarouselItem
                 item={item}
-                isFocused={index === activePageIndex && activeSource === item.source}
+                isFocused={index === activePageIndex && activeSource === (item.reportActionID ?? item.source)}
             />
         </View>
     ));
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index 62660980f56f8..fae3c3ca1d2a9 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -27,10 +27,6 @@ function extractAttachments(
     const attachments: Attachment[] = [];
     const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report);
 
-    // We handle duplicate image sources by considering the first instance as original. Selecting any duplicate
-    // and navigating back (<) shows the image preceding the first instance, not the selected duplicate's position.
-    const uniqueSourcesAndLinks = new Set();
-
     let currentLink = '';
 
     const htmlParser = new HtmlParser({
@@ -40,11 +36,7 @@ function extractAttachments(
             }
             if (name === 'video') {
                 const source = tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]);
-                if (uniqueSourcesAndLinks.has(source)) {
-                    return;
-                }
 
-                uniqueSourcesAndLinks.add(source);
                 const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${source}`);
                 attachments.unshift({
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
@@ -61,13 +53,6 @@ function extractAttachments(
                 const expensifySource = attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] ?? (new RegExp(CONST.ATTACHMENT_OR_RECEIPT_LOCAL_URL, 'i').test(attribs.src) ? attribs.src : null);
                 const source = tryResolveUrlFromApiRoot(expensifySource || attribs.src);
                 const previewSource = tryResolveUrlFromApiRoot(attribs.src);
-                const sourceLinkKey = `${source}|${currentLink}`;
-
-                if (uniqueSourcesAndLinks.has(sourceLinkKey)) {
-                    return;
-                }
-
-                uniqueSourcesAndLinks.add(sourceLinkKey);
 
                 let fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${source}`);
 
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 68668ccc6ab06..9f09915295335 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -18,7 +18,7 @@ import AttachmentCarouselPager from './Pager';
 import type {AttachmentCarouselProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, source, reportActionID, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
@@ -27,8 +27,8 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
     const [page, setPage] = useState<number>();
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
-    const [activeSource, setActiveSource] = useState<AttachmentSource>(source);
-    const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
+    const [activeAttachment, setActiveAttachmentID] = useState<AttachmentSource | string>(reportActionID ?? source);
+    const compareImage = useCallback((attachment: Attachment) => (reportActionID ? attachment.reportActionID === reportActionID : attachment.source === source), [reportActionID, source]);
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
@@ -80,7 +80,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
 
             setPage(newPageIndex);
             if (newPageIndex >= 0 && item) {
-                setActiveSource(item.source);
+                setActiveAttachmentID(item.reportActionID ?? item.source);
                 if (onNavigate) {
                     onNavigate(item);
                 }
@@ -142,7 +142,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
                     <AttachmentCarouselPager
                         items={attachments}
                         initialPage={page}
-                        activeSource={activeSource}
+                        activeSource={activeAttachment}
                         setShouldShowArrows={setShouldShowArrows}
                         onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
                         onClose={onClose}
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 50caaac3dd814..a5eeaa1fc4988 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -51,7 +51,7 @@ function DeviceAwareGestureDetector({canUseTouchScreen, gesture, children}: Devi
     return canUseTouchScreen ? <GestureDetector gesture={gesture}>{children}</GestureDetector> : children;
 }
 
-function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose, attachmentLink}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, reportActionID, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose, attachmentLink}: AttachmentCarouselProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -72,7 +72,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
     );
     const [page, setPage] = useState(0);
     const [attachments, setAttachments] = useState<Attachment[]>([]);
-    const [activeSource, setActiveSource] = useState<AttachmentSource | null>(source);
+    const [activeAttachmentID, setActiveAttachmentID] = useState<string | AttachmentSource | null>(reportActionID ?? source);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
     const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
 
@@ -83,7 +83,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         setShouldShowArrows(true);
     }, [canUseTouchScreen, page, setShouldShowArrows]);
 
-    const compareImage = useCallback((attachment: Attachment) => attachment.source === source && (!attachmentLink || attachment.attachmentLink === attachmentLink), [attachmentLink, source]);
+    const compareImage = useCallback(
+        (attachment: Attachment) =>
+            (reportActionID ? attachment.reportActionID === reportActionID : attachment.source === source) && (!attachmentLink || attachment.attachmentLink === attachmentLink),
+        [attachmentLink, reportActionID, source],
+    );
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
@@ -156,14 +160,14 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             // to get the index of the current page
             const entry = viewableItems.at(0);
             if (!entry) {
-                setActiveSource(null);
+                setActiveAttachmentID(null);
                 return;
             }
 
             const item = entry.item as Attachment;
             if (entry.index !== null) {
                 setPage(entry.index);
-                setActiveSource(item.source);
+                setActiveAttachmentID(item.reportActionID ?? item.source);
             }
 
             if (onNavigate) {
@@ -193,7 +197,10 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
     );
 
     const extractItemKey = useCallback(
-        (item: Attachment) => (typeof item.source === 'string' || typeof item.source === 'number' ? `source-${item.source}|${item.attachmentLink}` : `reportActionID-${item.reportActionID}`),
+        (item: Attachment) =>
+            !!item.reportActionID || (typeof item.source !== 'string' && typeof item.source !== 'number')
+                ? `reportActionID-${item.reportActionID}`
+                : `source-${item.source}|${item.attachmentLink}`,
         [],
     );
 
@@ -227,13 +234,13 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             <View style={[styles.h100, {width: cellWidth}]}>
                 <CarouselItem
                     item={item}
-                    isFocused={activeSource === item.source}
+                    isFocused={activeAttachmentID === (item.reportActionID ?? item.source)}
                     onPress={canUseTouchScreen ? handleTap : undefined}
                     isModalHovered={shouldShowArrows}
                 />
             </View>
         ),
-        [activeSource, canUseTouchScreen, cellWidth, handleTap, shouldShowArrows, styles.h100],
+        [activeAttachmentID, canUseTouchScreen, cellWidth, handleTap, shouldShowArrows, styles.h100],
     );
     /** Pan gesture handing swiping through attachments on touch screen devices */
     const pan = useMemo(
diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts
index 317878b3ff605..bbc599e2929d6 100644
--- a/src/components/Attachments/AttachmentCarousel/types.ts
+++ b/src/components/Attachments/AttachmentCarousel/types.ts
@@ -12,6 +12,9 @@ type AttachmentCarouselProps = {
     /** Source is used to determine the starting index in the array of attachments */
     source: AttachmentSource;
 
+    /** The report action id linked to the current active attachment */
+    reportActionID?: string;
+
     /** Callback to update the parent modal's state with a source and name from the attachments array */
     onNavigate?: (attachment: Attachment) => void;
 
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
index 4c8e941acb870..b72db964e50b8 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -110,7 +110,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 }
 
                                 const attachmentLink = tnode.parent?.attributes?.href;
-                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID, type, source, accountID, isAttachmentOrReceipt, fileName, attachmentLink);
+                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID, action?.reportActionID, type, source, accountID, isAttachmentOrReceipt, fileName, attachmentLink);
                                 Navigation.navigate(route);
                             }}
                             onLongPress={(event) => {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
index ad7ea87f4c9b2..0516b7c4049c8 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -46,7 +46,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                                 if (!sourceURL || !type) {
                                     return;
                                 }
-                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID ?? '-1', type, sourceURL, accountID);
+                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID, undefined, type, sourceURL, accountID);
                                 Navigation.navigate(route);
                             }}
                         />
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index efb2f3e9cb9a5..6b910c7cfb9f2 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -1694,6 +1694,7 @@ type AuthScreensParamList = CentralPaneScreensParamList &
         [SCREENS.SUBMIT_EXPENSE]: undefined;
         [SCREENS.ATTACHMENTS]: {
             reportID: string;
+            reportActionID?: string;
             source: string;
             type: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
             accountID: string;
diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
index dfac22b23f06a..a634ee7da8429 100644
--- a/src/pages/home/report/ReportAttachments.tsx
+++ b/src/pages/home/report/ReportAttachments.tsx
@@ -15,6 +15,7 @@ type ReportAttachmentsProps = PlatformStackScreenProps<AuthScreensParamList, typ
 
 function ReportAttachments({route}: ReportAttachmentsProps) {
     const reportID = route.params.reportID;
+    const reportActionID = route.params.reportActionID;
     const type = route.params.type;
     const accountID = route.params.accountID;
     const isAuthTokenRequired = route.params.isAuthTokenRequired;
@@ -30,6 +31,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
         (attachment: Attachment) => {
             const routeToNavigate = ROUTES.ATTACHMENTS.getRoute(
                 reportID,
+                attachment.reportActionID,
                 type,
                 String(attachment.source),
                 Number(accountID),
@@ -49,6 +51,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
             allowDownload
             defaultOpen
             report={report}
+            reportActionID={reportActionID}
             source={source}
             onModalClose={() => {
                 Navigation.dismissModal();

From b901c9977b25d81cb69a7e200dbfc0899e225407 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Wed, 29 Jan 2025 01:01:36 +0300
Subject: [PATCH 02/13] fix lint

---
 .../AttachmentCarousel/extractAttachments.ts  | 22 +++++++++---------
 .../Attachments/AttachmentCarousel/index.tsx  |  8 +++----
 .../HTMLRenderers/ImageRenderer.tsx           | 23 +++++++------------
 .../HTMLRenderers/VideoRenderer.tsx           |  6 ++---
 src/components/VideoPlayerPreview/index.tsx   |  2 +-
 src/pages/home/report/ReportAttachments.tsx   |  2 +-
 6 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index fae3c3ca1d2a9..9e83b88f5b341 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -2,9 +2,9 @@ import {Parser as HtmlParser} from 'htmlparser2';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment} from '@components/Attachments/types';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import * as ReportUtils from '@libs/ReportUtils';
+import {getFileName, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
+import {getReportActionHtml, getReportActionMessage, getSortedReportActions, isMoneyRequestAction, shouldReportActionBeVisible} from '@libs/ReportActionsUtils';
+import {canUserPerformWriteAction as canUserPerformWriteActionUtil} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
 import type {Report, ReportAction, ReportActions} from '@src/types/onyx';
@@ -25,7 +25,7 @@ function extractAttachments(
 ) {
     const targetNote = privateNotes?.[Number(accountID)]?.note ?? '';
     const attachments: Attachment[] = [];
-    const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report);
+    const canUserPerformWriteAction = canUserPerformWriteActionUtil(report);
 
     let currentLink = '';
 
@@ -37,7 +37,7 @@ function extractAttachments(
             if (name === 'video') {
                 const source = tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]);
 
-                const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${source}`);
+                const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
                 attachments.unshift({
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE],
@@ -54,7 +54,7 @@ function extractAttachments(
                 const source = tryResolveUrlFromApiRoot(expensifySource || attribs.src);
                 const previewSource = tryResolveUrlFromApiRoot(attribs.src);
 
-                let fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${source}`);
+                let fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
 
                 const width = (attribs['data-expensify-width'] && parseInt(attribs['data-expensify-width'], 10)) || undefined;
                 const height = (attribs['data-expensify-height'] && parseInt(attribs['data-expensify-height'], 10)) || undefined;
@@ -62,7 +62,7 @@ function extractAttachments(
                 // Public image URLs might lack a file extension in the source URL, without an extension our
                 // AttachmentView fails to recognize them as images and renders fallback content instead.
                 // We apply this small hack to add an image extension and ensure AttachmentView renders the image.
-                const fileInfo = FileUtils.splitExtensionFromFileName(fileName);
+                const fileInfo = splitExtensionFromFileName(fileName);
                 if (!fileInfo.fileExtension) {
                     fileName = `${fileInfo.fileName || 'image'}.jpg`;
                 }
@@ -97,15 +97,15 @@ function extractAttachments(
         return attachments.reverse();
     }
 
-    const actions = [...(parentReportAction ? [parentReportAction] : []), ...ReportActionsUtils.getSortedReportActions(Object.values(reportActions ?? {}))];
+    const actions = [...(parentReportAction ? [parentReportAction] : []), ...getSortedReportActions(Object.values(reportActions ?? {}))];
     actions.forEach((action, key) => {
-        if (!ReportActionsUtils.shouldReportActionBeVisible(action, key, canUserPerformWriteAction) || ReportActionsUtils.isMoneyRequestAction(action)) {
+        if (!shouldReportActionBeVisible(action, key, canUserPerformWriteAction) || isMoneyRequestAction(action)) {
             return;
         }
 
-        const decision = ReportActionsUtils.getReportActionMessage(action)?.moderationDecision?.decision;
+        const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
-        const html = ReportActionsUtils.getReportActionHtml(action).replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        const html = getReportActionHtml(action).replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
         htmlParser.write(html);
     });
     htmlParser.end();
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index a5eeaa1fc4988..462384c1c324d 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -9,14 +9,14 @@ import {useOnyx} from 'react-native-onyx';
 import Animated, {scrollTo, useAnimatedRef, useSharedValue} from 'react-native-reanimated';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
-import * as Illustrations from '@components/Icon/Illustrations';
+import {ToddBehindCloud} from '@components/Icon/Illustrations';
 import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import {canUseTouchScreen as canUseTouchScreenUtil} from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -63,7 +63,7 @@ function AttachmentCarousel({report, reportActionID, source, onNavigate, setDown
     const pagerRef = useRef<GestureType>(null);
     const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`, {canEvict: false});
     const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, {canEvict: false});
-    const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
+    const canUseTouchScreen = canUseTouchScreenUtil();
 
     const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, true);
     const cellWidth = useMemo(
@@ -292,7 +292,7 @@ function AttachmentCarousel({report, reportActionID, source, onNavigate, setDown
         >
             {page === -1 ? (
                 <BlockingView
-                    icon={Illustrations.ToddBehindCloud}
+                    icon={ToddBehindCloud}
                     iconColor={theme.offline}
                     iconWidth={variables.modalTopIconWidth}
                     iconHeight={variables.modalTopIconHeight}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
index b72db964e50b8..d591f312b8126 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -4,16 +4,16 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {AttachmentContext} from '@components/AttachmentContext';
 import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
-import * as Expensicons from '@components/Icon/Expensicons';
+import {Document, GalleryNotFound} from '@components/Icon/Expensicons';
 import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import ThumbnailImage from '@components/ThumbnailImage';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {getFileName, getFileType, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as ReportUtils from '@libs/ReportUtils';
+import {isArchivedNonExpenseReport} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -70,12 +70,12 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const imageHeight = (htmlAttribs['data-expensify-height'] && parseInt(htmlAttribs['data-expensify-height'], 10)) || undefined;
     const imagePreviewModalDisabled = htmlAttribs['data-expensify-preview-modal-disabled'] === 'true';
 
-    const fileType = FileUtils.getFileType(attachmentSourceAttribute);
-    const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Expensicons.Document : Expensicons.GalleryNotFound;
+    const fileType = getFileType(attachmentSourceAttribute);
+    const fallbackIcon = fileType === CONST.ATTACHMENT_FILE_TYPE.FILE ? Document : GalleryNotFound;
     const theme = useTheme();
 
-    let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`);
-    const fileInfo = FileUtils.splitExtensionFromFileName(fileName);
+    let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`);
+    const fileInfo = splitExtensionFromFileName(fileName);
     if (!fileInfo.fileExtension) {
         fileName = `${fileInfo?.fileName || CONST.DEFAULT_IMAGE_FILE_NAME}.jpg`;
     }
@@ -117,14 +117,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 if (isDisabled) {
                                     return;
                                 }
-                                showContextMenuForReport(
-                                    event,
-                                    anchor,
-                                    report?.reportID,
-                                    action,
-                                    checkIfContextMenuActive,
-                                    ReportUtils.isArchivedNonExpenseReport(report, reportNameValuePairs),
-                                );
+                                showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, reportNameValuePairs));
                             }}
                             shouldUseHapticsOnLongPress
                             accessibilityRole={CONST.ROLE.BUTTON}
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
index 0516b7c4049c8..01f611ff43ad9 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -5,7 +5,7 @@ import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import VideoPlayerPreview from '@components/VideoPlayerPreview';
 import useCurrentReportID from '@hooks/useCurrentReportID';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {getFileName} from '@libs/fileDownload/FileUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import Navigation from '@navigation/Navigation';
 import CONST from '@src/CONST';
@@ -20,7 +20,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     const htmlAttribs = tnode.attributes;
     const attrHref = htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || htmlAttribs.src || htmlAttribs.href || '';
     const sourceURL = tryResolveUrlFromApiRoot(attrHref);
-    const fileName = FileUtils.getFileName(`${sourceURL}`);
+    const fileName = getFileName(`${sourceURL}`);
     const thumbnailUrl = tryResolveUrlFromApiRoot(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_URL_ATTRIBUTE]);
     const width = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_WIDTH_ATTRIBUTE]);
     const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);
@@ -36,7 +36,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                         <VideoPlayerPreview
                             key={key}
                             videoUrl={sourceURL}
-                            reportID={currentReportIDValue?.currentReportID ?? '-1'}
+                            reportID={currentReportIDValue?.currentReportID}
                             fileName={fileName}
                             thumbnailUrl={thumbnailUrl}
                             videoDimensions={{width, height}}
diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index fb188e5939494..484c79638d4f2 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -22,7 +22,7 @@ type VideoPlayerPreviewProps = {
     videoUrl: string;
 
     /** reportID of the video */
-    reportID: string;
+    reportID: string | undefined;
 
     /** Dimension of a video. */
     videoDimensions: VideoDimensions;
diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
index a634ee7da8429..ea2499e4a7e96 100644
--- a/src/pages/home/report/ReportAttachments.tsx
+++ b/src/pages/home/report/ReportAttachments.tsx
@@ -20,7 +20,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
     const accountID = route.params.accountID;
     const isAuthTokenRequired = route.params.isAuthTokenRequired;
     const attachmentLink = route.params.attachmentLink;
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || undefined}`);
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const fileName = route.params?.fileName;
 

From 0305da265ffc7c9dbc636d89a34684c84ff3eb91 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Mon, 3 Mar 2025 18:00:17 +0300
Subject: [PATCH 03/13] minor revert

---
 src/components/Attachments/AttachmentCarousel/Pager/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index eb681ba343d69..02d1475e69c59 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -130,6 +130,7 @@ function AttachmentCarouselPager(
             <CarouselItem
                 item={item}
                 isFocused={index === activePageIndex && activeSource === (item.reportActionID ?? item.source)}
+                reportID={reportID}
             />
         </View>
     ));

From 410351015a58fb59518a53582e0ce7f4b0e2db17 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Mon, 3 Mar 2025 18:25:12 +0300
Subject: [PATCH 04/13] update variable names

---
 .../Attachments/AttachmentCarousel/Pager/index.tsx        | 8 ++++----
 .../Attachments/AttachmentCarousel/index.native.tsx       | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index 02d1475e69c59..1be7685c84313 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -32,8 +32,8 @@ type AttachmentCarouselPagerProps = {
     /** The attachments to be rendered in the pager. */
     items: Attachment[];
 
-    /** The source (URL) of the currently active attachment. */
-    activeSource: AttachmentSource;
+    /** The source (URL) or the linked report action id of the currently active attachment. */
+    activeAttachmentID: AttachmentSource;
 
     /** The index of the initial page to be rendered. */
     initialPage: number;
@@ -58,7 +58,7 @@ type AttachmentCarouselPagerProps = {
 };
 
 function AttachmentCarouselPager(
-    {items, activeSource, initialPage, setShouldShowArrows, onPageSelected, onClose, reportID}: AttachmentCarouselPagerProps,
+    {items, activeAttachmentID, initialPage, setShouldShowArrows, onPageSelected, onClose, reportID}: AttachmentCarouselPagerProps,
     ref: ForwardedRef<AttachmentCarouselPagerHandle>,
 ) {
     const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
@@ -129,7 +129,7 @@ function AttachmentCarouselPager(
         >
             <CarouselItem
                 item={item}
-                isFocused={index === activePageIndex && activeSource === (item.reportActionID ?? item.source)}
+                isFocused={index === activePageIndex && activeAttachmentID === (item.reportActionID ?? item.source)}
                 reportID={reportID}
             />
         </View>
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 63af3d84e5e7e..dab50786e0e34 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -27,7 +27,7 @@ function AttachmentCarousel({report, source, reportActionID, onNavigate, setDown
     const [page, setPage] = useState<number>();
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
-    const [activeAttachment, setActiveAttachmentID] = useState<AttachmentSource | string>(reportActionID ?? source);
+    const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource | string>(reportActionID ?? source);
     const compareImage = useCallback((attachment: Attachment) => (reportActionID ? attachment.reportActionID === reportActionID : attachment.source === source), [reportActionID, source]);
 
     useEffect(() => {
@@ -142,7 +142,7 @@ function AttachmentCarousel({report, source, reportActionID, onNavigate, setDown
                     <AttachmentCarouselPager
                         items={attachments}
                         initialPage={page}
-                        activeSource={activeAttachment}
+                        activeAttachmentID={activeAttachmentID}
                         setShouldShowArrows={setShouldShowArrows}
                         onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
                         onClose={onClose}

From 4c2b419fcc836bd2a2e3ba78e588291bfb906262 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Mon, 10 Mar 2025 21:25:57 +0300
Subject: [PATCH 05/13] add report action id on video route

---
 .../Attachments/AttachmentCarousel/extractAttachments.ts     | 5 ++++-
 .../HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx       | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index 6208b841c762d..889748a024eb6 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -40,6 +40,7 @@ function extractAttachments(
 
                 const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
                 attachments.unshift({
+                    reportActionID: attribs['data-id'],
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE],
                     file: {name: fileName},
@@ -113,7 +114,9 @@ function extractAttachments(
 
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
-        const html = getReportActionHtml(action).replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        const html = getReportActionHtml(action)
+            .replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`)
+            .replace('<video ', `<video data-id="${action.reportActionID}" `);
         htmlParser.write(html);
     });
     htmlParser.end();
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
index 55a206bb818a0..5f9c69ebad996 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -28,7 +28,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
 
     return (
         <ShowContextMenuContext.Consumer>
-            {({report}) => (
+            {({report, action}) => (
                 <AttachmentContext.Consumer>
                     {({accountID, type}) => (
                         <VideoPlayerPreview
@@ -45,7 +45,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                                     return;
                                 }
                                 const isAuthTokenRequired = !!htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
-                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID, undefined, type, sourceURL, accountID, isAuthTokenRequired);
+                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID, action?.reportActionID, type, sourceURL, accountID, isAuthTokenRequired);
                                 Navigation.navigate(route);
                             }}
                         />

From b1d9d7a220920e033388a7b4e1b2a421ea61ca6b Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Tue, 11 Mar 2025 19:27:44 +0300
Subject: [PATCH 06/13] implement attachmentID approach

---
 src/ROUTES.ts                                    |  6 +++---
 src/components/AttachmentModal.tsx               |  8 ++++----
 .../AttachmentCarousel/Pager/index.tsx           |  4 ++--
 .../AttachmentCarousel/extractAttachments.ts     | 10 +++++++---
 .../AttachmentCarousel/index.native.tsx          |  8 ++++----
 .../Attachments/AttachmentCarousel/index.tsx     | 16 ++++++++--------
 .../Attachments/AttachmentCarousel/types.ts      |  4 ++--
 src/components/Attachments/types.ts              |  3 +++
 .../HTMLRenderers/ImageRenderer.tsx              |  3 ++-
 .../HTMLRenderers/VideoRenderer.tsx              |  5 +++--
 src/libs/Navigation/types.ts                     |  2 +-
 src/libs/ReportActionsUtils.ts                   | 10 ++++++++++
 .../home/report/ReportActionItemFragment.tsx     |  6 ++++++
 .../home/report/ReportActionItemMessage.tsx      |  1 +
 src/pages/home/report/ReportAttachments.tsx      |  6 +++---
 .../report/comment/AttachmentCommentFragment.tsx |  6 ++++--
 .../home/report/comment/TextCommentFragment.tsx  |  7 ++++++-
 17 files changed, 69 insertions(+), 36 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index d566bacc1d868..f3a90b3a8ebd7 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -360,7 +360,7 @@ const ROUTES = {
         route: 'attachment',
         getRoute: (
             reportID: string | undefined,
-            reportActionID: string | undefined,
+            attachmentID: string | undefined,
             type: ValueOf<typeof CONST.ATTACHMENT_TYPE>,
             url: string,
             accountID?: number,
@@ -373,11 +373,11 @@ const ROUTES = {
             const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : '';
             const fileNameParam = fileName ? `&fileName=${fileName}` : '';
             const attachmentLinkParam = attachmentLink ? `&attachmentLink=${attachmentLink}` : '';
-            const reportActionParam = reportActionID ? `&reportActionID=${reportActionID}` : '';
+            const attachmentIDParam = attachmentID ? `&attachmentID=${attachmentID}` : '';
 
             return `attachment?source=${encodeURIComponent(url)}&type=${
                 type as string
-            }${reportParam}${reportActionParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
+            }${reportParam}${attachmentIDParam}${accountParam}${authTokenParam}${fileNameParam}${attachmentLinkParam}` as const;
         },
     },
     REPORT_PARTICIPANTS: {
diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 06d1987d8e3cd..f4f54d7a5295b 100644
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -69,8 +69,8 @@ type AttachmentModalProps = {
     /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */
     source?: AvatarSource;
 
-    /** The report action id linked to the attachment. */
-    reportActionID?: string;
+    /** The id of the attachment. */
+    attachmentID?: string;
 
     /** Optional callback to fire when we want to preview an image and approve it for use. */
     onConfirm?: ((file: FileObject) => void) | null;
@@ -167,7 +167,7 @@ function AttachmentModal({
     isLoading = false,
     shouldShowNotFoundPage = false,
     type = undefined,
-    reportActionID,
+    attachmentID,
     accountID = undefined,
     shouldDisableSendButton = false,
     attachmentLink = '',
@@ -561,7 +561,7 @@ function AttachmentModal({
                                 <AttachmentCarousel
                                     accountID={accountID}
                                     type={type}
-                                    reportActionID={reportActionID}
+                                    attachmentID={attachmentID}
                                     report={report}
                                     onNavigate={onNavigate}
                                     onClose={closeModal}
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index 1be7685c84313..f76b9471b97c9 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -88,7 +88,7 @@ function AttachmentCarouselPager(
         [activePageIndex, items],
     );
 
-    const extractItemKey = useCallback((item: Attachment, index: number) => `reportActionID-${item.reportActionID}-${index}`, []);
+    const extractItemKey = useCallback((item: Attachment, index: number) => `attachmentID-${item.attachmentID}-${index}`, []);
 
     const contextValue = useMemo(
         () => ({
@@ -129,7 +129,7 @@ function AttachmentCarouselPager(
         >
             <CarouselItem
                 item={item}
-                isFocused={index === activePageIndex && activeAttachmentID === (item.reportActionID ?? item.source)}
+                isFocused={index === activePageIndex && activeAttachmentID === (item.attachmentID ?? item.source)}
                 reportID={reportID}
             />
         </View>
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index 889748a024eb6..f8be0c1b6a6a1 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -29,7 +29,7 @@ function extractAttachments(
     const canUserPerformAction = canUserPerformWriteAction(report);
 
     let currentLink = '';
-
+    let attachmentIndex = 0;
     const htmlParser = new HtmlParser({
         onopentag: (name, attribs) => {
             if (name === 'a' && attribs.href) {
@@ -41,6 +41,7 @@ function extractAttachments(
                 const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
                 attachments.unshift({
                     reportActionID: attribs['data-id'],
+                    attachmentID: `${attribs['data-id']}_${++attachmentIndex}`,
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE],
                     file: {name: fileName},
@@ -73,6 +74,7 @@ function extractAttachments(
                 // we ensure correct order of attachments even across actions with multiple attachments.
                 attachments.unshift({
                     reportActionID: attribs['data-id'],
+                    attachmentID: `${attribs['data-id']}_${++attachmentIndex}`,
                     source,
                     previewSource,
                     isAuthTokenRequired: !!expensifySource,
@@ -115,8 +117,10 @@ function extractAttachments(
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
         const html = getReportActionHtml(action)
-            .replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`)
-            .replace('<video ', `<video data-id="${action.reportActionID}" `);
+            .replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`)
+            .replaceAll('<video ', `<video data-id="${action.reportActionID}" `);
+        // We need to reset attachment index before starting parsing each report actions.
+        attachmentIndex = 0;
         htmlParser.write(html);
     });
     htmlParser.end();
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index e381d046c033d..fed6328c972dd 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -18,7 +18,7 @@ import AttachmentCarouselPager from './Pager';
 import type {AttachmentCarouselProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, source, reportActionID, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, source, attachmentID, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
@@ -27,8 +27,8 @@ function AttachmentCarousel({report, source, reportActionID, onNavigate, setDown
     const [page, setPage] = useState<number>();
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
-    const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource | string>(reportActionID ?? source);
-    const compareImage = useCallback((attachment: Attachment) => (reportActionID ? attachment.reportActionID === reportActionID : attachment.source === source), [reportActionID, source]);
+    const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource | string>(attachmentID ?? source);
+    const compareImage = useCallback((attachment: Attachment) => (attachmentID ? attachment.attachmentID === attachmentID : attachment.source === source), [attachmentID, source]);
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
@@ -82,7 +82,7 @@ function AttachmentCarousel({report, source, reportActionID, onNavigate, setDown
 
             setPage(newPageIndex);
             if (newPageIndex >= 0 && item) {
-                setActiveAttachmentID(item.reportActionID ?? item.source);
+                setActiveAttachmentID(item.attachmentID ?? item.source);
                 if (onNavigate) {
                     onNavigate(item);
                 }
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index e0c61dc0c7ece..92f8b4bd9cdaf 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -51,7 +51,7 @@ function DeviceAwareGestureDetector({canUseTouchScreen, gesture, children}: Devi
     return canUseTouchScreen ? <GestureDetector gesture={gesture}>{children}</GestureDetector> : children;
 }
 
-function AttachmentCarousel({report, reportActionID, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose, attachmentLink}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, attachmentID, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose, attachmentLink}: AttachmentCarouselProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -72,7 +72,7 @@ function AttachmentCarousel({report, reportActionID, source, onNavigate, setDown
     );
     const [page, setPage] = useState(0);
     const [attachments, setAttachments] = useState<Attachment[]>([]);
-    const [activeAttachmentID, setActiveAttachmentID] = useState<string | AttachmentSource | null>(reportActionID ?? source);
+    const [activeAttachmentID, setActiveAttachmentID] = useState<string | AttachmentSource | null>(attachmentID ?? source);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
     const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
 
@@ -85,8 +85,8 @@ function AttachmentCarousel({report, reportActionID, source, onNavigate, setDown
 
     const compareImage = useCallback(
         (attachment: Attachment) =>
-            (reportActionID ? attachment.reportActionID === reportActionID : attachment.source === source) && (!attachmentLink || attachment.attachmentLink === attachmentLink),
-        [attachmentLink, reportActionID, source],
+            (attachmentID ? attachment.attachmentID === attachmentID : attachment.source === source) && (!attachmentLink || attachment.attachmentLink === attachmentLink),
+        [attachmentLink, attachmentID, source],
     );
 
     useEffect(() => {
@@ -169,7 +169,7 @@ function AttachmentCarousel({report, reportActionID, source, onNavigate, setDown
             const item = entry.item as Attachment;
             if (entry.index !== null) {
                 setPage(entry.index);
-                setActiveAttachmentID(item.reportActionID ?? item.source);
+                setActiveAttachmentID(item.attachmentID ?? item.source);
             }
 
             if (onNavigate) {
@@ -200,8 +200,8 @@ function AttachmentCarousel({report, reportActionID, source, onNavigate, setDown
 
     const extractItemKey = useCallback(
         (item: Attachment) =>
-            !!item.reportActionID || (typeof item.source !== 'string' && typeof item.source !== 'number')
-                ? `reportActionID-${item.reportActionID}`
+            !!item.attachmentID || (typeof item.source !== 'string' && typeof item.source !== 'number')
+                ? `attachmentID-${item.attachmentID}`
                 : `source-${item.source}|${item.attachmentLink}`,
         [],
     );
@@ -236,7 +236,7 @@ function AttachmentCarousel({report, reportActionID, source, onNavigate, setDown
             <View style={[styles.h100, {width: cellWidth}]}>
                 <CarouselItem
                     item={item}
-                    isFocused={activeAttachmentID === (item.reportActionID ?? item.source)}
+                    isFocused={activeAttachmentID === (item.attachmentID ?? item.source)}
                     onPress={canUseTouchScreen ? handleTap : undefined}
                     isModalHovered={shouldShowArrows}
                     reportID={report.reportID}
diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts
index bbc599e2929d6..ad26521e4cd12 100644
--- a/src/components/Attachments/AttachmentCarousel/types.ts
+++ b/src/components/Attachments/AttachmentCarousel/types.ts
@@ -12,8 +12,8 @@ type AttachmentCarouselProps = {
     /** Source is used to determine the starting index in the array of attachments */
     source: AttachmentSource;
 
-    /** The report action id linked to the current active attachment */
-    reportActionID?: string;
+    /** The id of the current active attachment */
+    attachmentID?: string;
 
     /** Callback to update the parent modal's state with a source and name from the attachments array */
     onNavigate?: (attachment: Attachment) => void;
diff --git a/src/components/Attachments/types.ts b/src/components/Attachments/types.ts
index 88b8420745eb6..44e4968c3ffa8 100644
--- a/src/components/Attachments/types.ts
+++ b/src/components/Attachments/types.ts
@@ -7,6 +7,9 @@ type Attachment = {
     /** Report action ID of the attachment */
     reportActionID?: string;
 
+    /** The attachment id, which is the id of the report action it is in appended with its attachment index. */
+    attachmentID?: string;
+
     /** Whether source url requires authentication */
     isAuthTokenRequired?: boolean;
 
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
index 78fff0fcee197..cdd8710d446df 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -57,6 +57,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const attachmentSourceAttribute =
         htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] ?? (new RegExp(CONST.ATTACHMENT_OR_RECEIPT_LOCAL_URL, 'i').test(htmlAttribs.src) ? htmlAttribs.src : null);
     const isAttachmentOrReceipt = !!attachmentSourceAttribute;
+    const attachmentID = htmlAttribs['data-attachment-id'];
 
     // Files created/uploaded/hosted by App should resolve from API ROOT. Other URLs aren't modified
     const previewSource = tryResolveUrlFromApiRoot(htmlAttribs.src);
@@ -111,7 +112,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 }
 
                                 const attachmentLink = tnode.parent?.attributes?.href;
-                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID, action?.reportActionID, type, source, accountID, isAttachmentOrReceipt, fileName, attachmentLink);
+                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID, attachmentID, type, source, accountID, isAttachmentOrReceipt, fileName, attachmentLink);
                                 Navigation.navigate(route);
                             }}
                             onLongPress={(event) => {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
index 5f9c69ebad996..e18973d5335ae 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -25,10 +25,11 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);
     const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]);
     const isDeleted = isDeletedNode(tnode);
+    const attachmentID = htmlAttribs['data-attachment-id'];
 
     return (
         <ShowContextMenuContext.Consumer>
-            {({report, action}) => (
+            {({report}) => (
                 <AttachmentContext.Consumer>
                     {({accountID, type}) => (
                         <VideoPlayerPreview
@@ -45,7 +46,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                                     return;
                                 }
                                 const isAuthTokenRequired = !!htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
-                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID, action?.reportActionID, type, sourceURL, accountID, isAuthTokenRequired);
+                                const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID, attachmentID, type, sourceURL, accountID, isAuthTokenRequired);
                                 Navigation.navigate(route);
                             }}
                         />
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 6a16a8993f027..f26228a3d6dcb 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -1782,7 +1782,7 @@ type AuthScreensParamList = SharedScreensParamList & {
     [SCREENS.SUBMIT_EXPENSE]: undefined;
     [SCREENS.ATTACHMENTS]: {
         reportID: string;
-        reportActionID?: string;
+        attachmentID?: string;
         source: string;
         type: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
         accountID: string;
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 592cae57daf3d..417e9c4c685c6 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -162,6 +162,15 @@ function isDeletedAction(reportAction: OnyxInputOrEntry<ReportAction | Optimisti
     return isLegacyDeletedComment || !!message.at(0)?.deleted;
 }
 
+function addAttachmentID(html: string, reportActionID: string | undefined) {
+    if (!reportActionID) {
+        return html;
+    }
+
+    let attachmentID = 0;
+    return html.replace(/<img|<video/g, (m) => m.concat(` data-attachment-id="${reportActionID}_${++attachmentID}"`));
+}
+
 function getReportActionMessage(reportAction: PartialReportAction) {
     return Array.isArray(reportAction?.message) ? reportAction.message.at(0) : reportAction?.message;
 }
@@ -2217,6 +2226,7 @@ export {
     extractLinksFromMessageHtml,
     formatLastMessageText,
     isReportActionUnread,
+    addAttachmentID,
     getActionableMentionWhisperMessage,
     getAllReportActions,
     getCombinedReportActions,
diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx
index 50721a5ffcad0..4309de088b320 100644
--- a/src/pages/home/report/ReportActionItemFragment.tsx
+++ b/src/pages/home/report/ReportActionItemFragment.tsx
@@ -20,6 +20,9 @@ type ReportActionItemFragmentProps = {
     /** Users accountID */
     accountID: number;
 
+    /** The report action's id */
+    reportActionID: string;
+
     /** The message fragment needing to be displayed */
     fragment: Message | undefined;
 
@@ -76,6 +79,7 @@ const MUTED_ACTIONS = [
 ] as ReportActionName[];
 
 function ReportActionItemFragment({
+    reportActionID,
     pendingAction,
     actionName,
     fragment,
@@ -116,6 +120,7 @@ function ReportActionItemFragment({
             if (isReportMessageAttachment(fragment)) {
                 return (
                     <AttachmentCommentFragment
+                        reportActionID={reportActionID}
                         source={source}
                         html={fragment?.html ?? ''}
                         addExtraMargin={!displayAsGroup}
@@ -126,6 +131,7 @@ function ReportActionItemFragment({
 
             return (
                 <TextCommentFragment
+                    reportActionID={reportActionID}
                     source={source}
                     fragment={fragment}
                     styleAsDeleted={!!(isOffline && isPendingDelete)}
diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx
index f36048ee21257..e62fe08dbce6e 100644
--- a/src/pages/home/report/ReportActionItemMessage.tsx
+++ b/src/pages/home/report/ReportActionItemMessage.tsx
@@ -109,6 +109,7 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
             <ReportActionItemFragment
                 /* eslint-disable-next-line react/no-array-index-key */
                 key={`actionFragment-${action.reportActionID}-${index}`}
+                reportActionID={action.reportActionID}
                 fragment={fragment}
                 iouMessage={iouMessage}
                 isThreadParentMessage={isThreadParentMessage(action, reportID)}
diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
index ea2499e4a7e96..d5d45f2803f36 100644
--- a/src/pages/home/report/ReportAttachments.tsx
+++ b/src/pages/home/report/ReportAttachments.tsx
@@ -15,7 +15,7 @@ type ReportAttachmentsProps = PlatformStackScreenProps<AuthScreensParamList, typ
 
 function ReportAttachments({route}: ReportAttachmentsProps) {
     const reportID = route.params.reportID;
-    const reportActionID = route.params.reportActionID;
+    const attachmentID = route.params.attachmentID;
     const type = route.params.type;
     const accountID = route.params.accountID;
     const isAuthTokenRequired = route.params.isAuthTokenRequired;
@@ -31,7 +31,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
         (attachment: Attachment) => {
             const routeToNavigate = ROUTES.ATTACHMENTS.getRoute(
                 reportID,
-                attachment.reportActionID,
+                attachment.attachmentID,
                 type,
                 String(attachment.source),
                 Number(accountID),
@@ -51,7 +51,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) {
             allowDownload
             defaultOpen
             report={report}
-            reportActionID={reportActionID}
+            attachmentID={attachmentID}
             source={source}
             onModalClose={() => {
                 Navigation.dismissModal();
diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.tsx b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
index 9f70f03f352b0..2deea3bc69f73 100644
--- a/src/pages/home/report/comment/AttachmentCommentFragment.tsx
+++ b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {addAttachmentID} from '@libs/ReportActionsUtils';
 import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 import RenderCommentHTML from './RenderCommentHTML';
 
@@ -8,12 +9,13 @@ type AttachmentCommentFragmentProps = {
     source: OriginalMessageSource;
     html: string;
     addExtraMargin: boolean;
+    reportActionID: string;
     styleAsDeleted: boolean;
 };
 
-function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted}: AttachmentCommentFragmentProps) {
+function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted, reportActionID}: AttachmentCommentFragmentProps) {
     const styles = useThemeStyles();
-    const htmlContent = styleAsDeleted ? `<del>${html}</del>` : html;
+    const htmlContent = addAttachmentID(styleAsDeleted ? `<del>${html}</del>` : html, reportActionID);
 
     return (
         <View style={addExtraMargin ? styles.mt2 : {}}>
diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
index f8ea9b56871f1..fcbe898b84511 100644
--- a/src/pages/home/report/comment/TextCommentFragment.tsx
+++ b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -26,6 +26,9 @@ type TextCommentFragmentProps = {
     /** The reportAction's source */
     source: OriginalMessageSource;
 
+    /** The report action's id */
+    reportActionID: string;
+
     /** The message fragment needing to be displayed */
     fragment: Message | undefined;
 
@@ -45,7 +48,7 @@ type TextCommentFragmentProps = {
     iouMessage?: string;
 };
 
-function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) {
+function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsMuted = false, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {html = ''} = fragment ?? {};
@@ -84,6 +87,8 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
             htmlWithTag = `<muted-text>${htmlWithTag}<muted-text>`;
         }
 
+        htmlWithTag = ReportActionsUtils.addAttachmentID(htmlWithTag, reportActionID);
+
         return (
             <RenderCommentHTML
                 containsOnlyEmojis={containsOnlyEmojis}

From 1819a6901ce2373eb8ef1b6910b0871ef968c647 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Tue, 11 Mar 2025 19:37:42 +0300
Subject: [PATCH 07/13] lint fix

---
 .../home/report/ReportActionItemFragment.tsx  |  2 +-
 .../comment/AttachmentCommentFragment.tsx     |  2 +-
 .../report/comment/TextCommentFragment.tsx    | 20 +++++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx
index 4309de088b320..25058e16400ee 100644
--- a/src/pages/home/report/ReportActionItemFragment.tsx
+++ b/src/pages/home/report/ReportActionItemFragment.tsx
@@ -21,7 +21,7 @@ type ReportActionItemFragmentProps = {
     accountID: number;
 
     /** The report action's id */
-    reportActionID: string;
+    reportActionID?: string;
 
     /** The message fragment needing to be displayed */
     fragment: Message | undefined;
diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.tsx b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
index 2deea3bc69f73..c662e197899ac 100644
--- a/src/pages/home/report/comment/AttachmentCommentFragment.tsx
+++ b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
@@ -9,7 +9,7 @@ type AttachmentCommentFragmentProps = {
     source: OriginalMessageSource;
     html: string;
     addExtraMargin: boolean;
-    reportActionID: string;
+    reportActionID?: string;
     styleAsDeleted: boolean;
 };
 
diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
index fcbe898b84511..095af7c6dd908 100644
--- a/src/pages/home/report/comment/TextCommentFragment.tsx
+++ b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -9,10 +9,10 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import convertToLTR from '@libs/convertToLTR';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import * as EmojiUtils from '@libs/EmojiUtils';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {containsOnlyEmojis as containsOnlyEmojisUtil, splitTextWithEmojis} from '@libs/EmojiUtils';
 import Performance from '@libs/Performance';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import {addAttachmentID, getTextFromHtml} from '@libs/ReportActionsUtils';
 import variables from '@styles/variables';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
@@ -27,7 +27,7 @@ type TextCommentFragmentProps = {
     source: OriginalMessageSource;
 
     /** The report action's id */
-    reportActionID: string;
+    reportActionID?: string;
 
     /** The message fragment needing to be displayed */
     fragment: Message | undefined;
@@ -52,13 +52,13 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
     const theme = useTheme();
     const styles = useThemeStyles();
     const {html = ''} = fragment ?? {};
-    const text = ReportActionsUtils.getTextFromHtml(html);
+    const text = getTextFromHtml(html);
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const message = isEmpty(iouMessage) ? text : iouMessage;
 
-    const processedTextArray = useMemo(() => EmojiUtils.splitTextWithEmojis(message), [message]);
+    const processedTextArray = useMemo(() => splitTextWithEmojis(message), [message]);
 
     useEffect(() => {
         Performance.markEnd(CONST.TIMING.SEND_MESSAGE, {message: text});
@@ -68,7 +68,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
     // If the only difference between fragment.text and fragment.html is <br /> tags and emoji tag
     // on native, we render it as text, not as html
     // on other device, only render it as text if the only difference is <br /> tag
-    const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text ?? '');
+    const containsOnlyEmojis = containsOnlyEmojisUtil(text ?? '');
     const containsEmojis = CONST.REGEX.ALL_EMOJIS.test(text ?? '');
     if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted)) {
         const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
@@ -87,7 +87,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
             htmlWithTag = `<muted-text>${htmlWithTag}<muted-text>`;
         }
 
-        htmlWithTag = ReportActionsUtils.addAttachmentID(htmlWithTag, reportActionID);
+        htmlWithTag = addAttachmentID(htmlWithTag, reportActionID);
 
         return (
             <RenderCommentHTML
@@ -112,7 +112,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
                         style,
                         styleAsDeleted ? styles.offlineFeedback.deleted : undefined,
                         styleAsMuted ? styles.colorMuted : undefined,
-                        !DeviceCapabilities.canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone,
+                        !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone,
                     ]}
                 />
             ) : (
@@ -123,7 +123,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
                         style,
                         styleAsDeleted ? styles.offlineFeedback.deleted : undefined,
                         styleAsMuted ? styles.colorMuted : undefined,
-                        !DeviceCapabilities.canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone,
+                        !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone,
                     ]}
                 >
                     {convertToLTR(message ?? '')}

From a52d41c35881520fe5cbf828f0857c3ded018253 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Thu, 13 Mar 2025 23:01:16 +0300
Subject: [PATCH 08/13] refactor code

---
 .../AttachmentCarousel/Pager/index.tsx           |  2 +-
 .../AttachmentCarousel/extractAttachments.ts     | 16 +++++-----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index f76b9471b97c9..1a16f1ae35b9b 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -32,7 +32,7 @@ type AttachmentCarouselPagerProps = {
     /** The attachments to be rendered in the pager. */
     items: Attachment[];
 
-    /** The source (URL) or the linked report action id of the currently active attachment. */
+    /** The id of the currently active attachment. */
     activeAttachmentID: AttachmentSource;
 
     /** The index of the initial page to be rendered. */
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index f8be0c1b6a6a1..3e8632dabe988 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -3,7 +3,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment} from '@components/Attachments/types';
 import {getFileName, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
-import {getReportActionHtml, getReportActionMessage, getSortedReportActions, isMoneyRequestAction, shouldReportActionBeVisible} from '@libs/ReportActionsUtils';
+import {addAttachmentID, getReportActionHtml, getReportActionMessage, getSortedReportActions, isMoneyRequestAction, shouldReportActionBeVisible} from '@libs/ReportActionsUtils';
 import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
@@ -29,7 +29,6 @@ function extractAttachments(
     const canUserPerformAction = canUserPerformWriteAction(report);
 
     let currentLink = '';
-    let attachmentIndex = 0;
     const htmlParser = new HtmlParser({
         onopentag: (name, attribs) => {
             if (name === 'a' && attribs.href) {
@@ -40,8 +39,7 @@ function extractAttachments(
 
                 const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
                 attachments.unshift({
-                    reportActionID: attribs['data-id'],
-                    attachmentID: `${attribs['data-id']}_${++attachmentIndex}`,
+                    attachmentID: attribs['data-attachment-id'],
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE],
                     file: {name: fileName},
@@ -74,7 +72,7 @@ function extractAttachments(
                 // we ensure correct order of attachments even across actions with multiple attachments.
                 attachments.unshift({
                     reportActionID: attribs['data-id'],
-                    attachmentID: `${attribs['data-id']}_${++attachmentIndex}`,
+                    attachmentID: attribs['data-attachment-id'],
                     source,
                     previewSource,
                     isAuthTokenRequired: !!expensifySource,
@@ -116,12 +114,8 @@ function extractAttachments(
 
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
-        const html = getReportActionHtml(action)
-            .replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`)
-            .replaceAll('<video ', `<video data-id="${action.reportActionID}" `);
-        // We need to reset attachment index before starting parsing each report actions.
-        attachmentIndex = 0;
-        htmlParser.write(html);
+        const html = getReportActionHtml(action).replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        htmlParser.write(addAttachmentID(html, action.reportActionID));
     });
     htmlParser.end();
 

From 805681e0214ff43325f8e2c2ec198b151b4a9978 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Thu, 13 Mar 2025 23:10:57 +0300
Subject: [PATCH 09/13] minor fix

---
 .../Attachments/AttachmentCarousel/extractAttachments.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index 3e8632dabe988..a9e2dd6c444f0 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -27,8 +27,8 @@ function extractAttachments(
     const description = report?.description ?? '';
     const attachments: Attachment[] = [];
     const canUserPerformAction = canUserPerformWriteAction(report);
-
     let currentLink = '';
+
     const htmlParser = new HtmlParser({
         onopentag: (name, attribs) => {
             if (name === 'a' && attribs.href) {

From 4529fa11442d8b48aa31829a37163abd290a6d33 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Fri, 21 Mar 2025 21:23:41 +0300
Subject: [PATCH 10/13] add flag to all attachments in a report action

---
 .../Attachments/AttachmentCarousel/extractAttachments.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index a9e2dd6c444f0..ef4a41e813ea2 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -114,7 +114,7 @@ function extractAttachments(
 
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
-        const html = getReportActionHtml(action).replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        const html = getReportActionHtml(action).replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
         htmlParser.write(addAttachmentID(html, action.reportActionID));
     });
     htmlParser.end();

From c74a7db322d3d4896736a116296f75dcdb06c1c6 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Wed, 26 Mar 2025 20:14:10 +0300
Subject: [PATCH 11/13] update on the comments

---
 src/CONST.ts                                          |  1 +
 .../Attachments/AttachmentCarousel/Pager/index.tsx    |  2 +-
 .../AttachmentCarousel/extractAttachments.ts          |  8 ++++----
 .../Attachments/AttachmentCarousel/index.native.tsx   |  2 +-
 .../Attachments/AttachmentCarousel/index.tsx          |  2 +-
 src/components/Attachments/types.ts                   |  2 +-
 .../HTMLRenderers/ImageRenderer.tsx                   |  2 +-
 .../HTMLRenderers/VideoRenderer.tsx                   |  2 +-
 src/libs/ReportActionsUtils.ts                        | 11 ++++++++---
 .../home/report/comment/AttachmentCommentFragment.tsx |  4 ++--
 src/pages/home/report/comment/TextCommentFragment.tsx |  4 ++--
 11 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 6de65ae74f63f..e23a8a6a4f49b 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1784,6 +1784,7 @@ const CONST = {
 
     ATTACHMENT_MESSAGE_TEXT: '[Attachment]',
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',
+    ATTACHMENT_ID_ATTRIBUTE: 'data-attachment-id',
     ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE: 'data-optimistic-src',
     ATTACHMENT_PREVIEW_ATTRIBUTE: 'src',
     ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE: 'data-name',
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index 1a16f1ae35b9b..dac7a71cfd1ce 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -32,7 +32,7 @@ type AttachmentCarouselPagerProps = {
     /** The attachments to be rendered in the pager. */
     items: Attachment[];
 
-    /** The id of the currently active attachment. */
+    /** The id or source (URL) of the currently active attachment. */
     activeAttachmentID: AttachmentSource;
 
     /** The index of the initial page to be rendered. */
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index ef4a41e813ea2..75d00d1520389 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -3,7 +3,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment} from '@components/Attachments/types';
 import {getFileName, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
-import {addAttachmentID, getReportActionHtml, getReportActionMessage, getSortedReportActions, isMoneyRequestAction, shouldReportActionBeVisible} from '@libs/ReportActionsUtils';
+import {addAttachmentIDOnHtml, getReportActionHtml, getReportActionMessage, getSortedReportActions, isMoneyRequestAction, shouldReportActionBeVisible} from '@libs/ReportActionsUtils';
 import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
@@ -39,7 +39,7 @@ function extractAttachments(
 
                 const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
                 attachments.unshift({
-                    attachmentID: attribs['data-attachment-id'],
+                    attachmentID: attribs[CONST.ATTACHMENT_ID_ATTRIBUTE],
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE],
                     file: {name: fileName},
@@ -72,7 +72,7 @@ function extractAttachments(
                 // we ensure correct order of attachments even across actions with multiple attachments.
                 attachments.unshift({
                     reportActionID: attribs['data-id'],
-                    attachmentID: attribs['data-attachment-id'],
+                    attachmentID: attribs[CONST.ATTACHMENT_ID_ATTRIBUTE],
                     source,
                     previewSource,
                     isAuthTokenRequired: !!expensifySource,
@@ -115,7 +115,7 @@ function extractAttachments(
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
         const html = getReportActionHtml(action).replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
-        htmlParser.write(addAttachmentID(html, action.reportActionID));
+        htmlParser.write(addAttachmentIDOnHtml(html, action.reportActionID));
     });
     htmlParser.end();
 
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index fed6328c972dd..4d81fda91494a 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -27,7 +27,7 @@ function AttachmentCarousel({report, source, attachmentID, onNavigate, setDownlo
     const [page, setPage] = useState<number>();
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
-    const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource | string>(attachmentID ?? source);
+    const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource>(attachmentID ?? source);
     const compareImage = useCallback((attachment: Attachment) => (attachmentID ? attachment.attachmentID === attachmentID : attachment.source === source), [attachmentID, source]);
 
     useEffect(() => {
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 92f8b4bd9cdaf..b3ec149db908b 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -72,7 +72,7 @@ function AttachmentCarousel({report, attachmentID, source, onNavigate, setDownlo
     );
     const [page, setPage] = useState(0);
     const [attachments, setAttachments] = useState<Attachment[]>([]);
-    const [activeAttachmentID, setActiveAttachmentID] = useState<string | AttachmentSource | null>(attachmentID ?? source);
+    const [activeAttachmentID, setActiveAttachmentID] = useState<AttachmentSource | null>(attachmentID ?? source);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
     const {handleTap, handleScaleChange, isScrollEnabled} = useCarouselContextEvents(setShouldShowArrows);
 
diff --git a/src/components/Attachments/types.ts b/src/components/Attachments/types.ts
index 44e4968c3ffa8..f394799dfce40 100644
--- a/src/components/Attachments/types.ts
+++ b/src/components/Attachments/types.ts
@@ -7,7 +7,7 @@ type Attachment = {
     /** Report action ID of the attachment */
     reportActionID?: string;
 
-    /** The attachment id, which is the id of the report action it is in appended with its attachment index. */
+    /** The attachment id, which is the concatenation of the report action id it is in and its order index within that report action. */
     attachmentID?: string;
 
     /** Whether source url requires authentication */
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
index cdd8710d446df..4d89c7f9b83e8 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -57,7 +57,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const attachmentSourceAttribute =
         htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] ?? (new RegExp(CONST.ATTACHMENT_OR_RECEIPT_LOCAL_URL, 'i').test(htmlAttribs.src) ? htmlAttribs.src : null);
     const isAttachmentOrReceipt = !!attachmentSourceAttribute;
-    const attachmentID = htmlAttribs['data-attachment-id'];
+    const attachmentID = htmlAttribs[CONST.ATTACHMENT_ID_ATTRIBUTE];
 
     // Files created/uploaded/hosted by App should resolve from API ROOT. Other URLs aren't modified
     const previewSource = tryResolveUrlFromApiRoot(htmlAttribs.src);
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
index e18973d5335ae..9fcd647a07e78 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -25,7 +25,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);
     const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]);
     const isDeleted = isDeletedNode(tnode);
-    const attachmentID = htmlAttribs['data-attachment-id'];
+    const attachmentID = htmlAttribs[CONST.ATTACHMENT_ID_ATTRIBUTE];
 
     return (
         <ShowContextMenuContext.Consumer>
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 4baa5c1347631..c98ffb3b82300 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -162,13 +162,18 @@ function isDeletedAction(reportAction: OnyxInputOrEntry<ReportAction | Optimisti
     return isLegacyDeletedComment || !!message.at(0)?.deleted;
 }
 
-function addAttachmentID(html: string, reportActionID: string | undefined) {
+/**
+ * This function will add attachment ID attribute on img and video attachments inside the passed html content
+ * of a report action. This attachment id is the reportActionID concatenated with the order index that the attachment
+ * appears inside the report action message so as to identify attachments with identical source inside a report action.
+ */
+function addAttachmentIDOnHtml(html: string, reportActionID: string | undefined) {
     if (!reportActionID) {
         return html;
     }
 
     let attachmentID = 0;
-    return html.replace(/<img|<video/g, (m) => m.concat(` data-attachment-id="${reportActionID}_${++attachmentID}"`));
+    return html.replace(/<img|<video/g, (m) => m.concat(` ${CONST.ATTACHMENT_ID_ATTRIBUTE}="${reportActionID}_${++attachmentID}"`));
 }
 
 function getReportActionMessage(reportAction: PartialReportAction) {
@@ -2296,7 +2301,7 @@ export {
     extractLinksFromMessageHtml,
     formatLastMessageText,
     isReportActionUnread,
-    addAttachmentID,
+    addAttachmentIDOnHtml,
     getActionableMentionWhisperMessage,
     getAllReportActions,
     getCombinedReportActions,
diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.tsx b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
index c662e197899ac..c91031ac261b2 100644
--- a/src/pages/home/report/comment/AttachmentCommentFragment.tsx
+++ b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {addAttachmentID} from '@libs/ReportActionsUtils';
+import {addAttachmentIDOnHtml} from '@libs/ReportActionsUtils';
 import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 import RenderCommentHTML from './RenderCommentHTML';
 
@@ -15,7 +15,7 @@ type AttachmentCommentFragmentProps = {
 
 function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted, reportActionID}: AttachmentCommentFragmentProps) {
     const styles = useThemeStyles();
-    const htmlContent = addAttachmentID(styleAsDeleted ? `<del>${html}</del>` : html, reportActionID);
+    const htmlContent = addAttachmentIDOnHtml(styleAsDeleted ? `<del>${html}</del>` : html, reportActionID);
 
     return (
         <View style={addExtraMargin ? styles.mt2 : {}}>
diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
index 095af7c6dd908..712bae89035eb 100644
--- a/src/pages/home/report/comment/TextCommentFragment.tsx
+++ b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -12,7 +12,7 @@ import convertToLTR from '@libs/convertToLTR';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {containsOnlyEmojis as containsOnlyEmojisUtil, splitTextWithEmojis} from '@libs/EmojiUtils';
 import Performance from '@libs/Performance';
-import {addAttachmentID, getTextFromHtml} from '@libs/ReportActionsUtils';
+import {addAttachmentIDOnHtml, getTextFromHtml} from '@libs/ReportActionsUtils';
 import variables from '@styles/variables';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
@@ -87,7 +87,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
             htmlWithTag = `<muted-text>${htmlWithTag}<muted-text>`;
         }
 
-        htmlWithTag = addAttachmentID(htmlWithTag, reportActionID);
+        htmlWithTag = addAttachmentIDOnHtml(htmlWithTag, reportActionID);
 
         return (
             <RenderCommentHTML

From 8d47d6fe80500e8820482b30d667c551bae28ed3 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Wed, 26 Mar 2025 20:46:38 +0300
Subject: [PATCH 12/13] update the regex

---
 src/libs/ReportActionsUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index c98ffb3b82300..9dfcc5c8dfd62 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -173,7 +173,7 @@ function addAttachmentIDOnHtml(html: string, reportActionID: string | undefined)
     }
 
     let attachmentID = 0;
-    return html.replace(/<img|<video/g, (m) => m.concat(` ${CONST.ATTACHMENT_ID_ATTRIBUTE}="${reportActionID}_${++attachmentID}"`));
+    return html.replace(/<img |<video /g, (m) => m.concat(`${CONST.ATTACHMENT_ID_ATTRIBUTE}="${reportActionID}_${++attachmentID}" `));
 }
 
 function getReportActionMessage(reportAction: PartialReportAction) {

From 450f5f86dc16ec5cd146fb4b0662263bc4ff7bbc Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Thu, 27 Mar 2025 00:00:58 +0300
Subject: [PATCH 13/13] minor update

---
 .../Attachments/AttachmentCarousel/extractAttachments.ts    | 4 ++--
 src/libs/ReportActionsUtils.ts                              | 6 +++---
 src/pages/home/report/comment/AttachmentCommentFragment.tsx | 4 ++--
 src/pages/home/report/comment/TextCommentFragment.tsx       | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index 75d00d1520389..20565c065f334 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -3,7 +3,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment} from '@components/Attachments/types';
 import {getFileName, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
-import {addAttachmentIDOnHtml, getReportActionHtml, getReportActionMessage, getSortedReportActions, isMoneyRequestAction, shouldReportActionBeVisible} from '@libs/ReportActionsUtils';
+import {getHtmlWithAttachmentID, getReportActionHtml, getReportActionMessage, getSortedReportActions, isMoneyRequestAction, shouldReportActionBeVisible} from '@libs/ReportActionsUtils';
 import {canUserPerformWriteAction} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
@@ -115,7 +115,7 @@ function extractAttachments(
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
         const html = getReportActionHtml(action).replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
-        htmlParser.write(addAttachmentIDOnHtml(html, action.reportActionID));
+        htmlParser.write(getHtmlWithAttachmentID(html, action.reportActionID));
     });
     htmlParser.end();
 
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 9dfcc5c8dfd62..cbd08d973c735 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -163,11 +163,11 @@ function isDeletedAction(reportAction: OnyxInputOrEntry<ReportAction | Optimisti
 }
 
 /**
- * This function will add attachment ID attribute on img and video attachments inside the passed html content
+ * This function will add attachment ID attribute on img and video HTML tags inside the passed html content
  * of a report action. This attachment id is the reportActionID concatenated with the order index that the attachment
  * appears inside the report action message so as to identify attachments with identical source inside a report action.
  */
-function addAttachmentIDOnHtml(html: string, reportActionID: string | undefined) {
+function getHtmlWithAttachmentID(html: string, reportActionID: string | undefined) {
     if (!reportActionID) {
         return html;
     }
@@ -2301,7 +2301,7 @@ export {
     extractLinksFromMessageHtml,
     formatLastMessageText,
     isReportActionUnread,
-    addAttachmentIDOnHtml,
+    getHtmlWithAttachmentID,
     getActionableMentionWhisperMessage,
     getAllReportActions,
     getCombinedReportActions,
diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.tsx b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
index c91031ac261b2..d7d0e5c2f3ac3 100644
--- a/src/pages/home/report/comment/AttachmentCommentFragment.tsx
+++ b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {addAttachmentIDOnHtml} from '@libs/ReportActionsUtils';
+import {getHtmlWithAttachmentID} from '@libs/ReportActionsUtils';
 import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 import RenderCommentHTML from './RenderCommentHTML';
 
@@ -15,7 +15,7 @@ type AttachmentCommentFragmentProps = {
 
 function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted, reportActionID}: AttachmentCommentFragmentProps) {
     const styles = useThemeStyles();
-    const htmlContent = addAttachmentIDOnHtml(styleAsDeleted ? `<del>${html}</del>` : html, reportActionID);
+    const htmlContent = getHtmlWithAttachmentID(styleAsDeleted ? `<del>${html}</del>` : html, reportActionID);
 
     return (
         <View style={addExtraMargin ? styles.mt2 : {}}>
diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
index 712bae89035eb..7c5594e985ba2 100644
--- a/src/pages/home/report/comment/TextCommentFragment.tsx
+++ b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -12,7 +12,7 @@ import convertToLTR from '@libs/convertToLTR';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {containsOnlyEmojis as containsOnlyEmojisUtil, splitTextWithEmojis} from '@libs/EmojiUtils';
 import Performance from '@libs/Performance';
-import {addAttachmentIDOnHtml, getTextFromHtml} from '@libs/ReportActionsUtils';
+import {getHtmlWithAttachmentID, getTextFromHtml} from '@libs/ReportActionsUtils';
 import variables from '@styles/variables';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
@@ -87,7 +87,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM
             htmlWithTag = `<muted-text>${htmlWithTag}<muted-text>`;
         }
 
-        htmlWithTag = addAttachmentIDOnHtml(htmlWithTag, reportActionID);
+        htmlWithTag = getHtmlWithAttachmentID(htmlWithTag, reportActionID);
 
         return (
             <RenderCommentHTML