Swap editor for Quill and add AI image insertion

app/views/Posts/new.asp

@@ -16,9 +16,12 @@
           </div>
 
           <div class="mb-3">
-            <label class="form-label" for="Body">Body</label>
-            <textarea class="form-control html-editor" id="Body" name="Body" rows="14" required></textarea>
-            <div class="form-text">HTML is supported. Use the editor toolbar to format the post.</div>
+            <label class="form-label" for="BodyEditor">Body</label>
+            <input type="hidden" id="Body" name="Body" value="">
+            <div class="editor-shell">
+              <div id="BodyEditor" class="rich-editor" aria-label="Post body editor"></div>
+            </div>
+            <div class="form-text">Use the toolbar to format the post or add an AI-generated image.</div>
           </div>
 
           <div class="mb-4">
@@ -36,17 +39,50 @@
   </div>
 </div>
 
-<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
 <script>
-  if (window.tinymce) {
-    tinymce.init({
-      selector: 'textarea.html-editor',
-      menubar: false,
-      branding: false,
-      height: 420,
-      plugins: 'lists link code autoresize',
-      toolbar: 'undo redo | blocks | bold italic underline | bullist numlist | link blockquote | removeformat | code',
-      content_style: 'body { font-family: Inter, Arial, sans-serif; font-size: 16px; line-height: 1.6; }'
+  (function () {
+    if (!window.Quill) return;
+
+    var bodyInput = document.getElementById('Body');
+    var bodyEditor = document.getElementById('BodyEditor');
+
+    bodyEditor.innerHTML = bodyInput.value || '';
+
+    var quill = new Quill(bodyEditor, {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: [
+            [{ header: [1, 2, 3, false] }],
+            ['bold', 'italic', 'underline', 'blockquote', 'code-block'],
+            [{ list: 'ordered' }, { list: 'bullet' }],
+            ['link', 'image', 'clean']
+          ]
+        }
+      }
+    });
+
+    var toolbar = quill.getModule('toolbar').container;
+    var aiButton = document.createElement('button');
+    aiButton.type = 'button';
+    aiButton.className = 'btn btn-sm btn-outline-secondary ms-2 ql-aiimage';
+    aiButton.innerHTML = '<i class="bi bi-image me-1"></i>AI Image';
+    aiButton.addEventListener('click', function () {
+      var prompt = window.prompt('Describe the image to generate with AI');
+      if (!prompt) return;
+      var url = 'https://gen.pollinations.ai/image/' + encodeURIComponent(prompt);
+      var range = quill.getSelection(true) || { index: quill.getLength() };
+      quill.insertEmbed(range.index, 'image', url, Quill.sources.USER);
+      quill.insertText(range.index + 1, '\n', Quill.sources.SILENT);
+      quill.setSelection(range.index + 2, Quill.sources.SILENT);
+    });
+    toolbar.appendChild(aiButton);
+
+    var form = bodyInput.closest('form');
+    form.addEventListener('submit', function () {
+      bodyInput.value = quill.root.innerHTML;
     });
-  }
+  })();
 </script>