From 9e46cfbbd9c8f53880a18db16165ad360a247f7c Mon Sep 17 00:00:00 2001
From: Emanuele Coricciati <73798800+emacoricciati@users.noreply.github.com>
Date: Mon, 25 Nov 2024 11:50:30 +0100
Subject: [PATCH] fix(tickets): fix issues in ticket format, update regex for
 links (#533)

Co-authored-by: Fabrizio Costa Medich <134924838+FabrizioCostaMedich@users.noreply.github.com>
---
 assets/translations/en.json                     |  1 +
 assets/translations/it.json                     |  1 +
 src/core/components/TextWithLinks.tsx           |  4 ++--
 src/features/tickets/components/TextMessage.tsx |  4 ++--
 src/utils/html.ts                               | 10 +++++++++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/assets/translations/en.json b/assets/translations/en.json
index 6849ee51..13fb2d18 100644
--- a/assets/translations/en.json
+++ b/assets/translations/en.json
@@ -161,6 +161,7 @@
     "hour": "Hour",
     "hours": "Hour",
     "icon": "Icon",
+    "image": "Image",
     "inYourAgenda": "in your agenda",
     "it": "Italian",
     "language": "Language",
diff --git a/assets/translations/it.json b/assets/translations/it.json
index 83180785..83794d25 100644
--- a/assets/translations/it.json
+++ b/assets/translations/it.json
@@ -161,6 +161,7 @@
     "hour": "Orario",
     "hours": "Ore",
     "icon": "Icona",
+    "image": "Immagine",
     "inYourAgenda": "nella tua agenda",
     "it": "Italiano",
     "language": "Lingua",
diff --git a/src/core/components/TextWithLinks.tsx b/src/core/components/TextWithLinks.tsx
index 91f227a0..64ab1c79 100644
--- a/src/core/components/TextWithLinks.tsx
+++ b/src/core/components/TextWithLinks.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { TextProps } from 'react-native';
 import { MixedStyleDeclaration } from 'react-native-render-html';
 
-import { linkUrls } from '../../utils/html';
+import { linkUrls, replaceImgWithAnchorTags } from '../../utils/html';
 import { HtmlView } from './HtmlView';
 
 type Props = {
@@ -11,7 +11,7 @@ type Props = {
 
 export const TextWithLinks = ({ baseStyle, children, style }: Props) => {
   if (!children || typeof children !== 'string') return null;
-  const html = linkUrls(children);
+  const html = linkUrls(replaceImgWithAnchorTags(children));
   return (
     <HtmlView
       source={{ html }}
diff --git a/src/features/tickets/components/TextMessage.tsx b/src/features/tickets/components/TextMessage.tsx
index 64040662..4c3a5db0 100644
--- a/src/features/tickets/components/TextMessage.tsx
+++ b/src/features/tickets/components/TextMessage.tsx
@@ -5,7 +5,7 @@ import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
 import { Theme } from '@lib/ui/types/Theme';
 
 import { TextWithLinks } from '../../../core/components/TextWithLinks';
-import { getHtmlTextContent } from '../../../utils/html';
+import { sanitizeHtml } from '../../../utils/html';
 
 export interface TextMessageProps {
   message: string;
@@ -15,7 +15,7 @@ export const TextMessage = ({ message }: TextMessageProps) => {
   const styles = useStylesheet(createStyles);
 
   const textMessage = useMemo(() => {
-    return getHtmlTextContent(message);
+    return sanitizeHtml(message ?? '');
   }, [message]);
 
   return <TextWithLinks style={styles.text}>{textMessage}</TextWithLinks>;
diff --git a/src/utils/html.ts b/src/utils/html.ts
index d844b23d..c894ce11 100644
--- a/src/utils/html.ts
+++ b/src/utils/html.ts
@@ -2,6 +2,7 @@ import { Document } from 'react-native-render-html';
 
 import { innerText } from 'domutils';
 import { parseDocument } from 'htmlparser2';
+import i18next from 'i18next';
 
 export const sanitizeHtml = (html: string) =>
   html.replace(/\r/g, '').replace(/\\r/g, '').replace(/\\"/g, '"').trim();
@@ -11,9 +12,16 @@ export const getHtmlTextContent = (text: string) => {
   return innerText(dom.children as any[]);
 };
 
+export const replaceImgWithAnchorTags = (html: string) => {
+  const imgRegex = /<img[^>]*src="([^">]*)"[^>]*>/gi;
+  return html.replace(imgRegex, (_, src) => {
+    return `<a href="${src}">${i18next.t('common.image')}</a>`;
+  });
+};
+
 export const linkUrls = (html: string) => {
   const regex =
-    /(?!<a[^>]*>[^<])(?:https?:\/\/|www\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])(?![^<]*<\/a>)/gi;
+    /(?!<a[^>]*>[^<])(?:https?:\/\/(?:www\.)?|www\.)?(?:[A-Z0-9-]+(?:[-.][A-Z0-9]+)*\.[A-Z]{2,5})(?::[0-9]{1,5})?(?:\/[A-Z0-9\-._~:/?#[\]@!$&'()*+,;=]*)?(?:\?[A-Z0-9\-._~:/?#[\]@!$&'()*+,;=%]*)?(?:#[A-Z0-9\-._~:/?#[\]@!$&'()*+,;=%]*)?(?![^<]*<\/a>)(?<!\.)/gi;
   return html.replace(regex, match => {
     if (!match.startsWith('http')) match = `https://${match}`;
     return `<a href="${match}">${match}</a>`;