feat: ajout du support de l'accordéon sur les contributions

.github/workflows/quality.yml

@@ -22,9 +22,12 @@ jobs:
         with:
           node-version: 20.3.1
           cache: "yarn"
-      - name: Install dependencies
+      - name: Setup tiptap pro
         run: |
-          yarn install --prefer-offline --frozen-lockfile
+          echo "@tiptap-pro:registry=https://registry.tiptap.dev/" >> ~/.npmrc
+          echo "//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_PRO_TOKEN }}" >> ~/.npmrc
+      - name: Install dependencies
+        run: yarn install --prefer-offline --frozen-lockfile
       - name: Build code
         run: |
           yarn build

.gitignore

@@ -5,3 +5,4 @@ docker-compose.override.yml
 .vscode
 *-error.log
 .swc
+.npmrc

.kontinuous/env/dev/templates/npm.sealed-secret.yaml

@@ -0,0 +1,16 @@
+---
+apiVersion: "bitnami.com/v1alpha1"
+kind: "SealedSecret"
+metadata:
+  annotations: &a1
+    sealedsecrets.bitnami.com/cluster-wide: "true"
+  name: npm
+  namespace: null
+spec:
+  encryptedData:
+    NPMRC: AgC5wPPiCBlsc6a+W7A1ZYeymkGxDF4365BNxxoH9If9iYy4AaGzInGLcChizK0uex2q6YHexE+4bus1k/W2/zdpuCozSA4T26X6kU4SbA7KLCH4P33JMQ0Wbic9ytNKOOIVSUZUPq5g3c6D12M+yP34blT8XYPKJPOQdQysJEJGR0hyy3OBZvsIiOoIdRe7u4lCiUE+cNf3xu13/LH5DqYHcgEphPQAFHbSCsES2HxIQCMES1f796MnoTqUT7jbmcZquX+uvmD/D+vrYnJeTOWPRTCTm7LrySPfC9x51ugxGvzckIRyQhV2UoqRzC4E3P3tTH+KIuKpURIcyegCi68ziaB3Snuzp0A7VdpGwvbFCCjBNZ1BQw9XtZ6u19TlCvAYA3Kp6ZCovuq08IEoNUHoFX7ozp/evkgnzxJUCFOjBIOWwulant/TgVs9FJ37GUbLqiLzFvq6aIcMb5W8H6HYWQdtMxk94qUfbVwpjWwsQGT/SsKYKWHS47hbchEc8cvPB66wQlxqda9a+s3N3SLqqi2K6AJDQJnbsEI2jyAZ2NsRGmlzkp6wMGRmFALEHpFReBL7Sp5p4Ajy4y71I3KqVOJ1TnPAvfDo58EIHBaJv7nfNXpBgLf3QL1+uHV/36KvBj0Z2M9coQNRjyVW5U7gVKT7+usjFuQLP+gLRjs4xSBhmaUtr0PMvWK7dKcNRa0S8rTLPZkYdcOgSR40X6g5EGYP8gCbasdjxpSgmrwRZ4g96VRJioQxxf6Y5hfBNFgyFY+HFxk3lXQDUTo+p5fZqKrt6S5treYU/Yx5PMfWRLD0FMKXCka7P1dU7akXK9jSt6QXwMS9fUH+YHR/EStL+HPaSa+25CihSJZETrqikQ31qqa0MxTr3+TpYYKfxXKQeJDB
+  template:
+    metadata:
+      annotations: *a1
+      name: npm
+    type: "Opaque"

.kontinuous/env/preprod/templates/npm.sealed-secret.yaml

@@ -0,0 +1,16 @@
+---
+apiVersion: "bitnami.com/v1alpha1"
+kind: "SealedSecret"
+metadata:
+  annotations: &a1
+    sealedsecrets.bitnami.com/cluster-wide: "true"
+  name: npm
+  namespace: null
+spec:
+  encryptedData:
+    NPMRC: AgC5wPPiCBlsc6a+W7A1ZYeymkGxDF4365BNxxoH9If9iYy4AaGzInGLcChizK0uex2q6YHexE+4bus1k/W2/zdpuCozSA4T26X6kU4SbA7KLCH4P33JMQ0Wbic9ytNKOOIVSUZUPq5g3c6D12M+yP34blT8XYPKJPOQdQysJEJGR0hyy3OBZvsIiOoIdRe7u4lCiUE+cNf3xu13/LH5DqYHcgEphPQAFHbSCsES2HxIQCMES1f796MnoTqUT7jbmcZquX+uvmD/D+vrYnJeTOWPRTCTm7LrySPfC9x51ugxGvzckIRyQhV2UoqRzC4E3P3tTH+KIuKpURIcyegCi68ziaB3Snuzp0A7VdpGwvbFCCjBNZ1BQw9XtZ6u19TlCvAYA3Kp6ZCovuq08IEoNUHoFX7ozp/evkgnzxJUCFOjBIOWwulant/TgVs9FJ37GUbLqiLzFvq6aIcMb5W8H6HYWQdtMxk94qUfbVwpjWwsQGT/SsKYKWHS47hbchEc8cvPB66wQlxqda9a+s3N3SLqqi2K6AJDQJnbsEI2jyAZ2NsRGmlzkp6wMGRmFALEHpFReBL7Sp5p4Ajy4y71I3KqVOJ1TnPAvfDo58EIHBaJv7nfNXpBgLf3QL1+uHV/36KvBj0Z2M9coQNRjyVW5U7gVKT7+usjFuQLP+gLRjs4xSBhmaUtr0PMvWK7dKcNRa0S8rTLPZkYdcOgSR40X6g5EGYP8gCbasdjxpSgmrwRZ4g96VRJioQxxf6Y5hfBNFgyFY+HFxk3lXQDUTo+p5fZqKrt6S5treYU/Yx5PMfWRLD0FMKXCka7P1dU7akXK9jSt6QXwMS9fUH+YHR/EStL+HPaSa+25CihSJZETrqikQ31qqa0MxTr3+TpYYKfxXKQeJDB
+  template:
+    metadata:
+      annotations: *a1
+      name: npm
+    type: "Opaque"

.kontinuous/env/prod/templates/npm.sealed-secret.yaml

@@ -0,0 +1,13 @@
+apiVersion: bitnami.com/v1alpha1
+kind: SealedSecret
+metadata:
+  name: npm
+  namespace: cdtn-admin
+spec:
+  encryptedData:
+    NPMRC: AgCSx7NQtX6udZAkoMiEyjs9KJK7AzFeyhJajO88Eabeqd0oGDm+aWyU4J6cwY5AzYBq5KgE5k75NgRZaWVA8sNiHJrBmx5WtCsk8Cju96XamJBCzGRRExSivj2LhwPlbMy8wVYW87E1B58s7/PxWPXdrDqhKD8Hla+S/PJlsUC0LG5gPRv9Ts7ozqm+DHHRFMqIU7GyrO1eXFd+NLYTgnckXGdAlN8wPwQxPpWJzu4DC0VNP5DdB5Bbtjb0ayxdbGcmD95sA+/wFsxevLBGMVTt84fTf5gmbc3GOEYBQo699JhpkrJGwFTabAffZA0o9LoyHbsUbkppHYiogvMUAQmFV6ufaFnUOF6Us/5g97ELWiJ0x3ZTCIq0usOyrzOjgxeHYlBDZ9/gvXzzkgUoza8TAteUWKCre7b4syB8VgFR5kAttjMoz+A74n8hr60sRIJUNBr4tDd6a+JFDcckA9BDFIEz5MaT9aBiZB35cksAyyBzHpuhBLrD1aA+ogL0N+yZFu5MXW7RFRYE+P1vEQUDhJPas7wrijPckxvkMDhOJtS3giXhMja6SlUN/3dgyzx90iMmw/VR1Gv68MZnc7qb8SzWUb10So8atXcBv4fTIHDSzPKc4L4utFfl+ScJF0Za08kTaUWCNwfUJA4NxwEAR2O05+w8aeRlmKMnm6oAjuAjjKgUJab4hTyXc4adlEWt8P9GZS0RXUqFj3aUI53Aoj3L4ILkW8Vdtgkboc0tZtE46GzYP0jR6u2o+t2c+k9M2js9gbqDcviqwgYi9fLNRoVMLt5U4Pdp+8YzbGmsJYMTwq4MHcBT5xP4CZuRMC4mEn4y4cvikfdqxt8w2mjLVDs3DegZ4eAlLxfSG9NMn3Gi3LUurE6oP0iFPJotN2ZXS07y
+template:
+  metadata:
+    name: npm
+    namespace: cdtn-admin
+  type: Opaque

.kontinuous/values.yaml

@@ -6,21 +6,37 @@ jobs:
       with:
         imagePackage: frontend
         dockerfile: targets/frontend/Dockerfile
+        secrets:
+          npmrc:
+            secretName: npm
+            secretKey: NPMRC
     build-ingester:
       use: build
       with:
         imagePackage: ingester
         dockerfile: targets/ingester/Dockerfile
+        secrets:
+          npmrc:
+            secretName: npm
+            secretKey: NPMRC
     build-alert:
       use: build
       with:
         imagePackage: alert
         dockerfile: targets/alert-cli/Dockerfile
+        secrets:
+          npmrc:
+            secretName: npm
+            secretKey: NPMRC
     build-export:
       use: build
       with:
         imagePackage: export
         dockerfile: targets/export-elasticsearch/Dockerfile
+        secrets:
+          npmrc:
+            secretName: npm
+            secretKey: NPMRC
     build-contributions:
       use: build
       with:

README-dev.md

@@ -1,5 +1,19 @@
 # Code du travail numérique - Administration - dev
 
+## Setup
+
+Pour intialiser le projet, nous avons besoin d'une dépendance depuis le registry privé de [tiptap](https://tiptap.dev/). Suivez les étapes suivantes :
+ * [Créer un compte (gratuit)](https://tiptap.dev/register) sur tiptap.
+ * Se rendre sur la page [Pro Extensions](https://collab.tiptap.dev/pro-extensions) de votre compte pour récupérer le token
+ * Créer un fichier `.npmrc` à la racine avec le contenu suivant (le contenu est également disponible sur la page contenant le token de tiptap) :
+
+```
+@tiptap-pro:registry=https://registry.tiptap.dev/
+//registry.tiptap.dev/:_authToken=VOTRE_TOKEN_ICI
+```
+
+Vous pouvez maintenant lancer la commande `yarn install` pour installer les packages du projet.
+
 ## URLs
 
 | Environnement                                      | URL                                                       |

targets/alert-cli/Dockerfile

@@ -1,25 +1,27 @@
 ARG NODE_VERSION=20.3.1-alpine
 
 # dist
 FROM node:$NODE_VERSION AS dist
 
 WORKDIR /
 
 COPY . /
 
-RUN yarn --frozen-lockfile
+# hadolint ignore=SC2046
+RUN --mount=type=secret,id=npmrc,target=/.npmrc \
+    yarn --frozen-lockfile
 
 RUN yarn workspace @shared/graphql-client build
 
 RUN yarn workspace @shared/dila-resolver build
 
 RUN yarn workspace alert-cli build
 
 # app
 FROM node:$NODE_VERSION
 
 # Add git to docker image
 RUN apk add --no-cache git openssh-client
 
 WORKDIR /app
 

targets/export-elasticsearch/Dockerfile

@@ -15,7 +15,9 @@ COPY targets/export-elasticsearch/package.json /targets/export-elasticsearch/pac
 COPY package.json /package.json
 COPY yarn.lock /yarn.lock
 
-RUN yarn --frozen-lockfile
+# hadolint ignore=SC2046
+RUN --mount=type=secret,id=npmrc,target=/.npmrc \
+    yarn --frozen-lockfile
 
 COPY . /
 

targets/frontend/Dockerfile

@@ -12,8 +12,12 @@ COPY shared/types/package.json /shared/types/package.json
 COPY targets/frontend/package.json /targets/frontend/package.json
 COPY package.json /package.json
 COPY yarn.lock /yarn.lock
+# Hack copy .npmrc file only if exist (dev only) otherwise use secret
+COPY *.npmrc /
 
-RUN yarn --frozen-lockfile
+# hadolint ignore=SC2046
+RUN --mount=type=secret,id=npmrc,target=/.npmrc \
+    yarn --frozen-lockfile
 
 COPY . /
 

targets/frontend/package.json

@@ -27,12 +27,16 @@
     "@socialgouv/cdtn-sources": "^4.52.1",
     "@socialgouv/cdtn-ui": "^4.92.0",
     "@socialgouv/matomo-next": "^1.2.2",
+    "@tiptap-pro/extension-details": "^2.2.3",
+    "@tiptap-pro/extension-details-content": "^2.2.3",
+    "@tiptap-pro/extension-details-summary": "^2.2.3",
+    "@tiptap/extension-placeholder": "^2.1.10",
     "@tiptap/extension-table": "^2.1.7",
     "@tiptap/extension-table-cell": "^2.1.7",
     "@tiptap/extension-table-header": "^2.1.7",
     "@tiptap/extension-table-row": "^2.1.7",
-    "@tiptap/pm": "^2.0.3",
-    "@tiptap/react": "^2.0.3",
+    "@tiptap/pm": "^2.1.10",
+    "@tiptap/react": "^2.1.10",
     "@tiptap/starter-kit": "^2.0.3",
     "@urql/exchange-auth": "^0.1.6",
     "@zeit/next-source-maps": "0.0.4-canary.1",

targets/frontend/src/components/contributions/answers/Answer.tsx

@@ -152,7 +152,14 @@ export const ContributionsAnswer = ({
       <h2>{answer?.agreement?.name}</h2>
       <Box sx={{ display: "flex", flexDirection: "row" }}>
         <Box sx={{ width: "70%" }}>
-          <form>
+          <form
+            onSubmit={(e) => {
+              // This is a hack to prevent the form from being submitted by the tiptap editor.
+              // The details extension is not working properly and submit the form when click on the arrow.
+              // See https://github.com/ueberdosis/tiptap/issues/4384
+              e.preventDefault();
+            }}
+          >
             <Stack spacing={5}>
               <FormControl>
                 <FormTextField

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

@@ -12,6 +12,10 @@ import { TitleBox } from "../TitleBox";
 import { MenuSpecial } from "./MenuSpecial";
 import { MenuStyle } from "./MenuStyle";
 import { MenuTable } from "./MenuTable";
+import { Details } from "@tiptap-pro/extension-details";
+import { DetailsSummary } from "@tiptap-pro/extension-details-summary";
+import { DetailsContent } from "@tiptap-pro/extension-details-content";
+import { Placeholder } from "@tiptap/extension-placeholder";
 
 export type EditorProps = {
   content?: string | null;
@@ -36,6 +40,23 @@ export const Editor = ({ content, onUpdate, error, disabled }: EditorProps) => {
       TableRow,
       TableHeader,
       TableCell,
+      Details.configure({
+        persist: false,
+        HTMLAttributes: {
+          class: "details",
+        },
+      }),
+      DetailsSummary,
+      DetailsContent,
+      Placeholder.configure({
+        includeChildren: true,
+        placeholder: ({ node }) => {
+          if (node.type.name === "detailsSummary") {
+            return "Titre de la section";
+          }
+          return "";
+        },
+      }),
     ],
     onUpdate: ({ editor }) => {
       const html = editor.getHTML();
@@ -80,17 +101,73 @@ export const Editor = ({ content, onUpdate, error, disabled }: EditorProps) => {
 
 const StyledEditorContent = styled(EditorContent)`
   padding: 0 12px;
+
   .ProseMirror:focus {
     outline: none;
   }
+
   table {
     th {
       background-color: #f3f3f3;
       min-width: 100px;
     }
+
     td {
       border: 1px solid black;
       text-align: center;
     }
   }
+
+  .ProseMirror {
+    > * + * {
+      margin-top: 0.75em;
+    }
+
+    .is-empty::before {
+      content: attr(data-placeholder);
+      float: left;
+      color: #adb5bd;
+      pointer-events: none;
+      height: 0;
+    }
+
+    .details {
+      display: flex;
+      margin: 1rem 0;
+      border: 0;
+      padding: 0.5rem;
+
+      > button {
+        display: flex;
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        padding: 0;
+
+        &::before {
+          content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGFyaWEtaGlkZGVuPSJ0cnVlIiBjbGFzcz0ic2MtaW1XWUFJIGpFTHpJTCI+PHBvbHlsaW5lIHBvaW50cz0iOSAxOCAxNSAxMiA5IDYiIHN0cm9rZT0iIzZmOGFjOSI+PC9wb2x5bGluZT48L3N2Zz4=");
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #6f8ac9;
+          font-weight: bold;
+          width: 2.5em;
+          height: 2em;
+        }
+      }
+
+      &.is-open > button::before {
+        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGFyaWEtaGlkZGVuPSJ0cnVlIiBjbGFzcz0ic2MtaW1XWUFJIGpFTHpJTCI+PHBvbHlsaW5lIHBvaW50cz0iOSAxOCAxNSAxMiA5IDYiIHN0cm9rZT0iIzZmOGFjOSI+PC9wb2x5bGluZT48L3N2Zz4=");
+        transform: rotate(90deg);
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 `;

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

@@ -2,6 +2,7 @@ import { Editor, FloatingMenu } from "@tiptap/react";
 import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
 import GridOnIcon from "@mui/icons-material/GridOn";
+import StorageIcon from "@mui/icons-material/Storage";
 import { styled } from "@mui/system";
 
 const tableHTML = `
@@ -58,6 +59,18 @@ export const MenuSpecial = ({ editor }: { editor: Editor | null }) => {
       >
         <GridOnIcon />
       </button>
+      <button
+        onClick={() =>
+          editor.isActive("details")
+            ? editor.chain().focus().unsetDetails().run()
+            : editor.chain().focus().setDetails().run()
+        }
+        className={editor.isActive("details") ? "is-active" : ""}
+        type="button"
+        title="Ajouter un accordéon"
+      >
+        <StorageIcon />
+      </button>
     </StyledFloatingMenu>
   ) : (
     <></>

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

@@ -1,6 +1,7 @@
-import { Editor, BubbleMenu } from "@tiptap/react";
+import { BubbleMenu, Editor } from "@tiptap/react";
 import FormatBoldIcon from "@mui/icons-material/FormatBold";
 import FormatItalicIcon from "@mui/icons-material/FormatItalic";
+import StorageIcon from "@mui/icons-material/Storage";
 import { styled } from "@mui/system";
 
 export const MenuStyle = ({ editor }: { editor: Editor | null }) => {
@@ -42,6 +43,18 @@ export const MenuStyle = ({ editor }: { editor: Editor | null }) => {
       >
         <FormatItalicIcon />
       </button>
+      <button
+        onClick={() => {
+          editor.isActive("details")
+            ? editor.chain().focus().unsetDetails().run()
+            : editor.chain().focus().setDetails().run();
+        }}
+        className={editor.isActive("details") ? "is-active" : ""}
+        type="button"
+        title="Placer dans un accordéon"
+      >
+        <StorageIcon />
+      </button>
     </StyledBubbleMenu>
   ) : (
     <></>
@@ -53,6 +66,7 @@ const StyledBubbleMenu = styled(BubbleMenu)`
   background-color: #0d0d0d;
   padding: 0.2rem;
   border-radius: 0.5rem;
+
   button {
     border: none;
     background: none;

targets/ingester/Dockerfile

@@ -9,7 +9,9 @@ COPY . /
 
 RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*
 
-RUN yarn --frozen-lockfile
+# hadolint ignore=SC2046
+RUN --mount=type=secret,id=npmrc,target=/.npmrc \
+    yarn --frozen-lockfile
 
 RUN yarn workspace @shared/graphql-client build