From 7f56c817e0678dababc9a8f25596ce30b21664b2 Mon Sep 17 00:00:00 2001
From: Ryan Cramer <ryan@processwire.com>
Date: Sun, 23 Jan 2022 10:36:48 -0500
Subject: [PATCH] InputfieldCKEditor updates to fix and improve support of CKE
 contextual settings in Repeater/RepeaterMatrix types

---
 .../InputfieldCKEditor/InputfieldCKEditor.js  | 41 ++++++++++++-------
 .../InputfieldCKEditor.min.js                 |  2 +-
 .../InputfieldCKEditor.module                 | 16 ++++++--
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.js b/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.js
index 2e9040f4..86a465fe 100644
--- a/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.js
+++ b/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.js
@@ -218,6 +218,26 @@ function ckeSaveReadyNormal($inputfield) {
 	});
 }
 
+/**
+ * Get CKEditor configuration data when $editor element is available
+ * 
+ * @param $editor Regular editor <textarea> or inline editor <div> having data-configName attribute
+ * @returns {*}
+ * 
+ */
+function ckeGetConfigData($editor) {
+	var configName = $editor.attr('data-configName');
+	if(typeof ProcessWire.config[configName] === 'undefined') {
+		// get from data-configdata attribute and populate to ProcessWire.config
+		if(typeof $editor.attr('data-configdata') !== 'undefined') {
+			ProcessWire.config[configName] = JSON.parse($editor.attr('data-configdata'));
+		}
+	}
+	var configData = ProcessWire.config[configName];
+	if(typeof configData === 'undefined') configData = {};
+	return configData;
+}
+
 /**
  * Mouseover or focus event that activates inline CKEditor instances
  * 
@@ -234,14 +254,13 @@ function ckeInlineMouseoverEvent(event) {
 	if($t.hasClass("InputfieldCKEditorLoaded")) return;
 	$t.effect('highlight', {}, 500);
 	$t.attr('contenteditable', 'true');
-	var configName = $t.attr('data-configName');
 	if(event.type == 'focusin') {
 		CKEDITOR.once('instanceReady', function(event) {
 			$(':focus').blur();
 			event.editor.focus();
 		});
 	}
-	var editor = CKEDITOR.inline($(this).attr('id'), ProcessWire.config[configName]);
+	var editor = CKEDITOR.inline($t.attr('id'), ckeGetConfigData($t));
 	ckeInitEvents(editor);
 	$t.addClass("InputfieldCKEditorLoaded"); 
 }
@@ -274,12 +293,12 @@ function ckeInitNormal(editorID) {
 
 	var $editor = $('#' + editorID);
 	var $parent = $editor.parent();
-	
+	var configName;
 	
 	if(typeof ProcessWire.config.InputfieldCKEditor.editors[editorID] != "undefined") {
-		var configName = ProcessWire.config.InputfieldCKEditor.editors[editorID];
+		configName = ProcessWire.config.InputfieldCKEditor.editors[editorID];
 	} else {
-		var configName = $editor.attr('data-configName');
+		configName = $editor.attr('data-configName');
 	}
 
 	if($parent.hasClass('ui-tabs-panel') && $parent.css('display') == 'none') {
@@ -290,16 +309,8 @@ function ckeInitNormal(editorID) {
 		$parent.closest('.ui-tabs, .langTabs').on('tabsactivate', ckeInitTab);
 	} else {
 		// visible CKEditor
-		var editor;
-		if(typeof ProcessWire.config[configName] != "undefined") {
-			var editor = CKEDITOR.replace(editorID, ProcessWire.config[configName]);
-		} else if(typeof $editor.attr('data-configdata') != "undefined") {
-			// allow for alternate option of config data being passed through a data attribute
-			// useful for some dynamic/ajax situations
-			var configData = JSON.parse($editor.attr('data-configdata'));
-			ProcessWire.config[configName] = configData;
-			var editor = CKEDITOR.replace(editorID, configData);
-		}
+		var configData = ckeGetConfigData($editor);
+		var editor = CKEDITOR.replace(editorID, configData);
 		if(editor) {
 			ckeInitEvents(editor);
 			$editor.addClass('InputfieldCKEditorLoaded');
diff --git a/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.min.js b/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.min.js
index d8dd12a6..876a3441 100644
--- a/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.min.js
+++ b/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.min.js
@@ -1 +1 @@
-function ckeGetProcessWireConfig(editor){var editorName=typeof editor=="string"?editor:editor.name;var configName=editorName.replace("Inputfield_","InputfieldCKEditor_");var $repeaterItem="";var settings={};configName=configName.replace("Inputfield_","InputfieldCKEditor_");if(typeof ProcessWire.config[configName]=="undefined"&&configName.indexOf("_repeater")>0){configName=configName.replace(/_repeater[0-9]+/,"");$repeaterItem=$("#"+editorName).closest(".InputfieldRepeaterItem")}if(typeof ProcessWire.config[configName]=="undefined"&&configName.indexOf("_ckeditor")>0){configName=configName.replace(/_ckeditor$/,"")}if(typeof ProcessWire.config[configName]=="undefined"&&configName.indexOf("__")>0){configName=configName.replace(/__\d+$/,"")}if(typeof ProcessWire.config[configName]=="undefined"){settings.error="Cannot find CKEditor settings for "+configName}else{settings=ProcessWire.config[configName]}if($repeaterItem.length){settings["repeaterItem"]=$repeaterItem}else{settings["repeaterItem"]=""}return settings}function ckeLoadPlugins(){for(var name in ProcessWire.config.InputfieldCKEditor.plugins){var file=ProcessWire.config.InputfieldCKEditor.plugins[name];CKEDITOR.plugins.addExternal(name,file,"")}}ckeLoadPlugins();function ckeBlurEvent(event){var editor=event.editor;var $textarea=$(editor.element.$);if(editor.checkDirty()){if($textarea.length){if($textarea.is("textarea"))$textarea.change();$textarea.closest(".Inputfield").addClass("InputfieldStateChanged")}}}function ckeFocusEvent(event){var editor=event.editor;var $textarea=$(editor.element.$);$textarea.trigger("pw-focus")}function ckeResizeEvent(event){var editor=event.editor;var $textarea=$(editor.element.$);if($textarea.length){$textarea.closest(".Inputfield").trigger("heightChanged")}}function ckeUploadEvent(event){var xhr=event.data.fileLoader.xhr;var fileLoader=event.data.fileLoader;var settings=ckeGetProcessWireConfig(event.editor);var uploadFieldName=settings?settings.pwUploadField:"_unknown";var $imageInputfield=$("#Inputfield_"+uploadFieldName);if(typeof settings.repeaterItem!="undefined"&&settings.repeaterItem.length){var $repeaterImageField=settings.repeaterItem.find(".InputfieldImage:not(.InputfieldFileSingle)");if($repeaterImageField.length)$imageInputfield=$repeaterImageField}if($imageInputfield.length){xhr.open("POST",fileLoader.uploadUrl,true);$imageInputfield.trigger("pwimageupload",{name:fileLoader.fileName,file:fileLoader.file,xhr:xhr});event.stop()}else{if(typeof settings.error!="undefined"&&settings.error.length){ProcessWire.alert(settings.error)}else{ProcessWire.alert("Unable to find images field for upload")}event.stop();return false}}function ckeInitEvents(editor){editor.on("blur",ckeBlurEvent);editor.on("focus",ckeFocusEvent);editor.on("change",ckeBlurEvent);editor.on("resize",ckeResizeEvent);editor.on("fileUploadRequest",ckeUploadEvent,null,null,4);var $textarea=$(editor.element.$);var $inputfield=$textarea.closest(".Inputfield.InputfieldColumnWidth");if($inputfield.length)setTimeout(function(){$inputfield.trigger("heightChanged")},1e3)}function ckeSaveReadyInline($inputfield){if(!$inputfield.length)return;var $inlines=$inputfield.hasClass(".InputfieldCKEditorInline")?$inputfield:$inputfield.find(".InputfieldCKEditorInline");if($inlines.length)$inlines.each(function(){var $t=$(this);var value;if($t.hasClass("InputfieldCKEditorLoaded")){var editor=CKEDITOR.instances[$t.attr("id")];if(typeof editor!="undefined"){if(editor.focusManager.hasFocus){editor.focusManager.focus(true);editor.focus()}value=editor.getData()}}else{value=$t.html()}var $input=$t.next("input");$input.attr("value",value)})}function ckeSaveReadyNormal($inputfield){var $normals=$inputfield.hasClass("InputfieldCKEditorNormal")?$inputfield:$inputfield.find(".InputfieldCKEditorNormal");$normals.each(function(){var $t=$(this);if(!$t.hasClass("InputfieldCKEditorLoaded"))return;var editor=CKEDITOR.instances[$t.attr("id")];editor.updateElement()})}function ckeInlineMouseoverEvent(event){var $t=$(this);if($t.hasClass("InputfieldCKEditorLoaded"))return;$t.effect("highlight",{},500);$t.attr("contenteditable","true");var configName=$t.attr("data-configName");if(event.type=="focusin"){CKEDITOR.once("instanceReady",function(event){$(":focus").blur();event.editor.focus()})}var editor=CKEDITOR.inline($(this).attr("id"),ProcessWire.config[configName]);ckeInitEvents(editor);$t.addClass("InputfieldCKEditorLoaded")}function ckeInitTab(event,ui){var $t=ui.newTab;var $a=$t.find("a");if($a.hasClass("InputfieldCKEditor_init"))return;var editorID=$a.attr("data-editorID");var configName=$a.attr("data-configName");var editor=CKEDITOR.replace(editorID,config[configName]);ckeInitEvents(editor);$a.addClass("InputfieldCKEditor_init");ui.oldTab.find("a").addClass("InputfieldCKEditor_init");var $editor=$("#"+editorID);$editor.addClass("InputfieldCKEditorLoaded")}function ckeInitNormal(editorID){var $editor=$("#"+editorID);var $parent=$editor.parent();if(typeof ProcessWire.config.InputfieldCKEditor.editors[editorID]!="undefined"){var configName=ProcessWire.config.InputfieldCKEditor.editors[editorID]}else{var configName=$editor.attr("data-configName")}if($parent.hasClass("ui-tabs-panel")&&$parent.css("display")=="none"){var parentID=$editor.parent().attr("id");var $a=$parent.closest(".ui-tabs, .langTabs").find("a[href=#"+parentID+"]");$a.attr("data-editorID",editorID).attr("data-configName",configName);$parent.closest(".ui-tabs, .langTabs").on("tabsactivate",ckeInitTab)}else{var editor;if(typeof ProcessWire.config[configName]!="undefined"){var editor=CKEDITOR.replace(editorID,ProcessWire.config[configName])}else if(typeof $editor.attr("data-configdata")!="undefined"){var configData=JSON.parse($editor.attr("data-configdata"));ProcessWire.config[configName]=configData;var editor=CKEDITOR.replace(editorID,configData)}if(editor){ckeInitEvents(editor);$editor.addClass("InputfieldCKEditorLoaded")}}}$(document).ready(function(){CKEDITOR.timestamp=ProcessWire.config.InputfieldCKEditor.timestamp;for(var editorID in ProcessWire.config.InputfieldCKEditor.editors){ckeInitNormal(editorID)}$(document).on("reloaded",".InputfieldCKEditor",function(){var $editor=$(this).find(".InputfieldCKEditorNormal:not(.InputfieldCKEditorLoaded)");$editor.each(function(){ckeInitNormal($(this).attr("id"))});return false});$(document).on("image-edit",".InputfieldCKEditor",function(){var $editor=$(this).find(".InputfieldCKEditorNormal");$editor.each(function(){var editorID=$(this).attr("id");if(typeof CKEDITOR.instances[editorID]!=="undefined")CKEDITOR.instances[editorID].destroy();ckeInitNormal(editorID)})});CKEDITOR.disableAutoInline=true;$(document).on("mouseover focus",".InputfieldCKEditorInlineEditor",ckeInlineMouseoverEvent);$(document).on("submit","form.InputfieldForm",function(){ckeSaveReadyInline($(this))});$(document).on("saveReady",".InputfieldCKEditor",function(){ckeSaveReadyNormal($(this));ckeSaveReadyInline($(this))})});
\ No newline at end of file
+function ckeGetProcessWireConfig(editor){var editorName=typeof editor=="string"?editor:editor.name;var configName=editorName.replace("Inputfield_","InputfieldCKEditor_");var $repeaterItem="";var settings={};configName=configName.replace("Inputfield_","InputfieldCKEditor_");if(typeof ProcessWire.config[configName]=="undefined"&&configName.indexOf("_repeater")>0){configName=configName.replace(/_repeater[0-9]+/,"");$repeaterItem=$("#"+editorName).closest(".InputfieldRepeaterItem")}if(typeof ProcessWire.config[configName]=="undefined"&&configName.indexOf("_ckeditor")>0){configName=configName.replace(/_ckeditor$/,"")}if(typeof ProcessWire.config[configName]=="undefined"&&configName.indexOf("__")>0){configName=configName.replace(/__\d+$/,"")}if(typeof ProcessWire.config[configName]=="undefined"){settings.error="Cannot find CKEditor settings for "+configName}else{settings=ProcessWire.config[configName]}if($repeaterItem.length){settings["repeaterItem"]=$repeaterItem}else{settings["repeaterItem"]=""}return settings}function ckeLoadPlugins(){for(var name in ProcessWire.config.InputfieldCKEditor.plugins){var file=ProcessWire.config.InputfieldCKEditor.plugins[name];CKEDITOR.plugins.addExternal(name,file,"")}}ckeLoadPlugins();function ckeBlurEvent(event){var editor=event.editor;var $textarea=$(editor.element.$);if(editor.checkDirty()){if($textarea.length){if($textarea.is("textarea"))$textarea.change();$textarea.closest(".Inputfield").addClass("InputfieldStateChanged")}}}function ckeFocusEvent(event){var editor=event.editor;var $textarea=$(editor.element.$);$textarea.trigger("pw-focus")}function ckeResizeEvent(event){var editor=event.editor;var $textarea=$(editor.element.$);if($textarea.length){$textarea.closest(".Inputfield").trigger("heightChanged")}}function ckeUploadEvent(event){var xhr=event.data.fileLoader.xhr;var fileLoader=event.data.fileLoader;var settings=ckeGetProcessWireConfig(event.editor);var uploadFieldName=settings?settings.pwUploadField:"_unknown";var $imageInputfield=$("#Inputfield_"+uploadFieldName);if(typeof settings.repeaterItem!="undefined"&&settings.repeaterItem.length){var $repeaterImageField=settings.repeaterItem.find(".InputfieldImage:not(.InputfieldFileSingle)");if($repeaterImageField.length)$imageInputfield=$repeaterImageField}if($imageInputfield.length){xhr.open("POST",fileLoader.uploadUrl,true);$imageInputfield.trigger("pwimageupload",{name:fileLoader.fileName,file:fileLoader.file,xhr:xhr});event.stop()}else{if(typeof settings.error!="undefined"&&settings.error.length){ProcessWire.alert(settings.error)}else{ProcessWire.alert("Unable to find images field for upload")}event.stop();return false}}function ckeInitEvents(editor){editor.on("blur",ckeBlurEvent);editor.on("focus",ckeFocusEvent);editor.on("change",ckeBlurEvent);editor.on("resize",ckeResizeEvent);editor.on("fileUploadRequest",ckeUploadEvent,null,null,4);var $textarea=$(editor.element.$);var $inputfield=$textarea.closest(".Inputfield.InputfieldColumnWidth");if($inputfield.length)setTimeout(function(){$inputfield.trigger("heightChanged")},1e3)}function ckeSaveReadyInline($inputfield){if(!$inputfield.length)return;var $inlines=$inputfield.hasClass(".InputfieldCKEditorInline")?$inputfield:$inputfield.find(".InputfieldCKEditorInline");if($inlines.length)$inlines.each(function(){var $t=$(this);var value;if($t.hasClass("InputfieldCKEditorLoaded")){var editor=CKEDITOR.instances[$t.attr("id")];if(typeof editor!="undefined"){if(editor.focusManager.hasFocus){editor.focusManager.focus(true);editor.focus()}value=editor.getData()}}else{value=$t.html()}var $input=$t.next("input");$input.attr("value",value)})}function ckeSaveReadyNormal($inputfield){var $normals=$inputfield.hasClass("InputfieldCKEditorNormal")?$inputfield:$inputfield.find(".InputfieldCKEditorNormal");$normals.each(function(){var $t=$(this);if(!$t.hasClass("InputfieldCKEditorLoaded"))return;var editor=CKEDITOR.instances[$t.attr("id")];editor.updateElement()})}function ckeGetConfigData($editor){var configName=$editor.attr("data-configName");if(typeof ProcessWire.config[configName]==="undefined"){if(typeof $editor.attr("data-configdata")!=="undefined"){ProcessWire.config[configName]=JSON.parse($editor.attr("data-configdata"))}}var configData=ProcessWire.config[configName];if(typeof configData==="undefined")configData={};return configData}function ckeInlineMouseoverEvent(event){var $t=$(this);if($t.hasClass("InputfieldCKEditorLoaded"))return;$t.effect("highlight",{},500);$t.attr("contenteditable","true");if(event.type=="focusin"){CKEDITOR.once("instanceReady",function(event){$(":focus").blur();event.editor.focus()})}var editor=CKEDITOR.inline($t.attr("id"),ckeGetConfigData($t));ckeInitEvents(editor);$t.addClass("InputfieldCKEditorLoaded")}function ckeInitTab(event,ui){var $t=ui.newTab;var $a=$t.find("a");if($a.hasClass("InputfieldCKEditor_init"))return;var editorID=$a.attr("data-editorID");var configName=$a.attr("data-configName");var editor=CKEDITOR.replace(editorID,config[configName]);ckeInitEvents(editor);$a.addClass("InputfieldCKEditor_init");ui.oldTab.find("a").addClass("InputfieldCKEditor_init");var $editor=$("#"+editorID);$editor.addClass("InputfieldCKEditorLoaded")}function ckeInitNormal(editorID){var $editor=$("#"+editorID);var $parent=$editor.parent();var configName;if(typeof ProcessWire.config.InputfieldCKEditor.editors[editorID]!="undefined"){configName=ProcessWire.config.InputfieldCKEditor.editors[editorID]}else{configName=$editor.attr("data-configName")}if($parent.hasClass("ui-tabs-panel")&&$parent.css("display")=="none"){var parentID=$editor.parent().attr("id");var $a=$parent.closest(".ui-tabs, .langTabs").find("a[href=#"+parentID+"]");$a.attr("data-editorID",editorID).attr("data-configName",configName);$parent.closest(".ui-tabs, .langTabs").on("tabsactivate",ckeInitTab)}else{var configData=ckeGetConfigData($editor);var editor=CKEDITOR.replace(editorID,configData);if(editor){ckeInitEvents(editor);$editor.addClass("InputfieldCKEditorLoaded")}}}$(document).ready(function(){CKEDITOR.timestamp=ProcessWire.config.InputfieldCKEditor.timestamp;for(var editorID in ProcessWire.config.InputfieldCKEditor.editors){ckeInitNormal(editorID)}$(document).on("reloaded",".InputfieldCKEditor",function(){var $editor=$(this).find(".InputfieldCKEditorNormal:not(.InputfieldCKEditorLoaded)");$editor.each(function(){ckeInitNormal($(this).attr("id"))});return false});$(document).on("image-edit",".InputfieldCKEditor",function(){var $editor=$(this).find(".InputfieldCKEditorNormal");$editor.each(function(){var editorID=$(this).attr("id");if(typeof CKEDITOR.instances[editorID]!=="undefined")CKEDITOR.instances[editorID].destroy();ckeInitNormal(editorID)})});CKEDITOR.disableAutoInline=true;$(document).on("mouseover focus",".InputfieldCKEditorInlineEditor",ckeInlineMouseoverEvent);$(document).on("submit","form.InputfieldForm",function(){ckeSaveReadyInline($(this))});$(document).on("saveReady",".InputfieldCKEditor",function(){ckeSaveReadyNormal($(this));ckeSaveReadyInline($(this))})});
\ No newline at end of file
diff --git a/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.module b/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.module
index d826f494..55794654 100644
--- a/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.module
+++ b/wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.module
@@ -40,10 +40,10 @@ class InputfieldCKEditor extends InputfieldTextarea implements ConfigModule {
 	public static function getModuleInfo() {
 		return array(
 			'title' => 'CKEditor',
-			'version' => 168, 
+			'version' => 169, 
 			'summary' => __('CKEditor textarea rich text editor.', __FILE__),
 			'installs' => array('MarkupHTMLPurifier'), 
-			);
+		);
 	}
 
 	const toggleCleanDIV = 2;  	// remove <div>s
@@ -529,11 +529,12 @@ class InputfieldCKEditor extends InputfieldTextarea implements ConfigModule {
 		//$out = parent::___render() . "<script>CKEDITOR.replace('$this->id', config.$this->configName);</script>";
 		$this->addClass('InputfieldCKEditorNormal');
 		$this->attr('data-configName', $this->configName); 
+		$script = 'script';
 		$out = parent::___render() . 
-			"<script>" . 
+			"<$script>" . 
 			"ProcessWire.config.InputfieldCKEditor.editors.$this->id = '$this->configName';" .
 			"config.InputfieldCKEditor.editors.$this->id = '$this->configName';" . 
-			"</script>";
+			"</$script>";
 		return $out; 
 	}
 
@@ -561,6 +562,13 @@ class InputfieldCKEditor extends InputfieldTextarea implements ConfigModule {
 			$attrs['style'] = "overflow:auto;height:$height";
 		}
 		
+		// allow for custom data attributes
+		foreach($this->getAttributes() as $attrName => $attrVal) {
+			if(strpos($attrName, 'data-') !== 0) continue;
+			if(isset($attrs[$attrName])) continue;
+			$attrs[$attrName] = $attrVal;
+		}
+		
 		$attrs = $this->getAttributesString($attrs);
 		$out = 	
 			"<div $attrs>$value</div>" .