From 51d932e7d8284d2d619b9be1bd42d7c6b9d50bac Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 18 Dec 2014 02:02:20 +0100
Subject: [PATCH] Improved handling of images and image attachments

---
 .../js/3rdParty/redactor/plugins/wbbcode.js   | 38 ++++++++++++++++++-
 .../3rdParty/redactor/plugins/wmonkeypatch.js | 13 ++++++-
 wcfsetup/install/files/style/bbcode.less      |  1 +
 wcfsetup/install/files/style/redactor.less    |  2 +
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
index d09207e764..5906192668 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
@@ -688,8 +688,28 @@ RedactorPlugins.wbbcode = function() {
 				
 			// [img]
 			data = data.replace(/\[img\]([^"]+?)\[\/img\]/gi,'<img src="$1" />');
-			data = data.replace(/\[img='?([^"]*?)'?,'?(left|right)'?\]\[\/img\]/gi,'<img src="$1" style="float: $2" />');
-			data = data.replace(/\[img='?([^"]*?)'?,'?(left|right|none)'?,'?(\d+)'?\]\[\/img\]/gi, '<img src="$1" style="float: $2; width: $3px" />');
+			data = data.replace(/\[img='?([^"]*?)'?,'?(left|right)'?\]\[\/img\]/gi, function(match, src, float, width) {
+				var $style = 'float: ' + float + ';';
+				if (float === 'left') {
+					$style += 'margin: 0 15px 7px 0';
+				}
+				else {
+					$style += 'margin: 0 0 7px 15px';
+				}
+				
+				return '<img src="' + src + '" style="' + $style + '" />';
+			});
+			data = data.replace(/\[img='?([^"]*?)'?,'?(left|right|none)'?,'?(\d+)'?\]\[\/img\]/gi, function(match, src, float, width) {
+				var $style = 'float: ' + float + '; width: ' + width + 'px';
+				if (float === 'left') {
+					$style += 'margin: 0 15px 7px 0';
+				}
+				else {
+					$style += 'margin: 0 0 7px 15px';
+				}
+				
+				return '<img src="' + src + '" style="' + $style + '" />';
+			});
 			data = data.replace(/\[img='?([^"]*?)'?\]\[\/img\]/gi,'<img src="$1" />');
 			
 			// [size]
@@ -795,6 +815,13 @@ RedactorPlugins.wbbcode = function() {
 						var $style = '';
 						if (alignment === 'left' || alignment === 'right') {
 							$style = 'float: ' + alignment + ';';
+							
+							if (alignment === 'left') {
+								$style += 'margin: 0 15px 7px 0';
+							}
+							else {
+								$style += 'margin: 0 0 7px 15px';
+							}
 						}
 						
 						$style = ' style="' + $style + '"';
@@ -812,6 +839,13 @@ RedactorPlugins.wbbcode = function() {
 						var $style = 'width: ' + width + 'px; max-height: ' + $imageAttachments[attachmentID].height + 'px; max-width: ' + $imageAttachments[attachmentID].width + 'px;';
 						if (alignment === 'left' || alignment === 'right') {
 							$style += 'float: ' + alignment + ';';
+							
+							if (alignment === 'left') {
+								$style += 'margin: 0 15px 7px 0';
+							}
+							else {
+								$style += 'margin: 0 0 7px 15px';
+							}
 						}
 						
 						$style = ' style="' + $style + '"';
diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js
index b1f0afb63d..fafd67b5d4 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wmonkeypatch.js
@@ -440,12 +440,21 @@ RedactorPlugins.wmonkeypatch = function() {
 			}).bind(this);
 			
 			// image.update
+			var $moveImage = (function(image) {
+				var $parent = image.parent();
+				image = image.detach();
+				image.prependTo($parent);
+				
+				this.caret.setAfter(image);
+			}).bind(this);
+			
 			this.image.update = (function(image) {
 				this.image.hideResize();
 				this.buffer.set();
 				
 				image.attr('src', $('#redactor-image-link-source').val());
 				this.image.setFloating(image);
+				$moveImage(image);
 				
 				this.modal.close();
 				this.observe.images();
@@ -816,11 +825,11 @@ RedactorPlugins.wmonkeypatch = function() {
 				'<fieldset id="redactor-modal-link">'
 					+ '<dl>'
 						+ '<dt><label for="redactor-link-url" />URL</label></dt>' /* TODO: use a phrase instead of hardcoding it! */
-						+ '<dd><input type="url" id="redactor-link-url" /></dd>'
+						+ '<dd><input type="url" id="redactor-link-url" class="long" /></dd>'
 					+ '</dl>'
 					+ '<dl>'
 						+ '<dt><label for="redactor-link-url-text">' + this.lang.get('text') + '</label></dt>'
-						+ '<dd><input type="text" id="redactor-link-url-text" /></dd>'
+						+ '<dd><input type="text" id="redactor-link-url-text" class="long" /></dd>'
 					+ '</dl>'
 				+ '</fieldset>';
 			
diff --git a/wcfsetup/install/files/style/bbcode.less b/wcfsetup/install/files/style/bbcode.less
index 25935340dc..a0db3e11ed 100644
--- a/wcfsetup/install/files/style/bbcode.less
+++ b/wcfsetup/install/files/style/bbcode.less
@@ -225,6 +225,7 @@ html[dir='rtl'] {
 		background-color: @wcfContentBackgroundColor;
 		min-height: 28px;
 		margin-bottom: @wcfGapTiny;
+		overflow: hidden;
 		position: relative;
 		
 		&.containerPadding {
diff --git a/wcfsetup/install/files/style/redactor.less b/wcfsetup/install/files/style/redactor.less
index 355fd75c99..4ca8d116e7 100644
--- a/wcfsetup/install/files/style/redactor.less
+++ b/wcfsetup/install/files/style/redactor.less
@@ -131,6 +131,7 @@
 	}
 	
 	img {
+		border: 1px solid transparent;
 		max-width: 100%;
 	}
 	
@@ -257,6 +258,7 @@
 	position: relative;
 	
 	> img {
+		border-width: 0;
 		opacity: .5;
 	}
 }
-- 
2.20.1