From 482396f7fe1271571d001383e977ccb203546ecb Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Thu, 31 Oct 2024 11:19:36 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20ajouter=20un=20espace=20apr=C3=A8s=20les?= =?UTF-8?q?=20liens=20fiche=20cdt=20(#6237)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: ajouter un espace après les liens fiche cdt * refactor: utilisation de html-react-parser * chore: review --------- Co-authored-by: victor --- .../modules/code-du-travail/ContentParser.tsx | 32 +++++++++++++++++++ .../__tests__/ContentParser.test.tsx | 31 ++++++++++++++++++ .../code-du-travail/articleCodeDuTravail.tsx | 3 +- 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 packages/code-du-travail-frontend/src/modules/code-du-travail/ContentParser.tsx create mode 100644 packages/code-du-travail-frontend/src/modules/code-du-travail/__tests__/ContentParser.test.tsx 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 new file mode 100644 index 0000000000..38df70e33d --- /dev/null +++ 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 ( + <> + {domToReact(domNode.children)} + + {textToTrim ? " " : ""} + + ); + } + }, + }; + return <>{parse(children, options)}; +}; diff --git a/packages/code-du-travail-frontend/src/modules/code-du-travail/__tests__/ContentParser.test.tsx b/packages/code-du-travail-frontend/src/modules/code-du-travail/__tests__/ContentParser.test.tsx new file mode 100644 index 0000000000..e1fff9c0e4 --- /dev/null +++ b/packages/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 = `text to test`; + const { baseElement } = render({html}); + + expect(baseElement.outerHTML).toEqual( + `
text to test
` + ); + }); + + test("should not add space at the end of link to the end of link tag if no space to trim", () => { + const html = `text to test`; + const { baseElement } = render({html}); + + expect(baseElement.outerHTML).toEqual( + `
text to test
` + ); + }); + + test("should move space at the end of link to the end of link tag even within tag", () => { + const html = `text to test`; + const { baseElement } = render({html}); + + expect(baseElement.outerHTML).toEqual( + `
text to test
` + ); + }); +}); 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 index 98796cddd2..3bdb8d7fe9 100644 --- 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({

- {html} + {html}
{notaHtml && (