From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 3 Apr 2016 16:42:39 +0000 (+0200)
Subject: Improved inserting of smilies
X-Git-Tag: 2.1.11~49
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e84e83d0f459b84967e88ae057f3d3a615106ebb;p=GitHub%2FWoltLab%2FWCF.git

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 4c59bf41fd..5596561ef1 100644
--- 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 {