linkesch / medium-editor-insert-plugin

jQuery insert plugin for MediumEditor

jQuery insert plugin for MediumEditor

This plugin expands capabilities of MediumEditor (a clone of medium.com WYSIWYG editor) and it enables users to insert into the editor various types of content (depending on available addons).

Current available addons:

• images
• embeds (either through oEmbed proxy, such as Iframely, or pre-defined parsers such as - Youtube, Vimeo, Twitter, Facebook, Instagram)

Demo

http://orthes.github.io/medium-editor-insert-plugin

Download

Via npm:

npm install medium-editor-insert-plugin --save

Via bower:

bower install medium-editor-insert-plugin --save

Manual:

Download the latest release

Quick Start

The first step is to include the plugin with all its dependencies to your code:

<!-- Font Awesome for awesome icons. You can redefine icons used in a plugin configuration -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<!-- CSS -->
<link rel="stylesheet" href="bower_components/medium-editor/dist/css/medium-editor.min.css">
<link rel="stylesheet" href="bower_components/medium-editor/dist/css/themes/default.css">
<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">

<!-- JS -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/medium-editor/dist/js/medium-editor.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.min.js"></script>
<script src="bower_components/jquery-sortable/source/js/jquery-sortable-min.js"></script>
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js"></script>

<!--
OR YOU CAN USE CDN for a Quick Reference in Development Mode. [Dated Dec-2018 Latest Version] Recommented latest verions as moves on!

CSS
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor-insert-plugin/2.5.0/css/medium-editor-insert-plugin-frontend.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor-insert-plugin/2.5.0/css/medium-editor-insert-plugin.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css" />

JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.runtime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.ui.widget.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.iframe-transport/1.0.1/jquery.iframe-transport.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.fileupload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor-insert-plugin/2.5.0/js/medium-editor-insert-plugin.min.js"></script>
-->

Initialize MediumEditor as you normally would:

var editor = new MediumEditor('.editable');

Finally, you can initialize the insert plugin:

$(function () {
    $('.editable').mediumInsert({
        editor: editor
    });
});

Documentation

• Getting Started
• Configuration
• Using with webpack
• Server response
• Custom addons
• Upgrading from v0.3
• Versioning
• Development & Contributing
• License

Contributors

Thanks goes to these wonderful people (emoji key):

Pavel Linkesch 💻 📖 🚧 👀	Jérémy Benoist 💻 🚧 👀	Nazar Leush 💻	Andrey Sitnik 💻	Jeremy Epstein 💻	Hikaru Tooyama 💻	Alexandr Subbotin 💻
Vinicius Patrinhani 💻	Firas Bessadok 💻	Omnia G Helmi 💻	Daniel Huang 💻	Alex Xandra Albert Sim 💻	Brandon Renfrow 💻	BurnHavoc 💻
Enzo 💻	Jonathon Sim 💻	Kazuya Hara 💻	Miloš Hadžić 💻	Siron 💻	Sam Auciello 💻	Sean Cashin 💻
Yu Zhai 💻	acekat 💻	linpekka 💻	sainu 💻	Murat Tasarsu 💻	Anil Kumar Maurya 💻	Artem Shevtsov 💻
Baptiste Gaillard 💻	Bernard Wolff 💻	Carl Scott 💻	Chris Joe 💻	Daniel Wang 💻	Derrek Bertrand 💻	Gabi Maeztu 💻
Hussein Jafferjee 💻	Indra Santosa 💻	Ivan Paramonau 💻	JK 💻	Jeff Bellsey 💻	Kenzo Okamura 💻	Matei Dorobantu 💻
Max Kirchoff 💻	MrEcl 💻	Raphaël Vercruyssen 💻	Sebastian Zorn 💻	tsbalzhanov 💻	bjrenfrow 💻	orhan 💻
swolfod 💻	Eligijus Krėpšta 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

medium-editor-insert-plugin's Issues

Trying to use the plugin with Rails

Hi Pavel,

Really great work on the editor. it's really cool. I am using the medium editor with a rails app and it works fine. I added your plugin but it does not work. Do you have any advice for using it with rails? I'm not sure how to connect with the image upload. (I'm using gem 'carrierwave', gem 'mini_magick', for image upload).

I would really appreciate your help and advice. thank you very much.

Incorrect image placement in serialized HTML

The serialized html is missing the wrapping mediumInsert-placeholder div (as intended), but the CSS is wrote as if it is always going to be wrapped by a parent div that has the mediumInsert-placeholder class.

Is there something I am missing or is this simply a bug?

select-all using ( ctrl+a ) doesn't work correctly

When I try to select-all (using ctrl+a keyboard shortcut), I get different behaviors in some browsers.
In Chrome, nothing got selected!
In Firefox, it is working but it is selecting insert buttons too, so if I wanted to delete everything, insert buttons will be deleted as well from the editor, and I'll have to press enter to show insert button again.
I think the problem is happening because there is <div class="mediumInsert" id="mediumInsert-0" contenteditable="false">

Create an configuration option to active drag and drop

What do you think about creating an entry in the configuration object to let users choose if they want the drag and drop active or not?

How do you get rid of the mediumInsert div tags?

This is more of a question than an issue, but I'm unable to contact you any other way.

I'm pretty new at javascript and jquery, so I'm probably missing something obvious.

I have medium editor working and I have medium insert working. I take the contenteditable area with an id of "content" and use jquery to turn it into a variable I can work with like this:

content=$("#content").html();

The problem is that content now contains all the extra mediumInsert HTML code. How can I process this and get rid of the medumInsert HTML without losing the img tag?

'Insert Link' disappear after adding 'overflow-y:scroll' attribute to ' div editor' style

plugin not work after adding 'overflow-y:scroll' attribute to 'div editor' style

Embedding youtube video issue in FF and Safari

When embedding a youtube video the embed tag is not using the correct url. This causes the video to not render in FF and Safari.

  var embed_tag = url.replace(/\n?/g, '').replace(/^((http(s)?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=|v\/)?)([a-zA-Z0-9-_]+)(.*)?$/, '<div class="video"><iframe width="420" height="315" src="//www.youtube.com/v/$7&amp;fs=1" frameborder="0" allowfullscreen></iframe></div>')
    .replace(/http:\/\/vimeo\.com\/(\d+)$/, '<iframe src="//player.vimeo.com/video/$1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
    .replace(/https:\/\/twitter\.com\/(\w+)\/status\/(\d+)\/?$/, '<blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/$1/statuses/$2"></a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>')
    .replace(/https:\/\/www\.facebook\.com\/(\w+)\/posts\/(\d+)$/, '<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));</script><div class="fb-post" data-href="https://www.facebook.com/$1/posts/$2"></div>')
    .replace(/http:\/\/instagram\.com\/p\/(.+)\/?$/, '<span class="instagram"><iframe src="//instagram.com/p/$1/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe></span>');
  return /<("[^"]*"|'[^']*'|[^'">])*>/.test(embed_tag) ? embed_tag : false;

This should be changed to

  var embed_tag = url.replace(/\n?/g, '').replace(/^((http(s)?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=|v\/)?)([a-zA-Z0-9-_]+)(.*)?$/, '<div class="video"><iframe width="420" height="315" src="//www.youtube.com/embed/$7" frameborder="0" allowfullscreen></iframe></div>')
    .replace(/http:\/\/vimeo\.com\/(\d+)$/, '<iframe src="//player.vimeo.com/video/$1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
    .replace(/https:\/\/twitter\.com\/(\w+)\/status\/(\d+)\/?$/, '<blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/$1/statuses/$2"></a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>')
    .replace(/https:\/\/www\.facebook\.com\/(\w+)\/posts\/(\d+)$/, '<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));</script><div class="fb-post" data-href="https://www.facebook.com/$1/posts/$2"></div>')
    .replace(/http:\/\/instagram\.com\/p\/(.+)\/?$/, '<span class="instagram"><iframe src="//instagram.com/p/$1/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe></span>');
  return /<("[^"]*"|'[^']*'|[^'">])*>/.test(embed_tag) ? embed_tag : false;

Polluted content

After using this plugin, the content inside the editor gets polluted by

<div class="mediumInsert" contenteditable="false" id="mediumInsert-0"><div class="mediumInsert-buttons"><div class="mediumInsert-buttonsIcon">→</div><a class="mediumInsert-action action-images-add">Image</a></div><div class="mediumInsert-placeholder"></div></div>

So right now I cannot use $('#editor').html() to obtain the content of the edtior. Is there anyway to solve this issue?

Can't add more text if you insert an image at the bottom of the contenteditable area

Is there any way to start typing more text after inserting an image at the bottom of the editable area? I tried to put the cursor to the right of or under the image but it's not happening, at least in Chrome.

Is it possible to insert the image into the dom as it uploads?

From a UX point of view this change is important. The current flow would have the user wait until the upload bar has finished loading before they see the insert into the dom.

Is there a technical reason as to why the image can't be inserted into the dom before the upload starts?

Figure instead of div...

Hello there! Nice work. Is there a particular reason why you prefer a div instead of a figure? It would be nice to use caption and so forth.

Cntrl + V not worked in Firefox

Hello

First of all, great plugin, thanks.

I've found a problem, when i'm trying to add Embed element using plugin in firefox, i could enter address only manually - cntrl+v d't work. For example, i can't copy youtube link and paste it in embed input.

Copy-Paste works ok in IE and Chrome, but in FF Pasting in embed data input is not working.

Embed's don't work properly

I am finding there are a lot of bugs with the way Embed's work. Are you currently using this editor as an implementation somewhere public?

I know there is a demo, but it doesn't show what happens when you save, and after you save, embed's don't re-load properly.

1. Embed's are being inserted into the parent of the placeholder. Due to this, when content is serialized, the output looses mediumInsert-embed class which is necessary.
2. When we come back to the editor after a save, we don't re-initialize mediumInsert-embed's with placeholders like we do for images.
3. A serialized copy of a tweet is completely broken

Am I doing something wrong or are there lots of bugs? I don't mind submitting a PR. Submitting an issue first to be sure that it is a bug and not me doing something silly.

How to remove image from the server when deleted in rails

Has anyone managed to figure out how to delete a specific image from the server in rails?

Test

Should be possible to pass the function that uploades files to the server

Currently it's pretty hard too pass in more parameters and also harder to work with an api in rails that needs authentication. I'm working on a patch to make it possible to plug in a function that uploads the file but wanted to see if you had any plans for this feature.

I was thinking about an interface like this:

$('.editor').mediumInsert({
  editor: editor,
  imagesPlugin: {
    uploadFile: function (file) {
      ...
    }
  }
});

Then that function would be called in the loop in uploadFiles.

What do you think?

Medium editor stops working after image insert

Once an image has been inserted into the document the Medium editor no longer appears when selecting text. Tested it on the example page and it is the same in Chrome and Firefox.

Images previously in the medium editor on init do not have a resize and delete button

I already have a branch for this, but as this being my first open source project I'm not sure how to push a new branch and create a PR from it.

How to set alt attribute?

Just wondering how people are handling alt attributes in the images, I see it in the img tag but not sure how to set it.

Update Medium Editor verion dependency

Medium Editor releases 1.9.0 version. We need to update dependencies.

Update Medium Editor verion dependency

MediumEditor was updated, so we need to update version dependency to new version.

Using a DIV as the editor and grabbing .html() with jquery includes this plugins markup in the content.

I ran into an issue using this plugin where the data being saved to the server included all the markup inserted by the plugin when just grabbing the .html() using jquery. So I had to use the editors serialize function to make sure that extra markup wasn't included like so:

Note: This does use hidden inputs to pass data back and forth using a traditional form. It was the easiest way I could find to do it and have it be rock solid.

<div id="body_editable" class="editable" data-placeholder="Start typing your paper...">
        {# Editable body div #}
</div>
<form method="post" id="paper_form">
    <input type="hidden" id="body_field" value="" />
</form>

//On Page Load we insert data from the server into the editor to facilitate a previously existing entity:
$('#body_editable').html($('#body_field').val());

//On save event:
$('#body_field').val(editor.serialize().body_editable.value);

//Instead of:
$('#body_field').val($('#body_editable').html());

I can't express how mind boggling it was to diagnose issues with my implementation of this plugin when I'd make a change to something and it wouldn't update except with new, empty editors.

I also posted this on the medium-editor issue list as there are a lot of recommendations from people to pull just the .html() which as far as I can tell, can have unpredictable results though I may be completely wrong here.

Edit: I just went digging through the old issue archive and found a similar issue that was closed. If I may suggest, this may be something you want to include in your readme,

Way to disable the plugin

Medium editor supports enable/disable but even when disabled the image plugin is active.

What would be a good way to achieve this?

Server Side Deletion Hook

Please provide a hook to delete the file from the server after it is removed from the editor.

This could be similar to { imagesUploadScript } but it would be better to also allow a consumer to specify the HTTP verb and set specific formatData for the destroy (i.e some people may treat it as a PUT (update) to the underlying model whilst others may want it to be a DELETE as it's specific to the file).

Unable to get Serialize working correctly

I've made a very basic page and have been unable to get the serialize parsing out the mediumInsert etc.

Any help would be greatly appreciated:

Code:
<script src="/squirrel/scripts/medium-editor.js"></script>
<script>

    $(document).ready(function() {
        var editor = new MediumEditor('.editable');
          $('.editable').mediumInsert({
            editor: editor,
            addons: {
              images: {
              }
            }
          });
        var serial_data = editor.serialize();
        var saveTimer = new Date();
        $('.editable').bind('keypress', function(e) {

            if(e.keyCode==13 || e.keyCode==8 || e.keyCode==46) {
                saveCheck = new Date();
                if(saveCheck - saveTimer > 4000) {
                    saveTimer = new Date();
                    if($(this).attr('data-id') !== 'undefined' && $(this).attr('data-id') !== false) {
                        var artID = $(this).attr('data-id');
                    }
                    serial_data = editor.serialize();
                    console.log(serial_data);
                }

            }
        });
    });
</script>
    <h2>Add an Article</h2>
<div class="editable">

</div>

I'm logging serial_data to the console on enter (if more than 4s since last enter).
It's retaining all the placeholder divs though, even though I'm using editori.serialize();

Best Regards

Issues with editor

Hi. The "B", "I", "U", link and quote buttons disappears. But H1 and H2 works fine in the editor tool. What can be the issue here? See following picture.

Plugin doesnt work if you have more than 1 editable area

If i have multiple editable areas and the url i give imagesUploadScript is always the last one. Is this plugin using global variables?

var url = "/api/sections/" + this.model.id + "/section_images";

// Doing this for multiple fields
$("#section_" + this.model.id + " .editable").mediumInsert({
  editor: this.editor,
  addons: {
    images: {
      imageUploadScript: url // always the url of the last one
    }
  }
});

FilePicker Support

Hi there,

I like this plugin, it's pretty neat. I notice that the demo comes with a PHP file to handle image uploads. However, I am using Filepicker.io. Would anyone be able to point me in the right direction to make this work for me?

Empty jqxhr.responseText still generates img tag with empty src attribute

In my upload.php, I return nothing when a file fails validation (e.g. size limit). The default behavior is that an img tag will always be generated regardless of the return value of the server side uploading script.

To prevent the unnecessary image tag from being generated, I have the following in my uploadComplete function, which checks the response text if it is a valid URL.

var $progress = $('.progress:first', this.$el),
    $img,
    urlPattern = new RegExp("(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*");

$progress.attr('value', 100);
$progress.html(100);

if (urlPattern.test(jqxhr.responseText)) {
  $progress.before('<div class="mediumInsert-images"><img src="'+ jqxhr.responseText +'" draggable="true" alt=""></div>');
  $img = $progress.siblings('img');
  $progress.remove();

  $img.load(function () {
    $img.parent().mouseleave().mouseenter();
  });
}
else {
  $progress.remove();
}

jQuery dependency

What are you using jQuery for? Ideally I would love this plugin without jQuery dependency, since Medium-Editor does not require jQuery.

can not create a new paragraph after the inserted image

If you insert an image, you cannot add a new paragraph after it. You can not get the focus point after the image.

You have to create new paragraph first, then insert image in the previous paragraph.

Breaks placeholder functionality

Thank you very much for creating this wonderful plugin. There is an issue with the placeholder of the medium-editor plugin when the images plugin is activated. When you write some text and then delete the text, the placeholder does not come back.

If you could take a look at it whenever you have some free time, it would be greatly appreciated.

Resize button

Do I have the option not to use a resize button? I just want to give the user the option to remove the photo (for now)

Add editable caption to figure

Any plans to add figcaption to figure?

Maybe something like that this:

<figure>
   <img src="..." draggable="true" alt="">
   <figcaption>Some Text Here</figcaption>
</figure>

With an icon, aside resize and remove icons, to change the caption value. Or just make it editable.

sometime when you try to typing in firefox and press enter you didn't find mediumInsert button

try to typing in firefox and press enter you will not find insert button under your text because of your text be on textnode not p tag

and there is another thing , there is <br type="_moz"> in p not <p><br></p>

Add support for image modes in Medium 1.0

Medium recently revamped their image uploads. They've introduced a toolbar with several image modes.

You can now include inline images in two sizes, floated inline images (floats to the left of text), floated inline images that are offset to the left, and cover images which cover the whole screen.

Changing image size does not emit "input"

When changing the size of an already embedded image it does not emit "input" so is not picked up as a change by anything listening. Input is documented here https://github.com/daviferreira/medium-editor#capturing-dom-changes

I can submit a patch, but let me know if this is desired behavior.

Inclusion of bootstrap breaks default look and causes cursor placement issues

This isn't so much an issue directly with this project as none of the problems are reproducible on the demo, but once you include Bootstrap 3 CSS, there are a whole bunch of problems.

1. The add (+) button looks incorrect
2. It causes cursor placement issues when images are included. This is a weird one because its a little hard to describe, but I basically have a small image on the left, and text on the right, and its really hard to move around the cursor because 1 out of 5 clicks work. Every time the add (+) button is visible, clicks on text do nothing, and I think it has to do with something.

Hopefully I'll get a chance to work on these issues this weekend and commit back to this project.

Use non-minified files in bower.json

Similar discussion in Medium-Editor repo:
yabwe/medium-editor#217 (comment)
The main attribute should point to the non-minified files, like this: https://github.com/daviferreira/medium-editor/blob/1.8.8/bower.json#L9-L11

Do not overwrite .medium-editor-placeholder class

I have editable elements that does use Medium-editor, but they does not need Insert-plugin. Because plugin adds the following CSS, it affects placeholders on other elements where there is no Insert-plugin.

.medium-editor-placeholder:after {
    content: attr(data-placeholder) !important;
    top: 1em;
}

It's better to add a new class that will overwrite those properties, and not to overwrite .medium-editor-placeholder class itself.

Do I need prototype to run this?

I am having lots of trouble trying to run your plugin on my wordpress site. Do I need to have prototype running?

Display the '+' symbol when you're at the beginnning of a line

This would be the same way as it's done in Medium. When you're at the beginning of a line, the + is on the left side. I've been looking at the code but I didn't find how ti update this. Where's the handle that controls when this appear? Thanks

Resize button not working when image is alredy in html

I notice that the images can not be resized when the image is already in the html. And if the parent div is class="mediumInsert small, the image is displayed smaller than expected.

Can you help me solve this issue?

.

Multiple 'mediumInsert-X' IDs being created with same X value

Noticed in line 175 of medium-editor-insert-plugin.js this:
$(this).next('.mediumInsert').attr('id', 'mediumInsert-'+ i);

It was causing multiple elements to be able to be created with the same id.

I removed the line in my repo and cannot find any reason for it to exist.

Am I missing anything? Should I just remove it and submit PR?

Is there anyway this plugin would work with an external upload library?

Take jQuery fileupload, which I use to make async file uploads... is there anyway to shift the upload to something like that? It would be nice in theory to let this library handle the dom insertion and so on, but let a more flexible library handle the upload. It's useful to unload the cost of file uploads to something like s3, which is where jQuery file uploads shines. https://github.com/blueimp/jQuery-File-Upload

While window resizing without toolbar on screen, console log errors are coming.

Error text:
Uncaught TypeError: Cannot read property 'classList' of undefined @medium-editor.js:673

Here is the screenshot of exact line.
https://www.dropbox.com/s/dm3xr1iptafmjv8/Screenshot%202014-04-07%2009.30.10.png

Looks like here is no check for the toolbar appearance on screen before.
It's easy to fix, so i can make a pull request, or you can close this issue.

give me know.
Best,
S.

div is not editable if the inside paragraph is empty

If you have div like this:

There will be no way to have focus on the editable div. It does not work even with space in between:

Avoid plugin elements on serialize

How can I get the content of the editor without the divs inserted by the plugin?

I mean, I can get the output and replace the divs, but I think it have to be a plugin's responsibility. I'm not so familiarized with well written js, it's possible to override mediumEditor's serialize function to parse its returned value?

Don’t add global class

Plugin style contains .clearfix class without any prefixes.

It can broke application CSS if developers use different clearfix hack or just use same class in different meaning.

Backspace in Firefox didn't delete #mediumInsert-*

try to delete latest <p> and hover you will find there is extra #mediumInsert-* didn't remove with it

Is there any way to fix this?