woofmark excludes the textarea from being sent back on form post

[kakra]

Given the following situation:

1. Woofmark defaults to wysiwyg mode
2. User enters text
3. User submits the form

The textarea is hidden and doesn't get sent back to the server. Unless the user decides to switch to markdown mode before submitting the form, the entered text is never saved.

Of course I could hack the onsubmit hook to force-switch to markdown mode before submitting the form but it may break user experience if you also use form validation hooks on the form because it would switch the mode to something the user didn't expect or doesn't know how to handle, in the end the text would appear re-formatted and confuse the user.

Our user-base is highly uncomfortable with using web forms, it's more like the exact opposite of tech-savvy. Thus, we need to provide a user interface with sane defaults, this includes defaulting to wysiwyg mode, and never change anything under their feet which could even remotely change appearance, otherwise our users become highly confused and complain about formatting being lost, or the editor not respecting their input correctly. We tried multiple markdown editors and woofmark seems the only viable option to use being the only editor that allows editing in wysiwyg mode without providing some alienated tech-savvy UI experience. SimpleMDE was quite good but wasn't accepted well by user testing due to no wysiwyg editor, tho the live preview of markdown formatting in markdown mode was quite nice in my opinion.

Thus, I suggest to sync all input modes through a field which holds the authoritative markdown being sent back to the server on form submit. Currently, it seems that the textarea itself is the authoritative element holding the markdown, and when it's hidden by editing in wysiwyg mode, it won't be posted by browsers on form submit.

This could also fix that woofmark doesn't currently auto-size the textarea during editing, it only does it for the wysiwyg div. By moving the form field over to a hidden input, it could take full control of the textarea appearance in a similar way it does for the wysiwyg div.

[kakra]

I think I found a work-around for this by using this coffeescript code:

@editors = $('textarea.markdown-editor').map ->
  editor = woofmark this,
    defaultMode: 'wysiwyg'
    html: false
    parseMarkdown: window.megamark
    parseHTML: window.domador
    render:
      modes: (button, id) -> button.className = "woofmark-mode-#{id}"
      commands: (button, id) -> button.className = "woofmark-command-#{id}"
  $(this).closest('form').on 'submit', -> editor.destroy()

It basically destroys the editor in the onsubmit hook of the parent form, forcing conversion back to markdown. Seems to work fine with HTML5-style form validations but I didn't test this with form validators intercepting the onsubmit hook.

If it is expected to do this step, it should be documented in the instructions on how to use the editor. But maybe it would make sense if woofmark provided a setup callback in the options which defaults to hooking into the onsubmit of the parent form, e.g.:

@editors = $('textarea.markdown-editor').map ->
  editor = woofmark this,
    setup:
      destroy: -> console.log('my custom callback') # overriding the default as outlined above

[excitedbox]

Could you add a hidden field to the page that gets updated to the content of the text box on change? Then you can submit the hidden field without worrying about anything failing due to hook order.

[kakra]

This is how other editors work: They hide the original textarea, then keep it in sync with the editor.