preview markdown in new post body

This commit is contained in:
rimu 2025-01-02 16:30:58 +13:00
parent ef1550f578
commit 956229c7da
5 changed files with 58 additions and 43 deletions

View file

@ -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'))

View file

@ -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 });

View file

@ -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 {

View file

@ -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";

View file

@ -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,7 +43,12 @@
{% endif %}
{{ render_field(form.body) }}
{% if not low_bandwidth %}
{% if not low_bandwidth -%}
<div class="row">
<div class="col-6">
<a href="#" hx-post="{{ url_for('post.preview') }}" hx-target="#preview">{{ _('Preview') }}</a>
</div>
<div class="col-6 text-right">
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
@ -58,7 +64,14 @@
{% else %}
<a href="#" aria-hidden="true" class="markdown_editor_enabler create_post_markdown_editor_enabler" data-id="body">{{ _('Enable markdown editor') }}</a>
{% endif %}
{% 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">
<div class="col-md-3">
<fieldset class="mt-4 mb-4 coolfieldset collapsed">
<legend class="w-auto">{{ _('More options') }}</legend>
{{ render_field(form.notify_author) }}
</div>
<div class="col-md-1">
{{ render_field(form.sticky) }}
</div>
<div class="col-md-1">
{{ 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>
</fieldset>
{{ render_field(form.submit) }}
</form>