@vueup/vue-quill 1.0.0 → 1.1.0

package/dist/vue-quill.cjs.js

@@ -1,13 +1,13 @@
 /*!
- * VueQuill @vueup/vue-quill v1.0.0
+ * VueQuill @vueup/vue-quill v1.1.0
  * https://vueup.github.io/vue-quill/
  * 
  * Includes quill v1.3.7
  * https://quilljs.com/
  * 
- * Copyright (c) 2022 Ahmad Luthfi Masruri
+ * Copyright (c) 2023 Ahmad Luthfi Masruri
  * Released under the MIT license
- * Date: 2022-10-21T15:47:50.853Z
+ * Date: 2023-02-04T04:01:16.430Z
  */
 'use strict';
 
@@ -212,15 +212,38 @@ const QuillEditor = vue.defineComponent({
             }
             return Object.assign({}, props.globalOptions, props.options, clientOptions);
         };
+        const maybeClone = (delta) => {
+            return typeof delta === 'object' ? delta.slice() : delta;
+        };
+        const deltaHasValuesOtherThanRetain = (delta) => {
+            return Object.values(delta.ops).some((v) => !v.retain || Object.keys(v).length !== 1);
+        };
+        // Doesn't need reactivity, but does need to be cloned to avoid deep mutations always registering as equal
+        let internalModel;
+        const internalModelEquals = (against) => {
+            if (typeof internalModel === typeof against) {
+                if (against === internalModel) {
+                    return true;
+                }
+                // Ref/Proxy does not support instanceof, so do a loose check
+                if (typeof against === 'object' && typeof internalModel === 'object') {
+                    return !deltaHasValuesOtherThanRetain(internalModel.diff(against));
+                }
+            }
+            return false;
+        };
         const handleTextChange = (delta, oldContents, source) => {
+            internalModel = maybeClone(getContents());
             // Update v-model:content when text changes
-            ctx.emit('update:content', getContents());
+            if (!internalModelEquals(props.content)) {
+                ctx.emit('update:content', internalModel);
+            }
             ctx.emit('textChange', { delta, oldContents, source });
         };
         const isEditorFocus = vue.ref();
         const handleSelectionChange = (range, oldRange, source) => {
             // Set isEditorFocus if quill.hasFocus()
-            isEditorFocus.value = (quill === null || quill === void 0 ? void 0 : quill.hasFocus()) ? true : false;
+            isEditorFocus.value = !!(quill === null || quill === void 0 ? void 0 : quill.hasFocus());
             ctx.emit('selectionChange', { range, oldRange, source });
         };
         vue.watch(isEditorFocus, (focus) => {
@@ -279,6 +302,7 @@ const QuillEditor = vue.defineComponent({
             else {
                 quill === null || quill === void 0 ? void 0 : quill.setContents(content, source);
             }
+            internalModel = maybeClone(content);
         };
         const getText = (index, length) => {
             var _a;
@@ -308,13 +332,16 @@ const QuillEditor = vue.defineComponent({
                 initialize();
             });
         };
-        // watch(
-        //   () => props.content,
-        //   (newContent, oldContents) => {
-        //     if (!quill || !newContent || newContent === oldContents) return
-        //     setContents(newContent)
-        //   }
-        // )
+        vue.watch(() => props.content, (newContent) => {
+            if (!quill || !newContent || internalModelEquals(newContent))
+                return;
+            // Restore the selection and cursor position after updating the content
+            const selection = quill.getSelection();
+            if (selection) {
+                vue.nextTick(() => quill === null || quill === void 0 ? void 0 : quill.setSelection(selection));
+            }
+            setContents(newContent);
+        }, { deep: true });
         vue.watch(() => props.enable, (newValue) => {
             if (quill)
                 quill.enable(newValue);

package/dist/vue-quill.cjs.prod.js

@@ -1,12 +1,12 @@
 /*!
- * VueQuill @vueup/vue-quill v1.0.0
+ * VueQuill @vueup/vue-quill v1.1.0
  * https://vueup.github.io/vue-quill/
  * 
  * Includes quill v1.3.7
  * https://quilljs.com/
  * 
- * Copyright (c) 2022 Ahmad Luthfi Masruri
+ * Copyright (c) 2023 Ahmad Luthfi Masruri
  * Released under the MIT license
- * Date: 2022-10-21T15:47:50.853Z
+ * Date: 2023-02-04T04:01:16.430Z
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("quill"),t=require("quill-delta"),o=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n=l(e),r=l(t);const i={essential:[[{header:[1,2,3,4,5,6,!1]}],["bold","italic","underline"],[{list:"ordered"},{list:"bullet"},{align:[]}],["blockquote","code-block","link"],[{color:[]},"clean"]],minimal:[[{header:1},{header:2}],["bold","italic","underline"],[{list:"ordered"},{list:"bullet"},{align:[]}]],full:[["bold","italic","underline","strike"],["blockquote","code-block"],[{header:1},{header:2}],[{list:"ordered"},{list:"bullet"}],[{script:"sub"},{script:"super"}],[{indent:"-1"},{indent:"+1"}],[{direction:"rtl"}],[{size:["small",!1,"large","huge"]}],[{header:[1,2,3,4,5,6,!1]}],[{color:[]},{background:[]}],[{font:[]}],[{align:[]}],["link","video","image"],["clean"]]},a=o.defineComponent({name:"QuillEditor",inheritAttrs:!1,props:{content:{type:[String,Object],default:()=>{}},contentType:{type:String,default:"delta",validator:e=>["delta","html","text"].includes(e)},enable:{type:Boolean,default:!0},readOnly:{type:Boolean,default:!1},placeholder:{type:String,required:!1},theme:{type:String,default:"snow",validator:e=>["snow","bubble",""].includes(e)},toolbar:{type:[String,Array,Object],required:!1,validator:e=>"string"!=typeof e||""===e||("#"===e.charAt(0)||-1!==Object.keys(i).indexOf(e))},modules:{type:Object,required:!1},options:{type:Object,required:!1},globalOptions:{type:Object,required:!1}},emits:["textChange","selectionChange","editorChange","update:content","focus","blur","ready"],setup:(e,t)=>{let l,r;o.onMounted((()=>{d()})),o.onBeforeUnmount((()=>{l=null}));const a=o.ref(),d=()=>{var o;if(a.value){if(r=s(),e.modules)if(Array.isArray(e.modules))for(const t of e.modules)n.register(`modules/${t.name}`,t.module);else n.register(`modules/${e.modules.name}`,e.modules.module);l=new n(a.value,r),h(e.content),l.on("text-change",u),l.on("selection-change",b),l.on("editor-change",m),"bubble"!==e.theme&&a.value.classList.remove("ql-bubble"),"snow"!==e.theme&&a.value.classList.remove("ql-snow"),null===(o=l.getModule("toolbar"))||void 0===o||o.container.addEventListener("mousedown",(e=>{e.preventDefault()})),t.emit("ready",l)}},s=()=>{const t={};if(""!==e.theme&&(t.theme=e.theme),e.readOnly&&(t.readOnly=e.readOnly),e.placeholder&&(t.placeholder=e.placeholder),e.toolbar&&""!==e.toolbar&&(t.modules={toolbar:(()=>{if("object"==typeof e.toolbar)return e.toolbar;if("string"==typeof e.toolbar){return"#"===e.toolbar.charAt(0)?e.toolbar:i[e.toolbar]}})()}),e.modules){const o=(()=>{var t,o;const l={};if(Array.isArray(e.modules))for(const n of e.modules)l[n.name]=null!==(t=n.options)&&void 0!==t?t:{};else l[e.modules.name]=null!==(o=e.modules.options)&&void 0!==o?o:{};return l})();t.modules=Object.assign({},t.modules,o)}return Object.assign({},e.globalOptions,e.options,t)},u=(e,o,l)=>{t.emit("update:content",p()),t.emit("textChange",{delta:e,oldContents:o,source:l})},c=o.ref(),b=(e,o,n)=>{c.value=!!(null==l?void 0:l.hasFocus()),t.emit("selectionChange",{range:e,oldRange:o,source:n})};o.watch(c,(e=>{t.emit(e?"focus":"blur",a)}));const m=(...e)=>{"text-change"===e[0]&&t.emit("editorChange",{name:e[0],delta:e[1],oldContents:e[2],source:e[3]}),"selection-change"===e[0]&&t.emit("editorChange",{name:e[0],range:e[1],oldRange:e[2],source:e[3]})},p=(t,o)=>"html"===e.contentType?f():"text"===e.contentType?g(t,o):null==l?void 0:l.getContents(t,o),h=(t,o="api")=>{"html"===e.contentType?y(t):"text"===e.contentType?v(t,o):null==l||l.setContents(t,o)},g=(e,t)=>{var o;return null!==(o=null==l?void 0:l.getText(e,t))&&void 0!==o?o:""},v=(e,t="api")=>{null==l||l.setText(e,t)},f=()=>{var e;return null!==(e=null==l?void 0:l.root.innerHTML)&&void 0!==e?e:""},y=e=>{l&&(l.root.innerHTML=e)};return o.watch((()=>e.enable),(e=>{l&&l.enable(e)})),{editor:a,getEditor:()=>a.value,getToolbar:()=>{var e;return null===(e=null==l?void 0:l.getModule("toolbar"))||void 0===e?void 0:e.container},getQuill:()=>{if(l)return l;throw'The quill editor hasn\'t been instantiated yet, \n                  make sure to call this method when the editor ready\n                  or use v-on:ready="onReady(quill)" event instead.'},getContents:p,setContents:h,getHTML:f,setHTML:y,pasteHTML:(e,t="api")=>{const o=null==l?void 0:l.clipboard.convert(e);o&&(null==l||l.setContents(o,t))},getText:g,setText:v,reinit:()=>{o.nextTick((()=>{var e;!t.slots.toolbar&&l&&(null===(e=l.getModule("toolbar"))||void 0===e||e.container.remove()),d()}))}}},render(){var e,t;return[null===(t=(e=this.$slots).toolbar)||void 0===t?void 0:t.call(e),o.h("div",{ref:"editor",...this.$attrs})]}});exports.Quill=n,exports.Delta=r,exports.QuillEditor=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("quill"),t=require("quill-delta"),o=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n=l(e),r=l(t);const i={essential:[[{header:[1,2,3,4,5,6,!1]}],["bold","italic","underline"],[{list:"ordered"},{list:"bullet"},{align:[]}],["blockquote","code-block","link"],[{color:[]},"clean"]],minimal:[[{header:1},{header:2}],["bold","italic","underline"],[{list:"ordered"},{list:"bullet"},{align:[]}]],full:[["bold","italic","underline","strike"],["blockquote","code-block"],[{header:1},{header:2}],[{list:"ordered"},{list:"bullet"}],[{script:"sub"},{script:"super"}],[{indent:"-1"},{indent:"+1"}],[{direction:"rtl"}],[{size:["small",!1,"large","huge"]}],[{header:[1,2,3,4,5,6,!1]}],[{color:[]},{background:[]}],[{font:[]}],[{align:[]}],["link","video","image"],["clean"]]},a=o.defineComponent({name:"QuillEditor",inheritAttrs:!1,props:{content:{type:[String,Object],default:()=>{}},contentType:{type:String,default:"delta",validator:e=>["delta","html","text"].includes(e)},enable:{type:Boolean,default:!0},readOnly:{type:Boolean,default:!1},placeholder:{type:String,required:!1},theme:{type:String,default:"snow",validator:e=>["snow","bubble",""].includes(e)},toolbar:{type:[String,Array,Object],required:!1,validator:e=>"string"!=typeof e||""===e||("#"===e.charAt(0)||-1!==Object.keys(i).indexOf(e))},modules:{type:Object,required:!1},options:{type:Object,required:!1},globalOptions:{type:Object,required:!1}},emits:["textChange","selectionChange","editorChange","update:content","focus","blur","ready"],setup:(e,t)=>{let l,r;o.onMounted((()=>{d()})),o.onBeforeUnmount((()=>{l=null}));const a=o.ref(),d=()=>{var o;if(a.value){if(r=s(),e.modules)if(Array.isArray(e.modules))for(const t of e.modules)n.register(`modules/${t.name}`,t.module);else n.register(`modules/${e.modules.name}`,e.modules.module);l=new n(a.value,r),f(e.content),l.on("text-change",p),l.on("selection-change",h),l.on("editor-change",g),"bubble"!==e.theme&&a.value.classList.remove("ql-bubble"),"snow"!==e.theme&&a.value.classList.remove("ql-snow"),null===(o=l.getModule("toolbar"))||void 0===o||o.container.addEventListener("mousedown",(e=>{e.preventDefault()})),t.emit("ready",l)}},s=()=>{const t={};if(""!==e.theme&&(t.theme=e.theme),e.readOnly&&(t.readOnly=e.readOnly),e.placeholder&&(t.placeholder=e.placeholder),e.toolbar&&""!==e.toolbar&&(t.modules={toolbar:(()=>{if("object"==typeof e.toolbar)return e.toolbar;if("string"==typeof e.toolbar){return"#"===e.toolbar.charAt(0)?e.toolbar:i[e.toolbar]}})()}),e.modules){const o=(()=>{var t,o;const l={};if(Array.isArray(e.modules))for(const n of e.modules)l[n.name]=null!==(t=n.options)&&void 0!==t?t:{};else l[e.modules.name]=null!==(o=e.modules.options)&&void 0!==o?o:{};return l})();t.modules=Object.assign({},t.modules,o)}return Object.assign({},e.globalOptions,e.options,t)},u=e=>"object"==typeof e?e.slice():e;let c;const b=e=>{if(typeof c==typeof e){if(e===c)return!0;if("object"==typeof e&&"object"==typeof c)return t=c.diff(e),!Object.values(t.ops).some((e=>!e.retain||1!==Object.keys(e).length))}var t;return!1},p=(o,l,n)=>{c=u(v()),b(e.content)||t.emit("update:content",c),t.emit("textChange",{delta:o,oldContents:l,source:n})},m=o.ref(),h=(e,o,n)=>{m.value=!!(null==l?void 0:l.hasFocus()),t.emit("selectionChange",{range:e,oldRange:o,source:n})};o.watch(m,(e=>{t.emit(e?"focus":"blur",a)}));const g=(...e)=>{"text-change"===e[0]&&t.emit("editorChange",{name:e[0],delta:e[1],oldContents:e[2],source:e[3]}),"selection-change"===e[0]&&t.emit("editorChange",{name:e[0],range:e[1],oldRange:e[2],source:e[3]})},v=(t,o)=>"html"===e.contentType?O():"text"===e.contentType?y(t,o):null==l?void 0:l.getContents(t,o),f=(t,o="api")=>{"html"===e.contentType?T(t):"text"===e.contentType?x(t,o):null==l||l.setContents(t,o),c=u(t)},y=(e,t)=>{var o;return null!==(o=null==l?void 0:l.getText(e,t))&&void 0!==o?o:""},x=(e,t="api")=>{null==l||l.setText(e,t)},O=()=>{var e;return null!==(e=null==l?void 0:l.root.innerHTML)&&void 0!==e?e:""},T=e=>{l&&(l.root.innerHTML=e)};return o.watch((()=>e.content),(e=>{if(!l||!e||b(e))return;const t=l.getSelection();t&&o.nextTick((()=>null==l?void 0:l.setSelection(t))),f(e)}),{deep:!0}),o.watch((()=>e.enable),(e=>{l&&l.enable(e)})),{editor:a,getEditor:()=>a.value,getToolbar:()=>{var e;return null===(e=null==l?void 0:l.getModule("toolbar"))||void 0===e?void 0:e.container},getQuill:()=>{if(l)return l;throw'The quill editor hasn\'t been instantiated yet, \n                  make sure to call this method when the editor ready\n                  or use v-on:ready="onReady(quill)" event instead.'},getContents:v,setContents:f,getHTML:O,setHTML:T,pasteHTML:(e,t="api")=>{const o=null==l?void 0:l.clipboard.convert(e);o&&(null==l||l.setContents(o,t))},getText:y,setText:x,reinit:()=>{o.nextTick((()=>{var e;!t.slots.toolbar&&l&&(null===(e=l.getModule("toolbar"))||void 0===e||e.container.remove()),d()}))}}},render(){var e,t;return[null===(t=(e=this.$slots).toolbar)||void 0===t?void 0:t.call(e),o.h("div",{ref:"editor",...this.$attrs})]}});exports.Quill=n,exports.Delta=r,exports.QuillEditor=a;

package/dist/vue-quill.d.ts

@@ -15,7 +15,7 @@ export { Delta }
 
 declare type Module = {
     name: string;
-    module: any;
+    module: unknown;
     options?: object;
 };
 

package/dist/vue-quill.esm-browser.js

@@ -1,15 +1,15 @@
 /*!
- * VueQuill @vueup/vue-quill v1.0.0
+ * VueQuill @vueup/vue-quill v1.1.0
  * https://vueup.github.io/vue-quill/
  * 
  * Includes quill v1.3.7
  * https://quilljs.com/
  * 
- * Copyright (c) 2022 Ahmad Luthfi Masruri
+ * Copyright (c) 2023 Ahmad Luthfi Masruri
  * Released under the MIT license
- * Date: 2022-10-21T15:47:50.853Z
+ * Date: 2023-02-04T04:01:16.430Z
  */
-import { defineComponent, onMounted, onBeforeUnmount, ref, watch, h, nextTick } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick, h } from 'vue';
 
 var global$1 = (typeof global !== "undefined" ? global :
             typeof self !== "undefined" ? self :
@@ -18605,15 +18605,38 @@ const QuillEditor = defineComponent({
             }
             return Object.assign({}, props.globalOptions, props.options, clientOptions);
         };
+        const maybeClone = (delta) => {
+            return typeof delta === 'object' ? delta.slice() : delta;
+        };
+        const deltaHasValuesOtherThanRetain = (delta) => {
+            return Object.values(delta.ops).some((v) => !v.retain || Object.keys(v).length !== 1);
+        };
+        // Doesn't need reactivity, but does need to be cloned to avoid deep mutations always registering as equal
+        let internalModel;
+        const internalModelEquals = (against) => {
+            if (typeof internalModel === typeof against) {
+                if (against === internalModel) {
+                    return true;
+                }
+                // Ref/Proxy does not support instanceof, so do a loose check
+                if (typeof against === 'object' && typeof internalModel === 'object') {
+                    return !deltaHasValuesOtherThanRetain(internalModel.diff(against));
+                }
+            }
+            return false;
+        };
         const handleTextChange = (delta, oldContents, source) => {
+            internalModel = maybeClone(getContents());
             // Update v-model:content when text changes
-            ctx.emit('update:content', getContents());
+            if (!internalModelEquals(props.content)) {
+                ctx.emit('update:content', internalModel);
+            }
             ctx.emit('textChange', { delta, oldContents, source });
         };
         const isEditorFocus = ref();
         const handleSelectionChange = (range, oldRange, source) => {
             // Set isEditorFocus if quill.hasFocus()
-            isEditorFocus.value = (quill === null || quill === void 0 ? void 0 : quill.hasFocus()) ? true : false;
+            isEditorFocus.value = !!(quill === null || quill === void 0 ? void 0 : quill.hasFocus());
             ctx.emit('selectionChange', { range, oldRange, source });
         };
         watch(isEditorFocus, (focus) => {
@@ -18672,6 +18695,7 @@ const QuillEditor = defineComponent({
             else {
                 quill === null || quill === void 0 ? void 0 : quill.setContents(content, source);
             }
+            internalModel = maybeClone(content);
         };
         const getText = (index, length) => {
             var _a;
@@ -18701,13 +18725,16 @@ const QuillEditor = defineComponent({
                 initialize();
             });
         };
-        // watch(
-        //   () => props.content,
-        //   (newContent, oldContents) => {
-        //     if (!quill || !newContent || newContent === oldContents) return
-        //     setContents(newContent)
-        //   }
-        // )
+        watch(() => props.content, (newContent) => {
+            if (!quill || !newContent || internalModelEquals(newContent))
+                return;
+            // Restore the selection and cursor position after updating the content
+            const selection = quill.getSelection();
+            if (selection) {
+                nextTick(() => quill === null || quill === void 0 ? void 0 : quill.setSelection(selection));
+            }
+            setContents(newContent);
+        }, { deep: true });
         watch(() => props.enable, (newValue) => {
             if (quill)
                 quill.enable(newValue);