Interprête le contenu des champs textarea comme du markdown (#227)

* parse error description and recommendation markdown into html

* parse notCompliantContent, derogatedContent and notInScopeContent markdown to html

* fix marked config

* update changelog

Author: hissalht

CHANGELOG.md

@@ -2,10 +2,23 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 12/12/2022
+
+### Nouvelles fonctionnalités 🚀
+
+- Formate les éléments suivant dans le rapport avec Markdown ([#227](https://github.com/DISIC/Ara/pull/227)) :
+  - Description d'une erreur de conformité
+  - Recommandation sur un critère
+  - Non-conformités
+  - Contenu dérogé
+  - Contenus non soumis à l’obligation d’accessibilité
+
 ## 30/11/2022
 
 ### Nouvelles fonctionnalités 🚀
+
 - Ajout d’une mise en avant pour notifier le caractère obligatoire de la déclaration d’accessibilité ([#206](https://github.com/DISIC/Ara/pull/206))
+
 ### Autres changements ⚙️
 
 - Ajout du changelog ([#207](https://github.com/DISIC/Ara/pull/207))

confiture-web-app/src/components/MarkdownRenderer.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { marked } from "marked";
+import { computed } from "vue";
+
+const props = defineProps<{
+  markdown: string;
+}>();
+
+const html = computed(() => marked.parse(props.markdown));
+</script>
+
+<template>
+  <div v-html="html"></div>
+</template>

confiture-web-app/src/components/ReportA11yStatement.vue

@@ -5,6 +5,7 @@ import { useRoute } from "vue-router";
 import { useWrappedFetch } from "../composables/useWrappedFetch";
 import { useReportStore } from "../store";
 import { formatDate } from "../utils";
+import MarkdownRenderer from "./MarkdownRenderer.vue";
 
 const report = useReportStore();
 
@@ -204,16 +205,24 @@ function hideCopyAlert() {
         </li>
       </ul-->
       <h4 class="fr-h2 fr-mb-2w fr-mb-md-3w">Contenus non accessibles</h4>
+
       <h5 class="fr-h3">Non-conformités</h5>
-      <p class="fr-mb-2w fr-mb-md-3w">
-        {{ report.data.notCompliantContent }}
-      </p>
+      <MarkdownRenderer
+        class="fr-mb-2w fr-mb-md-3w"
+        :markdown="report.data.notCompliantContent"
+      />
 
       <h5 class="fr-h3">Dérogations pour charge disproportionnée</h5>
-      <p class="fr-mb-2w fr-mb-md-3w">{{ report.data.derogatedContent }}</p>
+      <MarkdownRenderer
+        class="fr-mb-2w fr-mb-md-3w"
+        :markdown="report.data.derogatedContent"
+      />
 
       <h5 class="fr-h3">Contenus non soumis à l’obligation d’accessibilité</h5>
-      <p class="fr-mb-2w fr-mb-md-3w">{{ report.data.notInScopeContent }}</p>
+      <MarkdownRenderer
+        class="fr-mb-2w fr-mb-md-3w"
+        :markdown="report.data.notInScopeContent"
+      />
 
       <h4 class="fr-h2">Établissement de cette déclaration d’accessibilité</h4>
       <p v-if="report.data.publishDate" class="fr-mb-2w fr-mb-md-3w">

confiture-web-app/src/components/ReportErrors.vue

@@ -10,6 +10,7 @@ import { CriterionResultUserImpact, CriteriumResultStatus } from "../types";
 import { formatStatus, formatUserImpact, slugify } from "../utils";
 import CriteriumTestsAccordion from "./CriteriumTestsAccordion.vue";
 import LazyAccordion from "./LazyAccordion.vue";
+import MarkdownRenderer from "./MarkdownRenderer.vue";
 
 const report = useReportStore();
 const router = useRouter();
@@ -406,9 +407,10 @@ function updateActiveAnchorLink(id: string, event: MouseEvent) {
                 title="Description de l'erreur"
                 data-accordion
               >
-                <p class="fr-mb-3w">
-                  {{ error.errorDescription }}
-                </p>
+                <MarkdownRenderer
+                  class="fr-mb-3w"
+                  :markdown="error.errorDescription"
+                />
                 <!-- <p class="fr-text--xs fr-mb-1w error-accordion-subtitle">
                   Exemple(s) d’erreur(s)
                 </p>
@@ -448,9 +450,10 @@ function updateActiveAnchorLink(id: string, event: MouseEvent) {
                 title="Recommandation de correction"
                 data-accordion
               >
-                <p class="fr-mb-0">
-                  {{ error.recommandation }}
-                </p>
+                <MarkdownRenderer
+                  class="fr-mb-0"
+                  :markdown="error.recommandation"
+                />
               </LazyAccordion>
 
               <!-- Tests -->

confiture-web-app/src/main.ts

@@ -19,7 +19,11 @@ import router from "./router";
   // TODO: use a <RouterLink />
   const renderer = {
     link(href: string, title: string, text: string) {
-      return `<a href="/ressources/glossaire${href}">${text}</a>`;
+      if (href.startsWith("#")) {
+        return `<a href="/ressources/glossaire${href}">${text}</a>`;
+      } else {
+        return `<a href="${href}">${text}</a>`;
+      }
     },
   };