How to integrate the elements from a flask preview into a comment

Question

In my requirements.txt I have: Flask 2.0.3, Flask_Pagedown 0.4.0, Flask-wtf 1.0.1, Jinja2 3.0.3 WTForms 3.0.0, etc. The first code is a view for previewing texts where I find it from Github https://github.com/miguelgrinberg/Flask-PageDown/blob/main/example/app.py#L20, while the second one is a comment that is working perfectly with quill editor.

To get preview before submit for comments, I should find a way to integrate them as one view in my flask_app.py and include other elements in .py and .html. Both codes and scripts are working well when running in a separate template.

1st codes: view flask-pagedown working codes from miguelgrinberg

@app.route('/', methods=['GET', 'POST'])
def index():
    form = PageDownFormExample()
    text = None
    text2 = None
    if form.validate_on_submit():
        text = form.pagedown.data
        text2 = form.pagedown2.data
    else:
        form.pagedown.data = ('# This is demo #1 of Flask-PageDown\n'
                              '**Markdown** is rendered on the fly in the '
                              '<i>preview area below</i>!')
        form.pagedown2.data = ('# This is demo #2 of Flask-PageDown\nThe '
                               '*preview* is rendered separately from the '
                               '*input*, and in this case it is located above.')
    return render_template('index.html', form=form, text=text, text2=text2)

Into 2nd codes: view comment working codes

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == "GET":
        return render_template("main_page.html", comments=Comment.query.all())
    if not current_user.is_authenticated:
        return redirect(url_for('index'))
    comment = Comment(content=request.form["contents"], commenter=current_user)
    db.session.add(comment)
    db.session.commit()
    return redirect(url_for('index'))

What I have tried so far is to put the first instance after method "GET" like this:

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("main_page.html", comments=Comment.query.all())        
        form = PageDownFormExample()
        text = None
        text2 = None
        if form.validate_on_submit():
            text = form.pagedown.data
            text2 = form.pagedown2.data
        else:
            form.pagedown.data = ('# This is demo #1 of Flask-PageDown\n'
                '**Markdown** is rendered on the fly in the '
                '<i>preview area below</i>!')
            form.pagedown2.data = ('# This is demo #2 of Flask-PageDown\nThe'
                '<i>preview area below</i>!'
                '*input*, and in this case it is located above.')
        return render_template('preview.html', form=form, text=text, text2=text2)
    if not current_user.is_authenticated:
        return redirect(url_for('index'))
    comment = Comment(content=request.form["contents"], commenter=current_user)
    db.session.add(comment)
    db.session.commit()
    return redirect(url_for('index'))

The html error from the above experiment is here:

            <div>
                <h1>Flask-Preview Page</h1>
                {% if text or text2 %}
                <div>
                    <p>Received text was:</p>
                    <pre>{{ text }}</pre>
                    <pre>{{ text2 }}</pre>
                </div>
                <hr>
                {% endif %}
                <div style="width: 800px;">
                    <form method="POST">
                        {{ form.hidden_tag() }} <!-- ---------------- error from here-->
                        <div>
                            <b>{{ form1.pagedown.label }}</b>:
                            {{ form.pagedown(rows=10, style='width:100%') }}
                        </div>
                        <br>
                        <div>
                            {{ form.pagedown2(only_preview=True) }}
                            <br>
                            <b>{{ form.pagedown2.label }}</b>:
                            {{ form.pagedown2(only_input=True, rows=10, style='width:100%') }}
                        </div>
                        <div>{{ form.submit() }}</div> <!-- ------------ error up to here------------- -->
                    </form>
                </div>
            </div>
            <div class="row">
                <form action="." method="POST">
                    <div>
                        <label for="contents">Content</label>
                        <input type="hidden" name="contents" value="<?= html_escape($contents) ?>">
                        <div id="editor" style="min-height: 160px;"><?= $contents ?>
                    </div>
                    <div>
    <button type="submit" name="draft" class="btn btn-success">Post Comment Enable</button>
    </div>
                </form>
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</script>
            </div>

The error start from {{ form.hidden_tag() }} to {{ form.submit() }}. When I delete these error codes and 'in between', there are no error but it only appears "Flask-Preview Page" on top of the quill editor without previews. When not taking out these codes, the Error log is: jinja2.exceptions.UndefinedError: 'form'

Any help?

Answer 1

If the HTML in the 4th code block is from main_page.html, then the error comes because you never let form object be defined. In your third block of python code, if the method is GET, you return a rendered main_page.html before you instantiate the form object. If the method is POST, only the code from if not current_user.is_authenticated: on gets executed.

Maybe try something like this and see if it's any better:

@app.route("/", methods=["GET", "POST"])
def index():
    form = PageDownFormExample()
    if request.method == "GET":
        return render_template("main_page.html", comments=Comment.query.all(), form=form)        
    text = None
    text2 = None
    if form.validate_on_submit():
        text = form.pagedown.data
        text2 = form.pagedown2.data
    else:
        form.pagedown.data = ('# This is demo #1 of Flask-PageDown\n'
            '**Markdown** is rendered on the fly in the '
            '<i>preview area below</i>!')
        form.pagedown2.data = ('# This is demo #2 of Flask-PageDown\nThe'
            '<i>preview area below</i>!'
            '*input*, and in this case it is located above.')
    return render_template('preview.html', form=form, text=text, text2=text2)
    if not current_user.is_authenticated:
        return redirect(url_for('index'))
    comment = Comment(content=request.form["contents"], commenter=current_user)
    db.session.add(comment)
    db.session.commit()
    return redirect(url_for('index'))