Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.45k stars 319 forks source link

On a pristine form - the reset event will not include the EasyMDE text area value. #558

Open dwjohnston opened 1 year ago

dwjohnston commented 1 year ago

Describe the bug

If we include our target textarea in a form, and the add the name attribute, then we can treat the EasyMDE textarea like any form element and expect it to otherwise expect it to have the same behaviour as regular form elements.

When reseting a form, the event dispatched should include the current value of the text area. However, if it it is untouched there will be no value associated.

nb. The bug occurs for text areas declared like this:

    <form id="form1">
      <textarea id="my-text-area" name="texteditor"></textarea>
      <button type="reset">Reset</button>
      <button type="Submit">Submit</button>
    </form>

    <script>
      const easymde = new EasyMDE({
        element: document.getElementById('my-text-area'),
        initialValue: 'I am initial value',
      });
    </script>

Text areas that are declared like this work fine:

    <form id="form1">
      <textarea id="my-text-area" name="texteditor">
I am initial value</textarea
      >
      <button type="reset">Reset</button>
      <button type="Submit">Submit</button>
    </form>

    <script>
      const easymde = new EasyMDE({
        element: document.getElementById('my-text-area')
      });
</script>

To Reproduce Reproduction here:

https://stackblitz.com/edit/easymde-tc8blv/?file=index.html

To see expected behaviour:

Click the second 'reset' button - this is a plain non-easymde text area in a form. Note that the value of the text area is shown in the alert.

Now click the first reset button - there is no value for the text area.

Expected behavior

The initial value should treated as part of the reset event.

Screenshots If applicable, add screenshots to help explain your problem.

Version information

Additional context

Note:

This problem only exists if passing in initialValue as part of the options to the new EasyMDE(..) call. If you put the initialValue in to the textarea it self like:

<textarea id="my-text-area" name ="text-area">I am the initial content</textarea> then it works fine.

Updated: See: https://stackblitz.com/edit/easymde-7jdndz/?file=index.html

dwjohnston commented 1 year ago

Hmmm, I've just looked at the repro I just posted and the behaviour isn't exactly the same.

Now the behaviour I'm seeing is:

I should edit the repro to have a fixed version.

Have updated the above link to with a fixed version.

Ionaru commented 1 year ago

I am not sure that this editor was ever intended to work inside a form. As far as I know, a standard CodeMirror instance does not sync its contents back to the TextArea unless specifically make to do so.

Updating the TextArea on each keystroke would most likely kill performance. Maybe the autosave would be a good moment to sync the editor content to the TextArea?

In any case, this is not so much a bug but something that was just never implemented. :)