From 9ad8b0f18660432369458bde5a264793309f4a75 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 29 Dec 2021 14:46:14 +0100 Subject: [PATCH] Remplace react-markdown par markdown-to-jsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit La version utilisée de react-markdown n'était pas compatible avec ViteJS. J'ai tenté la mise à jour vers la v7 qui est publiée sous forme de ES Module, ce qui nécessitait d'intégrer plusieurs changements d'API. En m'y attelant j'ai réalisé que la motivation première de react-markdown était de ne surtout pas utiliser `dangerouslySetInnerHTML`, ce qui est utile pour les cas d'usages où le markdown n'est pas digne de confiance (message d'utilisateurs par exemple). Cette contrainte oblige à alourdir sensiblement la quantité de JavaScript à charger et à évaluer. Anisi dans certains markdown que l'on affiche, on utilise la balise HTML ``, qui n'est pas parsée nativement pas react-markdown. Comme on ne peut pas faire de `dangerouslySetInnerHTML` il faut intégrer un parseur HTML complet qui rajout 60kb, juste pour quelques occurences de `` dans les pages nouveautés. Dans notre cas d'usage reparser tout le html en Javascript, n'est pas utile. markdown-to-jsx semble plus adapté et beaucoup plus léger. Par ailleurs le paquet est 5 fois plus utilisé que react-markdown : https://www.npmtrends.com/react-markdown-vs-markdown-to-jsx --- site/package.json | 2 +- .../ChiffreAffairesActivitéMixte.tsx | 2 +- site/source/components/Notifications.tsx | 2 +- .../components/conversation/ChoicesInput.tsx | 2 +- .../components/conversation/Explicable.tsx | 2 +- .../IndépendantCotisationsForfaitaires.tsx | 2 +- .../IndépendantCotisationsRégularisation.tsx | 2 +- site/source/components/ui/Checklist/index.tsx | 2 +- site/source/components/utils/markdown.tsx | 59 +++++++++---------- site/source/pages/Budget/Budget.tsx | 6 +- .../RésultatSimple.tsx | 4 +- .../RésultatsParFormulaire.tsx | 4 +- .../pages/Gerer/DemandeMobilite/index.tsx | 16 +++-- site/source/pages/Nouveautes/Nouveautes.tsx | 16 ++--- .../EconomieCollaborative/Activité.tsx | 2 +- yarn.lock | 9 +++ 16 files changed, 65 insertions(+), 67 deletions(-) diff --git a/site/package.json b/site/package.json index 72306bf52..051e4466a 100644 --- a/site/package.json +++ b/site/package.json @@ -63,6 +63,7 @@ "algoliasearch": "^4.10.2", "fuse.js": "^6.4.6", "iframe-resizer": "^4.1.1", + "markdown-to-jsx": "^7.1.5", "modele-social": "^0.5.0", "publicodes": "^1.0.0-beta.25", "publicodes-react": "^1.0.0-beta.25", @@ -75,7 +76,6 @@ "react-i18next": "^11.0.0", "react-instantsearch": "^6.11.2", "react-instantsearch-dom": "^6.11.2", - "react-markdown": "^4.1.0", "react-redux": "^7.0.3", "react-router-dom": "^5.1.1", "react-signature-pad-wrapper": "^1.2.11", diff --git a/site/source/components/ChiffreAffairesActivitéMixte.tsx b/site/source/components/ChiffreAffairesActivitéMixte.tsx index 0f43216b9..df52d794b 100644 --- a/site/source/components/ChiffreAffairesActivitéMixte.tsx +++ b/site/source/components/ChiffreAffairesActivitéMixte.tsx @@ -130,7 +130,7 @@ function ActivitéMixte() { - + {rule.rawNode.description ?? ''} ) diff --git a/site/source/components/Notifications.tsx b/site/source/components/Notifications.tsx index f6c352915..42f45f8f6 100644 --- a/site/source/components/Notifications.tsx +++ b/site/source/components/Notifications.tsx @@ -67,7 +67,7 @@ export default function Notifications() { - {' '} + {résumé ?? description ?? ''}{' '} {résumé && ( En savoir plus diff --git a/site/source/components/conversation/ChoicesInput.tsx b/site/source/components/conversation/ChoicesInput.tsx index f9838e89f..b2adfedb2 100644 --- a/site/source/components/conversation/ChoicesInput.tsx +++ b/site/source/components/conversation/ChoicesInput.tsx @@ -111,7 +111,7 @@ function RadioChoice({ {' '} {node.rawNode.description && ( - + {node.rawNode.description ?? ''} )} diff --git a/site/source/components/conversation/Explicable.tsx b/site/source/components/conversation/Explicable.tsx index 2a6f5cd5d..c5913e898 100644 --- a/site/source/components/conversation/Explicable.tsx +++ b/site/source/components/conversation/Explicable.tsx @@ -28,7 +28,7 @@ export function ExplicableRule({ title={rule.title} light={light} > - + {rule.rawNode.description} ) } diff --git a/site/source/components/simulationExplanation/IndépendantCotisationsForfaitaires.tsx b/site/source/components/simulationExplanation/IndépendantCotisationsForfaitaires.tsx index dc24b3635..d344ec998 100644 --- a/site/source/components/simulationExplanation/IndépendantCotisationsForfaitaires.tsx +++ b/site/source/components/simulationExplanation/IndépendantCotisationsForfaitaires.tsx @@ -23,7 +23,7 @@ export default function CotisationsForfaitaires() { - + {rule.rawNode.description ?? ''} {rule.rawNode.références && ( <> diff --git a/site/source/components/simulationExplanation/IndépendantCotisationsRégularisation.tsx b/site/source/components/simulationExplanation/IndépendantCotisationsRégularisation.tsx index 9fd2d573f..e83a9a9df 100644 --- a/site/source/components/simulationExplanation/IndépendantCotisationsRégularisation.tsx +++ b/site/source/components/simulationExplanation/IndépendantCotisationsRégularisation.tsx @@ -14,7 +14,7 @@ export default function CotisationsRégularisation() {

{rule.title}

- + {rule.rawNode.description ?? ''} {rule.rawNode.références && ( <> diff --git a/site/source/components/ui/Checklist/index.tsx b/site/source/components/ui/Checklist/index.tsx index 90966baf2..f84f79ce3 100644 --- a/site/source/components/ui/Checklist/index.tsx +++ b/site/source/components/ui/Checklist/index.tsx @@ -80,7 +80,7 @@ export function CheckItem({ `} > {typeof explanations === 'string' ? ( - + {explanations} ) : ( explanations )} diff --git a/site/source/components/utils/markdown.tsx b/site/source/components/utils/markdown.tsx index de79f7375..98d273d71 100644 --- a/site/source/components/utils/markdown.tsx +++ b/site/source/components/utils/markdown.tsx @@ -4,7 +4,7 @@ import { Link } from 'DesignSystem/typography/link' import { Li, Ul } from 'DesignSystem/typography/list' import { Body } from 'DesignSystem/typography/paragraphs' import React, { useContext, useEffect } from 'react' -import ReactMarkdown, { ReactMarkdownProps } from 'react-markdown' +import MarkdownToJsx from 'markdown-to-jsx' import { useLocation } from 'react-router-dom' import { SiteNameContext } from '../../Provider' import Emoji from './Emoji' @@ -12,7 +12,6 @@ import Emoji from './Emoji' const internalURLs = { 'mon-entreprise.urssaf.fr': 'mon-entreprise', 'mycompanyinfrance.urssaf.fr': 'infrance', - 'publi.codes': 'publicodes', } as const export function LinkRenderer({ @@ -33,14 +32,6 @@ export function LinkRenderer({ ) } - if (href && !href.startsWith('http')) { - return ( - - {children} - - ) - } - // Convert absolute links that reload the full app into in-app links handled // by react-router. for (const domain of Object.keys(internalURLs)) { @@ -67,8 +58,7 @@ const TextRenderer = ({ children }: { children: string }) => ( ) -type MarkdownProps = ReactMarkdownProps & { - source: string | undefined +type MarkdownProps = React.ComponentProps & { className?: string } @@ -100,29 +90,34 @@ const CodeBlock = ({ ) export const Markdown = ({ - source, - className = '', - renderers = {}, + children, + components = {}, ...otherProps }: MarkdownProps) => ( - src} - source={source} - className={`markdown ${className}`} - renderers={{ - link: LinkRenderer, - paragraph: Body, - text: TextRenderer, - code: CodeBlock, - list: Ul, - strong: Strong, - listItem: Li, - heading: Heading, - emphasis: ({ children }) => {children}, - ...renderers, - }} + + options={{ + ...otherProps.options, + overrides: { + h1: H1, + h2: H2, + h3: H3, + h4: H4, + h5: H5, + h6: H6, + p: Body, + strong: Strong, + a: LinkRenderer, + ul: Ul, + li: Li, + code: CodeBlock, + span: TextRenderer, + ...components, + }, + }} + > + {children} + ) export const MarkdownWithAnchorLinks = ({ diff --git a/site/source/pages/Budget/Budget.tsx b/site/source/pages/Budget/Budget.tsx index f1863de8a..dae104fda 100644 --- a/site/source/pages/Budget/Budget.tsx +++ b/site/source/pages/Budget/Budget.tsx @@ -54,7 +54,7 @@ export default function Budget() {

Budget

- + {intro}

Budget consommé