Fix deleting image when backspace/del is pressed (#302)

* fix #228 - delete image even if it's not selected but backspace/del is pressed in text

* delete images in a selection on backspase/del

Author: linkesch

spec/images.spec.js

@@ -300,6 +300,40 @@ describe('Images addon', function () {
         expect($('.medium-insert-images-toolbar').length).toEqual(0);
     });
 
+    it('fires deleteFile function even when images isn\'t selected but backspace is pressed in text', function () {
+        var $p = this.$el.find('p'),
+            $event = $.Event('keydown');
+
+        $event.which = 8;
+
+        spyOn(jQuery, 'ajax');
+
+        $p.before('<div class="medium-insert-images"><figure><img src="delete-image1.jpg" alt=""></figure></div>');
+        $p.html('test');
+
+        placeCaret($p.get(0), 0);
+        this.$el.trigger($event);
+
+        expect(jQuery.ajax.calls.count()).toEqual(1);
+    });
+
+    it('fires deleteFile function even when images isn\'t selected but delete is pressed in text', function () {
+        var $p = this.$el.find('p'),
+            $event = $.Event('keydown');
+
+        $event.which = 46;
+
+        spyOn(jQuery, 'ajax');
+
+        $p.after('<div class="medium-insert-images"><figure><img src="delete-image1.jpg" alt=""></figure></div>');
+        $p.html('test');
+
+        placeCaret($p.get(0), $p.text().length);
+        this.$el.trigger($event);
+
+        expect(jQuery.ajax.calls.count()).toEqual(1);
+    });
+
     it('triggers input event after removing image', function (done) {
         var $event = $.Event('keydown');
 

src/js/images.js

@@ -493,35 +493,69 @@
      */
 
     Images.prototype.removeImage = function (e) {
-        var $image, $parent, $empty;
+        var images = [],
+            $selectedImage = this.$el.find('.medium-insert-image-active'),
+            $parent, $empty, selection, range, current, caretPosition, $current, $sibling, selectedHtml, i;
 
         if (e.which === 8 || e.which === 46) {
-            $image = this.$el.find('.medium-insert-image-active');
+            if ($selectedImage.length) {
+                images.push($selectedImage);
+            }
 
-            if ($image.length) {
-                e.preventDefault();
+            // Remove image even if it's not selected, but backspace/del is pressed in text
+            selection = window.getSelection();
+            if (selection && selection.rangeCount) {
+                range = selection.getRangeAt(0);
+                current = range.commonAncestorContainer;
+                $current = current.nodeName === '#text' ? $(current).parent() : $(current);
+                caretPosition = MediumEditor.selection.getCaretOffsets(current).left;
+
+                // Is backspace pressed and caret is at the beginning of a paragraph, get previous element
+                if (e.which === 8 && caretPosition === 0) {
+                    $sibling = $current.prev();
+                // Is del pressed and caret is at the end of a paragraph, get next element
+                } else if (e.which === 46 && caretPosition === $current.text().length) {
+                    $sibling = $current.next();
+                }
 
-                this.deleteFile($image.attr('src'));
+                if ($sibling && $sibling.hasClass('medium-insert-images')) {
+                    images.push($sibling.find('img'));
+                }
 
-                $parent = $image.closest('.medium-insert-images');
-                $image.closest('figure').remove();
+                // If text is selected, find images in the selection
+                selectedHtml = MediumEditor.selection.getSelectionHtml(document);
+                if (selectedHtml) {
+                    $('<div></div>').html(selectedHtml).find('.medium-insert-images img').each(function () {
+                        images.push($(this));
+                    });
+                }
+            }
 
-                $('.medium-insert-images-toolbar, .medium-insert-images-toolbar2').remove();
+            if (images.length) {
+                for (i = 0; i < images.length; i++) {
+                    this.deleteFile(images[i].attr('src'));
 
-                if ($parent.find('figure').length === 0) {
-                    $empty = $parent.next();
-                    if ($empty.is('p') === false || $empty.text() !== '') {
-                        $empty = $(this.templates['src/js/templates/core-empty-line.hbs']().trim());
-                        $parent.before($empty);
-                    }
-                    $parent.remove();
+                    $parent = images[i].closest('.medium-insert-images');
+                    images[i].closest('figure').remove();
 
-                    // Hide addons
-                    this.core.hideAddons();
+                    if ($parent.find('figure').length === 0) {
+                        $empty = $parent.next();
+                        if ($empty.is('p') === false || $empty.text() !== '') {
+                            $empty = $(this.templates['src/js/templates/core-empty-line.hbs']().trim());
+                            $parent.before($empty);
+                        }
+                        $parent.remove();
+                    }
+                }
 
+                // Hide addons
+                this.core.hideAddons();
+                if (!selectedHtml && $empty) {
+                    e.preventDefault();
                     this.core.moveCaret($empty);
                 }
 
+                $('.medium-insert-images-toolbar, .medium-insert-images-toolbar2').remove();
                 this.core.triggerInput();
             }
         }