Migrate from TinyMCE to TipTap

webapp/package.json

@@ -20,7 +20,20 @@
     "@fortawesome/vue-fontawesome": "^3.0.0-3",
     "@popperjs/core": "^2.11.8",
     "@primevue/themes": "^4.0.0",
-    "@tinymce/tinymce-vue": "^4.0.0",
+    "@tiptap/extension-color": "^2.10.5",
+    "@tiptap/extension-highlight": "^2.10.5",
+    "@tiptap/extension-image": "^2.10.5",
+    "@tiptap/extension-link": "^2.10.5",
+    "@tiptap/extension-placeholder": "^2.10.5",
+    "@tiptap/extension-table": "^2.10.5",
+    "@tiptap/extension-table-cell": "^2.10.5",
+    "@tiptap/extension-table-header": "^2.10.5",
+    "@tiptap/extension-table-row": "^2.10.5",
+    "@tiptap/extension-text-style": "^2.10.5",
+    "@tiptap/extension-typography": "^3.4.4",
+    "@tiptap/extension-underline": "^2.10.5",
+    "@tiptap/starter-kit": "^2.10.5",
+    "@tiptap/vue-3": "^2.10.5",
     "@uppy/core": "^4.4.6",
     "@uppy/dashboard": "^4.3.4",
     "@uppy/webcam": "^4.2.0",
@@ -36,14 +49,14 @@
     "date-fns": "^2.29.3",
     "highlight.js": "^11.7.0",
     "js-md5": "^0.8.3",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^14.1.0",
     "mermaid": "^11.10.0",
     "primeicons": "^7.0.0",
     "primevue": "^4.0.0",
     "process": "^0.11.10",
     "qrcode-vue3": "^1.6.8",
     "serve": "^14.2.1",
-    "tinymce": "^5.10.9",
+    "turndown": "^7.2.1",
     "vue": "^3.2.4",
     "vue-qrcode-reader": "^5.5.7",
     "vue-router": "^4.0.0-0",

webapp/public/index.html

@@ -30,6 +30,14 @@
       >
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
+    <script>
+      window.mermaid.initialize({
+        startOnLoad: false,
+        theme: "default",
+        securityLevel: "loose",
+      });
+    </script>
   </body>
 </html>

webapp/src/components/CellInformation.vue

@@ -85,10 +85,10 @@
         <div class="row">
           <div class="col">
             <label id="cell-description-label">Description</label>
-            <TinyMceInline
+            <TiptapInline
               v-model="SampleDescription"
               aria-labelledby="cell-description-label"
-            ></TinyMceInline>
+            ></TiptapInline>
           </div>
         </div>
       </div>
@@ -106,7 +106,7 @@
 <script>
 import { createComputedSetterForItemField } from "@/field_utils.js";
 import ChemFormulaInput from "@/components/ChemFormulaInput";
-import TinyMceInline from "@/components/TinyMceInline";
+import TiptapInline from "@/components/TiptapInline";
 import CellPreparationInformation from "@/components/CellPreparationInformation";
 import TableOfContents from "@/components/TableOfContents";
 import ItemRelationshipVisualization from "@/components/ItemRelationshipVisualization";
@@ -118,7 +118,7 @@ import { cellFormats } from "@/resources.js";
 export default {
   components: {
     ChemFormulaInput,
-    TinyMceInline,
+    TiptapInline,
     CellPreparationInformation,
     TableOfContents,
     ItemRelationshipVisualization,

webapp/src/components/CellPreparationInformation.vue

@@ -49,7 +49,7 @@
 
     <div class="form-group ml-5 mt-3">
       <label id="synthesis-procedure-label" class="subheading">Procedure</label>
-      <TinyMceInline
+      <TiptapInline
         v-model="CellPreparationDescription"
         aria-labelledby="synthesis-procedure-label"
       />
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import TinyMceInline from "@/components/TinyMceInline";
+import TiptapInline from "@/components/TiptapInline";
 // import ChemicalFormula from "@/components/ChemicalFormula.vue";
 import { createComputedSetterForItemField } from "@/field_utils.js";
 
@@ -69,7 +69,7 @@ import CompactConstituentTable from "@/components/CompactConstituentTable";
 
 export default {
   components: {
-    TinyMceInline,
+    TiptapInline,
     CompactConstituentTable,
   },
   props: {

webapp/src/components/CollectionInformation.vue

@@ -26,10 +26,10 @@
         </div>
 
         <label id="description-label" class="mr-2">Description</label>
-        <TinyMceInline
+        <TiptapInline
           v-model="CollectionDescription"
           aria-labelledby="description-label"
-        ></TinyMceInline>
+        ></TiptapInline>
       </div>
       <div class="col-md-4">
         <CollectionRelationshipVisualization :collection_id="collection_id" />
@@ -57,14 +57,14 @@
 <script>
 import { createComputedSetterForCollectionField } from "@/field_utils.js";
 import { getCollectionSampleList } from "@/server_fetch_utils";
-import TinyMceInline from "@/components/TinyMceInline";
+import TiptapInline from "@/components/TiptapInline";
 import Creators from "@/components/Creators";
 import CollectionRelationshipVisualization from "@/components/CollectionRelationshipVisualization";
 import DynamicDataTable from "@/components/DynamicDataTable";
 
 export default {
   components: {
-    TinyMceInline,
+    TiptapInline,
     Creators,
     CollectionRelationshipVisualization,
     DynamicDataTable,

webapp/src/components/CrossReferenceComponent.vue

@@ -0,0 +1,55 @@
+<template>
+  <node-view-wrapper class="cross-reference-wrapper" contenteditable="false">
+    <FormattedItemName
+      :item_id="node.attrs.itemId"
+      :item-type="node.attrs.itemType"
+      :selecting="true"
+      enable-click
+      :max-length="formattedItemNameMaxLength"
+      class="formatted-cross-reference-badge"
+    />
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import FormattedItemName from "@/components/FormattedItemName.vue";
+
+export default {
+  components: {
+    NodeViewWrapper,
+    FormattedItemName,
+  },
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+    editor: {
+      type: Object,
+      required: true,
+    },
+    formattedItemNameMaxLength: {
+      type: Number,
+      default: NaN,
+    },
+  },
+  methods: {
+    openEditPage() {
+      if (!this.node.attrs.itemId) return;
+      window.open(`/edit/${this.node.attrs.itemId}`, "_blank");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.cross-reference-wrapper {
+  display: inline;
+}
+
+.formatted-cross-reference-badge {
+  cursor: pointer;
+  display: inline-flex;
+}
+</style>

webapp/src/components/EquipmentInformation.vue

@@ -56,7 +56,7 @@
       </div>
     </div>
     <label id="equip-description-label" class="mr-2">Description</label>
-    <TinyMceInline v-model="ItemDescription" aria-labelledby="equip-description-label" />
+    <TiptapInline v-model="ItemDescription" aria-labelledby="equip-description-label" />
 
     <TableOfContents
       class="mb-3"
@@ -68,15 +68,15 @@
 
 <script>
 import { createComputedSetterForItemField } from "@/field_utils.js";
-import TinyMceInline from "@/components/TinyMceInline";
+import TiptapInline from "@/components/TiptapInline";
 import TableOfContents from "@/components/TableOfContents";
 import CollectionList from "@/components/CollectionList";
 import FormattedRefcode from "@/components/FormattedRefcode";
 import Creators from "@/components/Creators";
 
 export default {
   components: {
-    TinyMceInline,
+    TiptapInline,
     CollectionList,
     TableOfContents,
     FormattedRefcode,

webapp/src/components/MermaidComponent.vue

@@ -0,0 +1,104 @@
+<template>
+  <node-view-wrapper class="my-2" @click="selectNode">
+    <div class="border rounded p-2 bg-light position-relative">
+      <div
+        ref="mermaidContainer"
+        class="d-flex justify-content-center"
+        style="min-height: 100px"
+      ></div>
+      <div v-if="error" class="alert alert-warning mb-0 mt-2">Invalid Mermaid syntax</div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper } from "@tiptap/vue-3";
+import { DialogService } from "@/services/DialogService";
+
+export default {
+  components: { NodeViewWrapper },
+  props: {
+    node: { type: Object, required: true },
+    updateAttributes: { type: Function, required: true },
+    selected: { type: Boolean, default: false },
+    editor: { type: Object, required: true },
+    getPos: { type: Function, required: true },
+  },
+  data() {
+    return {
+      error: false,
+      renderId: null,
+    };
+  },
+  watch: {
+    "node.attrs.code": {
+      handler() {
+        this.renderDiagram();
+      },
+      immediate: false,
+    },
+  },
+  mounted() {
+    this.renderDiagram();
+  },
+  beforeUnmount() {
+    if (this.renderId) {
+      const element = document.getElementById(this.renderId);
+      if (element) element.remove();
+    }
+  },
+  methods: {
+    selectNode() {
+      const pos = this.getPos();
+      this.editor.chain().focus().setNodeSelection(pos).run();
+    },
+    async renderDiagram() {
+      if (!this.$refs.mermaidContainer) return;
+
+      const container = this.$refs.mermaidContainer;
+      container.innerHTML = "";
+      this.error = false;
+
+      let attempts = 0;
+      while (!window.mermaid && attempts < 10) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        attempts++;
+      }
+
+      if (!window.mermaid) {
+        this.error = true;
+        DialogService.error("Mermaid library not loaded");
+        return;
+      }
+
+      this.renderId = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+
+      try {
+        const graphDefinition = this.node.attrs.code || "graph TD; A[Start] --> B[End];";
+
+        if (!window.mermaid._initialized) {
+          window.mermaid.initialize({
+            startOnLoad: false,
+            theme: "default",
+            securityLevel: "loose",
+          });
+          window.mermaid._initialized = true;
+        }
+
+        const mermaidDiv = document.createElement("div");
+        mermaidDiv.id = this.renderId;
+        mermaidDiv.textContent = graphDefinition;
+        container.appendChild(mermaidDiv);
+
+        await window.mermaid.init(undefined, mermaidDiv);
+      } catch {
+        this.error = true;
+        const errorDiv = document.createElement("div");
+        errorDiv.className = "text-danger";
+        errorDiv.textContent = "Error rendering diagram";
+        container.appendChild(errorDiv);
+      }
+    },
+  },
+};
+</script>