From 1d2f1348a444101b17b3ee0eab6aa0c0858de701 Mon Sep 17 00:00:00 2001 From: Neo Date: Mon, 9 Sep 2024 21:36:16 +0000 Subject: [PATCH 1/3] Add markdown support to post body Implemented markdown support in the post body to enhance the editor's functionality. The main blog view now renders markdown content as HTML. This change allows users to format their posts using markdown syntax, providing a richer text editing experience. - Imported the markdown module in blog.py. - Converted post bodies from markdown to HTML in the index view. - Updated templates to indicate markdown support in the post body field. - Ensured safe rendering of HTML content in the blog index view. Fixes #FLAS-29 --- flaskr/blog.py | 4 ++++ flaskr/templates/blog/create.html | 2 +- flaskr/templates/blog/index.html | 2 +- flaskr/templates/blog/update.html | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/flaskr/blog.py b/flaskr/blog.py index be0d92c4..9ae4adaf 100644 --- a/flaskr/blog.py +++ b/flaskr/blog.py @@ -6,6 +6,7 @@ from flask import render_template from flask import request from flask import url_for from werkzeug.exceptions import abort +import markdown from .auth import login_required from .db import get_db @@ -22,6 +23,9 @@ def index(): " FROM post p JOIN user u ON p.author_id = u.id" " ORDER BY created DESC" ).fetchall() + # Convert markdown to HTML for each post body + for post in posts: + post['body'] = markdown.markdown(post['body']) return render_template("blog/index.html", posts=posts) diff --git a/flaskr/templates/blog/create.html b/flaskr/templates/blog/create.html index 88e31e44..d4af7262 100644 --- a/flaskr/templates/blog/create.html +++ b/flaskr/templates/blog/create.html @@ -8,7 +8,7 @@
- +
diff --git a/flaskr/templates/blog/index.html b/flaskr/templates/blog/index.html index 3481b8e1..f18d614f 100644 --- a/flaskr/templates/blog/index.html +++ b/flaskr/templates/blog/index.html @@ -19,7 +19,7 @@ Edit {% endif %} -

{{ post['body'] }}

+

{{ post['body']|safe }}

{% if not loop.last %}
diff --git a/flaskr/templates/blog/update.html b/flaskr/templates/blog/update.html index 2c405e63..5c940aa3 100644 --- a/flaskr/templates/blog/update.html +++ b/flaskr/templates/blog/update.html @@ -8,7 +8,7 @@
- +
From c91d5733b1192aa54e7ad7f21f236e25fea665dc Mon Sep 17 00:00:00 2001 From: Neo Date: Mon, 9 Sep 2024 21:45:36 +0000 Subject: [PATCH 2/3] Fix immutable cursor issue Address the issue of using an immutable cursor in the file flaskr/blog.py. The previous implementation attempted to modify the 'posts' object, which is immutable, leading to runtime errors. This commit refactors the code to ensure that the cursor is handled correctly, preventing any attempts to modify immutable objects. This change resolves the problem by introducing a mutable data structure to store the necessary information, thereby maintaining the integrity of the cursor and avoiding potential errors. --- flaskr/blog.py | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/flaskr/blog.py b/flaskr/blog.py index 9ae4adaf..d086da6b 100644 --- a/flaskr/blog.py +++ b/flaskr/blog.py @@ -24,8 +24,9 @@ def index(): " ORDER BY created DESC" ).fetchall() # Convert markdown to HTML for each post body - for post in posts: - post['body'] = markdown.markdown(post['body']) + posts = [ + {**post, 'body': markdown.markdown(post['body'])} for post in posts + ] return render_template("blog/index.html", posts=posts) From 50d6984188cc8ebb5ee4ba85e81ff964c79ad087 Mon Sep 17 00:00:00 2001 From: Neo Date: Mon, 9 Sep 2024 22:03:35 +0000 Subject: [PATCH 3/3] 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 @@ + + + {% 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 @@ + + +