fix: ajouter un espace après les liens fiche cdt (#6237)

* fix: ajouter un espace après les liens fiche cdt * refactor: utilisation de html-react-parser * chore: review --------- Co-authored-by: victor <[email protected]>
SocialGouv · Oct 31, 2024 · 482396f · 482396f
1 parent 520afad
commit 482396f
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 1 deletion.
diff --git a/packages/code-du-travail-frontend/src/modules/code-du-travail/ContentParser.tsx b/packages/code-du-travail-frontend/src/modules/code-du-travail/ContentParser.tsx
@@ -0,0 +1,32 @@
+import parse, { domToReact } from "html-react-parser";
+import { ReactHTMLElement } from "react";
+
+export const ContentParser = ({
+  children,
+}): string | JSX.Element | JSX.Element[] => {
+  const options = {
+    replace: (domNode) => {
+      if (
+        domNode.name === "a" &&
+        domNode.children &&
+        domNode.children.length > 0
+      ) {
+        let tagElement = domNode.children[0];
+        while (tagElement.type !== "text") {
+          tagElement = tagElement.children[0];
+        }
+        const text = tagElement.data;
+        tagElement.data = text.trim();
+        const textToTrim = text[text.length - 1] === " ";
+        return (
+          <>
+            <a {...domNode.attribs}>{domToReact(domNode.children)}</a>
+
+            {textToTrim ? " " : ""}
+          </>
+        );
+      }
+    },
+  };
+  return <>{parse(children, options)}</>;
+};
diff --git a/...ges/code-du-travail-frontend/src/modules/code-du-travail/__tests__/ContentParser.test.tsx b/...ges/code-du-travail-frontend/src/modules/code-du-travail/__tests__/ContentParser.test.tsx
@@ -0,0 +1,31 @@
+import { render } from "@testing-library/react";
+import { ContentParser } from "../ContentParser";
+
+describe("CDT content parser", () => {
+  test("should move space at the end of link to the end of link tag", () => {
+    const html = `<a href="https://test.com">text </a>to test`;
+    const { baseElement } = render(<ContentParser>{html}</ContentParser>);
+
+    expect(baseElement.outerHTML).toEqual(
+      `<body><div><a href="https://test.com">text</a> to test</div></body>`
+    );
+  });
+
+  test("should not add space at the end of link to the end of link tag if no space to trim", () => {
+    const html = `<a href="https://test.com">text</a> to test`;
+    const { baseElement } = render(<ContentParser>{html}</ContentParser>);
+
+    expect(baseElement.outerHTML).toEqual(
+      `<body><div><a href="https://test.com">text</a> to test</div></body>`
+    );
+  });
+
+  test("should move space at the end of link to the end of link tag even within tag", () => {
+    const html = `<a href="https://test.com"><b>text </b></a>to test`;
+    const { baseElement } = render(<ContentParser>{html}</ContentParser>);
+
+    expect(baseElement.outerHTML).toEqual(
+      `<body><div><a href="https://test.com"><b>text</b></a> to test</div></body>`
+    );
+  });
+});
diff --git a/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx b/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx
@@ -3,6 +3,7 @@ import { fr } from "@codegouvfr/react-dsfr";
 import Html from "../common/Html";
 import { ContainerRich } from "../layout/ContainerRich";
 import { RelatedItem } from "../documents";
+import { ContentParser } from "./ContentParser";
 
 type Props = {
   metaDescription: string;
@@ -40,7 +41,7 @@ export function ArticleCodeDuTravail({
       </p>
 
       <div className={fr.cx("fr-mb-5w")}>
-        <Html>{html}</Html>
+        <ContentParser>{html}</ContentParser>
       </div>
       {notaHtml && (
         <div className={fr.cx("fr-highlight", "fr-mb-5w")}>