Backspacing at the front of a code block yields rouge spans

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js
index 8099d1ae7f3dda9c3a8b32ea2ab17bfa8dece0c0..d21246b7941a20e11fc98301d51c41295e6c5aeb 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabKeydown.js
@@ -906,13 +906,46 @@ $.Redactor.prototype.WoltLabKeydown = function() {
                                        }
                                }
                                
+                               var isInsidePre = false;
+                               if (e.which === this.keyCode.BACKSPACE && this.selection.isCollapsed() && this.detect.isWebkit()) {
+                                       var block = this.selection.block();
+                                       if (block !== false && block.nodeName === 'PRE') {
+                                               isInsidePre = true;
+                                       }
+                               }
+                               
                                // remove style tag
                                setTimeout($.proxy(function()
                                {
+                                       var current;
+                                       
                                        if (firefoxKnownCustomElements.length > 0) {
                                                firefoxDetectSplitCustomElements();
                                        }
                                        
+                                       // The caret was previously inside a `<pre>`, check if we have backspaced out
+                                       // of the code and are now left inside a `<span>` with a metric ton of styles. 
+                                       if (isInsidePre) {
+                                               var block = this.selection.block();
+                                               if (block === false || block.nodeName !== 'PRE') {
+                                                       current = this.selection.current();
+                                                       // If the keystroke caused the `<pre>` to vanish, then the caret has moved into the
+                                                       // adjacent element, but the `current`'s next sibling is the newly added `<span>`.
+                                                       if (current.nodeType === Node.TEXT_NODE && current.nextSibling && current.nextSibling.nodeName === 'SPAN') {
+                                                               var sibling = current.nextSibling;
+                                                               
+                                                               // check for typical styles that are a remains of the `<pre>`'s styles
+                                                               if (sibling.style.getPropertyValue('font-family').indexOf('monospace') !== -1 && sibling.style.getPropertyValue('white-space') === 'pre-wrap') {
+                                                                       // the sibling is a rogue `<span>`, remove it
+                                                                       while (sibling.childNodes.length) {
+                                                                               sibling.parentNode.insertBefore(sibling.childNodes[0], sibling);
+                                                                       }
+                                                                       elRemove(sibling);
+                                                               }
+                                                       }
+                                               }
+                                       }
+                                       
                                        this.code.syncFire = false;
                                        this.keydown.removeEmptyLists();
                                        
@@ -928,7 +961,7 @@ $.Redactor.prototype.WoltLabKeydown = function() {
                                        this.keydown.formatEmpty(e);
                                        
                                        // strip empty <kbd>
-                                       var current = this.selection.current();
+                                       current = this.selection.current();
                                        if (current.nodeName === 'KBD' && current.innerHTML.length === 0) {
                                                elRemove(current);
                                        }