From 97e54d272f322f9478511b7f7bd4ae9403a62bc0 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 15 Jun 2016 12:54:38 +0200
Subject: [PATCH] Improved event handling in Redactor

---
 com.woltlab.wcf/templates/wysiwyg.tpl         |  1 +
 .../redactor2/plugins/WoltLabEvent.js         |  2 +-
 .../files/js/WoltLab/WCF/Ui/Redactor/Code.js  | 19 +++++++++++++++----
 .../files/js/WoltLab/WCF/Ui/Redactor/Quote.js |  3 +--
 wcfsetup/install/files/style/bbcode/code.scss |  2 +-
 wcfsetup/install/lang/de.xml                  |  1 +
 wcfsetup/install/lang/en.xml                  |  1 +
 7 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index d27fdea03c..94e517484e 100644
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -45,6 +45,7 @@
 				'wcf.editor.code.file.description': '{lang}wcf.editor.code.file.description{/lang}',
 				'wcf.editor.code.highlighter': '{lang}wcf.editor.code.highlighter{/lang}',
 				'wcf.editor.code.highlighter.description': '{lang}wcf.editor.code.highlighter.description{/lang}',
+				'wcf.editor.code.highlighter.detect': '{lang}wcf.editor.code.highlighter.detect{/lang}',
 				'wcf.editor.code.line': '{lang}wcf.editor.code.line{/lang}',
 				'wcf.editor.code.line.description': '{lang}wcf.editor.code.line.description{/lang}',
 				'wcf.editor.code.title': '{lang __literal=true}wcf.editor.code.title{/lang}',
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js
index 9ef9749d24..8f52ad7e9d 100644
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabEvent.js
@@ -16,7 +16,7 @@ $.Redactor.prototype.WoltLabEvent = function() {
 			this.observe.load = (function() {
 				observeLoad.call(this);
 				
-				EventHandler.fire('com.woltlab.wcf.redactor', 'observe_load_' + elementId, {
+				EventHandler.fire('com.woltlab.wcf.redactor2', 'observe_load_' + elementId, {
 					editor: this.$editor[0]
 				});
 			}).bind(this);
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js
index ebdf43455e..45e04ec966 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Code.js
@@ -59,7 +59,6 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
 				
 				this._setTitle(pre);
 				
-				pre.removeEventListener(WCF_CLICK_EVENT, this._callbackEdit);
 				pre.addEventListener(WCF_CLICK_EVENT, this._callbackEdit);
 				
 				// there must be some kind of element after the <pre>
@@ -80,10 +79,14 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
 		 * @protected
 		 */
 		_observeLoad: function() {
+			this._editor.events.stopDetectChanges();
+			
 			elBySelAll('pre', this._editor.$editor[0], (function(pre) {
 				pre.addEventListener(WCF_CLICK_EVENT, this._callbackEdit);
 				this._setTitle(pre);
 			}).bind(this));
+			
+			this._editor.events.startDetectChanges();
 		},
 		
 		/**
@@ -124,6 +127,8 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
 		_save: function(event) {
 			event.preventDefault();
 			
+			this._editor.events.stopDetectChanges();
+			
 			var id = 'redactor-code-' + this._elementId;
 			
 			['file', 'highlighter', 'line'].forEach((function (attr) {
@@ -133,6 +138,8 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
 			this._setTitle(this._pre);
 			this._editor.caret.after(this._pre);
 			
+			this._editor.events.startDetectChanges();
+			
 			UiDialog.close(this);
 		},
 		
@@ -149,10 +156,14 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
 			//noinspection JSUnresolvedVariable
 			highlighter = (this._editor.opts.woltlab.highlighters.hasOwnProperty(highlighter)) ? this._editor.opts.woltlab.highlighters[highlighter] : '';
 			
-			elData(pre, 'display-value', Language.get('wcf.editor.code.title', {
+			var title = Language.get('wcf.editor.code.title', {
 				file: file,
 				highlighter: highlighter
-			}));
+			});
+			
+			if (elData(pre, 'title') !== title) {
+				elData(pre, 'title', title);
+			}
 		},
 		
 		_dialogSetup: function() {
@@ -169,7 +180,7 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di
 						elById(idButtonSave).addEventListener(WCF_CLICK_EVENT, this._save.bind(this));
 						
 						// set highlighters
-						var highlighters = '<option value="">' + Language.get('wcf.global.noSelection') + '</option>';
+						var highlighters = '<option value="">' + Language.get('wcf.editor.code.highlighter.detect') + '</option>';
 						
 						var value, values = [];
 						//noinspection JSUnresolvedVariable
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js
index ceddeaf564..f88a4272a9 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Redactor/Quote.js
@@ -26,7 +26,7 @@ define(['EventHandler', 'Language', 'Dom/Util', 'Ui/Dialog'], function(EventHand
 		 * @param       {object}        editor          editor element
 		 */
 		initEditor: function(editorId, editor) {
-			EventHandler.add('com.woltlab.wcf.redactor', 'observe_load_' + editorId, (function(data) {
+			EventHandler.add('com.woltlab.wcf.redactor2', 'observe_load_' + editorId, (function(data) {
 				this.observeAll(data.editor);
 			}).bind(this));
 			
@@ -109,7 +109,6 @@ define(['EventHandler', 'Language', 'Dom/Util', 'Ui/Dialog'], function(EventHand
 		_observe: function(element, updateHeader) {
 			if (_callbackEdit === null) _callbackEdit = this.edit.bind(this);
 			
-			element.removeEventListener(WCF_CLICK_EVENT, _callbackEdit);
 			element.addEventListener(WCF_CLICK_EVENT, _callbackEdit);
 			
 			if (updateHeader) this._updateHeader(element);
diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
index eedcfa9d83..8672a96a4f 100644
--- a/wcfsetup/install/files/style/bbcode/code.scss
+++ b/wcfsetup/install/files/style/bbcode/code.scss
@@ -10,7 +10,7 @@
 	white-space: pre;
 	
 	&::before {
-		content: attr(data-display-value);
+		content: attr(data-title);
 		cursor: pointer;
 		display: block;
 		font-family: $wcfFontFamily;
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 75979fd2a6..90c360b08b 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -2138,6 +2138,7 @@ Fehler sind beispielsweise:
 		<item name="wcf.editor.code.file.description"><![CDATA[Optional: Legen Sie einen anzuzeigenden Dateinamen fest.]]></item>
 		<item name="wcf.editor.code.highlighter"><![CDATA[Syntax-Hervorhebung]]></item>
 		<item name="wcf.editor.code.highlighter.description"><![CDATA[Die farbliche Hervorherbung wird im Editor nicht angezeigt.]]></item>
+		<item name="wcf.editor.code.highlighter.detect"><![CDATA[(Automatische Erkennung)]]></item>
 		<item name="wcf.editor.code.line"><![CDATA[Start-Zeilennummer]]></item>
 		<item name="wcf.editor.code.line.description"><![CDATA[Optional: Legen Sie den Wert fest, ab dem die Zeilennummierung startet.]]></item>
 		<item name="wcf.editor.code.title"><![CDATA[{if $highlighter}{$highlighter}{else}Quellcode{/if}{if $file} - {$file}{/if}]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 3d3f6d6f77..40908fd35e 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -2149,6 +2149,7 @@ Errors are:
 		<item name="wcf.editor.code.file.description"><![CDATA[Optional: Specify the displayed filename.]]></item>
 		<item name="wcf.editor.code.highlighter"><![CDATA[Syntax Highlighting]]></item>
 		<item name="wcf.editor.code.highlighter.description"><![CDATA[Highlighting is not displayed within the editor.]]></item>
+		<item name="wcf.editor.code.highlighter.detect"><![CDATA[(Automatically Detect)]]></item>
 		<item name="wcf.editor.code.line"><![CDATA[Start Line Number]]></item>
 		<item name="wcf.editor.code.line.description"><![CDATA[Optional: Specify the start for line enumeration.]]></item>
 		<item name="wcf.editor.code.title"><![CDATA[{if $highlighter}{$highlighter}{else}Code{/if}{if $file} - {$file}{/if}]]></item>
-- 
2.20.1