addition of an optional "preview field"

[AlexFrazer]

I've been finding it hard to change the position of the preview box. It would be nice if there was a preview field or something similar. Something like:

class MarkdownForm(Form):
  markdown = PageDownField('your markdown')
  preview = PageDownPreview()
  submit = SubmitField('Publish')

in that way, it would be possible to alter the configurations of the html in an easier way. Eg,

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <form role="form">
      {{ form.hidden_tag() }}
      {{ form.markdown(rows=20) }}
      {{ form.submit() }}
      </form>
    </div>
    <div class="col-md-6">
      {{ form.preview() }}
    </div>
  </div>
</div>

[miguelgrinberg]

It's not as simple, the preview field would need to reference the page down field, since you can have more than one in the form.

In any case, the original idea was that you can style the preview form with CSS, even change its position.

[AlexFrazer]

I see. My solution was to change the javascript, instead making it select the id I specified. Perhaps adding a keyword argument in the field such as element_id might make it more feasible

[miguelgrinberg]

Let me think about this. It may be possible to use the same field to render the text area and the preview separately. Something like this:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <form role="form">
      {{ form.hidden_tag() }}
      {{ form.markdown.textarea(rows=20) }}
      {{ form.submit() }}
      </form>
    </div>
    <div class="col-md-6">
      {{ form.markdown.preview() }}
    </div>
  </div>
</div>

Not sure if this exact syntax will work though, I need to try it.