add suggested changes.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

src/components/AnchorForAttachmentsOnly/types.ts

@@ -10,7 +10,7 @@ type AnchorForAttachmentsOnlyProps = {
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;
 
-    /**  Whether the attachment is deleted */
+    /** Whether the attachment is deleted */
     isDeleted?: boolean;
 };
 

src/components/AttachmentDeletedIndicator.tsx

@@ -8,12 +8,12 @@ import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 
-type AttachmentOfflineIndicatorProps = {
-    /** Any additional styles to apply */
+type AttachmentDeletedIndicatorProps = {
+    /** Additional styles for container */
     containerStyles?: StyleProp<ViewStyle>;
 };
 
-function AttachmentDeletedIndicator({containerStyles}: AttachmentOfflineIndicatorProps) {
+function AttachmentDeletedIndicator({containerStyles}: AttachmentDeletedIndicatorProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -25,9 +25,17 @@ function AttachmentDeletedIndicator({containerStyles}: AttachmentOfflineIndicato
     return (
         <>
             <View
-                style={[styles.pAbsolute, styles.alignItemsCenter, styles.justifyContentCenter, styles.highlightBG, styles.deletedIndicatorOverlay, styles.deletedIndicator, containerStyles]}
+                style={[
+                    styles.pAbsolute,
+                    styles.alignItemsCenter,
+                    styles.justifyContentCenter,
+                    styles.highlightBG,
+                    styles.deletedIndicatorOverlay,
+                    styles.deletedAttachmentIndicator,
+                    containerStyles,
+                ]}
             />
-            <View style={[styles.pAbsolute, styles.deletedIndicator, styles.alignItemsCenter, styles.justifyContentCenter, containerStyles]}>
+            <View style={[styles.pAbsolute, styles.deletedAttachmentIndicator, styles.alignItemsCenter, styles.justifyContentCenter, containerStyles]}>
                 <Icon
                     fill={theme.icon}
                     src={Expensicons.Trashcan}

src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx

@@ -25,7 +25,7 @@ type DefaultAttachmentViewProps = {
 
     icon?: IconAsset;
 
-    /**  Whether the attachment is deleted */
+    /** Whether the attachment is deleted */
     isDeleted?: boolean;
 };
 

src/components/Attachments/AttachmentView/index.tsx

@@ -78,7 +78,7 @@ type AttachmentViewProps = AttachmentViewOnyxProps &
         /* Flag indicating whether the attachment has been uploaded. */
         isUploaded?: boolean;
 
-        /**  Whether the attachment is deleted */
+        /** Whether the attachment is deleted */
         isDeleted?: boolean;
     };
 

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

@@ -31,8 +31,8 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
     const internalExpensifyPath = Link.getInternalExpensifyPath(attrHref);
     const isVideo = attrHref && Str.isVideo(attrHref);
 
-    const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
-    const textDecorationLineStyle = hasStrikethroughStyle ? styles.underlineLineThrough : {};
+    const isDeleted = HTMLEngineUtils.isDeletedNode(tnode);
+    const textDecorationLineStyle = isDeleted ? styles.underlineLineThrough : {};
 
     if (!HTMLEngineUtils.isChildOfComment(tnode)) {
         // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click.
@@ -54,7 +54,7 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
             <AnchorForAttachmentsOnly
                 source={tryResolveUrlFromApiRoot(attrHref)}
                 displayName={displayName}
-                isDeleted={hasStrikethroughStyle}
+                isDeleted={isDeleted}
             />
         );
     }

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -3,6 +3,7 @@ import {withOnyx} from 'react-native-onyx';
 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 PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
@@ -32,9 +33,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
     const {translate} = useLocalize();
 
     const htmlAttribs = tnode.attributes;
-
-    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
-    const isDeleted = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
+    const isDeleted = isDeletedNode(tnode);
 
     // There are two kinds of images that need to be displayed:
     //

src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type {CustomRendererProps, TBlock} from 'react-native-render-html';
 import {AttachmentContext} from '@components/AttachmentContext';
+import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import VideoPlayerPreview from '@components/VideoPlayerPreview';
 import useCurrentReportID from '@hooks/useCurrentReportID';
@@ -25,8 +26,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
     const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]);
     const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]);
     const currentReportIDValue = useCurrentReportID();
-    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
-    const isDeleted = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
+    const isDeleted = isDeletedNode(tnode);
 
     return (
         <ShowContextMenuContext.Consumer>

src/components/HTMLEngineProvider/htmlEngineUtils.ts

@@ -59,4 +59,12 @@ function isChildOfH1(tnode: TNode): boolean {
     return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'h1');
 }
 
-export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1};
+/**
+ * Check if the parent node has deleted style.
+ */
+function isDeletedNode(tnode: TNode): boolean {
+    const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {};
+    return 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
+}
+
+export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1, isDeletedNode};

src/components/ThumbnailImage.tsx

@@ -57,7 +57,7 @@ type ThumbnailImageProps = {
     /** The object position of image */
     objectPosition?: ImageObjectPosition;
 
-    /**  Whether the image is deleted */
+    /** Whether the image is deleted */
     isDeleted?: boolean;
 };
 

src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx

@@ -24,7 +24,7 @@ type VideoPlayerThumbnailProps = {
     /** Accessibility label for the thumbnail. */
     accessibilityLabel: string;
 
-    /**  Whether the video is deleted */
+    /** Whether the video is deleted */
     isDeleted?: boolean;
 };
 

src/components/VideoPlayerPreview/index.tsx

@@ -39,7 +39,7 @@ type VideoPlayerPreviewProps = {
     /** Callback executed when modal is pressed. */
     onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 
-    /**  Whether the video is deleted */
+    /** Whether the video is deleted */
     isDeleted?: boolean;
 };
 

src/styles/index.ts

@@ -1111,7 +1111,7 @@ const styles = (theme: ThemeColors) =>
             height: 25,
         },
 
-        deletedIndicator: {
+        deletedAttachmentIndicator: {
             zIndex: 20,
             width: '100%',
             height: '100%',