Merge branch 'v8/dev' into v8/bugfix/AB2734-Image-Deletion-Bug

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
#	src/Umbraco.Web/Templates/TemplateUtilities.cs

src/Umbraco.Core/Services/Implement/EntityXmlSerializer.cs

@@ -172,7 +172,7 @@ namespace Umbraco.Core.Services.Implement
             xml.Add(new XAttribute("Id", dataType.EditorAlias));
             xml.Add(new XAttribute("Definition", dataType.Key));
             xml.Add(new XAttribute("DatabaseType", dataType.DatabaseType.ToString()));
-            xml.Add(new XAttribute("Configuration", JsonConvert.SerializeObject(dataType.Configuration)));
+            xml.Add(new XAttribute("Configuration", JsonConvert.SerializeObject(dataType.Configuration, PropertyEditors.ConfigurationEditor.ConfigurationJsonSettings)));
 
             var folderNames = string.Empty;
             if (dataType.Level != 1)

src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js

@@ -240,7 +240,14 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
                         // When its being persisted in RTE property editor
                         // To create a media item & delete this tmp one etc
                         tinymce.activeEditor.$(img).attr({ "data-tmpimg": tmpLocation });
+                        
+                        // Resize the image to the max size configured
+                        // NOTE: no imagesrc passed into func as the src is blob://...
+                        // We will append ImageResizing Querystrings on perist to DB with node save
+                        sizeImageInEditor(editor, img);
                     });
+                        
+
                 });
 
                 // Get all img where src starts with blob: AND does NOT have a data=tmpimg attribute
@@ -266,19 +273,39 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
             }
         });
     }
-    
+
     function cleanupPasteData(plugin, args) {
-        
+
         // Remove spans
         args.content = args.content.replace(/<\s*span[^>]*>(.*?)<\s*\/\s*span>/g, "$1");
-        
+
         // Convert b to strong.
         args.content = args.content.replace(/<\s*b([^>]*)>(.*?)<\s*\/\s*b([^>]*)>/g, "<strong$1>$2</strong$3>");
-        
+
         // convert i to em
         args.content = args.content.replace(/<\s*i([^>]*)>(.*?)<\s*\/\s*i([^>]*)>/g, "<em$1>$2</em$3>");
-        
-        
+
+
+    }
+
+    function sizeImageInEditor(editor, imageDomElement, imgUrl) {
+
+        var size = editor.dom.getSize(imageDomElement);
+
+        if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
+            var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);
+
+
+            editor.dom.setAttrib(imageDomElement, 'width', newSize.width);
+            editor.dom.setAttrib(imageDomElement, 'height', newSize.height);
+
+            // Images inserted via Media Picker will have a URL we can use for ImageResizer QueryStrings
+            // Images pasted/dragged in are not persisted to media until saved & thus will need to be added
+            if(imgUrl){
+                var src = imgUrl + "?width=" + newSize.width + "&height=" + newSize.height;
+                editor.dom.setAttrib(imageDomElement, 'data-mce-src', src);
+            }
+        }
     }
 
     return {
@@ -637,21 +664,8 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
 
                 $timeout(function () {
                     var imgElm = editor.dom.get('__mcenew');
-                    var size = editor.dom.getSize(imgElm);
-
-                    if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
-                        var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);
-                        
-                        editor.dom.setAttrib(imgElm, 'width', newSize.width);
-                        editor.dom.setAttrib(imgElm, 'height', newSize.height);
-                        
-                        if (img.url) {
-                            var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
-                            editor.dom.setAttrib(imgElm, 'data-mce-src', src);
-                        }
-                    }
+                    sizeImageInEditor(editor, imgElm, img.url);
 				    editor.dom.setAttrib(imgElm, 'id', null);
-
                     editor.fire('Change');
 
                 }, 500);

src/Umbraco.Web/Templates/TemplateUtilities.cs

@@ -204,7 +204,7 @@ namespace Umbraco.Web.Templates
                 return html;
 
             // An array to contain a list of URLs that
-            //  we have already processed to avoid dupes
+            // we have already processed to avoid dupes
             var uploadedImages = new Dictionary<string, GuidUdi>();
 
             foreach (var img in tmpImages)
@@ -252,9 +252,19 @@ namespace Umbraco.Web.Templates
                 // Add the UDI to the img element as new data attribute
                 img.SetAttributeValue("data-udi", udi.ToString());
 
-                //Get the new persisted image url
+                // Get the new persisted image url
                 var mediaTyped = Current.UmbracoHelper.Media(udi.Guid);
                 var location = mediaTyped.Url;
+
+                // Find the width & height attributes as we need to set the imageprocessor QueryString
+                var width = img.GetAttributeValue("width", int.MinValue);
+                var height = img.GetAttributeValue("height", int.MinValue);
+
+                if(width != int.MinValue && height != int.MinValue)
+                {
+                    location = $"{location}?width={width}&height={height}&mode=max";
+                }
+                
                 img.SetAttributeValue("src", location);
 
                 // Remove the data attribute (so we do not re-process this)