vue-quilly/dist/vue-quilly.js

[](https://www.npmjs.com/package/vue-quilly) [](https://www.npmjs.com/package/vue-quilly?activeTab=code) [!

import { defineComponent as H, ref as u, watch as d, onBeforeUnmount as M, createElementBlock as v, openBlock as x } from "vue";
const y = /* @__PURE__ */ H({
  __name: "QuillyEditor",
  props: {
    modelValue: {},
    options: {},
    isSemanticHtmlModel: { type: Boolean }
  },
  emits: ["update:modelValue", "text-change", "selection-change", "editor-change", "blur", "focus", "ready"],
  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 d(
      () => i.modelValue,
      (t) => {
        n && (t && t !== c.value ? (m(n), c.value = i.isSemanticHtmlModel ? n.getSemanticHTML() : n.root.innerHTML) : t || n.setContents([]));
      }
    ), d(c, (t, e) => {
      n && (t && t !== e ? l("update:modelValue", t) : t || n.setContents([]));
    }), M(() => {
      n = null;
    }), f({
      initialize: g
    }), (t, e) => (x(), v("div", {
      ref_key: "container",
      ref: r
    }, null, 512));
  }
});
export {
  y as QuillyEditor
};