Merge pull request #18 from Sagittal-ai/feature/FLAS-30-WYSIWYG

FLAS-30: Integrate SimpleMDE Editor into Blog Edit Pages

flaskr/static/style.css

@@ -228,3 +228,24 @@ body.dark-mode .content textarea {
   color: #e0e0e0;
   border: 1px solid #555;
 }
+
+/* SimpleMDE specific styles */
+.editor-toolbar {
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px 4px 0 0;
+}
+
+.CodeMirror {
+  border: 1px solid #ccc;
+  border-radius: 0 0 4px 4px;
+}
+
+body.dark-mode .editor-toolbar {
+  background: #333;
+  border: 1px solid #555;
+}
+
+body.dark-mode .CodeMirror {
+  border: 1px solid #555;
+}

flaskr/templates/blog/create.html

@@ -12,4 +12,9 @@
     <textarea name="body" id="body">{{ request.form['body'] }}</textarea>
     <input type="submit" value="Save">
   </form>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+  <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+  <script>
+    var simplemde = new SimpleMDE({ element: document.getElementById("body") });
+  </script>
 {% endblock %}

flaskr/templates/blog/update.html

@@ -12,6 +12,11 @@
     <textarea name="body" id="body">{{ request.form['body'] or post['body'] }}</textarea>
     <input type="submit" value="Save">
   </form>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
+  <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
+  <script>
+    var simplemde = new SimpleMDE({ element: document.getElementById("body") });
+  </script>
   <hr>
   <form action="{{ url_for('blog.delete', id=post['id']) }}" method="post">
     <input class="danger" type="submit" value="Delete" onclick="return confirm('Are you sure?');">