feat(information): utilisation de tiptap sur les pages infos

targets/export-elasticsearch/package.json

@@ -43,11 +43,6 @@
     "p-map": "^4.0.0",
     "p-queue": "^6.6.2",
     "reflect-metadata": "^0.1.13",
-    "rehype-raw": "^5.1.0",
-    "rehype-stringify": "^8.0.0",
-    "remark-parse": "^9.0.0",
-    "remark-rehype": "^8.1.0",
-    "unified": "^9.2.2",
     "zod": "^3.14.2"
   },
   "devDependencies": {

targets/export-elasticsearch/src/controllers/glossary.ts

@@ -23,10 +23,7 @@ export class GlossaryController implements interfaces.Controller {
   @httpPost("/", getName(GlossaryMiddleware))
   async getForOneContent(@request() req: Request) {
     const body: ValidatorCreateGlossaryType = req.body;
-    const result = await this.service.getContentWithGlossary(
-      body.type,
-      body.content
-    );
+    const result = await this.service.getContentWithGlossary(body.content);
     return {
       result,
     };

targets/export-elasticsearch/src/controllers/middlewares/glossary.ts

@@ -6,7 +6,6 @@ import { z } from "zod";
 import { name } from "../../utils";
 
 const ValidatorCreateGlossary = z.object({
-  type: z.enum(["markdown", "html"]),
   content: z.string(),
 });
 

targets/export-elasticsearch/src/services/glossary.ts

@@ -16,13 +16,11 @@ export class GlossaryService {
   ) {}
 
   async getContentWithGlossary(
-    type: ValidatorCreateGlossaryType["type"],
     content: ValidatorCreateGlossaryType["content"]
   ): Promise<string> {
     const glossary = await this.glossaryRepository.getGlossary();
     const result = await addGlossaryContentWorker({
       glossary,
-      type,
       content,
     });
     return result;
@@ -56,7 +54,6 @@ export class GlossaryService {
       if (document.contentType === "ANSWER") {
         const contentWithGlossary = await addGlossaryContentWorker({
           glossary,
-          type: "html",
           content: document.content,
         });
         await this.glossaryRepository.updateDocument(contributions[i].cdtn_id, {
@@ -80,7 +77,6 @@ export class GlossaryService {
       const document = editorialContents[i].document;
       const introWithGlossary = await addGlossaryContentWorker({
         glossary,
-        type: "markdown",
         content: document.intro,
       });
       await this.glossaryRepository.updateDocument(
@@ -97,7 +93,6 @@ export class GlossaryService {
                     if ("markdown" in block) {
                       const htmlWithGlossary = await addGlossaryContentWorker({
                         glossary,
-                        type: "markdown",
                         content: block.markdown,
                       });
                       return {

targets/export-elasticsearch/src/workers/glossary/addGlossaryContent.ts

@@ -1,7 +1,6 @@
 import { explodeGlossaryTerms } from "./explodeGlossaryTerms";
 import { insertWebComponentGlossary } from "./insertWebComponentGlossary";
 import { Glossary } from "@socialgouv/cdtn-types";
-import { markdownProcessor } from "./markdownProcessor";
 
 export const addGlossaryContent = (
   glossary: Glossary,
@@ -24,14 +23,3 @@ export const addGlossaryContent = (
 
   return insertWebComponentGlossary(content, glossaryTerms);
 };
-
-export async function addGlossaryContentToMarkdown(
-  glossary: Glossary,
-  markdown?: string | null
-): Promise<string> {
-  if (!markdown) return "";
-
-  const content = (await markdownProcessor.process(markdown))
-    .contents as string;
-  return addGlossaryContent(glossary, content);
-}

targets/export-elasticsearch/src/workers/glossary/launchWorker.ts

@@ -1,13 +1,9 @@
 import { Glossary } from "@socialgouv/cdtn-types";
-import { Worker, parentPort, workerData, isMainThread } from "worker_threads";
-import {
-  addGlossaryContent,
-  addGlossaryContentToMarkdown,
-} from "./addGlossaryContent";
+import { isMainThread, parentPort, Worker, workerData } from "worker_threads";
+import { addGlossaryContent } from "./addGlossaryContent";
 
 export interface GlossaryWorkerData {
   glossary: Glossary;
-  type: "markdown" | "html";
   content: string;
 }
 
@@ -35,12 +31,6 @@ export function addGlossaryContentWorker(
 }
 
 if (!isMainThread) {
-  const { glossary, type, content }: GlossaryWorkerData = workerData;
-  if (type === "markdown") {
-    addGlossaryContentToMarkdown(glossary, content).then((res) => {
-      parentPort?.postMessage(res);
-    });
-  } else if (type === "html") {
-    parentPort?.postMessage(addGlossaryContent(glossary, content));
-  }
+  const { glossary, content }: GlossaryWorkerData = workerData;
+  parentPort?.postMessage(addGlossaryContent(glossary, content));
 }

targets/frontend/src/components/forms/EditionField/Editor.tsx

@@ -36,6 +36,7 @@ export const Editor = ({
   disabled,
   isError = false,
 }: EditorProps) => {
+  const [currentContent, setCurrentContent] = useState(content);
   const [focus, setFocus] = useState(false);
   const [isClient, setIsClient] = useState(false);
   const editor = useEditor({
@@ -77,6 +78,7 @@ export const Editor = ({
     ],
     onUpdate: ({ editor }) => {
       const html = editor.getHTML();
+      setCurrentContent(html);
       onUpdate(html !== emptyHtml ? html : "");
     },
   });
@@ -104,6 +106,7 @@ export const Editor = ({
           focus={focus}
           isError={isError}
           disabled={disabled}
+          htmlFor={label}
         >
           <MenuStyle editor={editor} />
           <MenuSpecial editor={editor} />
@@ -115,6 +118,12 @@ export const Editor = ({
             onBlur={() => setFocus(false)}
             disabled={disabled}
           />
+          <input
+            id={label}
+            value={currentContent}
+            aria-hidden={true}
+            className={"fr-hidden"}
+          />
         </TitleBox>
       )}
     </>

targets/frontend/src/modules/common/getGlossaryContent.ts

@@ -1,12 +1,8 @@
 import { URL_EXPORT } from "src/pages/api/export";
 
-export const getGlossaryContent = async (
-  type: "html" | "markdown",
-  content: string
-): Promise<string> => {
+export const getGlossaryContent = async (content: string): Promise<string> => {
   const resultProcess = await fetch(URL_EXPORT + "/glossary", {
     body: JSON.stringify({
-      type,
       content,
     }),
     headers: {

targets/frontend/src/modules/contribution/mapContributionToDocument.ts

@@ -21,10 +21,7 @@ async function getBaseDocument(
       return {
         type: "content",
         content: data.content,
-        contentWithGlossary: await getGlossaryContent(
-          "html",
-          data.content ?? ""
-        ),
+        contentWithGlossary: await getGlossaryContent(data.content ?? ""),
       };
     case "GENERIC_NO_CDT":
       return {

targets/frontend/src/modules/informations/components/informationsEdit/InformationsBlockGraphic.tsx

@@ -1,6 +1,6 @@
 import { Stack, FormControl } from "@mui/material";
 import React from "react";
-import { FormTextField } from "src/components/forms";
+import { FormEditionField, FormTextField } from "src/components/forms";
 import { Control } from "react-hook-form";
 
 export type InformationBlockGraphicProps = {
@@ -21,14 +21,11 @@ export const InformationsBlockGraphic = ({
         spacing={2}
       >
         <FormControl>
-          <FormTextField
+          <FormEditionField
+            label="Texte"
             name={`${name}.content`}
             control={control}
-            label="Texte"
             rules={{ required: true }}
-            multiline
-            fullWidth
-            labelFixed
           />
         </FormControl>
         <FormControl>

targets/frontend/src/modules/informations/components/informationsEdit/InformationsBlockText.tsx

@@ -1,6 +1,6 @@
-import { Stack, FormControl } from "@mui/material";
+import { FormControl, Stack } from "@mui/material";
 import React from "react";
-import { FormTextField } from "src/components/forms";
+import { FormEditionField } from "src/components/forms";
 import { Control } from "react-hook-form";
 
 export type InformationBlockTextProps = {
@@ -21,14 +21,11 @@ export const InformationsBlockText = ({
         spacing={2}
       >
         <FormControl>
-          <FormTextField
+          <FormEditionField
+            label="Texte"
             name={`${name}.content`}
             control={control}
-            label="Texte"
             rules={{ required: true }}
-            multiline
-            fullWidth
-            labelFixed
           />
         </FormControl>
       </Stack>

targets/frontend/src/modules/informations/components/informationsEdit/InformationsForm.tsx

@@ -4,6 +4,7 @@ import { useFieldArray, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
   FormDatePicker,
+  FormEditionField,
   FormRadioGroup,
   FormTextField,
 } from "src/components/forms";
@@ -104,12 +105,11 @@ export const InformationsForm = ({
             />
           </FormControl>
           <FormControl>
-            <FormTextField
+            <FormEditionField
+              label="Intro"
               name="intro"
               control={control}
-              label="Intro"
-              multiline
-              fullWidth
+              rules={{ required: true }}
             />
           </FormControl>
           <FormCheckbox

targets/frontend/src/modules/informations/components/informationsEdit/__tests__/InformationsForm.test.tsx

@@ -1,10 +1,10 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
-import { fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { InformationsForm } from "../InformationsForm";
 import { InformationsResult } from "../Informations.query";
+import { ClipboardEventMock, DragEventMock } from "./richeTextUtils";
 
 const information: InformationsResult = {
   id: "cafaf8d6-af91-4901-a18d-e70921788088",
@@ -47,6 +47,9 @@ const information: InformationsResult = {
 
 const onSubmit = jest.fn(() => Promise.resolve());
 
+(global as any).ClipboardEvent = ClipboardEventMock;
+(global as any).DragEvent = DragEventMock;
+
 describe("InformationForm", () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -147,8 +150,6 @@ describe("InformationForm", () => {
       screen.getAllByLabelText<HTMLInputElement>("Description");
     const [inputInfoDescriptionMeta] =
       screen.getAllByLabelText<HTMLInputElement>("Description Meta");
-    const [inputContentText1] =
-      screen.getAllByLabelText<HTMLInputElement>("Texte");
     const [inputContentRefUrl1, inputRefUrl1] =
       screen.getAllByLabelText<HTMLInputElement>("Url");
     const buttonSave = screen.getByText("Sauvegarder");
@@ -158,7 +159,6 @@ describe("InformationForm", () => {
     userEvent.clear(inputInfoDescription);
     userEvent.clear(inputInfoDescriptionMeta);
     userEvent.clear(inputContentTitle1);
-    userEvent.clear(inputContentText1);
     userEvent.clear(inputContentRefTitle1);
     userEvent.clear(inputContentRefUrl1);
     userEvent.clear(inputRefTitle1);
@@ -180,9 +180,6 @@ describe("InformationForm", () => {
     const [errorInfoMetaDescription] = await screen.findAllByText(
       "Une description meta doit être renseignée"
     );
-    const [errorContentText] = await screen.findAllByText(
-      "Un texte doit être renseigné"
-    );
     const [errorContentRefUrl1, errorRefUrl1] = await screen.findAllByText(
       "Le format de l'url est invalide"
     );
@@ -196,7 +193,6 @@ describe("InformationForm", () => {
     expect(errorContentRefUrl1).toBeInTheDocument();
     expect(errorRefTitle1).toBeInTheDocument();
     expect(errorRefUrl1).toBeInTheDocument();
-    expect(errorContentText).toBeInTheDocument();
 
     await waitFor(() => {
       expect(onSubmit).not.toHaveBeenCalledTimes(1);

targets/frontend/src/modules/informations/components/informationsEdit/__tests__/richeTextUtils.ts

@@ -0,0 +1,43 @@
+export class ClipboardDataMock {
+  getData: jest.Mock<string, [string]>;
+  setData: jest.Mock<void, [string, string]>;
+
+  constructor() {
+    this.getData = jest.fn();
+    this.setData = jest.fn();
+  }
+}
+
+export class ClipboardEventMock extends Event {
+  clipboardData: ClipboardDataMock;
+
+  constructor(type: string, options?: EventInit) {
+    super(type, options);
+    this.clipboardData = new ClipboardDataMock();
+  }
+}
+
+export class DataTransferMock {
+  data: { [key: string]: string };
+
+  constructor() {
+    this.data = {};
+  }
+
+  setData(format: string, data: string): void {
+    this.data[format] = data;
+  }
+
+  getData(format: string): string {
+    return this.data[format] || "";
+  }
+}
+
+export class DragEventMock extends Event {
+  dataTransfer: DataTransferMock;
+
+  constructor(type: string, options?: EventInit) {
+    super(type, options);
+    this.dataTransfer = new DataTransferMock();
+  }
+}

targets/frontend/src/modules/informations/mapInformationToDocument.ts

@@ -9,10 +9,7 @@ export const mapInformationToDocument = async (
   data: Information,
   document?: HasuraDocument<any>
 ): Promise<HasuraDocument<any>> => {
-  const introWithGlossary = await getGlossaryContent(
-    "markdown",
-    data.intro ?? ""
-  );
+  const introWithGlossary = await getGlossaryContent(data.intro ?? "");
   return {
     cdtn_id: document?.cdtn_id ?? generateCdtnId(data.title),
     initial_id: data.id ?? generateInitialId(),
@@ -48,7 +45,6 @@ export const mapInformationToDocument = async (
               blocks: await Promise.all(
                 blocks.map(async (block) => {
                   const htmlWithGlossary = await getGlossaryContent(
-                    "markdown",
                     block.content ?? ""
                   );
                   return {