Improved inserting of smilies

Previously it was a mixture of dark magic and Redactors built-in
methods, now uses vanilla JS.

diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
index 4c59bf41fd5245a010a16ce536da46e502bbfde0..5596561ef1aa755513220cbb13fe21ba629d6cdc 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
@@ -233,35 +233,27 @@ RedactorPlugins.wbbcode = function() {
                        if (this.opts.visual) {
                                this.wutil.restoreSelection();
                                
-                               var $parentBefore = null;
-                               if (window.getSelection().rangeCount && window.getSelection().getRangeAt(0).collapsed) {
-                                       $parentBefore = window.getSelection().getRangeAt(0).startContainer;
-                                       if ($parentBefore.nodeType === Node.TEXT_NODE) {
-                                               $parentBefore = $parentBefore.parentElement;
-                                       }
-                                       
-                                       if (!this.utils.isRedactorParent($parentBefore)) {
-                                               $parentBefore = null;
-                                       }
+                               var $selection = window.getSelection();
+                               if (!$selection.rangeCount) {
+                                       // ensures that we always have a valid selection
+                                       this.focus.setEnd();
                                }
                                
-                               this.insert.html('<img src="' + smileyPath + '" class="smiley" alt="' + smileyCode + '" id="redactorSmiley">', false);
+                               var $range = $selection.getRangeAt(0);
                                
-                               var $smiley = document.getElementById('redactorSmiley');
-                               $smiley.removeAttribute('id');
-                               if ($parentBefore !== null) {
-                                       var $currentParent = window.getSelection().getRangeAt(0).startContainer;
-                                       if ($currentParent.nodeType === Node.TEXT_NODE) {
-                                               $currentParent = $currentParent.parentElement;
-                                       }
-                                       
-                                       // smiley has been inserted outside the original caret parent, move
-                                       if ($parentBefore !== $currentParent) {
-                                               $parentBefore.appendChild($smiley);
-                                       }
-                               }
+                               // discard everything that was previously within the range
+                               $range.deleteContents();
+                               
+                               // insert the smiley
+                               var $smiley = document.createElement('img');
+                               $smiley.src = smileyPath;
+                               $smiley.className = 'smiley';
+                               $smiley.alt = smileyCode;
                                
-                               var $isSpace = function(sibling) {
+                               $range.insertNode($smiley);
+                               
+                               // add spaces around the smiley that serve as padding
+                               function $isSpace(sibling) {
                                        if (sibling === null) return false;
                                        
                                        if ((sibling.nodeType === Node.ELEMENT_NODE && sibling.nodeName === 'SPAN') || sibling.nodeType === Node.TEXT_NODE) {
@@ -271,7 +263,9 @@ RedactorPlugins.wbbcode = function() {
                                        }
                                        
                                        return false;
-                               };
+                               }
+                               
+                               var $lastNode = $smiley;
                                
                                // add spaces as paddings
                                var $parent = $smiley.parentElement;
@@ -288,8 +282,18 @@ RedactorPlugins.wbbcode = function() {
                                        else {
                                                $parent.insertBefore($node, $smiley.nextSibling);
                                        }
+                                       
+                                       $lastNode = $node;
                                }
                                
+                               // force caret after the inserted smiley
+                               var $range = document.createRange();
+                               $range.selectNode($lastNode);
+                               $range.collapse(false);
+                               
+                               $selection.removeAllRanges();
+                               $selection.addRange($range);
+                               
                                this.wutil.saveSelection();
                        }
                        else {