Ensure placeholder extensions cleans up removed elements

Author: nmielnik

spec/placeholder.spec.js

@@ -172,6 +172,18 @@ describe('MediumEditor.extensions.placeholder TestCase', function () {
         expect(this.el.hasAttribute('data-placeholder')).toBe(false);
     });
 
+    it('should remove the added data-placeholder attribute when elements are removed dynamically from the editor', function () {
+        var editor = this.newMediumEditor('.editor'),
+            newEl = this.createElement('div', 'other-element');
+
+        expect(newEl.hasAttribute('other-element')).toBe(false);
+        editor.addElements(newEl);
+        expect(newEl.getAttribute('data-placeholder')).toBe(MediumEditor.extensions.placeholder.prototype.text);
+
+        editor.removeElements('.other-element');
+        expect(newEl.hasAttribute('data-placeholder')).toBe(false);
+    });
+
     it('should not remove custom data-placeholder attribute when destroyed', function () {
         var placeholderText = 'Custom placeholder';
         this.el.setAttribute('data-placeholder', placeholderText);

src/js/extensions/placeholder.js

@@ -39,11 +39,17 @@
         },
 
         destroy: function () {
-            this.getEditorElements().forEach(function (el) {
-                if (el.getAttribute('data-placeholder') === this.text) {
-                    el.removeAttribute('data-placeholder');
-                }
-            }, this);
+            this.getEditorElements().forEach(this.cleanupElement, this);
+        },
+
+        handleRemoveElement: function (event, editable) {
+            this.cleanupElement(editable);
+        },
+
+        cleanupElement: function (el) {
+            if (el.getAttribute('data-placeholder') === this.text) {
+                el.removeAttribute('data-placeholder');
+            }
         },
 
         showPlaceholder: function (el) {
@@ -93,8 +99,9 @@
             // When the editor loses focus, check if the placeholder should be visible
             this.subscribe('blur', this.handleBlur.bind(this));
 
-            // Need to know when an element as been added to the editor
+            // Need to know when elements are added/removed from the editor
             this.subscribe('addElement', this.handleAddElement.bind(this));
+            this.subscribe('removeElement', this.handleRemoveElement.bind(this));
         },
 
         handleInput: function (event, element) {