From 50d6984188cc8ebb5ee4ba85e81ff964c79ad087 Mon Sep 17 00:00:00 2001
From: Neo <neo@sagittal.ai>
Date: Mon, 9 Sep 2024 22:03:35 +0000
Subject: [PATCH] Add SimpleMDE to blog edit pages

Integrate SimpleMDE editor into the blog create and update
pages to enhance the user experience with a WYSIWYG markdown
editor. This change includes adding the necessary CSS and JS
links to the templates and applying specific styles for both
light and dark modes in the stylesheet.

The SimpleMDE editor provides a more intuitive interface for
users to write and format their blog posts, addressing the
requirement outlined in the issue description. The changes
ensure that the editor is initialized on the textarea elements
for both creating and updating blog posts.

Related to Issue ID: FLAS-30
---
 flaskr/static/style.css           | 21 +++++++++++++++++++++
 flaskr/templates/blog/create.html |  5 +++++
 flaskr/templates/blog/update.html |  5 +++++
 3 files changed, 31 insertions(+)

diff --git a/flaskr/static/style.css b/flaskr/static/style.css
index 0b22aba7..76254cb3 100644
--- a/flaskr/static/style.css
+++ b/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;
+}
diff --git a/flaskr/templates/blog/create.html b/flaskr/templates/blog/create.html
index d4af7262..37871164 100644
--- a/flaskr/templates/blog/create.html
+++ b/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 %}
diff --git a/flaskr/templates/blog/update.html b/flaskr/templates/blog/update.html
index 5c940aa3..261ec606 100644
--- a/flaskr/templates/blog/update.html
+++ b/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?');">