Too Generic Image Input Name

[robinvandernoord]

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

Version information

• OS: Ubuntu
• Browser: Vivaldi (Chromium based) but it happens on all browsers
• EasyMDE version: 2.18.0

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]

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]

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]

I would appreciate any help you can give :)

[robinvandernoord]

#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.

[slawkens]

I had similar problem, but with the .table class

I think the name is too generic.

It conflicts with the bootstrap .table class, which by default has 100% width. The result: (table takes 100% space).

As a workaround I did this:

$(function() {
    $(".editor-toolbar .table").removeClass('table');
});

And just FYI: the only thing I modified in EasyMDE constructor is:
showIcons: ["code", "table"],