quill editor

public/app.js

@@ -318,8 +318,11 @@ function addQuoteItem(item = null) {
         </div>
         <div class="col-span-5">
             <label class="block text-xs font-medium text-gray-700 mb-1">Description</label>
-            <textarea data-item="${itemId}" data-field="description" rows="2"
-                      class="item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500">${item ? item.description : ''}</textarea>
+            <div data-item="${itemId}" data-field="description" 
+                 class="item-description-editor border border-gray-300 rounded-md bg-white" 
+                 style="min-height: 80px;">
+            </div>
+            <input type="hidden" data-item="${itemId}" data-field="description-html" class="item-description-html">
         </div>
         <div class="col-span-2">
             <label class="block text-xs font-medium text-gray-700 mb-1">Rate</label>
@@ -349,6 +352,35 @@ function addQuoteItem(item = null) {
     
     itemsDiv.appendChild(itemDiv);
     
+    // Initialize Quill editor for description
+    const editorDiv = itemDiv.querySelector('.item-description-editor');
+    const hiddenInput = itemDiv.querySelector('.item-description-html');
+    
+    const quill = new Quill(editorDiv, {
+        theme: 'snow',
+        modules: {
+            toolbar: [
+                ['bold', 'italic', 'underline'],
+                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                ['clean']
+            ]
+        }
+    });
+    
+    // Load existing content if editing
+    if (item && item.description) {
+        quill.root.innerHTML = item.description;
+    }
+    
+    // Save HTML content on change
+    quill.on('text-change', () => {
+        hiddenInput.value = quill.root.innerHTML;
+        updateTotals();
+    });
+    
+    // Store quill instance for later access
+    editorDiv.quillInstance = quill;
+    
     // Get references to inputs for auto-calculation
     const qtyInput = itemDiv.querySelector('[data-field="quantity"]');
     const rateInput = itemDiv.querySelector('[data-field="rate"]');
@@ -442,9 +474,14 @@ function getQuoteItems() {
     const itemDivs = document.querySelectorAll('#quote-items > div');
     
     itemDivs.forEach(div => {
+        const descEditor = div.querySelector('.item-description-editor');
+        const descriptionHTML = descEditor && descEditor.quillInstance 
+            ? descEditor.quillInstance.root.innerHTML 
+            : '';
+        
         const item = {
             quantity: div.querySelector('[data-field="quantity"]').value,
-            description: div.querySelector('[data-field="description"]').value,
+            description: descriptionHTML,
             rate: div.querySelector('[data-field="rate"]').value,
             amount: div.querySelector('[data-field="amount"]').value,
             is_tbd: div.querySelector('[data-field="is_tbd"]').checked