@vueup/vue-quill 1.3.0 → 1.4.0

package/dist/vue-quill.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * VueQuill @vueup/vue-quill v1.3.0
+ * VueQuill @vueup/vue-quill v1.4.0
  * https://vueup.github.io/vue-quill/
  * 
  * Includes quill v2.0.2 || >=2.0.4 <3
@@ -7,11 +7,10 @@
  * 
  * Copyright (c) 2026 Ahmad Luthfi Masruri
  * Released under the MIT license
- * Date: 2026-06-01T10:26:31.645Z
+ * Date: 2026-06-02T00:10:10.011Z
  */
 'use strict';
 
-var Quill = require('quill');
 var Delta = require('quill-delta');
 var vue = require('vue');
 
@@ -46,6 +45,58 @@ const toolbarOptions = {
     ],
 };
 
+let loadedQuill;
+let quillLoadPromise;
+let pendingRegistrations = [];
+const isBrowser = () => typeof document !== 'undefined';
+const replayPendingRegistrations = (Quill) => {
+    const registrations = pendingRegistrations;
+    pendingRegistrations = [];
+    for (const args of registrations) {
+        Quill.register(...args);
+    }
+};
+const loadQuill = async () => {
+    if (loadedQuill)
+        return loadedQuill;
+    if (!isBrowser()) {
+        throw new Error('@vueup/vue-quill: Quill can only be loaded in a browser environment.');
+    }
+    quillLoadPromise !== null && quillLoadPromise !== void 0 ? quillLoadPromise : (quillLoadPromise = import('quill').then(({ default: Quill }) => {
+        loadedQuill = Quill;
+        replayPendingRegistrations(Quill);
+        return Quill;
+    }));
+    return quillLoadPromise;
+};
+const getLoadedQuill = () => loadedQuill;
+const getQuillOrThrow = () => {
+    if (loadedQuill)
+        return loadedQuill;
+    throw new Error('@vueup/vue-quill: Quill is not loaded yet. Use loadQuill() in a browser-only lifecycle hook, or access the Quill instance from the ready event.');
+};
+const Quill = new Proxy(function QuillProxy() { }, {
+    get(_target, property) {
+        if (property === 'register') {
+            return (...args) => {
+                if (loadedQuill) {
+                    return loadedQuill.register(...args);
+                }
+                pendingRegistrations.push(args);
+                if (isBrowser())
+                    void loadQuill();
+            };
+        }
+        const Quill = getQuillOrThrow();
+        const value = Quill[property];
+        return typeof value === 'function' ? value.bind(Quill) : value;
+    },
+    construct(_target, args) {
+        const Quill = getQuillOrThrow();
+        return new Quill(...args);
+    },
+});
+
 const QuillEditor = vue.defineComponent({
     name: 'QuillEditor',
     inheritAttrs: false,
@@ -115,16 +166,19 @@ const QuillEditor = vue.defineComponent({
     ],
     setup: (props, ctx) => {
         vue.onMounted(() => {
-            initialize();
+            isUnmounted = false;
+            void initialize();
         });
         vue.onBeforeUnmount(() => {
             quill = null;
+            isUnmounted = true;
         });
+        let isUnmounted = false;
         let quill;
         let options;
         const editor = vue.ref();
         // Register Module if not already registered
-        const registerModule = (moduleName, module) => {
+        const registerModule = (Quill, moduleName, module) => {
             const quillImports = Quill.imports;
             if (quillImports && moduleName in quillImports) {
                 return;
@@ -132,20 +186,24 @@ const QuillEditor = vue.defineComponent({
             Quill.register(moduleName, module);
         };
         // Initialize Quill
-        const initialize = () => {
+        const initialize = async () => {
             var _a, _b;
             if (!editor.value)
                 return;
+            const editorElement = editor.value;
+            const Quill = await loadQuill();
+            if (isUnmounted || !editor.value || editor.value !== editorElement)
+                return;
             options = composeOptions();
             // Register modules
             if (props.modules) {
                 if (Array.isArray(props.modules)) {
                     for (const module of props.modules) {
-                        registerModule(`modules/${module.name}`, module.module);
+                        registerModule(Quill, `modules/${module.name}`, module.module);
                     }
                 }
                 else {
-                    registerModule(`modules/${props.modules.name}`, props.modules.module);
+                    registerModule(Quill, `modules/${props.modules.name}`, props.modules.module);
                 }
             }
             // Create new Quill instance
@@ -345,7 +403,7 @@ const QuillEditor = vue.defineComponent({
                 var _a, _b;
                 if (!ctx.slots.toolbar && quill)
                     (_b = (_a = getToolbarModule()) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.remove();
-                initialize();
+                void initialize();
             });
         };
         vue.watch(() => props.content, (newContent) => {
@@ -387,6 +445,8 @@ const QuillEditor = vue.defineComponent({
     },
 });
 
-exports.Quill = Quill;
 exports.Delta = Delta;
+exports.Quill = Quill;
 exports.QuillEditor = QuillEditor;
+exports.getLoadedQuill = getLoadedQuill;
+exports.loadQuill = loadQuill;

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

@@ -1,5 +1,5 @@
 /*!
- * VueQuill @vueup/vue-quill v1.3.0
+ * VueQuill @vueup/vue-quill v1.4.0
  * https://vueup.github.io/vue-quill/
  * 
  * Includes quill v2.0.2 || >=2.0.4 <3
@@ -7,6 +7,6 @@
  * 
  * Copyright (c) 2026 Ahmad Luthfi Masruri
  * Released under the MIT license
- * Date: 2026-06-01T10:26:31.645Z
+ * Date: 2026-06-02T00:10:10.011Z
  */
-"use strict";var e=require("quill"),t=require("quill-delta"),o=require("vue");const l={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"]]},n=o.defineComponent({name:"QuillEditor",inheritAttrs:!1,props:{content:{type:[String,Object]},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(l).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:(n,r)=>{let i,a;o.onMounted(()=>{u()}),o.onBeforeUnmount(()=>{i=null});const s=o.ref(),d=(t,o)=>{const l=e.imports;l&&t in l||e.register(t,o)},u=()=>{var t,o;if(s.value){if(a=c(),n.modules)if(Array.isArray(n.modules))for(const e of n.modules)d(`modules/${e.name}`,e.module);else d(`modules/${n.modules.name}`,n.modules.module);i=new e(s.value,a),x(n.content),i.on("text-change",v),i.on("selection-change",f),i.on("editor-change",y),"bubble"!==n.theme&&s.value.classList.remove("ql-bubble"),"snow"!==n.theme&&s.value.classList.remove("ql-snow"),null===(o=null===(t=m())||void 0===t?void 0:t.container)||void 0===o||o.addEventListener("mousedown",e=>{e.preventDefault()}),r.emit("ready",i)}},c=()=>{const e={};if(""!==n.theme&&(e.theme=n.theme),n.readOnly&&(e.readOnly=n.readOnly),n.placeholder&&(e.placeholder=n.placeholder),n.toolbar&&""!==n.toolbar&&(e.modules={toolbar:(()=>{if("object"==typeof n.toolbar)return n.toolbar;if("string"==typeof n.toolbar){return"#"===n.toolbar.charAt(0)?n.toolbar:l[n.toolbar]}})()}),n.modules){const t=(()=>{var e,t;const o={};if(Array.isArray(n.modules))for(const l of n.modules)o[l.name]=null!==(e=l.options)&&void 0!==e?e:{};else o[n.modules.name]=null!==(t=n.modules.options)&&void 0!==t?t:{};return o})();e.modules=Object.assign({},e.modules,t)}return Object.assign({},n.globalOptions,n.options,e)},b=e=>"object"==typeof e&&e?e.slice():e,m=()=>null==i?void 0:i.getModule("toolbar");let p;const h=e=>{if(typeof p==typeof e){if(e===p)return!0;if("object"==typeof e&&e&&"object"==typeof p&&p)return t=p.diff(e),!Object.values(t.ops).some(e=>!e.retain||1!==Object.keys(e).length)}var t;return!1},v=(e,t,o)=>{p=b(T()),h(n.content)||r.emit("update:content",p),r.emit("textChange",{delta:e,oldContents:t,source:o})},g=o.ref(),f=(e,t,o)=>{g.value=!!(null==i?void 0:i.hasFocus()),r.emit("selectionChange",{range:e,oldRange:t,source:o})};o.watch(g,e=>{r.emit(e?"focus":"blur",s)});const y=(...e)=>{"text-change"===e[0]&&r.emit("editorChange",{name:e[0],delta:e[1],oldContents:e[2],source:e[3]}),"selection-change"===e[0]&&r.emit("editorChange",{name:e[0],range:e[1],oldRange:e[2],source:e[3]})},T=(e,t)=>"html"===n.contentType?C():"text"===n.contentType?O(e,t):null==i?void 0:i.getContents(e,t),x=(e,o="api")=>{const l=e||("delta"===n.contentType?new t:"");"html"===n.contentType?j(l):"text"===n.contentType?q(l,o):null==i||i.setContents(l,o),p=b(l)},O=(e,t)=>{var o;return null!==(o=null==i?void 0:i.getText(e,t))&&void 0!==o?o:""},q=(e,t="api")=>{null==i||i.setText(e,t)},C=()=>{var e;return null!==(e=null==i?void 0:i.root.innerHTML)&&void 0!==e?e:""},j=e=>{i&&(i.root.innerHTML=e)};return o.watch(()=>n.content,e=>{if(!i||!e||h(e))return;const t=i.getSelection();t&&o.nextTick(()=>null==i?void 0:i.setSelection(t)),x(e)},{deep:!0}),o.watch(()=>n.enable,e=>{i&&i.enable(e)}),{editor:s,getEditor:()=>s.value,getToolbar:()=>{var e;return null===(e=m())||void 0===e?void 0:e.container},getQuill:()=>{if(i)return i;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:j,pasteHTML:(e,t="api")=>{const o=null==i?void 0:i.clipboard.convert({html:e});o&&(null==i||i.setContents(o,t))},focus:()=>{null==i||i.focus()},getText:O,setText:q,reinit:()=>{o.nextTick(()=>{var e,t;!r.slots.toolbar&&i&&(null===(t=null===(e=m())||void 0===e?void 0:e.container)||void 0===t||t.remove()),u()})}}},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=e,exports.Delta=t,exports.QuillEditor=n;
+"use strict";var e=require("quill-delta"),t=require("vue");const o={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"]]};let n,l,r=[];const i=()=>"undefined"!=typeof document,a=async()=>{if(n)return n;if(!i())throw new Error("@vueup/vue-quill: Quill can only be loaded in a browser environment.");return null!=l||(l=import("quill").then(({default:e})=>(n=e,(e=>{const t=r;r=[];for(const o of t)e.register(...o)})(e),e))),l},s=()=>{if(n)return n;throw new Error("@vueup/vue-quill: Quill is not loaded yet. Use loadQuill() in a browser-only lifecycle hook, or access the Quill instance from the ready event.")},u=new Proxy(function(){},{get(e,t){if("register"===t)return(...e)=>{if(n)return n.register(...e);r.push(e),i()&&a()};const o=s(),l=o[t];return"function"==typeof l?l.bind(o):l},construct:(e,t)=>new(s())(...t)}),d=t.defineComponent({name:"QuillEditor",inheritAttrs:!1,props:{content:{type:[String,Object]},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(o).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:(n,l)=>{t.onMounted(()=>{s=!1,c()}),t.onBeforeUnmount(()=>{r=null,s=!0});let r,i,s=!1;const u=t.ref(),d=(e,t,o)=>{const n=e.imports;n&&t in n||e.register(t,o)},c=async()=>{var e,t;if(!u.value)return;const o=u.value,c=await a();if(!s&&u.value&&u.value===o){if(i=p(),n.modules)if(Array.isArray(n.modules))for(const e of n.modules)d(c,`modules/${e.name}`,e.module);else d(c,`modules/${n.modules.name}`,n.modules.module);r=new c(u.value,i),T(n.content),r.on("text-change",h),r.on("selection-change",y),r.on("editor-change",w),"bubble"!==n.theme&&u.value.classList.remove("ql-bubble"),"snow"!==n.theme&&u.value.classList.remove("ql-snow"),null===(t=null===(e=m())||void 0===e?void 0:e.container)||void 0===t||t.addEventListener("mousedown",e=>{e.preventDefault()}),l.emit("ready",r)}},p=()=>{const e={};if(""!==n.theme&&(e.theme=n.theme),n.readOnly&&(e.readOnly=n.readOnly),n.placeholder&&(e.placeholder=n.placeholder),n.toolbar&&""!==n.toolbar&&(e.modules={toolbar:(()=>{if("object"==typeof n.toolbar)return n.toolbar;if("string"==typeof n.toolbar){return"#"===n.toolbar.charAt(0)?n.toolbar:o[n.toolbar]}})()}),n.modules){const t=(()=>{var e,t;const o={};if(Array.isArray(n.modules))for(const l of n.modules)o[l.name]=null!==(e=l.options)&&void 0!==e?e:{};else o[n.modules.name]=null!==(t=n.modules.options)&&void 0!==t?t:{};return o})();e.modules=Object.assign({},e.modules,t)}return Object.assign({},n.globalOptions,n.options,e)},b=e=>"object"==typeof e&&e?e.slice():e,m=()=>null==r?void 0:r.getModule("toolbar");let v;const f=e=>{if(typeof v==typeof e){if(e===v)return!0;if("object"==typeof e&&e&&"object"==typeof v&&v)return t=v.diff(e),!Object.values(t.ops).some(e=>!e.retain||1!==Object.keys(e).length)}var t;return!1},h=(e,t,o)=>{v=b(x()),f(n.content)||l.emit("update:content",v),l.emit("textChange",{delta:e,oldContents:t,source:o})},g=t.ref(),y=(e,t,o)=>{g.value=!!(null==r?void 0:r.hasFocus()),l.emit("selectionChange",{range:e,oldRange:t,source:o})};t.watch(g,e=>{l.emit(e?"focus":"blur",u)});const w=(...e)=>{"text-change"===e[0]&&l.emit("editorChange",{name:e[0],delta:e[1],oldContents:e[2],source:e[3]}),"selection-change"===e[0]&&l.emit("editorChange",{name:e[0],range:e[1],oldRange:e[2],source:e[3]})},x=(e,t)=>"html"===n.contentType?C():"text"===n.contentType?q(e,t):null==r?void 0:r.getContents(e,t),T=(t,o="api")=>{const l=t||("delta"===n.contentType?new e:"");"html"===n.contentType?j(l):"text"===n.contentType?O(l,o):null==r||r.setContents(l,o),v=b(l)},q=(e,t)=>{var o;return null!==(o=null==r?void 0:r.getText(e,t))&&void 0!==o?o:""},O=(e,t="api")=>{null==r||r.setText(e,t)},C=()=>{var e;return null!==(e=null==r?void 0:r.root.innerHTML)&&void 0!==e?e:""},j=e=>{r&&(r.root.innerHTML=e)};return t.watch(()=>n.content,e=>{if(!r||!e||f(e))return;const o=r.getSelection();o&&t.nextTick(()=>null==r?void 0:r.setSelection(o)),T(e)},{deep:!0}),t.watch(()=>n.enable,e=>{r&&r.enable(e)}),{editor:u,getEditor:()=>u.value,getToolbar:()=>{var e;return null===(e=m())||void 0===e?void 0:e.container},getQuill:()=>{if(r)return r;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:x,setContents:T,getHTML:C,setHTML:j,pasteHTML:(e,t="api")=>{const o=null==r?void 0:r.clipboard.convert({html:e});o&&(null==r||r.setContents(o,t))},focus:()=>{null==r||r.focus()},getText:q,setText:O,reinit:()=>{t.nextTick(()=>{var e,t;!l.slots.toolbar&&r&&(null===(t=null===(e=m())||void 0===e?void 0:e.container)||void 0===t||t.remove()),c()})}}},render(){var e,o;return[null===(o=(e=this.$slots).toolbar)||void 0===o?void 0:o.call(e),t.h("div",{ref:"editor",...this.$attrs})]}});exports.Delta=e,exports.Quill=u,exports.QuillEditor=d,exports.getLoadedQuill=()=>n,exports.loadQuill=a;

package/dist/vue-quill.d.ts

@@ -4,9 +4,10 @@ import { DefineComponent } from 'vue';
 import Delta from 'quill-delta';
 import type { EmitterSource } from 'quill';
 import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
+import type { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import Quill from 'quill';
+import type { default as Quill_2 } from 'quill';
+import type QuillConstructorType from 'quill';
 import type { QuillOptions } from 'quill';
 import { Ref } from 'vue';
 
@@ -14,13 +15,19 @@ declare type ContentPropType = string | Delta | undefined | null;
 
 export { Delta }
 
+export declare const getLoadedQuill: () => QuillConstructor | undefined;
+
+export declare const loadQuill: () => Promise<QuillConstructor>;
+
 declare type Module = {
     name: string;
     module: unknown;
     options?: object;
 };
 
-export { Quill }
+export declare const Quill: QuillConstructor;
+
+export declare type QuillConstructor = typeof QuillConstructorType;
 
 export declare const QuillEditor: DefineComponent<ExtractPropTypes<    {
 content: {
@@ -69,7 +76,7 @@ required: false;
 editor: Ref<HTMLElement | undefined, HTMLElement | undefined>;
 getEditor: () => Element;
 getToolbar: () => Element;
-getQuill: () => Quill;
+getQuill: () => Quill_2;
 getContents: (index?: number, length?: number) => string | Delta | undefined;
 setContents: (content: ContentPropType, source?: EmitterSource) => void;
 getHTML: () => string;