Améliorer la saisie avec un éditeur WYSIWYG #796

yaaax · 2024-08-09T07:35:47Z

Should handle existing markdown content
The editor is configured with extensions:
- all what's in StarterKit
- code block lowlight
- highlight
- link
- task
- typography (with french double quotes)
Some styles have been added to fit DSFR styling

Still work in progress, but a nice start!

To do:

image uploading and placement inside editor
menu buttons
accessibility tests and improvements

* Should handle existing markdown content * The editor is configured with extensions: * all what's in StarterKit * code block lowlight * highlight * link * task * typography (with french double quotes) * Some styles have been added to fit DSFR styling Still work in progress, but a nice start! To do: * image uploading and placement inside editor * menu buttons * accessibility tests and improvements

(and possibly importing JSON content?)

Pruning uploads should not be possible from client web app. This is now only available on backend side. Code has been commented out in case we need to test it quickly for the web app.

If not editable: * avoid adding useless functionnalities * do not display buttons

* require access token to prune images * add workflow to trigger pruning

bellangerq · 2025-02-27T10:37:43Z

confiture-web-app/src/styles/main.css

@@ -65,6 +65,252 @@ from DSFR links with `target="_blank"` */
  color: var(--background-action-high-error) !important;
 }

+/* Tiptap */


Je suggère de déplacer tout le style lié à TipTap dans un fichier dédié, ou le mettre dans Tiptap.vue ?

Oui, je dirais plutôt un tiptap.css ?

bellangerq · 2025-02-27T10:39:29Z

.vscode/launch.json

Peut-être à garder pour une autre PR histoire de pas avoir trop de choses qui sortent du scope.

bellangerq · 2025-02-27T10:40:45Z

confiture-web-app/src/types/types.ts

+  display: FileDisplay;
+}
+
+export enum FileDisplay {


À mettre dans le fichier enums.ts plutôt du coup ?

bellangerq · 2025-02-27T10:49:14Z

confiture-web-app/src/components/ui/TiptapButton.vue

+  <button
+    :disabled="disabled"
+    class="fr-btn--sm fr-btn--tertiary"
+    :class="[


Pour éviter à avoir de faire un ternaire, tu peux utiliser cette syntaxe pour appliquer une classe quand une condition est true :

<button :class="{ 'fr-btn--icon-left': labelVisible, `fr-icon-${icon}`: icon, 'fr-btn--is-toggle': isToggle, }" ... > </button>

bellangerq · 2025-02-27T16:11:32Z

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

        v-if="error.notCompliantComment"
+        :content="error.notCompliantComment"
+        :editable="false"


On peut simplifier en n'indiquant pas du tout la prop (revient à ce qu'elle soit false)

bellangerq · 2025-02-28T14:26:22Z

confiture-web-app/src/components/ui/Tiptap.vue

Nettoyer les commentaires.

bellangerq · 2025-02-28T14:28:38Z

confiture-web-app/src/store/system.ts

Commentaires à supprimer ?

bellangerq · 2025-02-28T14:29:19Z

confiture-web-app/src/styles/main.css

+  vertical-align: middle;
+}
+
+/* Testing some different UI for Tiptap editor: */


Supprimer les commentaires

hissalht · 2025-02-28T14:22:03Z

confiture-rest-api/src/prisma.service.ts

+  constructor() {
+    const debugQuery = process.env.DEBUG === "prisma:query";
+    let logObject = {};
+    if (debugQuery) {
+      // Note: ideally we would use `emit: "event"` instead of `emit: "stdout"`
+      // to avoid double logging, but Prisma's query logging is connection-scoped
+      // rather than query-scoped, so queries using an existing connection
+      // would not appear in logs
+      // TODO: improve when upgrading Prisma
+      logObject = {
+        log: [
+          {
+            emit: "stdout",
+            level: "query"
+          }
+        ]
+      };
+    }
+    super(logObject);
+  }
+
  async onModuleInit() {
    await this.$connect();
+    this.$on("query", (query: Prisma.QueryEvent) => {
+      let q = query.query;
+      JSON.parse(query.params).forEach((e, i) => {
+        q = q.replace(`$${i + 1}`, `'${e}'`);
+      });
+      console.log("=======================================");
+      console.log("--- Prisma Query (with $n replaced) ---");
+      console.log(q);
+      console.log("Duration: " + query.duration + "ms\n");


On a besoin de tout ça ? Ou c'était juste pour débuguer ?

hissalht · 2025-02-28T14:23:14Z

confiture-rest-api/src/system/system.service.ts

+
+type PrunableFile = {
+  fileType: FileType;
+  id: number;
+  key: string;
+  thumbnailKey: string;
+};
+
+@Injectable()
+export class SystemService {
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly fileStorageService: FileStorageService
+  ) {}
+
+  /**
+   * Deletes expired AuditFile and StoredFile entries from the database + the associated files from the S3 bucket.
+   * For each Audit, checks if the file URLs are still present in:
+   * - notes (AuditFile entries)
+   * - all criterionResult comments (StoredFile entries)
+   * If the URL is found, the AuditFile (or StoredFile) is considered expired only if it has been created more than 1 month ago.
+   * In that case, the entry is deleted from the database and the associated files (1 or 2 if a thumbnail exists) are deleted from the S3 bucket.
+   *
+   * Also, checks for obsolete files on the S3 bucket that are not associated anymore to any entry in the database,
+   * and deletes them if needed (checks all notes and all criteria in the database).
+   *
+   * Good to know: A key looks like "audits/lOuFFlopCxZ_mLKzAqpzu/BN2Jhq-iOiTIG96-f3lQU/image.png"
+   *   It contains the audit id, a specific key for the file and the file name
+   *   (or "external" if the image comes from an external URL – i.e. dragged and dropped
+   *   from another website).
+   */
+  async pruneUploads() {


Honnêtement, cette fonction fait un peu peur. Je pense qu'on peut envisager de merger ce mécanisme de pruning à part

hissalht · 2025-02-28T14:25:50Z

confiture-web-app/src/store/system.ts

+    // async function pruneUploads() {
+    //   await ky.post(`/api/system/prune-uploads`);
+    // }
+


Suggested change

// async function pruneUploads() {

// await ky.post(`/api/system/prune-uploads`);

// }

hissalht · 2025-02-28T14:25:59Z

confiture-web-app/src/store/system.ts

    window.addEventListener("online", onOnline);
    window.addEventListener("offline", onOffline);

    return {
      isOnline
+      // pruneUploads


Suggested change

// pruneUploads

yaaax linked an issue Aug 9, 2024 that may be closed by this pull request

Améliorer la saisie erreurs et recommandations #687

Open

40 tasks

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 9, 2024 07:38 Inactive

hissalht had a problem deploying to ara-687-ameliorer-la-sa-ejgfhq August 9, 2024 09:15 Failure

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 9, 2024 09:20 Inactive

yaaax changed the title ~~Add Tiptap and a first integration in NotesModal~~ Améliorer la saisoe des erreurs Aug 9, 2024

yaaax changed the title ~~Améliorer la saisoe des erreurs~~ Améliorer la saisie avec un éditeur WYSIWYG Aug 9, 2024

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from d5003ef to 2ba70c2 Compare August 16, 2024 17:48

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 16, 2024 17:48 Inactive

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from 2ba70c2 to 31ce9e5 Compare August 16, 2024 18:00

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 16, 2024 18:00 Inactive

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 17, 2024 18:24 Inactive

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 17, 2024 20:35 Inactive

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from 6672e96 to b9a24e0 Compare August 17, 2024 20:44

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 17, 2024 20:44 Inactive

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from b9a24e0 to 1250bda Compare August 19, 2024 09:59

hissalht temporarily deployed to ara-687-ameliorer-la-sa-ejgfhq August 19, 2024 09:59 Inactive

hissalht temporarily deployed to ara-687-ameliorer-la-sa-aargwr September 4, 2024 08:41 Inactive

hissalht temporarily deployed to ara-687-ameliorer-la-sa-aargwr September 4, 2024 09:15 Inactive

yaaax self-assigned this Sep 5, 2024

hissalht temporarily deployed to ara-687-ameliorer-la-sa-aargwr September 13, 2024 14:00 Inactive

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from 3251d48 to 9f3a245 Compare September 13, 2024 16:41

hissalht temporarily deployed to ara-687-ameliorer-la-sa-aargwr September 13, 2024 16:42 Inactive

hissalht temporarily deployed to ara-687-ameliorer-la-sa-itzbxb October 2, 2024 09:45 Inactive

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from 75c5aeb to 7981839 Compare October 24, 2024 16:02

hissalht temporarily deployed to ara-687-ameliorer-la-sa-abtxfg October 29, 2024 11:08 Inactive

yaaax added 5 commits November 15, 2024 17:35

Fix markdown content recovery

af23880

Set default code block language to html

ffb6046

Fix eslint imports

4becae3

Fix eslint finally

8bfbe35

(and possibly importing JSON content?)

yaaax added 3 commits January 29, 2025 11:56

feat(system): fix pruneUploads to handle StoredFiles

26ffd7d

results store: improve uploadExampleImage (no more timeout)

d44a6ae

tiptap: remove image properly when an error occured

e3fa5f5

hissalht temporarily deployed to ara-687-ameliorer-la-sa-d03ef2 January 29, 2025 14:34 Inactive

yaaax added 4 commits January 29, 2025 16:33

tiptap: smaller buttons

5ccf1a3

tiptap: focus editor after image drop (or paste)

29056bb

tiptap(chore): remove useless code

45bf037

System store: remove pruneUploads from web app

a0f94ae

Pruning uploads should not be possible from client web app. This is now only available on backend side. Code has been commented out in case we need to test it quickly for the web app.

hissalht had a problem deploying to ara-687-ameliorer-la-sa-d03ef2 January 29, 2025 18:07 Failure

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from 63560a0 to 465801e Compare January 29, 2025 18:13

hissalht had a problem deploying to ara-687-ameliorer-la-sa-d03ef2 January 29, 2025 18:14 Failure

tiptap: fix report with non editable editors

fb6476b

If not editable: * avoid adding useless functionnalities * do not display buttons

yaaax force-pushed the 687-améliorer-la-saisie-erreurs-et-recommandations branch from 465801e to fb6476b Compare January 29, 2025 18:19

hissalht temporarily deployed to ara-687-ameliorer-la-sa-d03ef2 January 29, 2025 18:19 Inactive

fix(tiptap): display selection on leaf nodes only

236d908

hissalht temporarily deployed to ara-687-ameliorer-la-sa-d03ef2 January 30, 2025 16:15 Inactive

hissalht mentioned this pull request Feb 6, 2025

Requiert un token pour prune les images orphelines #946

Merged

Requiert un token pour prune les images orphelines (#946)

bb3c800

* require access token to prune images * add workflow to trigger pruning

hissalht temporarily deployed to ara-687-ameliorer-la-sa-d03ef2 February 7, 2025 09:42 Inactive

Update prune-images.yml

2ae60ee

hissalht temporarily deployed to ara-687-ameliorer-la-sa-d03ef2 February 19, 2025 10:16 Inactive

bellangerq reviewed Feb 27, 2025

View reviewed changes

bellangerq reviewed Feb 28, 2025

View reviewed changes

confiture-web-app/src/components/ui/Tiptap.vue

Copy link

Collaborator

bellangerq Feb 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nettoyer les commentaires.

bellangerq reviewed Feb 28, 2025

View reviewed changes

confiture-web-app/src/store/system.ts

Copy link

Collaborator

bellangerq Feb 28, 2025 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commentaires à supprimer ?

bellangerq reviewed Feb 28, 2025

View reviewed changes

hissalht reviewed Feb 28, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Améliorer la saisie avec un éditeur WYSIWYG #796

Améliorer la saisie avec un éditeur WYSIWYG #796

yaaax commented Aug 9, 2024

bellangerq Feb 27, 2025 •

edited

Loading

yaaax Mar 4, 2025

bellangerq Feb 27, 2025

bellangerq Feb 27, 2025

bellangerq Feb 27, 2025

bellangerq Feb 27, 2025 •

edited

Loading

bellangerq Feb 28, 2025

bellangerq Feb 28, 2025 •

edited

Loading

bellangerq Feb 28, 2025

hissalht Feb 28, 2025

hissalht Feb 28, 2025

hissalht Feb 28, 2025

hissalht Feb 28, 2025

	// async function pruneUploads() {
	// await ky.post(`/api/system/prune-uploads`);
	// }

Améliorer la saisie avec un éditeur WYSIWYG #796

Are you sure you want to change the base?

Améliorer la saisie avec un éditeur WYSIWYG #796

Conversation

yaaax commented Aug 9, 2024

bellangerq Feb 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bellangerq Feb 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bellangerq Feb 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bellangerq Feb 27, 2025 •

edited

Loading

bellangerq Feb 27, 2025 •

edited

Loading

bellangerq Feb 28, 2025 •

edited

Loading