From d2e0268eb36fe91ca0a14fcdce81b16140c9996a Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 9 Aug 2016 15:34:55 +0200
Subject: [PATCH] Fixed attachments not being converted inside Redactor

---
 .../templates/messageFormAttachments.tpl      |  6 +-
 wcfsetup/install/files/js/WCF.Attachment.js   | 42 ++++++++++--
 .../WoltLabSuite/Core/Ui/Redactor/Metacode.js | 67 ++++++++++++++-----
 3 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/com.woltlab.wcf/templates/messageFormAttachments.tpl b/com.woltlab.wcf/templates/messageFormAttachments.tpl
index 0cd0fde974..071e936cc1 100644
--- a/com.woltlab.wcf/templates/messageFormAttachments.tpl
+++ b/com.woltlab.wcf/templates/messageFormAttachments.tpl
@@ -1,7 +1,7 @@
 <div class="jsOnly formAttachmentContent messageTabMenuContent" id="attachments_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}">
 	<ul class="formAttachmentList clearfix"{if !$attachmentHandler->getAttachmentList()|count} style="display: none"{/if}>
 		{foreach from=$attachmentHandler->getAttachmentList() item=$attachment}
-			<li class="box64" data-object-id="{@$attachment->attachmentID}" data-height="{@$attachment->height}" data-width="{@$attachment->width}">
+			<li class="box64" data-object-id="{@$attachment->attachmentID}" data-height="{@$attachment->height}" data-width="{@$attachment->width}" data-is-image="{@$attachment->isImage}">
 				{if $attachment->tinyThumbnailType}
 					<img src="{link controller='Attachment' object=$attachment}tiny=1{/link}" alt="" class="attachmentTinyThumbnail">
 				{else}
@@ -17,8 +17,8 @@
 					<ul class="buttonGroup">
 						<li><span class="button small jsDeleteButton" data-object-id="{@$attachment->attachmentID}" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}">{lang}wcf.global.button.delete{/lang}</span></li>
 						{if $attachment->isImage}
-							<li><span class="button small jsButtonAttachmentInsertThumbnail" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insertThumbnail{/lang}</span></li>
-							<li><span class="button small jsButtonAttachmentInsertFull" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insertFull{/lang}</span></li>
+							<li><span class="button small jsButtonAttachmentInsertThumbnail" data-object-id="{@$attachment->attachmentID}" data-url="{link controller='Attachment' object=$attachment}thumbnail=1{/link}">{lang}wcf.attachment.insertThumbnail{/lang}</span></li>
+							<li><span class="button small jsButtonAttachmentInsertFull" data-object-id="{@$attachment->attachmentID}" data-url="{link controller='Attachment' object=$attachment}{/link}">{lang}wcf.attachment.insertFull{/lang}</span></li>
 						{else}
 							<li><span class="button small jsButtonInsertAttachment" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insert{/lang}</span></li>
 						{/if}
diff --git a/wcfsetup/install/files/js/WCF.Attachment.js b/wcfsetup/install/files/js/WCF.Attachment.js
index b349b0d336..9a95ff90a9 100644
--- a/wcfsetup/install/files/js/WCF.Attachment.js
+++ b/wcfsetup/install/files/js/WCF.Attachment.js
@@ -87,9 +87,32 @@ WCF.Attachment.Upload = WCF.Upload.extend({
 			WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'submit_' + this._editorId, $.proxy(this._submitInline, this));
 			WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'reset_' + this._editorId, $.proxy(this._reset, this));
 			
+			WCF.System.Event.addListener('com.woltlab.wcf.redactor2', 'metacode_attach', (function(data) {
+				var images = this._getImageAttachments();
+				var attachmentId = data.attributes[0] || 0;
+				if (images.hasOwnProperty(attachmentId)) {
+					var thumbnail = data.attributes[2];
+					thumbnail = (thumbnail === true || thumbnail === 'true');
+					
+					var image = elCreate('img');
+					image.className = 'woltlabAttachment';
+					image.src = images[attachmentId][(thumbnail ? 'thumbnailUrl' : 'url')];
+					elData(image, 'attachment-id', attachmentId);
+					
+					var float = data.attributes[1] || 'none';
+					if (float === 'left') image.classList.add('messageFloatObjectLeft');
+					else if (float === 'right') image.classList.add('messageFloatObjectRight');
+					
+					var metacode = data.metacode;
+					metacode.parentNode.insertBefore(image, metacode);
+					elRemove(metacode);
+					
+					data.cancel = true;
+				}
+			}).bind(this));
+			
 			// TODO
 			//WCF.System.Event.addListener('com.woltlab.wcf.redactor', 'upload_' + this._editorId, $.proxy(this._editorUpload, this));
-			//WCF.System.Event.addListener('com.woltlab.wcf.redactor', 'getImageAttachments_' + this._editorId, $.proxy(this._getImageAttachments, this));
 		}
 	},
 	
@@ -118,18 +141,22 @@ WCF.Attachment.Upload = WCF.Upload.extend({
 	/**
 	 * Sets the attachments representing an image.
 	 * 
-	 * @param	object		data
+	 * @return      {Object}
 	 */
-	_getImageAttachments: function(data) {
+	_getImageAttachments: function() {
+		var images = {};
+		
 		this._fileListSelector.children('li').each(function(index, attachment) {
 			var $attachment = $(attachment);
-			if ($attachment.children('img.attachmentTinyThumbnail').length) {
-				data.imageAttachments[parseInt($attachment.data('objectID'))] = {
-					height: parseInt($attachment.data('height')),
-					width: parseInt($attachment.data('width'))
+			if ($attachment.data('isImage')) {
+				images[~~$attachment.data('objectID')] = {
+					thumbnailUrl: $attachment.find('.jsButtonAttachmentInsertThumbnail').data('url'),
+					url: $attachment.find('.jsButtonAttachmentInsertFull').data('url')
 				};
 			}
 		});
+		
+		return images;
 	},
 	
 	/**
@@ -299,6 +326,7 @@ WCF.Attachment.Upload = WCF.Upload.extend({
 					
 					$li.data('height', attachmentData.height);
 					$li.data('width', attachmentData.width);
+					elData($li[0], 'is-image', attachmentData.isImage);
 				}
 				// show file icon
 				else {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Metacode.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Metacode.js
index 8aff60b420..c36a3dbf27 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Metacode.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Metacode.js
@@ -6,7 +6,7 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLabSuite/Core/Ui/Redactor/Metacode
  */
-define(['Dom/Util'], function(DomUtil) {
+define(['EventHandler', 'Dom/Util'], function(EventHandler, DomUtil) {
 	"use strict";
 	
 	/**
@@ -22,11 +22,21 @@ define(['Dom/Util'], function(DomUtil) {
 			var div = elCreate('div');
 			div.innerHTML = element.textContent;
 			
-			var attributes, metacode, metacodes = elByTag('woltlab-metacode', div), name, tagClose, tagOpen;
+			var attributes, data, metacode, metacodes = elByTag('woltlab-metacode', div), name, tagClose, tagOpen;
 			while (metacodes.length) {
 				metacode = metacodes[0];
 				name = elData(metacode, 'name');
-				attributes = elData(metacode, 'attributes');
+				attributes = this._parseAttributes(elData(metacode, 'attributes'));
+				
+				data = {
+					attributes: attributes,
+					cancel: false,
+					metacode: metacode
+				};
+				EventHandler.fire('com.woltlab.wcf.redactor2', 'metacode_' + name, data);
+				if (data.cancel === true) {
+					continue;
+				}
 				
 				tagOpen = this._getOpeningTag(name, attributes);
 				tagClose = this._getClosingTag(name);
@@ -50,29 +60,19 @@ define(['Dom/Util'], function(DomUtil) {
 		 * Returns a text node representing the opening bbcode tag.
 		 * 
 		 * @param       {string}        name            bbcode tag
-		 * @param       {string}        attributes      base64- and JSON-encoded attributes
+		 * @param       {Array}         attributes      list of attributes
 		 * @returns     {Text}          text node containing the opening bbcode tag
 		 * @protected
 		 */
 		_getOpeningTag: function(name, attributes) {
-			try {
-				attributes = JSON.parse(atob(attributes));
-			}
-			catch (e) { /* invalid base64 data or invalid json */ }
-			
-			if (!Array.isArray(attributes)) {
-				attributes = [];
-			}
-			
 			var buffer = '[' + name;
 			if (attributes.length) {
+				buffer += '=';
+				
 				for (var i = 0, length = attributes.length; i < length; i++) {
-					if (!/^'.*'$/.test(attributes[i])) {
-						attributes[i] = "'" + attributes[i] + "'";
-					}
+					if (i > 0) buffer += ",";
+					buffer += "'" + attributes[i] + "'";
 				}
-				
-				buffer += '=' + attributes.join(',');
 			}
 			
 			return document.createTextNode(buffer + ']');
@@ -149,6 +149,37 @@ define(['Dom/Util'], function(DomUtil) {
 			}
 			
 			return paragraph;
+		},
+		
+		/**
+		 * Parses the attributes string.
+		 * 
+		 * @param       {string}        attributes      base64- and JSON-encoded attributes
+		 * @return      {Array}         list of parsed attributes
+		 * @protected
+		 */
+		_parseAttributes: function(attributes) {
+			try {
+				attributes = JSON.parse(atob(attributes));
+			}
+			catch (e) { /* invalid base64 data or invalid json */ }
+			
+			if (!Array.isArray(attributes)) {
+				return [];
+			}
+			
+			var attribute, parsedAttributes = [];
+			for (var i = 0, length = attributes.length; i < length; i++) {
+				attribute = attributes[i];
+				
+				if (typeof attribute === 'string') {
+					attribute = attribute.replace(/^'(.*)'$/, '$1');
+				}
+				
+				parsedAttributes.push(attribute);
+			}
+			
+			return parsedAttributes;
 		}
 	};
 });
-- 
2.20.1