Submitting textarea with markdown + ProseMirror

First of all, good to see ProseMirror is getting along nicely :clap: (I backed in the crowdfunding phase).
I have used CodeMirror in several projects, and this is the first time I’m going to dig in with ProseMirror.

In my Elixir/Phoenix project I have a form with a textarea where users can input Markdown (which we store in a DB). What I like to achieve is something similar to the Markdown example.

Can I use ProseMirror to “shadow” the textarea I already have so I can submit the form? Or would I have to use javascript to keep the editor and textarea instances in sync? I remember CoreMirror could be initialized from an existing textarea, but I guess this works differently now using contenteditable?

Ideas or examples on how to do this are welcome!

1 Like

Disclaimer: I’m new to Prosemirror as well… so take my suggestions with a grain of salt.

You’ll probably have to end up using Javascript to update a hidden element in your form.

I wrote a quick example here: http://glitch.com/edit/#!/lead-tomato

This example only copies the HTML and submits it to the form… but you can change it to be a different format. (In your case, you probably want the markdown.)


The above example doesn’t use Prosemirror’s framework to accomplish the update… But you can do something similar by putting a call to do something similar in a dispatchTransaction() function. See this: https://prosemirror.net/docs/guide/#view (scroll down a bit, under “Data Flow”)

Hopefully that helps!

1 Like

Hi chaseme, thanks for the demo!

So this needs some custom javascript. I’m worried syncing this on just keyup event is not waterproof, e.g. when using the mouse to paste. Anyone experiences or best practices for this?

I’m really relying on the textarea to be in sync on submit, by user (keyboard or mouse) or who knows even automated (autosave triggered by javascript). Maybe in the future I will look into ajax calls, but for now I’m relying on the good ole textarea.

Maybe my first question should be, is ProseMirror the ideal candidate for the job? Or are there other options in the field that are better suited for this?

Don’t sync on change, sync on submit.

2 Likes