src/components/QuillEditor.vue

@@ -1,5 +1,7 @@
 <template>
+  <div :id="id" :style="style" class="flex flex-col">
     <div ref="quill"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -18,6 +20,8 @@ const instance = ref<undefined | Quill>();
 const model = ref<string | Delta>("");
 
 const props = defineProps({
+  id: String,
+  style: [String, Object],
   options: {
     type: Object as PropType<QuillOptions>,
     default: {},
@@ -54,11 +58,16 @@ watch(
   () => props.content,
   (val, oldVal) => {
     if (!instance.value || !val || isEqual(val, model.value)) return;
-    console.log("hi");
     setContent(cloneDeep(val));
   },
   { deep: true }
 );
+watch(
+  () => props.readonly,
+  (val, oldVal) => {
+    instance.value?.enable(val);
+  }
+);
 watch(model, (val, oldVal) => {
   emit("update:content", cloneDeep(val));
 });
@@ -81,7 +90,6 @@ onMounted(() => {
     } else {
       emit("focus");
     }
-    console.log(range);
     emit("selectionChange", { range, oldRange, source });
   });
   quill.on(Quill.events.TEXT_CHANGE, (delta, oldDelta, source) => {
@@ -94,7 +102,11 @@ onMounted(() => {
   setContent(cloneDeep(props.content ?? ""));
 });
 onUnmounted(() => {
+  if (instance.value) {
+    instance.value.off(Quill.events.SELECTION_CHANGE);
+    instance.value.off(Quill.events.TEXT_CHANGE);
     instance.value = undefined;
+  }
 });
 
 function getContent(): string | Delta {
@@ -125,3 +137,15 @@ function setContent(content: Delta | string) {
   }
 }
 </script>
+
+<style>
+.ql-container {
+  border-bottom-left-radius: 0.5em;
+  border-bottom-right-radius: 0.5em;
+}
+.ql-toolbar {
+  background: var(--color-gray-100);
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+}
+</style>