From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 6 Feb 2018 15:51:14 +0000 (+0100)
Subject: Experimental work-around for the margin-hit detection in Safari
X-Git-Tag: 3.1.0_RC_3~12
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=f12d5539ef7618363260bce17d1dd0558be3209f;p=GitHub%2FWoltLab%2FWCF.git

Experimental work-around for the margin-hit detection in Safari

Fixes #2533
---

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js
index 95d57c2cfa..9934f2e8ab 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCaret.js
@@ -1,6 +1,8 @@
 $.Redactor.prototype.WoltLabCaret = function() {
 	"use strict";
 	
+	var _isSafari = false;
+	
 	return {
 		init: function () {
 			var mpAfter = this.caret.after;
@@ -15,9 +17,14 @@ $.Redactor.prototype.WoltLabCaret = function() {
 			}).bind(this);
 			
 			var iOS = false;
-			require(['Environment'], function (Environment) {
+			require(['Environment'], (function (Environment) {
 				iOS = (Environment.platform() === 'ios');
-			});
+				
+				_isSafari = (Environment.platform() === 'desktop' && Environment.browser() === 'safari');
+				if (_isSafari) {
+					this.core.editor()[0].classList.add('jsSafariMarginClickTarget')
+				}
+			}).bind(this));
 			
 			var mpEnd = this.caret.end;
 			this.caret.end = (function (node) {
@@ -309,13 +316,25 @@ $.Redactor.prototype.WoltLabCaret = function() {
 				}
 			}
 			
+			// Safari moves the caret before triggering the `click` event, causing the
+			// selection to appear at the first possible text node, even if it is nowhere
+			// near the click position.
+			var isSafariMarginHit = false;
+			if (_isSafari && this.utils.isBlockTag(event.target.nodeName)) {
+				// check if the click occured inside the margin at the block's bottom
+				if (event.clientY > event.target.getBoundingClientRect().bottom) {
+					block = event.target;
+					isSafariMarginHit = true;
+				}
+			}
+			
 			// get block element that received the click
 			var targetBlock = event.target;
 			while (targetBlock && !this.utils.isBlockTag(targetBlock.nodeName)) {
 				targetBlock = targetBlock.parentNode;
 			}
 			
-			if (!targetBlock || targetBlock === block) {
+			if (!targetBlock || (!isSafariMarginHit && targetBlock === block)) {
 				return;
 			}
 			
diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index dd630a1a46..075264fba4 100644
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -110,6 +110,28 @@
 			}
 		}
 	}
+	
+	/* This is a rather hacky work-around for Safari that makes the bottom margin clickable
+	   in order to recognize clicks in between two block elements. See #2533 */
+	&.jsSafariMarginClickTarget {
+		pre,
+		woltlab-quote,
+		woltlab-spoiler {
+			&::after {
+				content: "";
+				height: 1em; // this is the value of `margin-bottom`
+				left: 0;
+				position: absolute;
+				right: 0;
+				transform: translateY(20px); // this is the value of `padding-bottom`
+			}
+		}
+		
+		pre::after {
+			/* parent is `position: relative` */
+			bottom: 0;
+		}
+	}
 }
 
 .redactor-dropdown {