glib-web 4.26.1 → 4.27.2

package/README.md

@@ -7,6 +7,28 @@
   - `CTRL+SHIFT+P` -> `Preferences: Open User Settings (JSON)` -- This will open an editor for `settings.json`.
   - Copy content of `settings.json.example` into the editor.
 
+## Set up Javascript CI
+
+- Install typescript `yarn add typescript --dev`
+- Install cypress, use same version as cypress `package.json`. E.g. `yarn add cypress@13.13.1 --dev`
+- Add `cypress.config.js` to your project
+```javascript
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: 'node_modules/glib-web/cypress/e2e',
+    defaultBrowser: 'chrome',
+    supportFile: 'node_modules/glib-web/cypress/support/e2e.{js,jsx,ts,tsx}'
+  },
+});
+```
+- Copy `cypress.yml.example` to `YOUR_PROJECT/.github/workflows/cypress.yml`
+- Make sure the workflow is compatible with the project
+- Run the test
+  - Run rails server `bin/rails s`
+  - Execute `yarn run cypress run`
+
 ## Best practices
 
 - To prevent circular dependencies between components:

package/app.vue

@@ -170,12 +170,6 @@ export default {
         },
         true
       );
-
-      if (isRerender()) {
-        GLib.action.execute(this.page.onRerender, this);
-      } else {
-        GLib.action.execute(this.page.onLoad, this);
-      }
     },
     $ready() {
       this.$type.ifString(this.page.title, (title) => {
@@ -219,6 +213,12 @@ export default {
           "animate": true
         }, this);
       }
+
+      if (isRerender()) {
+        GLib.action.execute(this.page.onRerender, this);
+      } else {
+        GLib.action.execute(this.page.onLoad, this);
+      }
     },
     updateMainHeight() {
       this.mainHeight = window.innerHeight - this.$refs.navBar.$el.offsetHeight;

package/components/component.vue

@@ -69,6 +69,7 @@ import TextField from "./fields/text.vue";
 import SubmitField from "./fields/submit.vue";
 import TextAreaField from "./fields/textarea.vue";
 const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue"));
+const RichTextField2 = defineAsyncComponent(() => import("./fields/richText2.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
 const MultiUploadField = defineAsyncComponent(() => import("./fields/multiUpload.vue"));
@@ -170,7 +171,7 @@ export default {
     "fields-text": TextField,
     "fields-submit": SubmitField,
     "fields-textarea": TextAreaField,
-    "fields-richText": RichTextField,
+    "fields-richText": RichTextField2,
     // "fields-newRichText": NewRichTextField,
     "fields-file": FileField,
     "fields-multiUpload": MultiUploadField,

package/components/composable/form.js

@@ -106,8 +106,8 @@ function useGlibInput({ props, cacheValue = true }) {
 
   // save fieldModel to spec so data still intact even if component unmounted
   onBeforeUpdate(() => {
-    if (!instance.ctx.spec || !cacheValue) return;
-    instance.ctx.spec.value = instance.ctx.fieldModel;
+    if (!instance.props.spec || !cacheValue) return;
+    instance.props.spec.value = instance.data.fieldModel;
   });
 
 }

package/components/composable/upload.js

@@ -32,7 +32,7 @@ function setBusyWhenUploading({ files }) {
   });
 }
 
-function uploadFiles({ droppedFiles, files, spec, container }) {
+function uploadFiles({ droppedFiles, files, spec, container, onAfterUploaded }) {
   let { responseMessages } = spec;
   responseMessages ||= {};
 
@@ -41,7 +41,7 @@ function uploadFiles({ droppedFiles, files, spec, container }) {
     // show new dropped file and track progress
     key = makeKey();
     files.value[key] = new Item({ el: droppedFiles[index], status: 'pending' });
-    uploadOneFile({ files, key, spec, container });
+    uploadOneFile({ files, key, spec, container, onAfterUploaded });
   }
 }
 

package/components/fields/_buttonDate.vue

@@ -18,10 +18,11 @@
     <v-input :name="fieldName" :rules="$validation()" v-model="model" />
 
     <v-dialog v-model="dialog" width="auto">
-      <v-date-picker :model-value="new Date(model)" @update:modelValue="handleDatePickerChanged"
+      <v-date-picker :model-value="model ? new Date(model) : null" @update:modelValue="handleDatePickerChanged"
         :disabled="inputDisabled" :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" show-adjacent-months
         location="center" position="fixed">
         <template v-slot:actions>
+          <v-btn color="error" @click="remove">Remove</v-btn>
           <v-btn color="primary" @click="dialog = false">Save</v-btn>
         </template>
       </v-date-picker>
@@ -69,6 +70,11 @@ export default {
       model.value = sanitizeValue(val.spec.value);
     });
 
+    function remove() {
+      model.value = '';
+      ctx.emit('datePicked', model.value);
+    }
+
     function handleChanged(e) {
       const { value } = e.srcElement;
       model.value = value;
@@ -83,7 +89,7 @@ export default {
 
     const { smAndUp } = useDisplay();
 
-    return { text, sanitizeValue, dateInput, handleChanged, model, template, dialog, handleDatePickerChanged, smAndUp };
+    return { text, sanitizeValue, dateInput, handleChanged, model, template, dialog, handleDatePickerChanged, smAndUp, remove };
   },
   methods: {
     showPicker(e) {

package/components/fields/dynamicGroup2.vue

@@ -56,8 +56,16 @@ export default defineComponent({
     }
 
     function prefixFieldName(index, fieldName) {
-      if (fieldName.search(/\[.*\]/) >= 0) {
-        return `${namePrefix}[${index}]${fieldName}`;
+      if (fieldName.match(/\[|\]/g)) {
+        let suffix = '';
+        const indexOfFirstBracket = fieldName.indexOf('[');
+        if (indexOfFirstBracket > 0) {
+          suffix = '[' + fieldName.slice(0, indexOfFirstBracket) + ']' + fieldName.slice(indexOfFirstBracket, fieldName.length);
+        } else {
+          suffix = fieldName;
+        }
+
+        return `${namePrefix}[${index}]${suffix}`;
       } else {
         return `${namePrefix}[${index}][${fieldName}]`;
       }

package/components/fields/multiUpload.vue

@@ -90,7 +90,7 @@ export default defineComponent({
             status: null, // pending, completed, failed
             url: curr.url,
             name: curr.name,
-            signedId: curr.signed_id,
+            signedId: curr.signed_id || curr.signedId,
             type: curr.type,
             el: null
           });

package/components/fields/rawText.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>Raw Mode</div>
+  <v-textarea :value="props.producedValue" auto-grow></v-textarea>
+  <ul>
+    <li v-for="signedId in signedIds" :key="signedId">{{ signedId }}</li>
+  </ul>
+</template>
+
+<script setup>
+const props = defineProps(['producedValue', 'signedIds']);
+</script>

package/components/fields/richText.vue

@@ -7,13 +7,7 @@
 
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
 
-    <!-- Remove the editor to avoid circular updating between this editor and the raw field. -->
-    <!-- <VueEditor v-if="!rawMode" id="rich-editor" v-model="richEditorValue" :editor-toolbar="customToolbar"
-      use-custom-image-handler :editor-options="editorSettings" @text-change="onRichTextEditorChanged"
-      @image-added="uploadImage" /> -->
-    <QuillEditor v-if="!rawMode" ref="quilEditor" theme="snow" :toolbar="customToolbar" :content="richEditorValue"
-      contentType="html" :modules="modules" @textChange="onRichTextEditorChanged" class="rich-editor"
-      :placeholder="spec.placeholder" />
+    <div v-if="!rawMode" ref="editor" id="editor"></div>
     <!-- Hide these fields but don't remove them because these are the values that will get submitted. -->
     <div :style="{ display: rawMode ? 'block' : 'none' }">
       <v-textarea class="raw-editor" v-model="rawEditorValue" :style="$styles()" :class="$classes()"
@@ -27,20 +21,20 @@
 </template>
 
 <script>
-import '@vueup/vue-quill/dist/vue-quill.snow.css';
-
 import Uploader from "../../utils/glibDirectUpload";
-import { QuillEditor, Quill } from '@vueup/vue-quill';
 
 import TurndownService from "turndown";
 import { gfm } from "turndown-plugin-gfm";
 import eventFiltering from "../../utils/eventFiltering";
-import QuillImageDropAndPaste from "quill-image-drop-and-paste";
+// import ImageDropAndPaste from "quill-image-drop-and-paste";
 import bus from "../../utils/eventBus";
 
-import { vueApp } from "../../store";
-import { triggerOnInput, useGlibInput } from "../composable/form";
+import { useGlibInput } from "../composable/form";
 import { validateFile } from "../composable/file";
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+
+// Quill.register('modules/ImageDropAndPaste', ImageDropAndPaste);
 
 var ImageBlot = Quill.import("formats/image");
 ImageBlot.sanitize = function (url) {
@@ -157,23 +151,7 @@ class TextEditor {
   }
 }
 
-const modules = {
-  name: 'imageDropAndPaste',
-  module: QuillImageDropAndPaste,
-  options: {
-    // add an custom image handler
-    handler: function (imageDataUrl, type, imageData) {
-      bus.$emit("richText/dropOrPaste", {
-        file: imageData.toFile(),
-        editor: this.quill,
-        cursorLocation: this.getIndex(),
-      });
-    },
-  }
-};
-
 export default {
-  components: { QuillEditor },
   props: {
     spec: { type: Object, required: true },
   },
@@ -182,13 +160,6 @@ export default {
   },
   data: function () {
     return {
-      customToolbar: [
-        ["bold", "italic", "strike"],
-        [{ header: [false, 1, 2, 3, 4, 5] }],
-        [{ list: "ordered" }, { list: "bullet" }],
-        ["link"],
-      ],
-      modules: this.spec.imageUploader ? modules : null,
       richEditorValue: "",
       rawEditorValue: "",
       producedValue: "",
@@ -238,9 +209,39 @@ export default {
     );
   },
   mounted() {
+    const quill = new Quill('#editor', {
+      readOnly: this.spec.readOnly,
+      placeholder: this.spec.placeholder,
+      theme: 'snow',
+      modules: {
+        clipboard: true,
+        toolbar: [
+          ["bold", "italic", "strike"],
+          [{ header: [false, 1, 2, 3, 4, 5] }],
+          [{ list: "ordered" }, { list: "bullet" }],
+          ["link"],
+        ],
+        // ImageDropAndPaste: {
+        //   // add an custom image handler
+        //   handler: function (imageDataUrl, type, imageData) {
+        //     bus.$emit("richText/dropOrPaste", {
+        //       file: imageData.toFile(),
+        //       editor: quill,
+        //       cursorLocation: this.getIndex(),
+        //     });
+        //   },
+        // }
+      }
+    });
+
+    const delta = quill.clipboard.convert({ html: this.richEditorValue });
+    quill.updateContents(delta, 'user');
+
+    quill.on('text-change', this.onRichTextEditorChanged);
+
     if (this.spec.imageUploader) {
-      bus.$on("richText/dropOrPaste", ({ file, editor, cursorLocation }) =>
-        this.uploadImage(file, editor, cursorLocation)
+      bus.$on("richText/dropOrPaste", ({ file, cursorLocation }) =>
+        this.uploadImage(file, quill, cursorLocation)
       );
     }
   },
@@ -287,17 +288,13 @@ export default {
       );
     },
     onRichTextEditorChanged: eventFiltering.debounce(function () {
-      this.richEditorValue = this.$refs.quilEditor.getHTML();
+      this.richEditorValue = this.$refs.editor.getHTML();
       this.producedValue = this.textEditor.producedValue(
         this.richEditorValue,
         "html",
         this.produce
       );
 
-      if (this.spec.cacheKey) {
-        vueApp.richTextValues[this.spec.cacheKey] = this.richEditorValue;
-      }
-
       this.$executeOnChange(this.producedValue);
 
     }),
@@ -362,22 +359,8 @@ export default {
 </script>
 
 <style>
-/*
-@import "~vue2-editor/dist/vue2-editor.css";
-@import '~quill/dist/quill.core.css';
-@import '~quill/dist/quill.snow.css';
-
-#editor-container {
-  height: 375px;
-}
-*/
-/* .ql-toolbar.sticky {
-  position: fixed;
-  z-index: 99;
-  background-color: white;
-} */
-.rich-editor,
-.raw-editor {
+.ql-editor {
   height: 350px;
+  overflow-y: auto;
 }
 </style>

package/components/fields/richText2.vue

@@ -0,0 +1,221 @@
+<template>
+  <div :style="$styles()" :class="$classes()" v-if="loadIf">
+    <div id="editor" ref="editor"></div>
+    <input type="hidden" :name="fieldName" :value="producedValue" />
+    <template v-if="Object.keys(files).length > 0">
+      <input type="hidden" v-for="(file, index) in files" :name="spec.imageUploader.name" :value="file.signedId"
+        :key="index" />
+    </template>
+    <RawText v-if="spec.debug" v-bind="rawTextProps"></RawText>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, getCurrentInstance, nextTick, onMounted, ref } from "vue";
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+import 'quill-mention/dist/quill.mention.css';
+import { Mention, MentionBlot } from "quill-mention";
+const Link = Quill.import('formats/link');
+// Override the existing property on the Quill global object and add custom protocols
+Link.PROTOCOL_WHITELIST = ['http', 'https', 'mailto', 'tel', 'radar', 'rdar', 'smb', 'sms'];
+
+class CustomLinkSanitizer extends Link {
+  static sanitize(url) {
+    // Run default sanitize method from Quill
+    const sanitizedUrl = super.sanitize(url);
+
+    // Not whitelisted URL based on protocol so, let's return `blank`
+    if (!sanitizedUrl || sanitizedUrl === 'about:blank') return sanitizedUrl;
+
+    // Verify if the URL already have a whitelisted protocol
+    const hasWhitelistedProtocol = this.PROTOCOL_WHITELIST.some(function (protocol) {
+      return sanitizedUrl.startsWith(protocol);
+    });
+
+    if (hasWhitelistedProtocol) return sanitizedUrl;
+
+    // if not, then append only 'http' to not to be a relative URL
+    return `https://${sanitizedUrl}`;
+  }
+}
+
+Quill.register(CustomLinkSanitizer, true);
+
+import { useGlibInput } from "../composable/form";
+import format from "../../utils/format";
+import Action from "../../action";
+import eventFiltering from "../../utils/eventFiltering";
+import { useFileUtils } from "../composable/file";
+import { setBusyWhenUploading, uploadFiles } from "../composable/upload";
+import dom from "../../utils/dom";
+import RawText from "./rawText.vue";
+
+const { Item, makeKey } = useFileUtils();
+
+export default defineComponent({
+  props: {
+    spec: Object
+  },
+  components: { RawText },
+  setup(props) {
+    useGlibInput({ props });
+
+    let quill = undefined;
+    const instance = getCurrentInstance();
+    const editor = ref(null);
+    const producedValue = ref(undefined);
+
+    const { accept, produce, imageUploader } = props.spec;
+
+    const files = ref([props.spec.images || []].flat().reduce((prev, curr) => {
+      if (!curr) return prev;
+      return Object.assign({}, prev, { [makeKey()]: new Item(curr) });
+    }, {}));
+    setBusyWhenUploading({ files });
+
+
+    function sanitizedValue() {
+      // let index = 0;
+      // const value = quill.root.innerHTML.replace(/src="([^"]+)"|href="([^"]+)"/g, function (_, g1, g2) {
+      //   if (g1) {
+      //     return `src="{{image${++index}}}"`;
+      //   } else if (g2) {
+      //     return `href="{{image${++index}}}"`;
+      //   }
+      // });
+      const value = quill.root.innerHTML;
+
+      return produce === 'markdown' ? format.htmlToMarkdown(value) : value;
+    }
+
+    function onAfterUploaded(file) {
+      fetch(imageUploader.blobUrlGenerator, {
+        method: 'POST',
+        body: new URLSearchParams({ signed_id: file.signedId, authenticity_token: dom.getCsrf() })
+      }).then(async (res) => {
+        if (res.ok) {
+          const selection = quill.getSelection();
+          const index = selection ? selection.index : quill.getLength() - 1;
+
+          const data = await res.json();
+
+          if (!file.isImage()) {
+            quill.insertText(index, ' ');
+            quill.insertText(index, file.name, 'link', data.url);
+          } else {
+            quill.insertEmbed(index, 'image', data.url, 'user');
+          }
+
+        } else {
+          console.error('Failed to create blob url');
+        }
+      });
+
+    }
+
+    function handlePaste(e) {
+      if (
+        e.clipboardData &&
+        e.clipboardData.items &&
+        e.clipboardData.items.length
+      ) {
+        e.preventDefault();
+        uploadFiles({ droppedFiles: e.clipboardData.files, files, spec: props.spec.imageUploader, onAfterUploaded });
+      }
+    }
+
+    function handleDrop(e) {
+      if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
+        e.preventDefault();
+        uploadFiles({ droppedFiles: e.dataTransfer.files, files, spec: props.spec.imageUploader, onAfterUploaded });
+      }
+    }
+
+    const rawTextProps = computed(() => {
+      const signedIds = Object.values(files.value).map((file) => file.signedId);
+
+      return { producedValue: producedValue.value, signedIds };
+    });
+
+    // init quill
+    const modules = {
+      uploader: {
+        handler(range, files) {
+          // disable uploader
+        }
+      },
+      toolbar: [
+        ["bold", "italic", "strike"],
+        [{ header: [false, 1, 2, 3, 4, 5] }],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link"],
+      ]
+    };
+    if (props.spec.mentionList) {
+      Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention });
+      modules.mention = {
+        allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+        mentionDenotationChars: ["@"],
+        source: function (searchTerm, renderList, mentionChar) {
+          const values = props.spec.mentionList.map((v, index) => ({ id: index + 1, value: v }));
+
+          if (searchTerm.length === 0) {
+            renderList(values, searchTerm);
+          } else {
+            renderList(values.filter((v) => v.value.toLowerCase().includes(searchTerm)), searchTerm);
+          }
+        }
+      };
+    }
+    onMounted(() => {
+      quill = new Quill('#editor', {
+        readOnly: props.spec.readOnly,
+        placeholder: props.spec.placeholder,
+        theme: 'snow',
+        modules
+      });
+
+      let value = props.spec.value;
+      switch (accept) {
+        case 'html':
+          break;
+
+        default:
+          value = format.markdownForEditor(value);
+          break;
+      }
+
+      const delta = quill.clipboard.convert({ html: value });
+      quill.updateContents(delta, 'silent');
+
+      producedValue.value = sanitizedValue();
+
+      quill.on('text-change', eventFiltering.debounce(function () {
+        producedValue.value = sanitizedValue();
+        nextTick(() => {
+          Action.executeWithFormData(props.spec.onChange || props.spec.onChangeAndLoad, instance.ctx, producedValue.value);
+        });
+      }));
+
+      if (imageUploader) {
+        quill.root.addEventListener('paste', handlePaste, false);
+        quill.root.addEventListener('drop', handleDrop, false);
+      }
+    });
+
+    return { producedValue, editor, files, rawTextProps };
+  }
+});
+</script>
+
+<style>
+.ql-editor {
+  height: 350px;
+  overflow-y: auto;
+}
+
+.ql-container {
+  height: fit-content;
+}
+</style>

package/components/progressCircle.vue

@@ -1,7 +1,10 @@
 <template>
   <v-progress-circular :class="$classes()" :rotate="spec.rotate || 0" :size="spec.size || 100" :width="spec.width || 20"
     :color="spec.color" :model-value="spec.value" :indeterminate="spec.indeterminate">
-    <span v-if="spec.text" class="grey--text text--lighten-1 text-h5">{{ spec.text }}</span>
+      <div>
+        <div class="value-style text-center">{{ spec.value }}%</div>
+        <span v-if="spec.text" class="text-style">{{ spec.text }}</span>
+      </div>
   </v-progress-circular>
 </template>
 
@@ -13,4 +16,16 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.value-style {
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 700;
+}
+
+.text-style {
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 400;
+}
+</style>

package/cypress/e2e/glib-web/formDynamic.cy.ts

@@ -5,8 +5,8 @@ describe('form dynamic', () => {
   it('add, delete, and submit', () => {
     cy.visit(url)
 
-    cy.get('.question:first').click().type(' edited')
-    cy.get('.answer_type:first').click()
+    cy.get('.question').eq(0).click().type(' edited')
+    cy.get('.answer_type').eq(0).click()
     cy.get('.v-overlay-container').contains('Yes no').click()
 
     cy.contains('Add item').click()
@@ -54,7 +54,7 @@ Form Data:
   it('can execute action just like normal component', () => {
     cy.visit(url)
 
-    cy.get('.answer_type:first').click()
+    cy.get('.answer_type').eq(0).click()
     cy.get('.v-overlay-container').contains('Choices').click()
 
     const result = `{

package/cypress/e2e/glib-web/lifecycle.cy.ts

@@ -5,6 +5,9 @@ describe('glib lifecycle hooks', () => {
   it('execute onLoad and onRerender', () => {
     cy.visit(url)
 
+    cy.contains('page.onLoad').should('be.exist')
+    cy.contains('selectable').click()
+    cy.contains('lifecycle').click()
     cy.contains('page.onLoad').should('be.exist')
 
     // check if onLoad executed

package/cypress.yml.example

@@ -0,0 +1,56 @@
+name: "Cypress"
+on:
+  push:
+    paths:
+      - "yarn.lock"
+      - ".github/workflows/cypress.yml"
+jobs:
+  build-and-test:
+    env:
+      RAILS_ENV: test
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      PARALLEL_WORKERS: 2
+      RUN_ON: github
+    runs-on: ubuntu-latest
+    services:
+      db:
+        image: postgres:11
+        ports: ["5432:5432"]
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_DB: postgres
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.2.1
+          bundler-cache: true
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          cache: "yarn"
+          node-version: 20.0.0
+      - run: yarn install --frozen-lockfile
+      - run: sudo apt-get -yqq install libpq-dev
+      - run: cp config/database.yml.github-actions config/database.yml
+      - run: bundle exec rake db:test:prepare
+      - run: bundle exec rails server -d
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          browser: chrome
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      - run: yarn run cypress run

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.26.1",
+  "version": "4.27.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -13,7 +13,6 @@
     "@googlemaps/markerclusterer": "^2.5.0",
     "@rails/actioncable": "^7.1.1",
     "@rails/activestorage": "^7.1.1",
-    "@vueup/vue-quill": "^1.2.0",
     "awesome-phonenumber": "2.15.0",
     "chart.js": "^4.3.1",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -30,7 +29,8 @@
     "papaparse": "^5.4.1",
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",
-    "quill-image-drop-and-paste": "^1.2.14",
+    "quill": "2.0.3",
+    "quill-mention": "^6.0.2",
     "tiny-emitter": "^2.1.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",

package/utils/format.js

@@ -1,4 +1,6 @@
 import { marked } from "marked";
+import { gfm } from "turndown-plugin-gfm";
+import TurndownService from "turndown";
 
 export default class {
   static markdownForEditor(text) {
@@ -27,6 +29,25 @@ export default class {
     return marked.parse(text);
   }
 
+  static htmlToMarkdown(text) {
+    const turndownService = new TurndownService({ headingStyle: "atx" });
+    turndownService.use(gfm);
+    turndownService.addRule("strikethrough", {
+      filter: ["del", "s", "strike"],
+      replacement: function (content) {
+        return "~~" + content + "~~";
+      },
+    });
+
+    turndownService.addRule("codeblock", {
+      filter: ["pre"],
+      replacement: function (content) {
+        return "```\n" + content + "```";
+      },
+    });
+    return turndownService.turndown(text);
+  }
+
   static local_iso8601(date) {
     // See https://stackoverflow.com/a/29774197
     const offset = date.getTimezoneOffset();