QoL update

templates/new_project.html

@@ -2,6 +2,10 @@
 
 {% block title %}New Project Post{% endblock %}
 
+{% block head %}
+<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
+{% endblock %}
+
 {% block content %}
 
 <!-- Hero Section -->
@@ -12,7 +16,7 @@
 
 <!-- Form Section -->
 <section class="py-16 bg-black text-white">
-  <div class="max-w-3xl mx-auto px-6 max-h-[85vh] overflow-y-auto">
+  <div class="max-w-3xl mx-auto px-6">
     <form action="{{ url_for('new_project') }}" method="post" enctype="multipart/form-data" class="space-y-6">
 
       <!-- Title -->
@@ -52,10 +56,14 @@
       </div>
 
       <!-- Submit -->
-      <div class="pt-4">
-        <button type="submit"
+      <div class="pt-4 flex gap-3">
+        <button type="submit" name="action" value="draft"
+                class="bg-gray-600 text-white px-6 py-2 rounded hover:bg-gray-500 transition">
+          Save as Draft
+        </button>
+        <button type="submit" name="action" value="publish"
                 class="bg-orange-600 text-white px-6 py-2 rounded hover:bg-orange-700 transition">
-          Submit Post
+          Publish Post
         </button>
       </div>
     </form>
@@ -66,18 +74,13 @@
   </div>
 </section>
 
-<!-- Textarea Auto-Expand Script -->
+<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
 <script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const textarea = document.getElementById('content');
-    if (textarea) {
-      const resize = () => {
-        textarea.style.height = 'auto';
-        textarea.style.height = textarea.scrollHeight + 'px';
-      };
-      resize(); // Set initial height
-      textarea.addEventListener('input', resize);
-    }
+  new EasyMDE({
+    element: document.getElementById('content'),
+    spellChecker: false,
+    autosave: { enabled: true, uniqueId: 'new_project' },
+    toolbar: ['bold','italic','heading','|','quote','unordered-list','ordered-list','|','link','image','|','preview','side-by-side','fullscreen','|','guide'],
   });
 </script>