fix: carriage return issue

packages/frontend/src/features/chips/useChipOptions.tsx

@@ -32,6 +32,6 @@ export const useChipOptions = (key?: string) => {
 const transformChip = (chip: Clause_v2) => {
   return {
     ...chip,
-    text: chip.text?.replaceAll("\\n", "<br />"),
+    text: chip.text?.replaceAll("\\n", "<br />").replace(/\n/g, "<br />"),
   };
 };

packages/frontend/src/features/menu/ClauseMenu.tsx

@@ -7,7 +7,7 @@ import { Divider, Flex, Stack, styled } from "#styled-system/jsx";
 import { Fragment } from "react/jsx-runtime";
 import { MenuTitle } from "./MenuTitle";
 import type { ModalContentProps } from "./MenuButton";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { css } from "#styled-system/css";
 import { Clause_v2 } from "@cr-vif/electric-client/frontend";
@@ -18,6 +18,12 @@ import { useMutation } from "@tanstack/react-query";
 export const ClauseMenu = ({ isNational, ...props }: { isNational: boolean } & ModalContentProps) => {
   const user = useUser()!;
 
+  useEffect(() => {
+    db.clause_v2
+      .findFirst({ where: { value: "Lacanal" } })
+      .then((clause) => console.log(clause!.text.replace(/\n/g, "\\n")));
+  }, []);
+
   const clausesQuery = useLiveQuery(
     db.clause_v2.liveMany({
       where: {
@@ -33,7 +39,7 @@ export const ClauseMenu = ({ isNational, ...props }: { isNational: boolean } & M
 
   return (
     <ClauseForm
-      clauses={clausesQuery.results?.map((c) => ({ ...c, text: c.text?.replaceAll("\\n", "\n") ?? "" })) ?? []}
+      clauses={clausesQuery.results?.map((c) => ({ ...c, text: c.text?.replaceAll("\n", "\\n") ?? "" })) ?? []}
       {...props}
       isNational={isNational}
     />
@@ -52,7 +58,10 @@ const getDiff = (baseClauses: Clause_v2[], modifiedClauses: Clause_v2[]) => {
   });
   const deletedClauses = baseClauses.filter((bc) => !modifiedClauses.find((c) => bc.id === c.id));
 
-  return { newClauses, updatedClauses, deletedClauses };
+  const formatClause = (clause: Clause_v2) => ({ ...clause, text: clause.text.replaceAll("\n", "\n") });
+
+  console.log(updatedClauses[0].text, updatedClauses.map(formatClause)[0].text);
+  return { newClauses: newClauses.map(formatClause), updatedClauses: updatedClauses.map(formatClause), deletedClauses };
 };
 
 const ClauseForm = ({
@@ -82,6 +91,9 @@ const ClauseForm = ({
         });
       }
     },
+    {
+      onSuccess: () => setIsEditing(false),
+    },
   );
 
   const onSubmit = (data: Form) => {
@@ -118,10 +130,13 @@ const ClauseForm = ({
             mr: { base: "0 !important", lg: "8px !important" },
           },
         })}
+        nativeButtonProps={{ type: "button" }}
         iconId="ri-pencil-fill"
         priority="secondary"
-        type="button"
-        onClick={() => setIsEditing(!isEditing)}
+        onClick={(e) => {
+          e.preventDefault();
+          setIsEditing((isEditing) => !isEditing);
+        }}
       >
         <styled.span hideBelow="lg">Modifier</styled.span>
       </Button>

packages/pdf/src/report.tsx

@@ -1,7 +1,7 @@
 import { Document, PDFViewer, Page } from "@react-pdf/renderer";
 import { Html } from "react-pdf-html";
 import React from "react";
-import type { Udap, Report, Clause, Service_instructeurs } from "@cr-vif/electric-client/frontend";
+import type { Udap, Report, Service_instructeurs, Clause_v2 } from "@cr-vif/electric-client/frontend";
 
 export const ReportPDFDocument = ({ udap, htmlString, images }: ReportPDFDocumentProps) => {
   return (
@@ -145,7 +145,7 @@ export type ReportWithUser = Report & { user?: { email: string; name: string } }
 
 export const getReportHtmlString = (
   report: ReportWithUser,
-  chipOptions: Clause[],
+  chipOptions: Clause_v2[],
   udap: Udap,
   serviceInstructeur?: Service_instructeurs,
 ) => {
@@ -250,7 +250,7 @@ const formatPhoneNumber = (phoneNumber: string) => {
   )} ${phoneNumber.slice(7, 9)}`;
 };
 
-const getMultipleChips = (chipOptions: Clause[], key: string, values: string) => {
+const getMultipleChips = (chipOptions: Clause_v2[], key: string, values: string) => {
   return values
     .split(",")
     .map((value) => {