feat: implement disabled support for AHTMLEditor component

src/components/generic/AHTMLEditor.vue

 <template>
-  <div class="aura-quill tw-rounded tw-border tw-border-solid tw-border-gray-300 tw-bg-white">
+  <div
+    class="aura-quill tw-rounded tw-border tw-border-solid tw-border-gray-300 tw-bg-white"
+    :class="{ 'tw-bg-[#e9ecef]': disabled }"
+  >
     <div v-once ref="contentEl" v-html="content" />
   </div>
 </template>
@@ -37,7 +40,7 @@ import { useEventListener } from '@vueuse/core'
 defineOptions({ compatConfig: { MODE: 3 } })
 
 const content = defineModel<string>({ required: true })
-const props = defineProps<{ placeholder?: string }>()
+const props = defineProps<{ placeholder?: string; disabled?: boolean }>()
 const emit = defineEmits<{ blur: [FocusEvent] }>()
 const contentEl = ref<HTMLElement>()
 const quill = ref<Quill>()
@@ -47,6 +50,7 @@ function initializeQuill(contentEl: HTMLElement) {
   const quillInstance = new Quill(contentEl, {
     placeholder: props.placeholder,
     theme: 'bubble',
+    readOnly: props.disabled,
     modules: {
       magicUrl: true,
       toolbar: [
@@ -91,6 +95,9 @@ onBeforeUnmount(() => {
     font-size: inherit;
     color: #495057;
   }
+  .ql-disabled .ql-editor > * {
+    cursor: default;
+  }
   .ql-tooltip {
     z-index: 100;
     background-color: var(--_aura-quill-bg) !important;