preview markdown in new post body

app/post/routes.py

@@ -1993,3 +1993,9 @@ def post_cross_post(post_id: int):
                                joined_communities=joined,
                                menu_topics=menu_topics(), site=g.site
                                )
+
+
+@bp.route('/post_preview', methods=['POST'])
+@login_required
+def preview():
+    return markdown_to_html(request.form.get('body'))

app/static/js/coolfieldset.js

@@ -55,14 +55,6 @@
 
     fieldsets.forEach((fieldset) => {
       const legend = fieldset.querySelector('legend');
-      const content = fieldset.querySelectorAll('*:not(legend)');
-
-      content.forEach((element) => {
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('wrapper');
-        element.parentNode.insertBefore(wrapper, element);
-        wrapper.appendChild(element);
-      });
 
       if (setting.collapsed) {
         hideFieldsetContent(fieldset, { animation: false });

app/static/styles.css

@@ -1991,6 +1991,13 @@ form h5 {
   }
 }
 
+#preview:has(p, a, h1, h2, h3, ul, ol) {
+  border: solid 1px #ddd;
+  border-radius: 5px;
+  padding: 5px 10px;
+  margin-bottom: 15px;
+}
+
 /* high contrast */
 @media (prefers-contrast: more) {
   :root {

app/static/styles.scss

@@ -1716,6 +1716,13 @@ form {
 
 }
 
+#preview:has(p, a, h1, h2, h3, ul, ol) {
+  border: solid 1px #ddd;
+  border-radius: 5px;
+  padding: 5px 10px;
+  margin-bottom: 15px;
+}
+
 /* high contrast */
 @import "scss/high_contrast";
 

app/templates/post/post_edit.html

@@ -6,6 +6,7 @@
 {% from 'bootstrap/form.html' import render_form, render_field %}
 
 {% block app_content %}
+<script src="/static/js/coolfieldset.js"></script>
 <div class="row">
     <div class="col-12 col-md-8 position-relative main_pane">
         {% block title %}<h1>{{ _('Edit post') }}</h1>{% endblock %}
@@ -42,23 +43,35 @@
             {% endif %}
             {{ render_field(form.body) }}
 
-            {% if not low_bandwidth %}
+            {% if not low_bandwidth -%}
-                {% if markdown_editor %}
+                <div class="row">
-                    <script nonce="{{ session['nonce'] }}">
+                    <div class="col-6">
-                        window.addEventListener("load", function () {
+                        <a href="#" hx-post="{{ url_for('post.preview') }}" hx-target="#preview">{{ _('Preview') }}</a>
-                            var downarea = new DownArea({
+                    </div>
-                                elem: document.querySelector('#body'),
+                    <div class="col-6 text-right">
-                                resize: DownArea.RESIZE_VERTICAL,
+                        {% if markdown_editor %}
-                                hide: ['heading', 'bold-italic'],
+                            <script nonce="{{ session['nonce'] }}">
-                                value: document.getElementById("body").value
+                                window.addEventListener("load", function () {
-                            });
+                                    var downarea = new DownArea({
-                            setupAutoResize('body');
+                                        elem: document.querySelector('#body'),
-                        });
+                                        resize: DownArea.RESIZE_VERTICAL,
-                    </script>
+                                        hide: ['heading', 'bold-italic'],
-                {% else %}
+                                        value: document.getElementById("body").value
-                    <a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="body">{{ _('Enable markdown editor') }}</a>
+                                    });
-                {% endif %}
+                                    setupAutoResize('body');
-            {% endif %}
+                                });
+                            </script>
+                        {% else %}
+                            <a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="body">{{ _('Enable markdown editor') }}</a>
+                        {% endif %}
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div id="preview"></div>
+                    </div>
+                </div>
+            {% endif -%}
 
             {% if post_type == POST_TYPE_POLL %}
                 <fieldset id="pollChoicesFieldset">
@@ -103,24 +116,14 @@
             {{ render_field(form.tags) }}
             <small class="field_hint">{{ _('Separate each tag with a comma.') }}</small>
 
-            <div class="row mt-4">
+            <fieldset class="mt-4 mb-4 coolfieldset collapsed">
-                <div class="col-md-3">
+                <legend class="w-auto">{{ _('More options') }}</legend>
-                    {{ render_field(form.notify_author) }}
+                {{ render_field(form.notify_author) }}
-                </div>
+                {{ render_field(form.sticky) }}
-                <div class="col-md-1">
+                {{ render_field(form.nsfw) }}
-                    {{ render_field(form.sticky) }}
+                {{ render_field(form.nsfl) }}
-                </div>
+                {{ render_field(form.language_id) }}
-                <div class="col-md-1">
+            </fieldset>
-                    {{ render_field(form.nsfw) }}
-                </div>
-                <div class="col-md-1">
-                    {{ render_field(form.nsfl) }}
-                </div>
-
-                <div class="col post_language_chooser">
-                    {{ render_field(form.language_id) }}
-                </div>
-            </div>
 
             {{ render_field(form.submit) }}
         </form>