Améliorer la saisie avec un éditeur WYSIWYG

.vscode/launch.json

@@ -0,0 +1,40 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    // Frontend (Chrome)
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "FRONT (Vue.js) – Chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/confiture-web-app/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    },
+    // Frontend (Chrome)
+    {
+      "type": "firefox",
+      "request": "launch",
+      "name": "FRONT (Vue.js) – Firefox",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/confiture-web-app/src",
+      "pathMappings": [
+        { "url": "webpack:///confiture-web-app/src/", "path": "${webRoot}/" }
+      ]
+    },
+    // Backend (REST API)
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "BACKEND (nest)",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "start:debug", "--", "--inspect-brk"],
+      "autoAttachChildProcesses": true,
+      "restart": true,
+      "sourceMaps": true,
+      "stopOnEntry": false,
+      "console": "integratedTerminal"
+    }
+  ]
+}

confiture-rest-api/prisma/migrations/20240906161141_add_display_field_on_files_attachment_or_editor/migration.sql

@@ -0,0 +1,8 @@
+-- CreateEnum
+CREATE TYPE "FileDisplay" AS ENUM ('EDITOR', 'ATTACHMENT');
+
+-- AlterTable
+ALTER TABLE "AuditFile" ADD COLUMN     "display" "FileDisplay" NOT NULL DEFAULT 'ATTACHMENT';
+
+-- AlterTable
+ALTER TABLE "StoredFile" ADD COLUMN     "display" "FileDisplay" NOT NULL DEFAULT 'ATTACHMENT';

confiture-rest-api/prisma/schema.prisma

@@ -169,6 +169,11 @@ model AuditTrace {
   Audit                Audit?
 }
 
+enum FileDisplay {
+  EDITOR
+  ATTACHMENT
+}
+
 model StoredFile {
   id               Int    @id @default(autoincrement())
   originalFilename String
@@ -184,6 +189,9 @@ model StoredFile {
   key          String
   thumbnailKey String
 
+  // Inside TipTap editor (EDITOR) or added as an attachment (ATTACHMENT)?
+  display FileDisplay @default(ATTACHMENT)
+
   criterionResult   CriterionResult? @relation(fields: [criterionResultId], references: [id], onDelete: Cascade, onUpdate: Cascade)
   criterionResultId Int?
 }
@@ -203,7 +211,10 @@ model AuditFile {
   key          String
   thumbnailKey String?
 
-  audit         Audit?  @relation(fields: [auditUniqueId], references: [editUniqueId], onDelete: Cascade)
+  audit   Audit?      @relation(fields: [auditUniqueId], references: [editUniqueId], onDelete: Cascade)
+  // Inside TipTap editor (EDITOR) or added as an attachment (ATTACHMENT)?
+  display FileDisplay @default(ATTACHMENT)
+
   auditUniqueId String?
 }
 

confiture-rest-api/src/audits/audit.service.ts

@@ -4,6 +4,7 @@ import {
   CriterionResult,
   CriterionResultStatus,
   CriterionResultUserImpact,
+  FileDisplay,
   Prisma,
   StoredFile
 } from "@prisma/client";
@@ -418,30 +419,14 @@ export class AuditService {
     pageId: number,
     topic: number,
     criterium: number,
-    file: Express.Multer.File
+    file: Express.Multer.File,
+    display: FileDisplay = FileDisplay.ATTACHMENT
   ) {
-    const randomPrefix = nanoid();
-
-    const key = `audits/${editUniqueId}/${randomPrefix}/${file.originalname}`;
-
-    const thumbnailKey = `audits/${editUniqueId}/${randomPrefix}/thumbnail_${file.originalname}`;
-
-    const thumbnailBuffer = await sharp(file.buffer)
-      .jpeg({
-        mozjpeg: true
-      })
-      .flatten({ background: { r: 255, g: 255, b: 255, alpha: 0 } })
-      .resize(200, 200, { fit: "inside" })
-      .toBuffer();
-
-    await Promise.all([
-      this.fileStorageService.uploadFile(file.buffer, file.mimetype, key),
-      this.fileStorageService.uploadFile(
-        thumbnailBuffer,
-        "image/jpeg",
-        thumbnailKey
-      )
-    ]);
+    const { key, thumbnailKey } = await this.uploadFileToStorage(
+      editUniqueId,
+      file,
+      { createThumbnail: display === FileDisplay.ATTACHMENT }
+    );
 
     const storedFile = await this.prisma.storedFile.create({
       data: {
@@ -459,7 +444,8 @@ export class AuditService {
         originalFilename: file.originalname,
         mimetype: file.mimetype,
         size: file.size,
-        thumbnailKey
+        thumbnailKey,
+        display
       }
     });
 
@@ -500,22 +486,59 @@ export class AuditService {
     return true;
   }
 
-  async saveNotesFile(editUniqueId: string, file: Express.Multer.File) {
+  async saveNotesFile(
+    editUniqueId: string,
+    file: Express.Multer.File,
+    display: FileDisplay = FileDisplay.ATTACHMENT
+  ) {
+    const { key, thumbnailKey } = await this.uploadFileToStorage(
+      editUniqueId,
+      file,
+      { createThumbnail: display === FileDisplay.ATTACHMENT }
+    );
+
+    const storedFile = await this.prisma.auditFile.create({
+      data: {
+        audit: {
+          connect: {
+            editUniqueId
+          }
+        },
+
+        key,
+        originalFilename: file.originalname,
+        mimetype: file.mimetype,
+        size: file.size,
+
+        thumbnailKey,
+        display
+      }
+    });
+
+    return storedFile;
+  }
+
+  async uploadFileToStorage(
+    uniqueId: string,
+    file: Express.Multer.File,
+    options?: { createThumbnail: boolean }
+  ): Promise<{ key: string; thumbnailKey?: string }> {
     const randomPrefix = nanoid();
 
-    const key = `audits/${editUniqueId}/${randomPrefix}/${file.originalname}`;
+    const key: string = `audits/${uniqueId}/${randomPrefix}/${file.originalname}`;
 
-    let thumbnailKey;
+    let thumbnailKey: string;
 
-    if (file.mimetype.startsWith("image")) {
+    if (file.mimetype.startsWith("image") && options.createThumbnail) {
       // If it's an image, create a thumbnail and upload it
-      thumbnailKey = `audits/${editUniqueId}/${randomPrefix}/thumbnail_${file.originalname}`;
+      thumbnailKey = `audits/${uniqueId}/${randomPrefix}/thumbnail_${file.originalname}`;
 
       const thumbnailBuffer = await sharp(file.buffer)
-        .resize(200, 200, { fit: "inside" })
         .jpeg({
           mozjpeg: true
         })
+        .flatten({ background: { r: 255, g: 255, b: 255, alpha: 0 } })
+        .resize(200, 200, { fit: "inside" })
         .toBuffer();
 
       await Promise.all([
@@ -529,25 +552,7 @@ export class AuditService {
     } else {
       await this.fileStorageService.uploadFile(file.buffer, file.mimetype, key);
     }
-
-    const storedFile = await this.prisma.auditFile.create({
-      data: {
-        audit: {
-          connect: {
-            editUniqueId
-          }
-        },
-
-        key,
-        originalFilename: file.originalname,
-        mimetype: file.mimetype,
-        size: file.size,
-
-        thumbnailKey
-      }
-    });
-
-    return storedFile;
+    return { key, thumbnailKey };
   }
 
   /**
@@ -832,7 +837,8 @@ export class AuditService {
         key: file.key,
         thumbnailKey: file.thumbnailKey,
         size: file.size,
-        mimetype: file.mimetype
+        mimetype: file.mimetype,
+        display: file.display
       })),
 
       criteriaCount: {
@@ -999,7 +1005,8 @@ export class AuditService {
         exampleImages: r.exampleImages.map((img) => ({
           filename: img.originalFilename,
           key: img.key,
-          thumbnailKey: img.thumbnailKey
+          thumbnailKey: img.thumbnailKey,
+          display: img.display
         }))
       }))
     };

confiture-rest-api/src/audits/audits.controller.ts

@@ -28,6 +28,7 @@ import {
 import { Audit } from "src/generated/nestjs-dto/audit.entity";
 import { CriterionResult } from "src/generated/nestjs-dto/criterionResult.entity";
 import { MailService } from "../mail/mail.service";
+import { NotesFileDto } from "./dto/notes-file.dto";
 import { AuditExportService } from "./audit-export.service";
 import { AuditService } from "./audit.service";
 import { CreateAuditDto } from "./dto/create-audit.dto";
@@ -174,7 +175,8 @@ export class AuditsController {
       body.pageId,
       body.topic,
       body.criterium,
-      file
+      file,
+      body.display
     );
   }
 
@@ -191,15 +193,16 @@ export class AuditsController {
           errorHttpStatusCode: HttpStatus.UNPROCESSABLE_ENTITY
         })
     )
-    file: Express.Multer.File
+    file: Express.Multer.File,
+    @Body() body: NotesFileDto
   ) {
     const audit = await this.auditService.getAuditWithEditUniqueId(uniqueId);
 
     if (!audit) {
       return this.sendAuditNotFoundStatus(uniqueId);
     }
 
-    return await this.auditService.saveNotesFile(uniqueId, file);
+    return await this.auditService.saveNotesFile(uniqueId, file, body.display);
   }
 
   @Delete("/:uniqueId/results/examples/:exampleId")

confiture-rest-api/src/audits/dto/audit-report.dto.ts

@@ -2,7 +2,8 @@ import { ApiProperty } from "@nestjs/swagger";
 import {
   AuditType,
   CriterionResultStatus,
-  CriterionResultUserImpact
+  CriterionResultUserImpact,
+  FileDisplay
 } from "@prisma/client";
 
 export class AuditReportDto {
@@ -190,18 +191,27 @@ class ReportCriterionResult {
 }
 
 class ExampleImage {
-  /** @example "mon-image.jpg" */
+  /** @example "my-image.jpg" */
   filename: string;
-  /** @example "audit/xxxx/my-image.jpg" */
+  /** @example "audit/EWIsM6sYI2cC0lI7Ok2PE/3gnCTQ5ztOdEnKRraIMYG/my-image.jpg" */
   key: string;
-  /** @example "audit/xxxx/my-image_thumbnail.jpg" */
+  /** @example "audit/EWIsM6sYI2cC0lI7Ok2PE/3gnCTQ5ztOdEnKRraIMYG/my-image_thumbnail.jpg" */
   thumbnailKey: string;
+  /** @example "ATTACHMENT" */
+  display: FileDisplay;
 }
 
 class NotesFile {
+  /** @example "screenshot_001.png" */
   originalFilename: string;
+  /** @example "audits/EWIsM6sYI2cC0lI7Ok2PE/uqoOes4QqhFyKV8v0s2AQ/screenshot_001.png" */
   key: string;
+  /** @example "audits/EWIsM6sYI2cC0lI7Ok2PE/uqoOes4QqhFyKV8v0s2AQ/thumbnail_screenshot_001.png" */
   thumbnailKey: string;
+  /** @example 4631 */
   size: number;
+  /** @example "image/png" */
   mimetype: string;
+  /** @example "ATTACHMENT" */
+  display: FileDisplay;
 }

confiture-rest-api/src/audits/dto/notes-file.dto.ts

@@ -0,0 +1,9 @@
+import { FileDisplay } from "@prisma/client";
+import { IsIn, IsOptional, IsString } from "class-validator";
+
+export class NotesFileDto {
+  @IsOptional()
+  @IsString()
+  @IsIn(Object.values(FileDisplay))
+  display?: FileDisplay;
+}

confiture-rest-api/src/audits/dto/upload-image.dto.ts

@@ -1,6 +1,7 @@
 import { Type } from "class-transformer";
 import { IsInt, IsNumber, IsPositive, Max, Min } from "class-validator";
 import { IsRgaaCriterium } from "./update-results.dto";
+import { FileDisplay } from "@prisma/client";
 
 /*
 The `@Type(() => Number)` decorator is required to correctly parse strings into numbers
@@ -34,4 +35,6 @@ export class UploadImageDto {
       "topic and criterium numbers must be a valid RGAA criterium combination"
   })
   criterium: number;
+
+  display: FileDisplay;
 }

confiture-web-app/package.json

@@ -15,21 +15,34 @@
   "dependencies": {
     "@gouvfr/dsfr": "1.12.1",
     "@sentry/tracing": "^7.37.2",
+    "@sentry/vite-plugin": "^0.3.0",
     "@sentry/vue": "^7.37.2",
+    "@tiptap/extension-code-block-lowlight": "^2.5.9",
+    "@tiptap/extension-highlight": "^2.5.9",
+    "@tiptap/extension-image": "^2.6.6",
+    "@tiptap/extension-link": "^2.5.9",
+    "@tiptap/extension-task-item": "^2.5.9",
+    "@tiptap/extension-task-list": "^2.5.9",
+    "@tiptap/extension-typography": "^2.5.9",
+    "@tiptap/pm": "^2.5.9",
+    "@tiptap/starter-kit": "^2.5.9",
+    "@tiptap/vue-3": "^2.5.9",
     "@unhead/vue": "^1.5.3",
+    "@vitejs/plugin-vue": "^4.4.1",
     "dompurify": "^2.4.1",
+    "highlight.js": "^11.10.0",
     "jwt-decode": "^3.1.2",
     "ky": "^0.33.0",
     "lodash-es": "^4.17.21",
+    "lowlight": "^3.1.0",
     "marked": "^4.2.4",
     "pinia": "^2.0.28",
     "slugify": "^1.6.5",
+    "tiptap-markdown": "^0.8.10",
+    "vite": "^4.5.0",
     "vue": "^3.3.8",
     "vue-matomo": "^4.2.0",
-    "vue-router": "^4.2.5",
-    "vite": "^4.5.0",
-    "@vitejs/plugin-vue": "^4.4.1",
-    "@sentry/vite-plugin": "^0.3.0"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@types/dompurify": "^2.4.0",