diff --git a/client/components/forms/components/QuillyEditor.vue b/client/components/forms/components/QuillyEditor.vue
index c0cdb084..3d0e0b40 100644
--- a/client/components/forms/components/QuillyEditor.vue
+++ b/client/components/forms/components/QuillyEditor.vue
@@ -5,94 +5,107 @@
   />
 </template>
   
-  <script setup>
-  import Quill from 'quill'
-  import 'quill/dist/quill.snow.css'
-  import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
-  
-  const props = defineProps({
-    modelValue: {
-      type: String,
-      default: null
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    }
-  })
-  
-  const emit = defineEmits([
-    'update:modelValue',
-    'text-change',
-    'selection-change',
-    'editor-change',
-    'blur',
-    'focus',
-    'ready'
-  ])
-  
-  let quillInstance = null
-  const container = ref(null)
-  let isInternalChange = false
-  
-  const setContents = (content) => {
-    if (!quillInstance) return
-  
-    isInternalChange = true
-    quillInstance.root.innerHTML = content
-    quillInstance.update()
-    isInternalChange = false
+<script setup>
+import Quill from 'quill'
+import 'quill/dist/quill.snow.css'
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null
+  },
+  options: {
+    type: Object,
+    default: () => ({})
   }
-  
-  const initializeQuill = () => {
-    if (container.value) {
-      quillInstance = new Quill(container.value, props.options)
-  
-      quillInstance.on('selection-change', (range, oldRange, source) => {
-        if (!range) {
-          emit('blur', quillInstance)
-        } else {
-          emit('focus', quillInstance)
-        }
-        emit('selection-change', { range, oldRange, source })
-      })
-  
-      quillInstance.on('text-change', (delta, oldContents, source) => {
-        if (!isInternalChange) {
-          const html = quillInstance.root.innerHTML
-          emit('text-change', { delta, oldContents, source })
-          emit('update:modelValue', html)
-        }
-      })
-  
-      quillInstance.on('editor-change', (eventName, ...args) => {
-        emit('editor-change', eventName, ...args)
-      })
-  
-      if (props.modelValue) {
-        setContents(props.modelValue)
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+  'text-change',
+  'selection-change',
+  'editor-change',
+  'blur',
+  'focus',
+  'ready'
+])
+
+let quillInstance = null
+const container = ref(null)
+const model = ref(props.modelValue)
+
+const pasteHTML = (instance) => {
+  instance.clipboard.dangerouslyPasteHTML(props.modelValue || '', 'silent')
+}
+
+const initializeQuill = () => {
+  if (container.value) {
+    quillInstance = new Quill(container.value, props.options)
+
+    quillInstance.on('selection-change', (range, oldRange, source) => {
+      if (!range) {
+        emit('blur', quillInstance)
+      } else {
+        emit('focus', quillInstance)
       }
-  
-      emit('ready', quillInstance)
+      emit('selection-change', { range, oldRange, source })
+    })
+
+    quillInstance.on('text-change', (delta, oldContents, source) => {
+      // Update local model only on user input
+      model.value = quillInstance.getSemanticHTML()
+      emit('text-change', { delta, oldContents, source })
+    })
+
+    quillInstance.on('editor-change', (eventName, ...args) => {
+      emit('editor-change', eventName, ...args)
+    })
+
+    if (props.modelValue) {
+      pasteHTML(quillInstance)
+      model.value = quillInstance.getSemanticHTML()
+    }
+
+    emit('ready', quillInstance)
+  }
+}
+
+onMounted(() => {
+  initializeQuill()
+})
+
+// Watch modelValue and paste HTML if has changes
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!quillInstance) return
+    if (newValue && newValue !== model.value) {
+      pasteHTML(quillInstance)
+      model.value = quillInstance.getSemanticHTML()
+    } else if (!newValue) {
+      quillInstance.setContents([])
+      model.value = ''
     }
   }
-  
-  onMounted(() => {
-    initializeQuill()
-  })
-  
-  watch(() => props.modelValue, (newValue) => {
-    if (quillInstance && newValue !== quillInstance.root.innerHTML) {
-      setContents(newValue || '')
-    }
-  }, { immediate: true })
-  
-  onBeforeUnmount(() => {
-    if (quillInstance) {
-      quillInstance.off('selection-change')
-      quillInstance.off('text-change')
-      quillInstance.off('editor-change')
-    }
-    quillInstance = null
-  })
-  </script>
\ No newline at end of file
+)
+
+// Watch model and update modelValue if has changes
+watch(model, (newValue, oldValue) => {
+  if (!quillInstance) return
+  if (newValue && newValue !== oldValue) {
+    emit('update:modelValue', newValue)
+  } else if (!newValue) {
+    quillInstance.setContents([])
+  }
+})
+
+onBeforeUnmount(() => {
+  if (quillInstance) {
+    quillInstance.off('selection-change')
+    quillInstance.off('text-change')
+    quillInstance.off('editor-change')
+  }
+  quillInstance = null
+})
+</script>
\ No newline at end of file
diff --git a/client/lib/quill/quillMentionExtension.js b/client/lib/quill/quillMentionExtension.js
index a3381295..875b207d 100644
--- a/client/lib/quill/quillMentionExtension.js
+++ b/client/lib/quill/quillMentionExtension.js
@@ -1,7 +1,6 @@
 import { reactive } from 'vue'
 import Quill from 'quill'
 const Inline = Quill.import('blots/inline')
-const Delta = Quill.import('delta')
 const Clipboard = Quill.import('modules/clipboard')
 
 export default function registerMentionExtension(Quill) {
@@ -9,17 +8,42 @@ export default function registerMentionExtension(Quill) {
   class MentionClipboard extends Clipboard {
     convert(html) {
       const delta = super.convert(html)
-      // Remove any mention formatting from pasted content
-      return delta.reduce((newDelta, op) => {
+      const processedDelta = delta.ops.reduce((newDelta, op) => {
         if (op.attributes && op.attributes.mention) {
-          // Only keep mentions that have valid field IDs
-          if (!op.attributes.mention['mention-field-id']) {
+          const mentionData = op.attributes.mention
+          let isValid = false
+          // Check for nested structure
+          if (
+            mentionData &&
+            typeof mentionData === 'object' &&
+            mentionData.field &&
+            typeof mentionData.field === 'object' &&
+            mentionData.field.id
+          ) {
+            isValid = true
+          } else if (
+            mentionData &&
+            typeof mentionData === 'object' &&
+            mentionData['mention-field-id']
+          ) {
+            // Transform flat structure to nested structure
+            op.attributes.mention = {
+              field: {
+                id: mentionData['mention-field-id'],
+                name: mentionData['mention-field-name'] || '',
+              },
+              fallback: mentionData['mention-fallback'] || '',
+            }
+            isValid = true
+          }
+          if (!isValid) {
             delete op.attributes.mention
           }
         }
         newDelta.push(op)
         return newDelta
-      }, new Delta())
+      }, [])
+      return processedDelta
     }
   }
   Quill.register('modules/clipboard', MentionClipboard, true)
@@ -43,7 +67,6 @@ export default function registerMentionExtension(Quill) {
       if (!data || !data.field || !data.field.id) {
         return
       }
-
       node.setAttribute('contenteditable', 'false')
       node.setAttribute('mention', 'true')
       node.setAttribute('mention-field-id', data.field.id || '')
@@ -70,7 +93,7 @@ export default function registerMentionExtension(Quill) {
 
     formats() {
       let formats = super.formats()
-      formats['mention'] = MentionBlot.formats(this.domNode)
+      formats['mention'] = MentionBlot.value(this.domNode)
       return formats
     }
 
diff --git a/client/scss/app.scss b/client/scss/app.scss
index 5efa0604..044a142f 100644
--- a/client/scss/app.scss
+++ b/client/scss/app.scss
@@ -52,9 +52,17 @@ body.dark * {
 }
 
 .field-help {
-  p {
+  p, ol, ul, li {
     @apply text-gray-400 dark:text-gray-500;
   }
+
+  ol {
+    @apply list-decimal list-inside;
+  }
+
+  ul {
+    @apply list-disc list-inside;
+  }
 }
 
 .public-page {