vue-quilly - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

dist/components/QuillyEditor.vue.d.ts

@@ -6,2 +6,3 @@ import { default as Quill, Delta, EmitterSource, QuillOptions, Range } from 'quill/core';
     options?: QuillOptions | undefined;
+    isSemanticHtmlModel?: boolean | undefined;
 }>, {
@@ -28,2 +29,3 @@ initialize: (QuillClass: typeof Quill) => Quill;
     options?: QuillOptions | undefined;
+    isSemanticHtmlModel?: boolean | undefined;
 }>>> & {
@@ -30,0 +32,0 @@ "onUpdate:modelValue"?: ((value: string) => any) | undefined;

dist/vue-quilly.js

@@ -1,40 +0,41 @@
-import { defineComponent as v, ref as d, watch as m, onBeforeUnmount as x, openBlock as _, createElementBlock as C } from "vue";
-const b = /* @__PURE__ */ v({
+import { defineComponent as H, ref as u, watch as d, onBeforeUnmount as M, openBlock as v, createElementBlock as x } from "vue";
+const y = /* @__PURE__ */ H({
   __name: "QuillyEditor",
   props: {
     modelValue: {},
-    options: {}
+    options: {},
+    isSemanticHtmlModel: { type: Boolean }
   },
   emits: ["update:modelValue", "text-change", "selection-change", "editor-change", "blur", "focus", "ready"],
-  setup(f, { expose: p, emit: h }) {
-    const c = f, n = h;
-    let l = null;
-    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, 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) => {
-        n("editor-change", o);
-      }), n("ready", t), l = t, t;
+  setup(p, { expose: f, emit: h }) {
+    const i = p, l = h;
+    let n = null;
+    const r = u(), c = u(), m = (t) => {
+      c.value = i.modelValue;
+      const e = t.getContents(), o = t.clipboard.convert({ html: i.modelValue ?? "" });
+      t.setContents(o), l("text-change", { delta: o, oldContent: e, source: "api" });
+    }, g = (t) => {
+      const e = new t(r.value, i.options);
+      return i.modelValue && m(e), e.on("selection-change", (o, a, s) => {
+        l(o ? "focus" : "blur", e), l("selection-change", { range: o, oldRange: a, source: s });
+      }), e.on("text-change", (o, a, s) => {
+        c.value = i.isSemanticHtmlModel ? e.getSemanticHTML() : e.root.innerHTML, l("text-change", { delta: o, oldContent: a, source: s });
+      }), e.on("editor-change", (o) => {
+        l("editor-change", o);
+      }), l("ready", e), n = e, e;
     };
-    return m(
-      () => c.modelValue,
-      (e) => {
-        l && (e && e !== i.value ? (u(l), i.value = l.root.innerHTML) : e || l.setContents([]));
+    return d(
+      () => i.modelValue,
+      (t) => {
+        n && (t && t !== c.value ? (m(n), c.value = i.isSemanticHtmlModel ? n.getSemanticHTML() : n.root.innerHTML) : t || n.setContents([]));
       }
-    ), m(i, (e, t) => {
-      l && (e && e !== t ? n("update:modelValue", e) : e || l.setContents([]));
-    }), x(() => {
-      l = null;
-    }), p({
+    ), d(c, (t, e) => {
+      n && (t && t !== e ? l("update:modelValue", t) : t || n.setContents([]));
+    }), M(() => {
+      n = null;
+    }), f({
       initialize: g
-    }), (e, t) => (_(), C("div", {
+    }), (t, e) => (v(), x("div", {
       ref_key: "container",
-      ref: a
+      ref: r
     }, null, 512));
@@ -44,3 +45,3 @@ }
 export {
-  b as QuillyEditor
+  y as QuillyEditor
 };

package.json

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

README.md

@@ -44,3 +44,3 @@ # vue-quilly
       "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"
+      "vue-quilly": "https://unpkg.com/vue-quilly@1.0.5/dist/vue-quilly.js"
     }
@@ -155,4 +155,8 @@ }
 
-Use `v-model` for HTML content type. You can set content in Delta format using Quill instance:
+⚠️ Use `v-model` for HTML content type. The received content is equal to Quill's editor element `innerHTML` property value.
 
+In some cases it will be better to use `quill.semanticHTML()` to get a clean HTML output. For doing this just set a property `:is-semantic-html-model="true"`. See [SemanticHTMLEditor example](https://github.com/alekswebnet/vue-quilly/tree/main/demo/src/components/SemanticHTMLEditor.vue).
+
+Also you can set content in Delta format using Quill instance:
+
 ```ts
@@ -159,0 +163,0 @@ quill?.setContents(

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19133

increased by5.09%

Lines of code

109

increased by3.81%

Number of lines in readme file

218

increased by1.87%

No dependency changes