From d0fc4e3dc3815395d3fe9756060b423d5d4e17e6 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 5 Sep 2025 15:11:01 +0200
Subject: [PATCH 1/7] add QuillJS editor and keep TinyMCE compatibility

Add QuillJS to package.json

Add QuillJS to package.json

Add data-testid to EditorTransition.vue for cypress

Add data-testid to EditorTransition.vue for cypress

Add data-testid to EditorTransition.vue for cypress

Add data-testid to EditorTransition.vue for cypress

Add data-testid to EditorTransition.vue for cypress

Add data-testid to EditorTransition.vue for cypress
---
 webapp/cypress/e2e/batchSampleFeature.cy.js   |  18 ++-
 webapp/cypress/e2e/sampleTablePage.cy.js      |  13 +-
 webapp/package.json                           |   5 +
 webapp/src/components/CellInformation.vue     |   9 +-
 .../components/CellPreparationInformation.vue |   7 +-
 .../src/components/CollectionInformation.vue  |   9 +-
 webapp/src/components/EditorTransition.vue    |  92 ++++++++++++
 .../src/components/EquipmentInformation.vue   |  10 +-
 webapp/src/components/QuillEditor.vue         |  92 ++++++++++++
 webapp/src/components/SampleInformation.vue   |  10 +-
 .../StartingMaterialInformation.vue           |  10 +-
 .../src/components/SynthesisInformation.vue   |   9 +-
 .../components/datablocks/DataBlockBase.vue   |  10 +-
 webapp/src/main.js                            |   3 +
 webapp/src/views/EditPage.vue                 |   4 +-
 webapp/yarn.lock                              | 132 +++++++++++++++++-
 16 files changed, 395 insertions(+), 38 deletions(-)
 create mode 100644 webapp/src/components/EditorTransition.vue
 create mode 100644 webapp/src/components/QuillEditor.vue

diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js
index 13c2e3183..94e24e483 100644
--- a/webapp/cypress/e2e/batchSampleFeature.cy.js
+++ b/webapp/cypress/e2e/batchSampleFeature.cy.js
@@ -155,7 +155,8 @@ describe("Batch sample creation", () => {
     cy.get('[data-testid="search-input"]').type("baseA");
     cy.findByText("baseA").click();
     cy.expandIfCollapsed("[data-testid=synthesis-block]");
-    cy.findByLabelText("Description").type("this is a description of baseA.");
+    cy.findByLabelText("Description").should("exist");
+    cy.get("[data-testid=item-description-input]").type("this is a description of baseA.");
     cy.findByText("Add a block").click();
     cy.findByText("Comment").click();
 
@@ -169,7 +170,8 @@ describe("Batch sample creation", () => {
     cy.get('[data-testid="search-input"]').type("baseB");
     cy.findByText("baseB").click();
     cy.expandIfCollapsed("[data-testid=synthesis-block]");
-    cy.findByLabelText("Description").type("this is a description of baseB.");
+    cy.findByLabelText("Description").should("exist");
+    cy.get("[data-testid=item-description-input]").type("this is a description of baseB.");
     cy.findByText("Add a block").click();
     cy.findByLabelText("Add a block").contains("Comment").click();
     cy.get(".datablock-content div").first().type("a comment is added here.");
@@ -225,6 +227,7 @@ describe("Batch sample creation", () => {
     cy.findByLabelText("Name").should("have.value", "a copied sample");
     cy.findByText("this is a description of baseA.");
     cy.findByText("a comment is added here.");
+    cy.get(".fa-save").click();
     cy.findByText("Home").click();
 
     cy.contains(/^baseB_copy$/).click();
@@ -238,6 +241,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input")
       .eq(0)
       .should("have.value", "100");
+    cy.get(".fa-save").click();
     cy.findByText("Home").click();
 
     cy.findByText("baseB_copy2").click();
@@ -251,6 +255,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input")
       .eq(0)
       .should("have.value", "100");
+    cy.get(".fa-save").click();
     cy.findByText("Home").click();
   });
 
@@ -326,6 +331,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information table").contains("component2");
     cy.get("#synthesis-information tbody tr:nth-of-type(1) input").eq(0).should("have.value", "");
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).should("have.value", "");
+    cy.get(".fa-save").click();
     cy.findByText("Home").click();
 
     cy.contains("test102").click();
@@ -339,6 +345,7 @@ describe("Batch sample creation", () => {
     cy.get("#synthesis-information tbody tr:nth-of-type(1) input").eq(0).should("have.value", "");
     cy.get("#synthesis-information tbody tr:nth-of-type(2) input").eq(0).should("have.value", "");
     cy.findByText("a comment is added here.");
+    cy.get(".fa-save").click();
     cy.findByText("Home").click();
 
     cy.contains("test103").click();
@@ -372,6 +379,7 @@ describe("Batch sample creation", () => {
 
     cy.findByText("a comment is added here.");
     cy.findByText("a second comment is added here.");
+    cy.get(".fa-save").click();
     cy.findByText("Home").click();
 
     cy.contains("test104").click();
@@ -413,7 +421,7 @@ describe("Batch sample creation", () => {
     cy.findByText("a description of the synthesis here");
     cy.findByText("a comment is added here.");
     cy.findByText("a second comment is added here.");
-
+    cy.get(".fa-save").click();
     cy.findByText("Home").click();
   });
 
@@ -538,6 +546,7 @@ describe("Batch sample creation", () => {
 
       cy.findByText("a comment is added here.");
       cy.findByText("a second comment is added here.");
+      cy.get(".fa-save").click();
       cy.findByText("Home").click();
     }
 
@@ -644,6 +653,7 @@ describe("Batch sample creation", () => {
 
       cy.findByText("a comment is added here.");
       cy.findByText("a second comment is added here.");
+      cy.get(".fa-save").click();
       cy.findByText("Home").click();
     }
 
@@ -839,7 +849,7 @@ describe("Batch cell creation", () => {
       cy.get("#electrolyte-table").contains("elyte");
 
       cy.get("#neg-electrode-table").contains("comp2");
-
+      cy.get(".fa-save").click();
       cy.findByText("Home").click();
     }
 
diff --git a/webapp/cypress/e2e/sampleTablePage.cy.js b/webapp/cypress/e2e/sampleTablePage.cy.js
index 3e635e048..79894445a 100644
--- a/webapp/cypress/e2e/sampleTablePage.cy.js
+++ b/webapp/cypress/e2e/sampleTablePage.cy.js
@@ -220,7 +220,8 @@ describe.only("Advanced sample creation features", () => {
 
   it("modifies some data in the second sample", () => {
     cy.findByText("testB").click();
-    cy.findByLabelText("Description").type("this is a description of testB.");
+    cy.findByLabelText("Description").should("exist");
+    cy.get("[data-testid=item-description-input]").type("this is a description of baseB.");
     cy.findByText("Add a block").click();
     cy.findByText("Comment").click();
 
@@ -257,7 +258,10 @@ describe.only("Advanced sample creation features", () => {
   it("checks the edit page of the copied sample", () => {
     cy.findByText("testBcopy").click();
     cy.findByLabelText("Name").should("have.value", "COPY OF the second test sample");
-    cy.findByText("this is a description of testB.");
+    cy.get("[data-testid=item-description-input]").should(
+      "have.text",
+      "this is a description of baseB.",
+    );
     cy.findByText("a comment is added here.");
     cy.findByText("a description of the synthesis here");
     cy.findAllByText("component3");
@@ -294,7 +298,10 @@ describe.only("Advanced sample creation features", () => {
   it("checks the edit page of the copied sample with components", () => {
     cy.findByText("testBcopy_copy").click();
     cy.findByLabelText("Name").should("have.value", "COPY OF COPY OF the second test sample");
-    cy.findByText("this is a description of testB.");
+    cy.get("[data-testid=item-description-input]").should(
+      "have.text",
+      "this is a description of baseB.",
+    );
     cy.findByText("a comment is added here.");
     cy.findByText("a description of the synthesis here");
     cy.findAllByText("component3");
diff --git a/webapp/package.json b/webapp/package.json
index 784a50d74..0f2145347 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -25,6 +25,7 @@
     "@uppy/dashboard": "^4.3.4",
     "@uppy/webcam": "^4.2.0",
     "@uppy/xhr-upload": "^4.3.3",
+    "@vueup/vue-quill": "^1.2.0",
     "@vueuse/components": "^10.7.2",
     "bootstrap": "^4.5.3",
     "buffer": "^6.0.3",
@@ -42,6 +43,10 @@
     "primevue": "^4.0.0",
     "process": "^0.11.10",
     "qrcode-vue3": "^1.6.8",
+    "quill": "2.0.2",
+    "quill-better-table": "^1.2.10",
+    "quill-delta-to-html": "^0.12.1",
+    "quill-markdown-shortcuts": "^0.0.10",
     "serve": "^14.2.1",
     "tinymce": "^5.10.9",
     "vue": "^3.2.4",
diff --git a/webapp/src/components/CellInformation.vue b/webapp/src/components/CellInformation.vue
index dc09845be..a681af99c 100644
--- a/webapp/src/components/CellInformation.vue
+++ b/webapp/src/components/CellInformation.vue
@@ -85,10 +85,11 @@
         <div class="row">
           <div class="col">
             <label id="cell-description-label">Description</label>
-            <TinyMceInline
+            <EditorTransition
               v-model="SampleDescription"
+              test-id="item-description-input"
               aria-labelledby="cell-description-label"
-            ></TinyMceInline>
+            />
           </div>
         </div>
       </div>
@@ -106,7 +107,7 @@
 <script>
 import { createComputedSetterForItemField } from "@/field_utils.js";
 import ChemFormulaInput from "@/components/ChemFormulaInput";
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import CellPreparationInformation from "@/components/CellPreparationInformation";
 import TableOfContents from "@/components/TableOfContents";
 import ItemRelationshipVisualization from "@/components/ItemRelationshipVisualization";
@@ -118,13 +119,13 @@ import { cellFormats } from "@/resources.js";
 export default {
   components: {
     ChemFormulaInput,
-    TinyMceInline,
     CellPreparationInformation,
     TableOfContents,
     ItemRelationshipVisualization,
     FormattedRefcode,
     ToggleableCollectionFormGroup,
     ToggleableCreatorsFormGroup,
+    EditorTransition,
   },
   props: {
     item_id: {
diff --git a/webapp/src/components/CellPreparationInformation.vue b/webapp/src/components/CellPreparationInformation.vue
index e470e3884..4faaec931 100644
--- a/webapp/src/components/CellPreparationInformation.vue
+++ b/webapp/src/components/CellPreparationInformation.vue
@@ -49,8 +49,9 @@
 
     <div class="form-group ml-5 mt-3">
       <label id="synthesis-procedure-label" class="subheading">Procedure</label>
-      <TinyMceInline
+      <EditorTransition
         v-model="CellPreparationDescription"
+        test-id="procedure-description-input"
         aria-labelledby="synthesis-procedure-label"
       />
     </div>
@@ -58,7 +59,7 @@
 </template>
 
 <script>
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 // import ChemicalFormula from "@/components/ChemicalFormula.vue";
 import { createComputedSetterForItemField } from "@/field_utils.js";
 
@@ -69,8 +70,8 @@ import CompactConstituentTable from "@/components/CompactConstituentTable";
 
 export default {
   components: {
-    TinyMceInline,
     CompactConstituentTable,
+    EditorTransition,
   },
   props: {
     item_id: { type: String, required: true },
diff --git a/webapp/src/components/CollectionInformation.vue b/webapp/src/components/CollectionInformation.vue
index eed84d347..a97644bf6 100644
--- a/webapp/src/components/CollectionInformation.vue
+++ b/webapp/src/components/CollectionInformation.vue
@@ -26,10 +26,11 @@
         </div>
 
         <label id="description-label" class="mr-2">Description</label>
-        <TinyMceInline
+        <EditorTransition
           v-model="CollectionDescription"
+          test-id="item-description-input"
           aria-labelledby="description-label"
-        ></TinyMceInline>
+        />
       </div>
       <div class="col-md-4">
         <CollectionRelationshipVisualization :collection_id="collection_id" />
@@ -57,17 +58,17 @@
 <script>
 import { createComputedSetterForCollectionField } from "@/field_utils.js";
 import { getCollectionSampleList } from "@/server_fetch_utils";
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import Creators from "@/components/Creators";
 import CollectionRelationshipVisualization from "@/components/CollectionRelationshipVisualization";
 import DynamicDataTable from "@/components/DynamicDataTable";
 
 export default {
   components: {
-    TinyMceInline,
     Creators,
     CollectionRelationshipVisualization,
     DynamicDataTable,
+    EditorTransition,
   },
   props: {
     collection_id: {
diff --git a/webapp/src/components/EditorTransition.vue b/webapp/src/components/EditorTransition.vue
new file mode 100644
index 000000000..8143d0b35
--- /dev/null
+++ b/webapp/src/components/EditorTransition.vue
@@ -0,0 +1,92 @@
+<template>
+  <component
+    :is="currentEditor"
+    v-model="content"
+    :placeholder="placeholder"
+    :enable-markdown="enableMarkdown"
+    :test-id="testId"
+    @update:model-value="handleUpdate"
+  />
+</template>
+
+<script>
+import TinyMceInline from "./TinyMceInline.vue";
+import QuillEditor from "./QuillEditor.vue";
+
+export default {
+  name: "EditorTransition",
+  components: {
+    TinyMceInline,
+    QuillEditor,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    forceEditor: {
+      type: String,
+      default: null,
+    },
+    enableMarkdown: {
+      type: Boolean,
+      default: true,
+    },
+    testId: {
+      type: String,
+      default: "rich-text-editor",
+    },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      content: this.modelValue,
+      editorType: null,
+    };
+  },
+  computed: {
+    currentEditor() {
+      return this.editorType === "tinymce" ? "TinyMceInline" : "QuillEditor";
+    },
+  },
+  watch: {
+    modelValue(newVal) {
+      this.content = newVal;
+    },
+  },
+  created() {
+    this.determineEditorType();
+  },
+  methods: {
+    handleUpdate(value) {
+      this.$emit("update:modelValue", value);
+    },
+    determineEditorType() {
+      if (this.forceEditor) {
+        this.editorType = this.forceEditor;
+        return;
+      }
+
+      if (!this.content || this.content.trim() === "") {
+        this.editorType = "quill";
+        return;
+      }
+
+      const tinymceIndicators = [
+        "mce-",
+        "data-mce-",
+        '<table style="width: 50%"',
+        "margin-left: 1rem",
+      ];
+
+      const isLegacy = tinymceIndicators.some((indicator) => this.content.includes(indicator));
+
+      this.editorType = isLegacy ? "tinymce" : "quill";
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/EquipmentInformation.vue b/webapp/src/components/EquipmentInformation.vue
index 23afc7c84..375dba118 100644
--- a/webapp/src/components/EquipmentInformation.vue
+++ b/webapp/src/components/EquipmentInformation.vue
@@ -56,7 +56,11 @@
       </div>
     </div>
     <label id="equip-description-label" class="mr-2">Description</label>
-    <TinyMceInline v-model="ItemDescription" aria-labelledby="equip-description-label" />
+    <EditorTransition
+      v-model="ItemDescription"
+      test-id="item-description-input"
+      aria-labelledby="equip-description-label"
+    />
 
     <TableOfContents
       class="mb-3"
@@ -68,7 +72,7 @@
 
 <script>
 import { createComputedSetterForItemField } from "@/field_utils.js";
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import TableOfContents from "@/components/TableOfContents";
 import CollectionList from "@/components/CollectionList";
 import FormattedRefcode from "@/components/FormattedRefcode";
@@ -76,11 +80,11 @@ import Creators from "@/components/Creators";
 
 export default {
   components: {
-    TinyMceInline,
     CollectionList,
     TableOfContents,
     FormattedRefcode,
     Creators,
+    EditorTransition,
   },
   props: {
     item_id: { type: String, required: true },
diff --git a/webapp/src/components/QuillEditor.vue b/webapp/src/components/QuillEditor.vue
new file mode 100644
index 000000000..1a9b4ade3
--- /dev/null
+++ b/webapp/src/components/QuillEditor.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="quill-editor-wrapper">
+    <div ref="quillContainer" :data-testid="testId"></div>
+  </div>
+</template>
+
+<script>
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+
+import MarkdownShortcuts from "quill-markdown-shortcuts";
+Quill.register("modules/markdownShortcuts", MarkdownShortcuts);
+
+export default {
+  name: "QuillEditor",
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "Add a description",
+    },
+    enableMarkdown: {
+      type: Boolean,
+      default: false,
+    },
+    testId: {
+      type: String,
+      default: "quill-input",
+    },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      quill: null,
+      isInternalUpdate: false,
+    };
+  },
+  mounted() {
+    this.initializeQuill();
+  },
+  beforeUnmount() {
+    if (this.quill) {
+      this.quill = null;
+    }
+  },
+
+  methods: {
+    initializeQuill() {
+      const modules = {
+        toolbar: [
+          ["bold", "italic", "underline", "strike"],
+          [{ script: "sub" }, { script: "super" }],
+          [{ color: [] }, { background: [] }],
+          ["clean"],
+
+          [{ align: [] }],
+          [{ list: "bullet" }, { list: "ordered" }],
+          [{ indent: "-1" }, { indent: "+1" }],
+
+          [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+          ["link", "image"],
+          ["blockquote", "code-block"],
+        ],
+        ...(this.enableMarkdown && { markdownShortcuts: {} }),
+      };
+
+      this.quill = new Quill(this.$refs.quillContainer, {
+        theme: "snow",
+        placeholder: this.placeholder,
+        modules,
+      });
+
+      if (this.modelValue) {
+        this.quill.root.innerHTML = this.modelValue;
+      }
+
+      this.quill.on("text-change", () => {
+        this.isInternalUpdate = true;
+        const html = this.quill.root.innerHTML;
+        this.$emit("update:modelValue", html === "<p><br></p>" ? "" : html);
+        this.$nextTick(() => {
+          this.isInternalUpdate = false;
+        });
+      });
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/SampleInformation.vue b/webapp/src/components/SampleInformation.vue
index 25f18135c..a0a787ab3 100644
--- a/webapp/src/components/SampleInformation.vue
+++ b/webapp/src/components/SampleInformation.vue
@@ -43,7 +43,11 @@
         <div class="form-row">
           <div class="col">
             <label id="samp-description-label">Description</label>
-            <TinyMceInline v-model="SampleDescription" aria-labelledby="samp-description-label" />
+            <EditorTransition
+              v-model="SampleDescription"
+              test-id="item-description-input"
+              aria-labelledby="samp-description-label"
+            />
           </div>
         </div>
       </div>
@@ -64,7 +68,7 @@ import ChemFormulaInput from "@/components/ChemFormulaInput";
 import FormattedRefcode from "@/components/FormattedRefcode";
 import ToggleableCollectionFormGroup from "@/components/ToggleableCollectionFormGroup";
 import ToggleableCreatorsFormGroup from "@/components/ToggleableCreatorsFormGroup";
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import SynthesisInformation from "@/components/SynthesisInformation";
 import TableOfContents from "@/components/TableOfContents";
 import ItemRelationshipVisualization from "@/components/ItemRelationshipVisualization";
@@ -72,13 +76,13 @@ import ItemRelationshipVisualization from "@/components/ItemRelationshipVisualiz
 export default {
   components: {
     ChemFormulaInput,
-    TinyMceInline,
     SynthesisInformation,
     TableOfContents,
     ItemRelationshipVisualization,
     FormattedRefcode,
     ToggleableCollectionFormGroup,
     ToggleableCreatorsFormGroup,
+    EditorTransition,
   },
   props: {
     item_id: { type: String, required: true },
diff --git a/webapp/src/components/StartingMaterialInformation.vue b/webapp/src/components/StartingMaterialInformation.vue
index e8a3ca59f..27721d09e 100644
--- a/webapp/src/components/StartingMaterialInformation.vue
+++ b/webapp/src/components/StartingMaterialInformation.vue
@@ -84,7 +84,11 @@
     </div>
 
     <label class="mr-2">Description</label>
-    <TinyMceInline v-model="ItemDescription" data-testid="item-description"></TinyMceInline>
+    <EditorTransition
+      v-model="ItemDescription"
+      test-id="item-description-input"
+      data-testid="item-description"
+    />
 
     <TableOfContents
       class="mb-3"
@@ -98,7 +102,7 @@
 
 <script>
 import { createComputedSetterForItemField } from "@/field_utils.js";
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import ChemicalFormula from "@/components/ChemicalFormula";
 import ChemFormulaInput from "@/components/ChemFormulaInput";
 import TableOfContents from "@/components/TableOfContents";
@@ -118,13 +122,13 @@ export default {
     ChemicalFormula,
     ChemFormulaInput,
     ItemRelationshipVisualization,
-    TinyMceInline,
     ToggleableCollectionFormGroup,
     TableOfContents,
     FormattedRefcode,
     FormattedBarCode,
     SynthesisInformation,
     GHSHazardInformation,
+    EditorTransition,
   },
   props: {
     item_id: { type: String, required: true },
diff --git a/webapp/src/components/SynthesisInformation.vue b/webapp/src/components/SynthesisInformation.vue
index 53625b4d1..5a6eef3df 100644
--- a/webapp/src/components/SynthesisInformation.vue
+++ b/webapp/src/components/SynthesisInformation.vue
@@ -25,23 +25,24 @@
         </div>
       </div>
       <span id="synthesis-procedure-label" class="subheading ml-2">Procedure</span>
-      <TinyMceInline
+      <EditorTransition
         v-model="SynthesisDescription"
+        test-id="procedure-description-input"
         aria-labelledby="synthesis-procedure-label"
-      ></TinyMceInline>
+      />
     </div>
   </div>
 </template>
 
 <script>
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import { createComputedSetterForItemField } from "@/field_utils.js";
 import CompactConstituentTable from "@/components/CompactConstituentTable.vue";
 
 export default {
   components: {
-    TinyMceInline,
     CompactConstituentTable,
+    EditorTransition,
   },
   props: {
     item_id: { type: String, required: true },
diff --git a/webapp/src/components/datablocks/DataBlockBase.vue b/webapp/src/components/datablocks/DataBlockBase.vue
index c15b89616..5f905cc5c 100644
--- a/webapp/src/components/datablocks/DataBlockBase.vue
+++ b/webapp/src/components/datablocks/DataBlockBase.vue
@@ -127,7 +127,11 @@
         </div>
       </div>
       <slot></slot>
-      <TinyMceInline v-model="BlockDescription" data-testid="block-description"></TinyMceInline>
+      <EditorTransition
+        v-model="BlockDescription"
+        test-id="datablock-description-input"
+        data-testid="block-description"
+      />
     </div>
   </div>
 </template>
@@ -143,7 +147,7 @@
 import { DialogService } from "@/services/DialogService";
 
 import { createComputedSetterForBlockField } from "@/field_utils.js";
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import StyledBlockInfo from "@/components/StyledBlockInfo";
 import tinymce from "tinymce/tinymce";
 
@@ -151,8 +155,8 @@ import { deleteBlock, updateBlockFromServer } from "@/server_fetch_utils";
 
 export default {
   components: {
-    TinyMceInline,
     StyledBlockInfo,
+    EditorTransition,
   },
   props: {
     item_id: {
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 46659d92c..6faab65a5 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -126,6 +126,9 @@ import "tinymce/plugins/emoticons/js/emojis";
 import Editor from "@tinymce/tinymce-vue";
 import store from "./store";
 
+//! Will replace TinyMCE
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+
 // css for vue-select
 import "vue-select/dist/vue-select.css";
 
diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
index d674fb2b5..6e529963a 100644
--- a/webapp/src/views/EditPage.vue
+++ b/webapp/src/views/EditPage.vue
@@ -98,7 +98,7 @@
 <script>
 import { DialogService } from "@/services/DialogService";
 
-import TinyMceInline from "@/components/TinyMceInline";
+import EditorTransition from "@/components/EditorTransition";
 import SelectableFileTree from "@/components/SelectableFileTree";
 
 import FileList from "@/components/FileList";
@@ -127,13 +127,13 @@ import StyledBlockHelp from "@/components/StyledBlockHelp";
 
 export default {
   components: {
-    TinyMceInline,
     SelectableFileTree,
     FileList,
     LoginDetails,
     FileSelectModal,
     FormattedItemName,
     StyledBlockHelp,
+    EditorTransition,
   },
   async beforeRouteLeave(to, from, next) {
     // give warning before leaving the page by the vue router (which would not trigger "beforeunload")
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 4e74d5270..95be965f9 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2434,6 +2434,14 @@
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
+"@vueup/vue-quill@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@vueup/vue-quill/-/vue-quill-1.2.0.tgz#cd0d93559256d069f639723dd91c044e8162c72a"
+  integrity sha512-kd5QPSHMDpycklojPXno2Kw2JSiKMYduKYQckTm1RJoVDA557MnyUXgcuuDpry4HY/Rny9nGNcK+m3AHk94wag==
+  dependencies:
+    quill "^1.3.7"
+    quill-delta "^4.2.2"
+
 "@vueuse/components@^10.7.2":
   version "10.11.1"
   resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.11.1.tgz#f6ff60769221d94da8c300417765fb0fecf0602a"
@@ -3404,6 +3412,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -4197,6 +4210,18 @@ debug@^4.4.0:
   dependencies:
     ms "^2.1.3"
 
+deep-equal@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.2.tgz#78a561b7830eef3134c7f6f3a3d6af272a678761"
+  integrity sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==
+  dependencies:
+    is-arguments "^1.1.1"
+    is-date-object "^1.0.5"
+    is-regex "^1.1.4"
+    object-is "^1.1.5"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.5.1"
+
 deep-equal@^2.0.5:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
@@ -4780,6 +4805,11 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -4892,7 +4922,7 @@ exsolve@^1.0.7:
   resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.0.7.tgz#3b74e4c7ca5c5f9a19c3626ca857309fa99f9e9e"
   integrity sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==
 
-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -4923,7 +4953,17 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
+fast-diff@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
+fast-diff@^1.1.2, fast-diff@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
   integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
@@ -6236,6 +6276,11 @@ lodash-es@4.17.21, lodash-es@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -6246,6 +6291,11 @@ lodash.defaultsdeep@^4.6.1:
   resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
   integrity sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.kebabcase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
@@ -6949,6 +6999,16 @@ param-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
+parchment@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-3.0.0.tgz#2e3a4ada454e1206ae76ea7afcb50e9fb517e7d6"
+  integrity sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -7560,6 +7620,74 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quill-better-table@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/quill-better-table/-/quill-better-table-1.2.10.tgz#ed0e21cdbaff672189b902187720fde08ae2a96a"
+  integrity sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==
+
+quill-delta-to-html@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/quill-delta-to-html/-/quill-delta-to-html-0.12.1.tgz#48e042c4a14d9ba3eed8b4f28aa77dd9482eea00"
+  integrity sha512-QhpeMk9+5ge3HYbL5A0Ewz3pXCsbemqGvIF/kw5D6D4V68AtcUp7yt9xNUkzOk/0IQz43hKy3IkzBzRhLIE+oA==
+  dependencies:
+    lodash.isequal "^4.5.0"
+
+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill-delta@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-4.2.2.tgz#015397d046e0a3bed087cd8a51f98c11a1b8f351"
+  integrity sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==
+  dependencies:
+    fast-diff "1.2.0"
+    lodash.clonedeep "^4.5.0"
+    lodash.isequal "^4.5.0"
+
+quill-delta@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-5.1.0.tgz#1c4bc08f7c8e5cc4bdc88a15a1a70c1cc72d2b48"
+  integrity sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==
+  dependencies:
+    fast-diff "^1.3.0"
+    lodash.clonedeep "^4.5.0"
+    lodash.isequal "^4.5.0"
+
+quill-markdown-shortcuts@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/quill-markdown-shortcuts/-/quill-markdown-shortcuts-0.0.10.tgz#00ca3e7b48e26f6771cb8f81678d02f9b719b7c9"
+  integrity sha512-2FFFqqo65JgDgAGSer7cFQTCeiSjJF4N8lRGXGv/xjppCxSwj42OnNdGPZ/zeeCxdUY/j1LW4AiSvPQaTIkY2A==
+  dependencies:
+    quill "^1.3.1"
+
+quill@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-2.0.2.tgz#5b26bc10a74e9f7fdcfdb5156b3133a3ebf0a814"
+  integrity sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==
+  dependencies:
+    eventemitter3 "^5.0.1"
+    lodash-es "^4.17.21"
+    parchment "^3.0.0"
+    quill-delta "^5.1.0"
+
+quill@^1.3.1, quill@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"

From c8593595e5572f9d1633b0836c4e431c570f7a64 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Wed, 10 Sep 2025 12:15:17 +0200
Subject: [PATCH 2/7] Remove unused library, need to find a better one for
 table

---
 webapp/package.json                        |  2 --
 webapp/src/components/EditorTransition.vue |  5 -----
 webapp/src/components/QuillEditor.vue      | 15 +++------------
 webapp/yarn.lock                           | 12 ------------
 4 files changed, 3 insertions(+), 31 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 0f2145347..128db467a 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -44,8 +44,6 @@
     "process": "^0.11.10",
     "qrcode-vue3": "^1.6.8",
     "quill": "2.0.2",
-    "quill-better-table": "^1.2.10",
-    "quill-delta-to-html": "^0.12.1",
     "quill-markdown-shortcuts": "^0.0.10",
     "serve": "^14.2.1",
     "tinymce": "^5.10.9",
diff --git a/webapp/src/components/EditorTransition.vue b/webapp/src/components/EditorTransition.vue
index 8143d0b35..3e8ed68d7 100644
--- a/webapp/src/components/EditorTransition.vue
+++ b/webapp/src/components/EditorTransition.vue
@@ -3,7 +3,6 @@
     :is="currentEditor"
     v-model="content"
     :placeholder="placeholder"
-    :enable-markdown="enableMarkdown"
     :test-id="testId"
     @update:model-value="handleUpdate"
   />
@@ -32,10 +31,6 @@ export default {
       type: String,
       default: null,
     },
-    enableMarkdown: {
-      type: Boolean,
-      default: true,
-    },
     testId: {
       type: String,
       default: "rich-text-editor",
diff --git a/webapp/src/components/QuillEditor.vue b/webapp/src/components/QuillEditor.vue
index 1a9b4ade3..b8de11ec5 100644
--- a/webapp/src/components/QuillEditor.vue
+++ b/webapp/src/components/QuillEditor.vue
@@ -22,10 +22,7 @@ export default {
       type: String,
       default: "Add a description",
     },
-    enableMarkdown: {
-      type: Boolean,
-      default: false,
-    },
+
     testId: {
       type: String,
       default: "quill-input",
@@ -35,7 +32,6 @@ export default {
   data() {
     return {
       quill: null,
-      isInternalUpdate: false,
     };
   },
   mounted() {
@@ -46,7 +42,6 @@ export default {
       this.quill = null;
     }
   },
-
   methods: {
     initializeQuill() {
       const modules = {
@@ -65,7 +60,7 @@ export default {
           ["link", "image"],
           ["blockquote", "code-block"],
         ],
-        ...(this.enableMarkdown && { markdownShortcuts: {} }),
+        markdownShortcuts: {},
       };
 
       this.quill = new Quill(this.$refs.quillContainer, {
@@ -75,16 +70,12 @@ export default {
       });
 
       if (this.modelValue) {
-        this.quill.root.innerHTML = this.modelValue;
+        this.quill.clipboard.dangerouslyPasteHTML(this.modelValue);
       }
 
       this.quill.on("text-change", () => {
-        this.isInternalUpdate = true;
         const html = this.quill.root.innerHTML;
         this.$emit("update:modelValue", html === "<p><br></p>" ? "" : html);
-        this.$nextTick(() => {
-          this.isInternalUpdate = false;
-        });
       });
     },
   },
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 95be965f9..984247b33 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -7620,18 +7620,6 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-quill-better-table@^1.2.10:
-  version "1.2.10"
-  resolved "https://registry.yarnpkg.com/quill-better-table/-/quill-better-table-1.2.10.tgz#ed0e21cdbaff672189b902187720fde08ae2a96a"
-  integrity sha512-CFwxAQzt4EPCQuynQ65R/FU7Yu//kcDBb/rmBBOsFfO758+q50zvG/PDt4Lenv9DcrSgwnyNkfo4yeA5fzzVYQ==
-
-quill-delta-to-html@^0.12.1:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/quill-delta-to-html/-/quill-delta-to-html-0.12.1.tgz#48e042c4a14d9ba3eed8b4f28aa77dd9482eea00"
-  integrity sha512-QhpeMk9+5ge3HYbL5A0Ewz3pXCsbemqGvIF/kw5D6D4V68AtcUp7yt9xNUkzOk/0IQz43hKy3IkzBzRhLIE+oA==
-  dependencies:
-    lodash.isequal "^4.5.0"
-
 quill-delta@^3.6.2:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"

From 3f741f97d59356e067d0544c9ee612f0f4cb6455 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Wed, 10 Sep 2025 15:15:03 +0200
Subject: [PATCH 3/7] Add Table to QuillEditor with quill-table-up

---
 webapp/package.json                   |  1 +
 webapp/src/components/QuillEditor.vue | 30 ++++++++++++++++++++++-----
 webapp/yarn.lock                      | 27 ++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 128db467a..fad8201f9 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -45,6 +45,7 @@
     "qrcode-vue3": "^1.6.8",
     "quill": "2.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
+    "quill-table-up": "^3.0.3",
     "serve": "^14.2.1",
     "tinymce": "^5.10.9",
     "vue": "^3.2.4",
diff --git a/webapp/src/components/QuillEditor.vue b/webapp/src/components/QuillEditor.vue
index b8de11ec5..53b8446cf 100644
--- a/webapp/src/components/QuillEditor.vue
+++ b/webapp/src/components/QuillEditor.vue
@@ -11,6 +11,18 @@ import "quill/dist/quill.snow.css";
 import MarkdownShortcuts from "quill-markdown-shortcuts";
 Quill.register("modules/markdownShortcuts", MarkdownShortcuts);
 
+import TableUp, {
+  defaultCustomSelect,
+  TableAlign,
+  TableMenuContextmenu,
+  TableResizeScale,
+  TableSelection,
+} from "quill-table-up";
+import "quill-table-up/index.css";
+import "quill-table-up/table-creator.css";
+
+Quill.register({ [`modules/${TableUp.moduleName}`]: TableUp }, true);
+
 export default {
   name: "QuillEditor",
   props: {
@@ -22,7 +34,6 @@ export default {
       type: String,
       default: "Add a description",
     },
-
     testId: {
       type: String,
       default: "quill-input",
@@ -50,16 +61,25 @@ export default {
           [{ script: "sub" }, { script: "super" }],
           [{ color: [] }, { background: [] }],
           ["clean"],
-
           [{ align: [] }],
           [{ list: "bullet" }, { list: "ordered" }],
           [{ indent: "-1" }, { indent: "+1" }],
-
           [{ header: [1, 2, 3, 4, 5, 6, false] }],
-
           ["link", "image"],
           ["blockquote", "code-block"],
+          [{ [TableUp.toolName]: [] }],
         ],
+        [TableUp.moduleName]: {
+          customSelect: defaultCustomSelect,
+          customBtn: false,
+          fullSwitch: true,
+          modules: [
+            { module: TableAlign },
+            { module: TableResizeScale },
+            { module: TableSelection },
+            { module: TableMenuContextmenu },
+          ],
+        },
         markdownShortcuts: {},
       };
 
@@ -70,7 +90,7 @@ export default {
       });
 
       if (this.modelValue) {
-        this.quill.clipboard.dangerouslyPasteHTML(this.modelValue);
+        this.quill.root.innerHTML = this.modelValue;
       }
 
       this.quill.on("text-change", () => {
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 984247b33..970e7c7e4 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -1130,6 +1130,26 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
   integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
 
+"@floating-ui/core@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.3.tgz#462d722f001e23e46d86fd2bd0d21b7693ccb8b7"
+  integrity sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==
+  dependencies:
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/dom@^1.7.4":
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.4.tgz#ee667549998745c9c3e3e84683b909c31d6c9a77"
+  integrity sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==
+  dependencies:
+    "@floating-ui/core" "^1.7.3"
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/utils@^0.2.10":
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c"
+  integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
@@ -7654,6 +7674,13 @@ quill-markdown-shortcuts@^0.0.10:
   dependencies:
     quill "^1.3.1"
 
+quill-table-up@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/quill-table-up/-/quill-table-up-3.0.3.tgz#21be9b683ad5c1a9def8911b0fd1741f7000358e"
+  integrity sha512-kACkTPh9EJSu0UySplzBnXyfQSdfOxoL58Buct5LxKhKYnugUDznU6UY4GNPDdZxI/+MJ6Hp5qGGfBkq8jVAyw==
+  dependencies:
+    "@floating-ui/dom" "^1.7.4"
+
 quill@2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/quill/-/quill-2.0.2.tgz#5b26bc10a74e9f7fdcfdb5156b3133a3ebf0a814"

From 720f971a0c0d1e3861df0840e5d813b4a0979355 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Wed, 10 Sep 2025 15:16:31 +0200
Subject: [PATCH 4/7] remove unused quill-table-up parameters

---
 webapp/src/components/QuillEditor.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webapp/src/components/QuillEditor.vue b/webapp/src/components/QuillEditor.vue
index 53b8446cf..11a0e0ad9 100644
--- a/webapp/src/components/QuillEditor.vue
+++ b/webapp/src/components/QuillEditor.vue
@@ -71,8 +71,6 @@ export default {
         ],
         [TableUp.moduleName]: {
           customSelect: defaultCustomSelect,
-          customBtn: false,
-          fullSwitch: true,
           modules: [
             { module: TableAlign },
             { module: TableResizeScale },

From b0bd3dfc817ee53df6022e49e86fae30a5007bc8 Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Thu, 11 Sep 2025 14:24:10 +0200
Subject: [PATCH 5/7] Add quill-mermaid

---
 webapp/package.json                   |  1 +
 webapp/src/components/QuillEditor.vue | 27 +++++++++++++++++++++++++++
 webapp/yarn.lock                      | 12 ++++++++++++
 3 files changed, 40 insertions(+)

diff --git a/webapp/package.json b/webapp/package.json
index fad8201f9..48efda025 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -45,6 +45,7 @@
     "qrcode-vue3": "^1.6.8",
     "quill": "2.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
+    "quill-mermaid": "^0.0.3",
     "quill-table-up": "^3.0.3",
     "serve": "^14.2.1",
     "tinymce": "^5.10.9",
diff --git a/webapp/src/components/QuillEditor.vue b/webapp/src/components/QuillEditor.vue
index 11a0e0ad9..2fccf2d20 100644
--- a/webapp/src/components/QuillEditor.vue
+++ b/webapp/src/components/QuillEditor.vue
@@ -11,6 +11,17 @@ import "quill/dist/quill.snow.css";
 import MarkdownShortcuts from "quill-markdown-shortcuts";
 Quill.register("modules/markdownShortcuts", MarkdownShortcuts);
 
+import mermaid from "mermaid";
+window.mermaid = mermaid;
+import QuillMermaid from "quill-mermaid";
+import "quill-mermaid/dist/index.css";
+Quill.register(
+  {
+    "modules/mermaid": QuillMermaid,
+  },
+  true,
+);
+
 import TableUp, {
   defaultCustomSelect,
   TableAlign,
@@ -55,6 +66,10 @@ export default {
   },
   methods: {
     initializeQuill() {
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: "default",
+      });
       const modules = {
         toolbar: [
           ["bold", "italic", "underline", "strike"],
@@ -68,6 +83,7 @@ export default {
           ["link", "image"],
           ["blockquote", "code-block"],
           [{ [TableUp.toolName]: [] }],
+          ["mermaid-chart"],
         ],
         [TableUp.moduleName]: {
           customSelect: defaultCustomSelect,
@@ -78,6 +94,17 @@ export default {
             { module: TableMenuContextmenu },
           ],
         },
+        mermaid: {
+          selectorOptions: {
+            onDestroy() {},
+            onRemove() {},
+            onEdit() {},
+          },
+          historyStackOptions: {
+            maxStack: 100,
+            delay: 1000,
+          },
+        },
         markdownShortcuts: {},
       };
 
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 970e7c7e4..0c5771790 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -6012,6 +6012,11 @@ joi@^17.4.0:
     "@sideway/formula" "^3.0.1"
     "@sideway/pinpoint" "^2.0.0"
 
+js-base64@^3.7.7:
+  version "3.7.8"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.8.tgz#af44496bc09fa178ed9c4adf67eb2b46f5c6d2a4"
+  integrity sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==
+
 js-beautify@^1.14.9:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.15.1.tgz#4695afb508c324e1084ee0b952a102023fc65b64"
@@ -7674,6 +7679,13 @@ quill-markdown-shortcuts@^0.0.10:
   dependencies:
     quill "^1.3.1"
 
+quill-mermaid@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/quill-mermaid/-/quill-mermaid-0.0.3.tgz#b18d110cc3463f9b60956cae5adc5646ac039dee"
+  integrity sha512-me7hHj/xGsAhp9ncWBlkKvl+B9wp+L3psBrHrdL2SIDNgMwJG0WidtIUGAJ2ZKoUkB/0O+2pDdSrKVj1GvX0Iw==
+  dependencies:
+    js-base64 "^3.7.7"
+
 quill-table-up@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/quill-table-up/-/quill-table-up-3.0.3.tgz#21be9b683ad5c1a9def8911b0fd1741f7000358e"

From b487ebe3cace472ebb88c22448c05b724571425d Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 12 Sep 2025 14:45:55 +0200
Subject: [PATCH 6/7] Fix mermaid render when reloading page

---
 webapp/src/components/QuillEditor.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/QuillEditor.vue b/webapp/src/components/QuillEditor.vue
index 2fccf2d20..51c322b74 100644
--- a/webapp/src/components/QuillEditor.vue
+++ b/webapp/src/components/QuillEditor.vue
@@ -115,12 +115,29 @@ export default {
       });
 
       if (this.modelValue) {
-        this.quill.root.innerHTML = this.modelValue;
+        try {
+          const delta = JSON.parse(this.modelValue);
+          if (delta.ops) {
+            setTimeout(() => {
+              this.quill.setContents(delta);
+
+              const mermaidModule = this.quill.getModule("mermaid");
+              if (mermaidModule && mermaidModule.renderCharts) {
+                mermaidModule.renderCharts();
+              }
+            }, 0);
+          } else {
+            this.quill.root.innerHTML = this.modelValue;
+          }
+        } catch (e) {
+          this.quill.root.innerHTML = this.modelValue;
+        }
       }
 
       this.quill.on("text-change", () => {
-        const html = this.quill.root.innerHTML;
-        this.$emit("update:modelValue", html === "<p><br></p>" ? "" : html);
+        const delta = this.quill.getContents();
+        const deltaString = JSON.stringify(delta);
+        this.$emit("update:modelValue", deltaString);
       });
     },
   },

From 9f8063938bd17a3bfc5c7569baded791164d1f8d Mon Sep 17 00:00:00 2001
From: Benjamin CHARMES <benjamin.charmes@gmail.com>
Date: Fri, 12 Sep 2025 16:27:32 +0200
Subject: [PATCH 7/7] Remove quill-mermaid, will be added in another PR

---
 webapp/package.json                   |  1 -
 webapp/src/components/QuillEditor.vue | 50 ++-------------------------
 2 files changed, 3 insertions(+), 48 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 48efda025..fad8201f9 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -45,7 +45,6 @@
     "qrcode-vue3": "^1.6.8",
     "quill": "2.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
-    "quill-mermaid": "^0.0.3",
     "quill-table-up": "^3.0.3",
     "serve": "^14.2.1",
     "tinymce": "^5.10.9",
diff --git a/webapp/src/components/QuillEditor.vue b/webapp/src/components/QuillEditor.vue
index 51c322b74..11a0e0ad9 100644
--- a/webapp/src/components/QuillEditor.vue
+++ b/webapp/src/components/QuillEditor.vue
@@ -11,17 +11,6 @@ import "quill/dist/quill.snow.css";
 import MarkdownShortcuts from "quill-markdown-shortcuts";
 Quill.register("modules/markdownShortcuts", MarkdownShortcuts);
 
-import mermaid from "mermaid";
-window.mermaid = mermaid;
-import QuillMermaid from "quill-mermaid";
-import "quill-mermaid/dist/index.css";
-Quill.register(
-  {
-    "modules/mermaid": QuillMermaid,
-  },
-  true,
-);
-
 import TableUp, {
   defaultCustomSelect,
   TableAlign,
@@ -66,10 +55,6 @@ export default {
   },
   methods: {
     initializeQuill() {
-      mermaid.initialize({
-        startOnLoad: false,
-        theme: "default",
-      });
       const modules = {
         toolbar: [
           ["bold", "italic", "underline", "strike"],
@@ -83,7 +68,6 @@ export default {
           ["link", "image"],
           ["blockquote", "code-block"],
           [{ [TableUp.toolName]: [] }],
-          ["mermaid-chart"],
         ],
         [TableUp.moduleName]: {
           customSelect: defaultCustomSelect,
@@ -94,17 +78,6 @@ export default {
             { module: TableMenuContextmenu },
           ],
         },
-        mermaid: {
-          selectorOptions: {
-            onDestroy() {},
-            onRemove() {},
-            onEdit() {},
-          },
-          historyStackOptions: {
-            maxStack: 100,
-            delay: 1000,
-          },
-        },
         markdownShortcuts: {},
       };
 
@@ -115,29 +88,12 @@ export default {
       });
 
       if (this.modelValue) {
-        try {
-          const delta = JSON.parse(this.modelValue);
-          if (delta.ops) {
-            setTimeout(() => {
-              this.quill.setContents(delta);
-
-              const mermaidModule = this.quill.getModule("mermaid");
-              if (mermaidModule && mermaidModule.renderCharts) {
-                mermaidModule.renderCharts();
-              }
-            }, 0);
-          } else {
-            this.quill.root.innerHTML = this.modelValue;
-          }
-        } catch (e) {
-          this.quill.root.innerHTML = this.modelValue;
-        }
+        this.quill.root.innerHTML = this.modelValue;
       }
 
       this.quill.on("text-change", () => {
-        const delta = this.quill.getContents();
-        const deltaString = JSON.stringify(delta);
-        this.$emit("update:modelValue", deltaString);
+        const html = this.quill.root.innerHTML;
+        this.$emit("update:modelValue", html === "<p><br></p>" ? "" : html);
       });
     },
   },