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", {

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 @@

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