Merge remote-tracking branch 'origin/staging'

dataesr · Feb 4, 2025 · 079fef7 · 079fef7
2 parents cfc1b94 + 3fa8a4f
commit 079fef7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/client/src/components/highlighted-message/index.tsx b/client/src/components/highlighted-message/index.tsx
@@ -1,3 +1,5 @@
+import { makeLinksClickable } from "../../utils/make-links-clickable";
+
 const HighlightedMessage = ({
   message,
   highlightedQuery,
@@ -6,12 +8,11 @@ const HighlightedMessage = ({
   highlightedQuery: string;
 }) => {
   const renderHighlightedMessage = () => {
-    if (!highlightedQuery) return message;
-
+    if (!highlightedQuery) return makeLinksClickable(message);
     const lowerCaseMessage = message?.toLowerCase();
     const lowerCaseQuery = highlightedQuery?.toLowerCase();
     const index = lowerCaseMessage?.indexOf(lowerCaseQuery);
-    if (index === -1) return message;
+    if (index === -1) return makeLinksClickable(message);
 
     const prefix = message?.substring(0, index);
     const highlight = message?.substring(
@@ -22,14 +23,16 @@ const HighlightedMessage = ({
 
     return (
       <>
-        {prefix}
+        {makeLinksClickable(prefix)}
         <span style={{ backgroundColor: "#efcb3a" }}>{highlight}</span>
-        {suffix}
+        {makeLinksClickable(suffix)}
       </>
     );
   };
 
-  return <>{renderHighlightedMessage()}</>;
+  return (
+    <span dangerouslySetInnerHTML={{ __html: renderHighlightedMessage() }} />
+  );
 };
 
 export default HighlightedMessage;
diff --git a/client/src/pages/contact-contributionbyobject-page/components/staff-action.tsx b/client/src/pages/contact-contributionbyobject-page/components/staff-action.tsx
@@ -2,7 +2,8 @@ import { Col, Text } from "@dataesr/dsfr-plus";
 import EmailSender from "../../../api/send-mail";
 import { useLocation } from "react-router-dom";
 import "./styles.scss";
-import { Response, StaffActionsProps, Thread } from "../types";
+import { StaffActionsProps, Thread, ThreadResponse } from "../types";
+import { makeLinksClickable } from "../../../utils/make-links-clickable";
 
 const StaffActions: React.FC<StaffActionsProps> = ({ data, refetch }) => {
   const location = useLocation();
@@ -23,17 +24,12 @@ const StaffActions: React.FC<StaffActionsProps> = ({ data, refetch }) => {
       ?.replace(/Le ven.*$/s, "")
       ?.replace(/Le sam.*$/s, "")
       ?.replace(/Le dim.*$/s, "")
-
       ?.replace(/--[a-fA-F0-9_-]+--/g, "")
-
       .replace(/Content-Type:.*$/gs, "")
       .replace(/Content-Disposition:.*$/gs, "")
       .replace(/Content-Transfer-Encoding:.*$/gs, "")
-
       .replace(/base64[^ ]+/gs, "[Image ou fichier ignoré]")
-
       ?.replace(/<br\s*\/?>/g, "\n")
-
       ?.trim();
   };
 
@@ -42,7 +38,7 @@ const StaffActions: React.FC<StaffActionsProps> = ({ data, refetch }) => {
       {data?.threads?.length > 0 && (
         <Col className={contributorClassName}>
           {data.threads.map((thread: Thread, threadIndex) =>
-            thread.responses.map((response: Response, index) => {
+            thread.responses.map((response: ThreadResponse, index) => {
               const responseDate = new Date(
                 response.timestamp
               ).toLocaleDateString();
@@ -57,9 +53,13 @@ const StaffActions: React.FC<StaffActionsProps> = ({ data, refetch }) => {
                 response.responseMessage && (
                   <div key={`${threadIndex}-${index}`} className={className}>
                     <Text size="sm">
-                      {cleanResponseMessage(
-                        response.responseMessage
-                      )?.replaceAll("<br/>", "\n")}
+                      <span
+                        dangerouslySetInnerHTML={{
+                          __html: makeLinksClickable(
+                            cleanResponseMessage(response.responseMessage)
+                          ),
+                        }}
+                      />
                       <br />
                       <small>
                         Répondu le {responseDate} à {responseTime} par{" "}

diff --git a/client/src/utils/make-links-clickable.tsx b/client/src/utils/make-links-clickable.tsx
@@ -0,0 +1,6 @@
+export const makeLinksClickable = (text: string) => {
+  return text?.replace(
+    /(https?:\/\/[^\s]+)/g,
+    '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+};