Fix issue processwire/processwire-issues#1335 - inserting <figure><img> nodes in Safari deleting content after the <figure>

wire/modules/Inputfield/InputfieldCKEditor/InputfieldCKEditor.module

@@ -3,10 +3,10 @@
 /**
  * ProcessWire Inputfield for CKEditor
  *
- * CKEditor Copyright (C) 2003-2019, CKSource - Frederico Knabben
+ * CKEditor Copyright (C) 2003-2021, CKSource - Frederico Knabben
  * http://ckeditor.com
  *
- * ProcessWire 3.x, Copyright 2019 by Ryan Cramer
+ * ProcessWire 3.x, Copyright 2021 by Ryan Cramer
  * https://processwire.com
  * 
  * FIELD CONFIGURATION
@@ -40,7 +40,7 @@ class InputfieldCKEditor extends InputfieldTextarea implements ConfigModule {
 	public static function getModuleInfo() {
 		return array(
 			'title' => 'CKEditor',
-			'version' => 167, 
+			'version' => 168, 
 			'summary' => __('CKEditor textarea rich text editor.', __FILE__),
 			'installs' => array('MarkupHTMLPurifier'), 
 			);

wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage/plugin.js

@@ -103,6 +103,24 @@
 		var $figureCaption = null;
 		var nodeParentName = nodeParent.$.nodeName.toUpperCase(); 
 		var nodeGrandparentName = nodeGrandparent ? nodeGrandparent.$.nodeName.toUpperCase() : '';
+		var figureNodeSafari = null;
+		
+		if(selection.getType() == CKEDITOR.SELECTION_TEXT) {
+			// Safari doesn’t support independent selection of figure elements without display:block, 
+			// so restart selection after changing display property of <figure> to block which then 
+			// makes it selectable in Safari
+			if(nodeParentName == 'FIGURE') {
+				figureNodeSafari = nodeParent;
+			} else if(nodeGrandparentName == 'FIGURE') {
+				figureNodeSafari = nodeGrandparent;
+			}
+			if(figureNodeSafari) {
+				selection.reset();
+				selection.removeAllRanges();
+				figureNodeSafari.$.style.display = 'block';
+				selection.selectElement(figureNodeSafari);
+			}
+		}
 	
 		if(typeof ckeGetProcessWireConfig != "undefined") {
 			// note: ckeGetProcessWireConfig not yet present in front-end editor
@@ -263,6 +281,7 @@
 								}
 					
 								var html = $insertHTML[0].outerHTML; 
+								if(figureNodeSafari) figureNodeSafari.remove(); // Safari inserts an extra <figure>, so remove the original 
 								editor.insertHtml(html); 
 								editor.fire('change');
 								$iframe.dialog("close");