Migrate from TinyMCE to QuillJS editor

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();
     }
 

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");

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,9 @@
     "primevue": "^4.0.0",
     "process": "^0.11.10",
     "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",

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: {

webapp/src/components/CellPreparationInformation.vue

@@ -49,16 +49,17 @@
 
     <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>
   </div>
 </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 },

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: {

webapp/src/components/EditorTransition.vue

@@ -0,0 +1,87 @@
+<template>
+  <component
+    :is="currentEditor"
+    v-model="content"
+    :placeholder="placeholder"
+    :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,
+    },
+    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>

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,19 +72,19 @@
 
 <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";
 import Creators from "@/components/Creators";
 
 export default {
   components: {
-    TinyMceInline,
     CollectionList,
     TableOfContents,
     FormattedRefcode,
     Creators,
+    EditorTransition,
   },
   props: {
     item_id: { type: String, required: true },