From eda996e5232c9d0a1dc6c8dc4a19af933a0cf3d0 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 26 Mar 2024 15:25:21 +0800
Subject: [PATCH] fix anchor text can't show both underline and line through on
 iOS

---
 .../HTMLRenderers/AnchorRenderer.tsx          | 25 +++++++++++++++++--
 src/styles/utils/textDecorationLine.ts        |  4 +++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx
index 465a4f747bcb..d918007e5750 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx
@@ -55,6 +55,9 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
         );
     }
 
+    const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through';
+    const textDecorationLineStyle = hasStrikethroughStyle ? styles.underlineLineThrough : {};
+
     return (
         <AnchorForCommentsOnly
             href={attrHref}
@@ -65,12 +68,30 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
             // eslint-disable-next-line react/jsx-props-no-multi-spaces
             target={htmlAttribs.target || '_blank'}
             rel={htmlAttribs.rel || 'noopener noreferrer'}
-            style={[style, parentStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone]}
+            style={[style, parentStyle, textDecorationLineStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone]}
             key={key}
             // Only pass the press handler for internal links. For public links or whitelisted internal links fallback to default link handling
             onPress={internalNewExpensifyPath || internalExpensifyPath ? () => Link.openLink(attrHref, environmentURL, isAttachment) : undefined}
         >
-            <TNodeChildrenRenderer tnode={tnode} />
+            <TNodeChildrenRenderer
+                tnode={tnode}
+                renderChild={(props) => {
+                    if (props.childTnode.tagName === 'br') {
+                        return <Text key={props.key}>{'\n'}</Text>;
+                    }
+                    if (props.childTnode.type === 'text') {
+                        return (
+                            <Text
+                                key={props.key}
+                                style={[props.childTnode.getNativeStyles(), parentStyle, textDecorationLineStyle, styles.textUnderlinePositionUnder, styles.textDecorationSkipInkNone]}
+                            >
+                                {props.childTnode.data}
+                            </Text>
+                        );
+                    }
+                    return props.childElement;
+                }}
+            />
         </AnchorForCommentsOnly>
     );
 }
diff --git a/src/styles/utils/textDecorationLine.ts b/src/styles/utils/textDecorationLine.ts
index e5f079150e78..5e830cbf08c1 100644
--- a/src/styles/utils/textDecorationLine.ts
+++ b/src/styles/utils/textDecorationLine.ts
@@ -5,4 +5,8 @@ export default {
         textDecorationLine: 'line-through',
         textDecorationStyle: 'solid',
     },
+    underlineLineThrough: {
+        textDecorationLine: 'underline line-through',
+        textDecorationStyle: 'solid',
+    },
 } satisfies Record<string, TextStyle>;