@vueup/vue-quill 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,18 +1,18 @@
1
1
  /*!
2
- * VueQuill @vueup/vue-quill v1.0.0
2
+ * VueQuill @vueup/vue-quill v1.1.0
3
3
  * https://vueup.github.io/vue-quill/
4
4
  *
5
5
  * Includes quill v1.3.7
6
6
  * https://quilljs.com/
7
7
  *
8
- * Copyright (c) 2022 Ahmad Luthfi Masruri
8
+ * Copyright (c) 2023 Ahmad Luthfi Masruri
9
9
  * Released under the MIT license
10
- * Date: 2022-10-21T15:47:50.853Z
10
+ * Date: 2023-02-04T04:01:16.430Z
11
11
  */
12
12
  import Quill from 'quill';
13
13
  export { default as Quill } from 'quill';
14
14
  export { default as Delta } from 'quill-delta';
15
- import { defineComponent, onMounted, onBeforeUnmount, ref, watch, h, nextTick } from 'vue';
15
+ import { defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick, h } from 'vue';
16
16
 
17
17
  const toolbarOptions = {
18
18
  essential: [
@@ -204,15 +204,38 @@ const QuillEditor = defineComponent({
204
204
  }
205
205
  return Object.assign({}, props.globalOptions, props.options, clientOptions);
206
206
  };
207
+ const maybeClone = (delta) => {
208
+ return typeof delta === 'object' ? delta.slice() : delta;
209
+ };
210
+ const deltaHasValuesOtherThanRetain = (delta) => {
211
+ return Object.values(delta.ops).some((v) => !v.retain || Object.keys(v).length !== 1);
212
+ };
213
+ // Doesn't need reactivity, but does need to be cloned to avoid deep mutations always registering as equal
214
+ let internalModel;
215
+ const internalModelEquals = (against) => {
216
+ if (typeof internalModel === typeof against) {
217
+ if (against === internalModel) {
218
+ return true;
219
+ }
220
+ // Ref/Proxy does not support instanceof, so do a loose check
221
+ if (typeof against === 'object' && typeof internalModel === 'object') {
222
+ return !deltaHasValuesOtherThanRetain(internalModel.diff(against));
223
+ }
224
+ }
225
+ return false;
226
+ };
207
227
  const handleTextChange = (delta, oldContents, source) => {
228
+ internalModel = maybeClone(getContents());
208
229
  // Update v-model:content when text changes
209
- ctx.emit('update:content', getContents());
230
+ if (!internalModelEquals(props.content)) {
231
+ ctx.emit('update:content', internalModel);
232
+ }
210
233
  ctx.emit('textChange', { delta, oldContents, source });
211
234
  };
212
235
  const isEditorFocus = ref();
213
236
  const handleSelectionChange = (range, oldRange, source) => {
214
237
  // Set isEditorFocus if quill.hasFocus()
215
- isEditorFocus.value = (quill === null || quill === void 0 ? void 0 : quill.hasFocus()) ? true : false;
238
+ isEditorFocus.value = !!(quill === null || quill === void 0 ? void 0 : quill.hasFocus());
216
239
  ctx.emit('selectionChange', { range, oldRange, source });
217
240
  };
218
241
  watch(isEditorFocus, (focus) => {
@@ -271,6 +294,7 @@ const QuillEditor = defineComponent({
271
294
  else {
272
295
  quill === null || quill === void 0 ? void 0 : quill.setContents(content, source);
273
296
  }
297
+ internalModel = maybeClone(content);
274
298
  };
275
299
  const getText = (index, length) => {
276
300
  var _a;
@@ -300,13 +324,16 @@ const QuillEditor = defineComponent({
300
324
  initialize();
301
325
  });
302
326
  };
303
- // watch(
304
- // () => props.content,
305
- // (newContent, oldContents) => {
306
- // if (!quill || !newContent || newContent === oldContents) return
307
- // setContents(newContent)
308
- // }
309
- // )
327
+ watch(() => props.content, (newContent) => {
328
+ if (!quill || !newContent || internalModelEquals(newContent))
329
+ return;
330
+ // Restore the selection and cursor position after updating the content
331
+ const selection = quill.getSelection();
332
+ if (selection) {
333
+ nextTick(() => quill === null || quill === void 0 ? void 0 : quill.setSelection(selection));
334
+ }
335
+ setContents(newContent);
336
+ }, { deep: true });
310
337
  watch(() => props.enable, (newValue) => {
311
338
  if (quill)
312
339
  quill.enable(newValue);
@@ -1,12 +1,12 @@
1
1
  /*!
2
- * VueQuill @vueup/vue-quill v1.0.0
2
+ * VueQuill @vueup/vue-quill v1.1.0
3
3
  * https://vueup.github.io/vue-quill/
4
4
  *
5
5
  * Includes quill v1.3.7
6
6
  * https://quilljs.com/
7
7
  *
8
- * Copyright (c) 2022 Ahmad Luthfi Masruri
8
+ * Copyright (c) 2023 Ahmad Luthfi Masruri
9
9
  * Released under the MIT license
10
- * Date: 2022-10-21T15:47:50.853Z
10
+ * Date: 2023-02-04T04:01:16.430Z
11
11
  */
12
- import e from"quill";export{default as Quill}from"quill";export{default as Delta}from"quill-delta";import{defineComponent as t,onMounted as o,onBeforeUnmount as l,ref as n,watch as r,h as a,nextTick as i}from"vue";const d={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"]]},s=t({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(d).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:(t,a)=>{let s,u;o((()=>{m()})),l((()=>{s=null}));const c=n(),m=()=>{var o;if(c.value){if(u=b(),t.modules)if(Array.isArray(t.modules))for(const o of t.modules)e.register(`modules/${o.name}`,o.module);else e.register(`modules/${t.modules.name}`,t.modules.module);s=new e(c.value,u),f(t.content),s.on("text-change",g),s.on("selection-change",h),s.on("editor-change",v),"bubble"!==t.theme&&c.value.classList.remove("ql-bubble"),"snow"!==t.theme&&c.value.classList.remove("ql-snow"),null===(o=s.getModule("toolbar"))||void 0===o||o.container.addEventListener("mousedown",(e=>{e.preventDefault()})),a.emit("ready",s)}},b=()=>{const e={};if(""!==t.theme&&(e.theme=t.theme),t.readOnly&&(e.readOnly=t.readOnly),t.placeholder&&(e.placeholder=t.placeholder),t.toolbar&&""!==t.toolbar&&(e.modules={toolbar:(()=>{if("object"==typeof t.toolbar)return t.toolbar;if("string"==typeof t.toolbar){return"#"===t.toolbar.charAt(0)?t.toolbar:d[t.toolbar]}})()}),t.modules){const o=(()=>{var e,o;const l={};if(Array.isArray(t.modules))for(const n of t.modules)l[n.name]=null!==(e=n.options)&&void 0!==e?e:{};else l[t.modules.name]=null!==(o=t.modules.options)&&void 0!==o?o:{};return l})();e.modules=Object.assign({},e.modules,o)}return Object.assign({},t.globalOptions,t.options,e)},g=(e,t,o)=>{a.emit("update:content",y()),a.emit("textChange",{delta:e,oldContents:t,source:o})},p=n(),h=(e,t,o)=>{p.value=!!(null==s?void 0:s.hasFocus()),a.emit("selectionChange",{range:e,oldRange:t,source:o})};r(p,(e=>{a.emit(e?"focus":"blur",c)}));const v=(...e)=>{"text-change"===e[0]&&a.emit("editorChange",{name:e[0],delta:e[1],oldContents:e[2],source:e[3]}),"selection-change"===e[0]&&a.emit("editorChange",{name:e[0],range:e[1],oldRange:e[2],source:e[3]})},y=(e,o)=>"html"===t.contentType?O():"text"===t.contentType?T(e,o):null==s?void 0:s.getContents(e,o),f=(e,o="api")=>{"html"===t.contentType?q(e):"text"===t.contentType?x(e,o):null==s||s.setContents(e,o)},T=(e,t)=>{var o;return null!==(o=null==s?void 0:s.getText(e,t))&&void 0!==o?o:""},x=(e,t="api")=>{null==s||s.setText(e,t)},O=()=>{var e;return null!==(e=null==s?void 0:s.root.innerHTML)&&void 0!==e?e:""},q=e=>{s&&(s.root.innerHTML=e)};return r((()=>t.enable),(e=>{s&&s.enable(e)})),{editor:c,getEditor:()=>c.value,getToolbar:()=>{var e;return null===(e=null==s?void 0:s.getModule("toolbar"))||void 0===e?void 0:e.container},getQuill:()=>{if(s)return s;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:y,setContents:f,getHTML:O,setHTML:q,pasteHTML:(e,t="api")=>{const o=null==s?void 0:s.clipboard.convert(e);o&&(null==s||s.setContents(o,t))},getText:T,setText:x,reinit:()=>{i((()=>{var e;!a.slots.toolbar&&s&&(null===(e=s.getModule("toolbar"))||void 0===e||e.container.remove()),m()}))}}},render(){var e,t;return[null===(t=(e=this.$slots).toolbar)||void 0===t?void 0:t.call(e),a("div",{ref:"editor",...this.$attrs})]}});export{s as QuillEditor};
12
+ import e from"quill";export{default as Quill}from"quill";export{default as Delta}from"quill-delta";import{defineComponent as t,onMounted as o,onBeforeUnmount as l,ref as n,watch as r,nextTick as i,h as a}from"vue";const d={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"]]},s=t({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(d).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:(t,a)=>{let s,u;o((()=>{b()})),l((()=>{s=null}));const c=n(),b=()=>{var o;if(c.value){if(u=m(),t.modules)if(Array.isArray(t.modules))for(const o of t.modules)e.register(`modules/${o.name}`,o.module);else e.register(`modules/${t.modules.name}`,t.modules.module);s=new e(c.value,u),x(t.content),s.on("text-change",v),s.on("selection-change",y),s.on("editor-change",O),"bubble"!==t.theme&&c.value.classList.remove("ql-bubble"),"snow"!==t.theme&&c.value.classList.remove("ql-snow"),null===(o=s.getModule("toolbar"))||void 0===o||o.container.addEventListener("mousedown",(e=>{e.preventDefault()})),a.emit("ready",s)}},m=()=>{const e={};if(""!==t.theme&&(e.theme=t.theme),t.readOnly&&(e.readOnly=t.readOnly),t.placeholder&&(e.placeholder=t.placeholder),t.toolbar&&""!==t.toolbar&&(e.modules={toolbar:(()=>{if("object"==typeof t.toolbar)return t.toolbar;if("string"==typeof t.toolbar){return"#"===t.toolbar.charAt(0)?t.toolbar:d[t.toolbar]}})()}),t.modules){const o=(()=>{var e,o;const l={};if(Array.isArray(t.modules))for(const n of t.modules)l[n.name]=null!==(e=n.options)&&void 0!==e?e:{};else l[t.modules.name]=null!==(o=t.modules.options)&&void 0!==o?o:{};return l})();e.modules=Object.assign({},e.modules,o)}return Object.assign({},t.globalOptions,t.options,e)},p=e=>"object"==typeof e?e.slice():e;let g;const h=e=>{if(typeof g==typeof e){if(e===g)return!0;if("object"==typeof e&&"object"==typeof g)return t=g.diff(e),!Object.values(t.ops).some((e=>!e.retain||1!==Object.keys(e).length))}var t;return!1},v=(e,o,l)=>{g=p(T()),h(t.content)||a.emit("update:content",g),a.emit("textChange",{delta:e,oldContents:o,source:l})},f=n(),y=(e,t,o)=>{f.value=!!(null==s?void 0:s.hasFocus()),a.emit("selectionChange",{range:e,oldRange:t,source:o})};r(f,(e=>{a.emit(e?"focus":"blur",c)}));const O=(...e)=>{"text-change"===e[0]&&a.emit("editorChange",{name:e[0],delta:e[1],oldContents:e[2],source:e[3]}),"selection-change"===e[0]&&a.emit("editorChange",{name:e[0],range:e[1],oldRange:e[2],source:e[3]})},T=(e,o)=>"html"===t.contentType?C():"text"===t.contentType?j(e,o):null==s?void 0:s.getContents(e,o),x=(e,o="api")=>{"html"===t.contentType?k(e):"text"===t.contentType?q(e,o):null==s||s.setContents(e,o),g=p(e)},j=(e,t)=>{var o;return null!==(o=null==s?void 0:s.getText(e,t))&&void 0!==o?o:""},q=(e,t="api")=>{null==s||s.setText(e,t)},C=()=>{var e;return null!==(e=null==s?void 0:s.root.innerHTML)&&void 0!==e?e:""},k=e=>{s&&(s.root.innerHTML=e)};return r((()=>t.content),(e=>{if(!s||!e||h(e))return;const t=s.getSelection();t&&i((()=>null==s?void 0:s.setSelection(t))),x(e)}),{deep:!0}),r((()=>t.enable),(e=>{s&&s.enable(e)})),{editor:c,getEditor:()=>c.value,getToolbar:()=>{var e;return null===(e=null==s?void 0:s.getModule("toolbar"))||void 0===e?void 0:e.container},getQuill:()=>{if(s)return s;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:T,setContents:x,getHTML:C,setHTML:k,pasteHTML:(e,t="api")=>{const o=null==s?void 0:s.clipboard.convert(e);o&&(null==s||s.setContents(o,t))},getText:j,setText:q,reinit:()=>{i((()=>{var e;!a.slots.toolbar&&s&&(null===(e=s.getModule("toolbar"))||void 0===e||e.container.remove()),b()}))}}},render(){var e,t;return[null===(t=(e=this.$slots).toolbar)||void 0===t?void 0:t.call(e),a("div",{ref:"editor",...this.$attrs})]}});export{s as QuillEditor};
@@ -1,13 +1,13 @@
1
1
  /*!
2
- * VueQuill @vueup/vue-quill v1.0.0
2
+ * VueQuill @vueup/vue-quill v1.1.0
3
3
  * https://vueup.github.io/vue-quill/
4
4
  *
5
5
  * Includes quill v1.3.7
6
6
  * https://quilljs.com/
7
7
  *
8
- * Copyright (c) 2022 Ahmad Luthfi Masruri
8
+ * Copyright (c) 2023 Ahmad Luthfi Masruri
9
9
  * Released under the MIT license
10
- * Date: 2022-10-21T15:47:50.853Z
10
+ * Date: 2023-02-04T04:01:16.430Z
11
11
  */
12
12
  (function (global, factory) {
13
13
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -18609,15 +18609,38 @@
18609
18609
  }
18610
18610
  return Object.assign({}, props.globalOptions, props.options, clientOptions);
18611
18611
  };
18612
+ const maybeClone = (delta) => {
18613
+ return typeof delta === 'object' ? delta.slice() : delta;
18614
+ };
18615
+ const deltaHasValuesOtherThanRetain = (delta) => {
18616
+ return Object.values(delta.ops).some((v) => !v.retain || Object.keys(v).length !== 1);
18617
+ };
18618
+ // Doesn't need reactivity, but does need to be cloned to avoid deep mutations always registering as equal
18619
+ let internalModel;
18620
+ const internalModelEquals = (against) => {
18621
+ if (typeof internalModel === typeof against) {
18622
+ if (against === internalModel) {
18623
+ return true;
18624
+ }
18625
+ // Ref/Proxy does not support instanceof, so do a loose check
18626
+ if (typeof against === 'object' && typeof internalModel === 'object') {
18627
+ return !deltaHasValuesOtherThanRetain(internalModel.diff(against));
18628
+ }
18629
+ }
18630
+ return false;
18631
+ };
18612
18632
  const handleTextChange = (delta, oldContents, source) => {
18633
+ internalModel = maybeClone(getContents());
18613
18634
  // Update v-model:content when text changes
18614
- ctx.emit('update:content', getContents());
18635
+ if (!internalModelEquals(props.content)) {
18636
+ ctx.emit('update:content', internalModel);
18637
+ }
18615
18638
  ctx.emit('textChange', { delta, oldContents, source });
18616
18639
  };
18617
18640
  const isEditorFocus = vue.ref();
18618
18641
  const handleSelectionChange = (range, oldRange, source) => {
18619
18642
  // Set isEditorFocus if quill.hasFocus()
18620
- isEditorFocus.value = (quill === null || quill === void 0 ? void 0 : quill.hasFocus()) ? true : false;
18643
+ isEditorFocus.value = !!(quill === null || quill === void 0 ? void 0 : quill.hasFocus());
18621
18644
  ctx.emit('selectionChange', { range, oldRange, source });
18622
18645
  };
18623
18646
  vue.watch(isEditorFocus, (focus) => {
@@ -18676,6 +18699,7 @@
18676
18699
  else {
18677
18700
  quill === null || quill === void 0 ? void 0 : quill.setContents(content, source);
18678
18701
  }
18702
+ internalModel = maybeClone(content);
18679
18703
  };
18680
18704
  const getText = (index, length) => {
18681
18705
  var _a;
@@ -18705,13 +18729,16 @@
18705
18729
  initialize();
18706
18730
  });
18707
18731
  };
18708
- // watch(
18709
- // () => props.content,
18710
- // (newContent, oldContents) => {
18711
- // if (!quill || !newContent || newContent === oldContents) return
18712
- // setContents(newContent)
18713
- // }
18714
- // )
18732
+ vue.watch(() => props.content, (newContent) => {
18733
+ if (!quill || !newContent || internalModelEquals(newContent))
18734
+ return;
18735
+ // Restore the selection and cursor position after updating the content
18736
+ const selection = quill.getSelection();
18737
+ if (selection) {
18738
+ vue.nextTick(() => quill === null || quill === void 0 ? void 0 : quill.setSelection(selection));
18739
+ }
18740
+ setContents(newContent);
18741
+ }, { deep: true });
18715
18742
  vue.watch(() => props.enable, (newValue) => {
18716
18743
  if (quill)
18717
18744
  quill.enable(newValue);