Remplace les instances de Tiptap par du HTML généré sur le rapport (#1080)

* render html from tiptap json and organize tiptap files

* use tiptap renderer in tiptap debug page

* add tiptap renderer to transverse criterium note

* update changelog

Author: hissalht

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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.
 
+## 24/04/2025
+
+### Corrections 🐛
+
+- Corrige les erreurs et recommendations des éléments transverses affichés au format JSON ([#1080](https://github.com/DISIC/Ara/pull/1080))
+
 ## 23/04/2025
 
 ### Corrections 🐛

confiture-web-app/src/components/audit/AuditGenerationCriterium.vue

@@ -20,7 +20,7 @@ import {
   handleFileDeleteError,
   handleFileUploadError
 } from "../../utils";
-import MarkdownRenderer from "../ui/MarkdownRenderer.vue";
+import TiptapRenderer from "../tiptap/TiptapRenderer.vue";
 import { RadioColor } from "../ui/Radio.vue";
 import RadioGroup from "../ui/RadioGroup.vue";
 import CriteriumCompliantAccordion from "./CriteriumCompliantAccordion.vue";
@@ -336,10 +336,10 @@ const showTransverseStatus = computed(() => {
         </button>
       </div>
 
-      <MarkdownRenderer
+      <TiptapRenderer
         v-if="showTransverseComment && transverseComment"
+        :document="transverseComment"
         class="fr-mt-5w"
-        :markdown="transverseComment"
       />
     </div>
 

confiture-web-app/src/components/audit/CriteriumCompliantAccordion.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useIsOffline } from "../../composables/useIsOffline";
-import Tiptap from "../ui/Tiptap.vue";
+import TiptapEditor from "../tiptap/TiptapEditor.vue";
 import LazyAccordion from "./LazyAccordion.vue";
 
 defineProps<{
@@ -23,7 +23,7 @@ const title = "Points d’amélioration";
     <p :id="`criterum-comment-field-${id}`" class="fr-label fr-sr-only">
       {{ title }}
     </p>
-    <Tiptap
+    <TiptapEditor
       :model-value="comment"
       :labelled-by="`criterum-comment-field-${id}`"
       :disabled="isOffline"

confiture-web-app/src/components/audit/CriteriumNotApplicableAccordion.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useIsOffline } from "../../composables/useIsOffline";
-import Tiptap from "../ui/Tiptap.vue";
+import TiptapEditor from "../tiptap/TiptapEditor.vue";
 import LazyAccordion from "./LazyAccordion.vue";
 
 defineProps<{ id: string; comment: string | null }>();
@@ -20,7 +20,7 @@ const title = "Commentaire";
     <p :id="`criterum-comment-field-${id}`" class="fr-label fr-sr-only">
       {{ title }}
     </p>
-    <Tiptap
+    <TiptapEditor
       :model-value="comment"
       :labelled-by="`criterum-comment-field-${id}`"
       :disabled="isOffline"

confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue

@@ -5,10 +5,10 @@ import { useIsOffline } from "../../composables/useIsOffline";
 import { FileErrorMessage } from "../../enums";
 import { AuditFile, CriterionResultUserImpact } from "../../types";
 import { formatUserImpact } from "../../utils";
+import TiptapEditor from "../tiptap/TiptapEditor.vue";
 import FileUpload from "../ui/FileUpload.vue";
 import { RadioColor } from "../ui/Radio.vue";
 import RadioGroup from "../ui/RadioGroup.vue";
-import Tiptap from "../ui/Tiptap.vue";
 import LazyAccordion from "./LazyAccordion.vue";
 
 export interface Props {
@@ -73,7 +73,7 @@ function onFileRequestFinished() {
 }
 
 const lazyAccordionRef = ref<InstanceType<typeof LazyAccordion>>();
-const commentEditorRef = ref<InstanceType<typeof Tiptap>>();
+const commentEditorRef = ref<InstanceType<typeof TiptapEditor>>();
 
 let hasJustBeenSetAsNotCompliant = false;
 
@@ -107,7 +107,7 @@ const title = "Erreur et recommandation";
     <p :id="`criterum-comment-field-${id}`" class="fr-label fr-sr-only">
       {{ title }}
     </p>
-    <Tiptap
+    <TiptapEditor
       ref="commentEditorRef"
       class="fr-mb-4w"
       :model-value="comment"

confiture-web-app/src/components/audit/NotesModal.vue

@@ -8,9 +8,9 @@ import { FileErrorMessage } from "../../enums";
 import { useAuditStore } from "../../store/audit";
 import { AuditFile, StoreName } from "../../types";
 import { handleFileDeleteError, handleFileUploadError } from "../../utils";
+import TiptapEditor from "../tiptap/TiptapEditor.vue";
 import DsfrModal from "../ui/DsfrModal.vue";
 import FileUpload from "../ui/FileUpload.vue";
-import Tiptap from "../ui/Tiptap.vue";
 import SaveIndicator from "./SaveIndicator.vue";
 
 defineProps<{
@@ -105,7 +105,7 @@ function handleDeleteFile(file: AuditFile) {
               <p id="audit-notes" class="fr-label">
                 Remarques et recommandations générales
               </p>
-              <Tiptap
+              <TiptapEditor
                 v-model="notes"
                 class="fr-mb-4w"
                 labelled-by="audit-notes"

confiture-web-app/src/components/report/ReportErrorCriterium.vue

@@ -10,7 +10,7 @@ import {
   getUploadUrl,
   isTiptapDocumentEmpty
 } from "../../utils";
-import Tiptap from "../ui/Tiptap.vue";
+import TiptapRenderer from "../tiptap/TiptapRenderer.vue";
 
 defineProps<{
   error: ReportCriteriumResult;
@@ -63,11 +63,12 @@ function getCriteriumTitle(topicNumber: number, criteriumNumber: number) {
     </ul>
 
     <!-- Error -->
-    <Tiptap
-      v-if="!isTiptapDocumentEmpty(error.notCompliantComment)"
-      :class="{ 'fr-mb-3w': chunk(error.exampleImages, 2).length }"
-      :model-value="error.notCompliantComment"
-      :editable="false"
+    <TiptapRenderer
+      v-if="
+        error.notCompliantComment &&
+        !isTiptapDocumentEmpty(error.notCompliantComment)
+      "
+      :document="error.notCompliantComment"
     />
 
     <p v-else>

confiture-web-app/src/components/report/ReportImprovementCriterium.vue

@@ -4,7 +4,7 @@ import { marked } from "marked";
 import rgaa from "../../criteres.json";
 import { CriteriumResultStatus } from "../../types";
 import { formatStatus, isTiptapDocumentEmpty } from "../../utils";
-import Tiptap from "../ui/Tiptap.vue";
+import TiptapRenderer from "../tiptap/TiptapRenderer.vue";
 
 defineProps<{
   topic: number;
@@ -46,10 +46,9 @@ function getCriteriumTitle(topicNumber: number, criteriumNumber: number) {
       {{ formatStatus(status) }}
     </p>
 
-    <Tiptap
-      v-if="!isTiptapDocumentEmpty(comment)"
-      :model-value="comment"
-      :editable="false"
+    <TiptapRenderer
+      v-if="comment && !isTiptapDocumentEmpty(comment)"
+      :document="comment"
     />
   </div>
 </template>

confiture-web-app/src/components/report/ReportNotes.vue

@@ -3,8 +3,8 @@ import { computed } from "vue";
 
 import { useReportStore } from "../../store";
 import { isTiptapDocumentEmpty } from "../../utils";
+import TiptapRenderer from "../tiptap/TiptapRenderer.vue";
 import FileUpload from "../ui/FileUpload.vue";
-import Tiptap from "../ui/Tiptap.vue";
 
 const report = useReportStore();
 
@@ -13,11 +13,11 @@ const files = computed(() => report.data?.notesFiles);
 
 <template>
   <h2 class="fr-sr-only">Notes</h2>
-  <Tiptap
-    v-if="!isTiptapDocumentEmpty(report.data?.notes)"
-    :model-value="report.data?.notes"
-    :editable="false"
+  <TiptapRenderer
+    v-if="report.data?.notes && !isTiptapDocumentEmpty(report.data?.notes)"
+    :document="report.data?.notes"
   />
+
   <h3 v-if="files?.length" class="fr-text--sm">Pièces jointes</h3>
   <FileUpload
     v-if="files"