vue-quilly - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/components/QuillyEditor.vue.d.ts

 import { default as Quill, Delta, EmitterSource, QuillOptions, Range } from 'quill/core';
 
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: string | undefined;
+    modelValue?: string | null | undefined;
     options?: QuillOptions | undefined;
@@ -25,3 +25,3 @@ }>, {
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: string | undefined;
+    modelValue?: string | null | undefined;
     options?: QuillOptions | undefined;
@@ -28,0 +28,0 @@ }>>> & {

dist/vue-quilly.js

@@ -9,15 +9,15 @@ import { defineComponent as v, ref as d, watch as m, onBeforeUnmount as x, openBlock as _, createElementBlock as C } from "vue";
   emits: ["update:modelValue", "text-change", "selection-change", "editor-change", "blur", "focus", "ready"],
-  setup(p, { expose: f, emit: h }) {
-    const c = p, n = h;
+  setup(f, { expose: p, emit: h }) {
+    const c = f, n = h;
     let l = null;
-    const a = d(), s = d(), u = (e) => {
-      s.value = c.modelValue;
-      const t = e.getContents(), o = e.clipboard.convert({ html: c.modelValue });
-      return e.setContents(o), n("text-change", { delta: o, oldContent: t, source: "api" }), o;
+    const a = d(), i = d(), u = (e) => {
+      i.value = c.modelValue;
+      const t = e.getContents(), o = e.clipboard.convert({ html: c.modelValue ?? "" });
+      e.setContents(o), n("text-change", { delta: o, oldContent: t, source: "api" });
     }, g = (e) => {
       const t = new e(a.value, c.options);
-      return c.modelValue && u(t), t.on("selection-change", (o, i, r) => {
-        n(o ? "focus" : "blur", t), n("selection-change", { range: o, oldRange: i, source: r });
-      }), t.on("text-change", (o, i, r) => {
-        s.value = t.root.innerHTML, n("text-change", { delta: o, oldContent: i, source: r });
+      return c.modelValue && u(t), t.on("selection-change", (o, r, s) => {
+        n(o ? "focus" : "blur", t), n("selection-change", { range: o, oldRange: r, source: s });
+      }), t.on("text-change", (o, r, s) => {
+        i.value = t.root.innerHTML, n("text-change", { delta: o, oldContent: r, source: s });
       }), t.on("editor-change", (o) => {
@@ -30,7 +30,9 @@ n("editor-change", o);
       (e) => {
-        e && e !== s.value ? (u(l), s.value = l.root.innerHTML) : e || l.setContents([]);
+        l && (e && e !== i.value ? (u(l), i.value = l.root.innerHTML) : e || l.setContents([]));
       }
-    ), m(s, (e, t) => {
-      e && e !== t ? n("update:modelValue", e) : e || l.setContents([]);
-    }), x(() => l = null), f({
+    ), m(i, (e, t) => {
+      l && (e && e !== t ? n("update:modelValue", e) : e || l.setContents([]));
+    }), x(() => {
+      l = null;
+    }), p({
       initialize: g
@@ -37,0 +39,0 @@ }), (e, t) => (_(), C("div", {

dist/vue-quilly.umd.cjs

@@ -1,1 +0,1 @@
-(function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(l=typeof globalThis<"u"?globalThis:l||self,n(l.VueQuilly={},l.Vue))})(this,function(l,n){"use strict";const p=n.defineComponent({__name:"QuillyEditor",props:{modelValue:{},options:{}},emits:["update:modelValue","text-change","selection-change","editor-change","blur","focus","ready"],setup(m,{expose:h,emit:g}){const s=m,i=g;let c=null;const u=n.ref(),r=n.ref(),f=e=>{r.value=s.modelValue;const t=e.getContents(),o=e.clipboard.convert({html:s.modelValue});return e.setContents(o),i("text-change",{delta:o,oldContent:t,source:"api"}),o},y=e=>{const t=new e(u.value,s.options);return s.modelValue&&f(t),t.on("selection-change",(o,a,d)=>{i(o?"focus":"blur",t),i("selection-change",{range:o,oldRange:a,source:d})}),t.on("text-change",(o,a,d)=>{r.value=t.root.innerHTML,i("text-change",{delta:o,oldContent:a,source:d})}),t.on("editor-change",o=>{i("editor-change",o)}),i("ready",t),c=t,t};return n.watch(()=>s.modelValue,e=>{e&&e!==r.value?(f(c),r.value=c.root.innerHTML):e||c.setContents([])}),n.watch(r,(e,t)=>{e&&e!==t?i("update:modelValue",e):e||c.setContents([])}),n.onBeforeUnmount(()=>c=null),h({initialize:y}),(e,t)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"container",ref:u},null,512))}});l.QuillyEditor=p,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.VueQuilly={},c.Vue))})(this,function(c,n){"use strict";const p=n.defineComponent({__name:"QuillyEditor",props:{modelValue:{},options:{}},emits:["update:modelValue","text-change","selection-change","editor-change","blur","focus","ready"],setup(m,{expose:h,emit:g}){const s=m,i=g;let l=null;const d=n.ref(),r=n.ref(),f=e=>{r.value=s.modelValue;const t=e.getContents(),o=e.clipboard.convert({html:s.modelValue??""});e.setContents(o),i("text-change",{delta:o,oldContent:t,source:"api"})},y=e=>{const t=new e(d.value,s.options);return s.modelValue&&f(t),t.on("selection-change",(o,a,u)=>{i(o?"focus":"blur",t),i("selection-change",{range:o,oldRange:a,source:u})}),t.on("text-change",(o,a,u)=>{r.value=t.root.innerHTML,i("text-change",{delta:o,oldContent:a,source:u})}),t.on("editor-change",o=>{i("editor-change",o)}),i("ready",t),l=t,t};return n.watch(()=>s.modelValue,e=>{l&&(e&&e!==r.value?(f(l),r.value=l.root.innerHTML):e||l.setContents([]))}),n.watch(r,(e,t)=>{l&&(e&&e!==t?i("update:modelValue",e):e||l.setContents([]))}),n.onBeforeUnmount(()=>{l=null}),h({initialize:y}),(e,t)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"container",ref:d},null,512))}});c.QuillyEditor=p,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package.json

 {
   "name": "vue-quilly",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
@@ -6,0 +6,0 @@ "dependencies": {

README.md

@@ -32,10 +32,70 @@ # vue-quilly
 
+**Browser:**
+
+```html
+<!-- Include Quill 2 -->
+<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
+
+<!-- Import Vue and vue-quilly -->
+<script type="importmap">
+  {
+    "imports": {
+      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
+      "vue-quilly": "https://unpkg.com/vue-quilly@1.0.4/dist/vue-quilly.js"
+    }
+  }
+</script>
+
+<!-- Initialize the editor -->
+<div id="app">
+  <quilly-editor ref="editor" v-model="model" :options="options" />
+</div>
+
+<script type="module">
+  import { createApp, ref, onMounted } from 'vue'
+  import { QuillyEditor } from 'vue-quilly'
+
+  createApp({
+    setup() {
+      const options = {
+        theme: 'snow',
+        modules: {
+          toolbar: true,
+        },
+        placeholder: 'Compose an epic...',
+        readOnly: false
+      }
+      
+      const editor = ref()
+      const model = ref('<p>Hello Quilly!</p>')
+      let quill = null
+      
+      onMounted(() => {
+        quill = editor.value.initialize(Quill)
+      })
+      
+      return {
+        editor,
+        options,
+        model
+      }
+    }
+  })
+    .component('QuillyEditor', QuillyEditor)
+    .mount('#app')
+</script>
+```
+Browser setup demo - https://codepen.io/redrobot753/pen/VwJwPLP
+
+**Bundlers:**
+
 ```bash
 npm install quill vue-quilly
 # Or
+yarn add quill vue-quilly
+# Or
 pnpm add quill vue-quilly
 ```
 
-## Get started
-
 Import Quill full build if you need all modules or [core build](https://quilljs.com/docs/installation#core-build) with minimum required modules:
@@ -42,0 +102,0 @@

src/components/QuillyEditor.vue

@@ -6,3 +6,5 @@ <script setup lang="ts">
 const props = defineProps<{
-  modelValue?: string
+  // HTML model value, supports v-model
+  modelValue?: string | null
+  // Quill initialization options
   options?: QuillOptions
@@ -29,3 +31,3 @@ }>()
 const container = ref<HTMLElement>()
-const model = ref<string>()
+const model = ref<string | null>()
 
@@ -36,6 +38,5 @@ // Convert modelValue HTML to Delta and replace editor content
   const oldContent = quill.getContents()
-  const delta = quill.clipboard.convert({ html: props.modelValue })
+  const delta = quill.clipboard.convert({ html: props.modelValue ?? '' })
   quill.setContents(delta)
   emit('text-change', { delta, oldContent, source: 'api' })
-  return delta
 }
@@ -45,3 +46,3 @@
 const initialize = (QuillClass: typeof Quill) => {
-  const quill = new QuillClass(container.value!, props.options)
+  const quill = new QuillClass(container.value as HTMLElement, props.options)
 
@@ -85,7 +86,8 @@ // Set editor initial model
   (newValue) => {
+    if (!quillInstance) return
     if (newValue && newValue !== model.value) {
-      pasteHTML(quillInstance!)
-      model.value = quillInstance!.root.innerHTML
+      pasteHTML(quillInstance)
+      model.value = quillInstance.root.innerHTML
     } else if (!newValue) {
-      quillInstance!.setContents([])
+      quillInstance.setContents([])
     }
@@ -97,10 +99,13 @@ }
 watch(model, (newValue, oldValue) => {
+  if (!quillInstance) return
   if (newValue && newValue !== oldValue) {
     emit('update:modelValue', newValue)
   } else if (!newValue) {
-    quillInstance!.setContents([])
+    quillInstance.setContents([])
   }
 })
 
-onBeforeUnmount(() => quillInstance = null)
+onBeforeUnmount(() => {
+  quillInstance = null
+})
 
@@ -107,0 +112,0 @@ // Expose init function

No alert changes

Improved metrics

Total package byte prevSize

18206

9.38%

Lines of code

105

1.94%

Number of lines in readme file

214

38.96%

No dependency changes