search

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.31k stars 308 forks source link

Too Generic Image Input Name #571

Open robinvandernoord opened 6 months ago

robinvandernoord commented 6 months ago

Describe the bug When using upload-image, an input with name="image" is created. This is a very generic name, which can conflict when using EasyMDE in a form.

<input class="imageInput" type="file" multiple="" name="image" accept="image/png, image/jpeg, image/gif, image/avif" style="display: none; opacity: 0;">

It changed the type from a file upload to a list of file uploads, and the inlined image was also not cleared, so my server received two files instead of one for my other 'image' field. Using a less generic name like 'easymde-image' would solve this issue.

To Reproduce Steps to reproduce the behavior:

  1. Create a form with a textarea and an image upload input called "image"
  2. Enable easymde on the textarea
  3. Enable "image-upload" in the easymde toolbar
  4. Upload a file via easymde and in the normal input
  5. Submit the form

Expected behavior I expect easymde to not impact the normal behavior of my form by using a namespaced input or clearing/removing the new input after usage.

Screenshots image

Version information

Additional context This may be more of a feature request than a bug, but it broke my project so I'm reporting it as a bug :)

Ionaru commented 6 months ago

I see how this can cause problems for certain form implementations. To not introduce a breaking change, I propose a new option to rename the image form field, with the default value "image" as it currently is.

Does this sound like a solution that works for you, @robinvandernoord?

robinvandernoord commented 6 months ago

Yes that sounds great! I think I can try to create that option and make a PR if you like. Or would you prefer to build it yourself?

Ionaru commented 6 months ago

I would appreciate any help you can give :)

robinvandernoord commented 6 months ago

https://github.com/Ionaru/easy-markdown-editor/pull/573

I have created a PR. I looked into adding a cypress test for it but I didn't find any existing tests related to this feature. Is that correct or am I looking in the wrong place? The npm run test still runs successfully. I have also added the option to the easymde.d.ts type declaration.