update Editor usage

src/components/QuillEditor.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
-import Quill, { Delta } from "quill";
+import Quill, { Delta, type QuillOptions } from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 
@@ -14,21 +14,24 @@ type RangeStatic = { index: number; length: number };
 <script lang="ts">
 export default defineComponent({
   props: {
+    options: {
+      type: Object as PropType<QuillOptions>,
+      default: {},
+    },
     toolbar: {
       type: [String, Array, Object],
       default: "",
     },
-    modules: {
-      type: Object as PropType<Record<string, unknown>>,
-      default: {},
-    },
     content: {
-      type: [String, Object] as PropType<string | Delta>,
+      type: [String, Object] as PropType<string | Delta | null>,
       default: "",
     },
     contentType: {
       type: String as PropType<"delta" | "html" | "text">,
       default: "text",
+      validator: (value: string) => {
+        return ["delta", "html", "text"].includes(value);
+      },
     },
     readonly: { type: Boolean, default: false },
     placeholder: String,
@@ -51,6 +54,16 @@ export default defineComponent({
       instance: undefined as undefined | Quill,
     };
   },
+  computed: {
+    value: {
+      get(): string | Delta {
+        return this.content ?? "";
+      },
+      set(val: string | Delta) {
+        this.$emit("update:content", val);
+      },
+    },
+  },
   mounted() {
     this.instance = new Quill(this.$refs.quill as HTMLElement, {
       theme: "snow",
@@ -59,6 +72,7 @@ export default defineComponent({
       },
       placeholder: this.placeholder,
       readOnly: this.readonly,
+      ...this.options,
     });
 
     this.instance.on("selection-change", (range, oldRange, source) => {
@@ -70,12 +84,12 @@ export default defineComponent({
       this.$emit("selectionChange", { range, oldRange, source });
     });
     this.instance.on("text-change", (delta, oldDelta, source) => {
-      this.$emit("update:content", this.getContent());
+      this.value = this.getContent();
       this.$emit("textChange", { delta, oldDelta, source });
     });
 
     this.$emit("ready", this.instance as Quill);
-    this.setContent(this.content);
+    this.setContent(this.value);
   },
   beforeUnmount() {
     this.instance = undefined;
@@ -91,6 +105,7 @@ export default defineComponent({
       }
     },
     setContent(content: Delta | string) {
+      if (content == "") return;
       if (this.contentType === "delta") {
         if (typeof content !== "string") {
           this.instance?.setContents(content);
@@ -98,6 +113,9 @@ export default defineComponent({
       } else if (this.contentType === "html") {
         if (typeof content === "string" && this.instance) {
           this.instance.root.innerHTML = content;
+          // this.instance.clipboard.dangerouslyPasteHTML(content);
+          // let delta = this.instance.clipboard.convert({ html: content });
+          // this.instance?.setContents(delta);
         }
       } else {
         if (typeof content === "string") {