fit-ui 2.8.4 → 2.9.0

package/dist/Fit.UI.js

@@ -682,7 +682,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 2, Minor: 8, Patch: 4 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
+		VersionInfo: { Major: 2, Minor: 9, Patch: 0 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
 
@@ -2909,7 +2909,7 @@ Fit.Browser.GetScreenDimensions = function(onlyAvailable)
 }
 
 /// <function container="Fit.Browser" name="IsMobile" access="public" static="true" returns="boolean">
-/// 	<description> Returns value indicating whether devices currently being used is a mobile device or not </description>
+/// 	<description> Returns value indicating whether device is a mobile device or not </description>
 /// 	<param name="includeTablets" type="boolean" default="true"> Value indicating whether tablets are considered mobile devices or not </param>
 /// </function>
 Fit.Browser.IsMobile = function(includeTablets)
@@ -2927,6 +2927,14 @@ Fit.Browser.IsMobile = function(includeTablets)
 	return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(nav) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(nav.substr(0,4)));
 }
 
+/// <function container="Fit.Browser" name="IsTouchEnabled" access="public" static="true" returns="boolean">
+/// 	<description> Returns value indicating whether device is touch enabled or not </description>
+/// </function>
+Fit.Browser.IsTouchEnabled = function()
+{
+	return ("ontouchstart" in window);
+}
+
 
 /// <function container="Fit.Browser" name="Log" access="public" static="true">
 /// 	<description> Log message or object </description>
@@ -2968,6 +2976,7 @@ Fit.Browser.LogDeprecated = function(msg)
 /// 	<member name="IsMobile" type="boolean"> Boolean indicating whether this is a mobile device (tablet or phone) </member>
 /// 	<member name="IsPhone" type="boolean"> Boolean indicating whether this is a phone </member>
 /// 	<member name="IsTablet" type="boolean"> Boolean indicating whether this is a tablet device </member>
+/// 	<member name="IsTouchEnabled" type="boolean"> Boolean indicating whether this is a touch enabled device </member>
 /// </container>
 
 /// <container name="Fit.BrowserTypeDefs.BrowserInfo" extends="Fit.BrowserTypeDefs.BrowserDetails">
@@ -3014,6 +3023,7 @@ Fit.Browser.GetInfo = function(returnAppInfo)
 		Fit._internal.Browser.Info.IsMobile = Fit.Browser.IsMobile();
 		Fit._internal.Browser.Info.IsPhone = Fit.Browser.IsMobile(false); // Phone only
 		Fit._internal.Browser.Info.IsTablet = (Fit.Browser.IsMobile() === true && Fit.Browser.IsMobile(false) === false); // Tablet only
+		Fit._internal.Browser.Info.IsTouchEnabled = Fit.Browser.IsTouchEnabled();
 	}
 
 	return Fit.Core.Clone(Fit._internal.Browser.Info); // Clone to ensure values are not shared and potentially changed
@@ -5187,6 +5197,28 @@ Fit.String.DecodeHtml = function(str)
 	return str.replace(/&quot;/g, "\"").replace(/&#39;/g, "'").replace(/&#039;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
 }
 
+/// <function container="Fit.String" name="ParseImageBlobUrls" access="public" static="true" returns="string[]">
+/// 	<description> Parse and return image blob URLs from image tags </description>
+/// 	<param name="str" type="string"> String to parse </param>
+/// </function>
+Fit.String.ParseImageBlobUrls = function(str)
+{
+	var imageBlobUrls = [];
+	var blobImages = str.match(/<img .*?src=(["'])blob:.+?\1.*?>/gi) || [];
+
+	Fit.Array.ForEach(blobImages, function(img)
+	{
+		var blobUrl = img.match(/src=(["'])(blob:.*?)\1/i)[2]; // 0 = Full match, 1 = double quote or ping character, 2 = blob URL
+
+		if (Fit.Array.Contains(imageBlobUrls, blobUrl) === false)
+		{
+			Fit.Array.Add(imageBlobUrls, blobUrl);
+		}
+	});
+
+	return imageBlobUrls;
+}
+
 /// <function container="Fit.String" name="Hash" access="public" static="true" returns="integer">
 /// 	<description> Get Java compatible Hash Code from string </description>
 /// 	<param name="str" type="string"> String to get hash code from </param>
@@ -6741,15 +6773,17 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 
 	// Private properties
 
+	var me = this;
 	var elm = domElm;
 	var posState = null; // { position: "", left: "", top: "" };
 	var trgElm = (domTriggerElm ? domTriggerElm : null);
-	var me = this;
+	var bringToFrontOnActivation = false;
 
 	var onDragStart = null;
 	var onDragging = null;
 	var onDragStop = null;
 
+	var activationEventId = -1;
 	var mouseDownEventId = -1;
 
 	// Construct
@@ -6761,15 +6795,33 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 		Fit.Dom.AddClass(elm, "FitDragDropDraggable");
 		Fit.Dom.AddClass((trgElm !== null ? trgElm : elm), "FitDragDropDraggableHandle");
 
-		// Mouse down
+		// Bring to front on activation
 
-		mouseDownEventId = Fit.Events.AddHandler(((trgElm !== null) ? trgElm : elm), "mousedown", function(e)
+		activationEventId = Fit.Events.AddHandler(elm, (Fit.Browser.IsTouchEnabled() === true ? "touchstart" : "mousedown"), function(e)
 		{
-			var ev = e || window.event;
+			if (bringToFrontOnActivation === true)
+			{
+				me.BringToFront();
+			}
+		});
 
+		// Mouse down
+
+		mouseDownEventId = Fit.Events.AddHandler(((trgElm !== null) ? trgElm : elm), (Fit.Browser.IsTouchEnabled() === true ? "touchstart" : "mousedown"), function(e)
+		{
 			if (Fit.DragDrop.Draggable._internal.active !== null)
 				return; // Skip - current element is a draggable parent to which event propagated
 
+			var ev = Fit.Events.GetEvent(e);
+
+			if (onDragStart)
+			{
+				if (onDragStart(elm) === false)
+				{
+					return;
+				}
+			}
+
 			Fit.Dom.AddClass(elm, "FitDragDropDragging");
 
 			// Initial positioning (used by Reset())
@@ -6792,12 +6844,9 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 			}
 
 			// Mouse position in viewport
-			var mouseXviewport = (ev.clientX || e.pageX);
-			var mouseYviewport = (ev.clientY || e.pageY);
-
-			// Make sure element being dragged is on top of every other draggable element
-			Fit.DragDrop.Draggable._internal.zIndex++;
-			elm.style.zIndex = Fit.DragDrop.Draggable._internal.zIndex;
+			var pp = Fit.Events.GetPointerState().Coordinates.ViewPort;
+			var mouseXviewport = pp.X;
+			var mouseYviewport = pp.Y;
 
 			// Create state information object for draggable currently being dragged
 			var state =
@@ -6806,8 +6855,8 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 				Positioning: "relative",
 				Mouse: {Viewport: {X: -1, Y: -1}, Document: {X: -1, Y: -1}},
 				Position: {Viewport: {X: -1, Y: -1}, Document: {X: -1, Y: -1}, Offset: {X: -1, Y: -1}},
-				Events: { OnDragStart: onDragStart, OnDragging: onDragging, OnDragStop: onDragStop },
-				OnSelectStart : document.onselectstart
+				Events: { OnDragStart: onDragStart, OnDragging: onDragging, OnDragStop: onDragStop }/*,
+				OnSelectStart : document.onselectstart*/
 			};
 
 			var positioning = Fit.Dom.GetComputedStyle(elm, "position");
@@ -6816,8 +6865,9 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 				state.Positioning = positioning;
 			}
 
-			// Disable text selection for legacy browsers
-			document.onselectstart = function() { return false; }
+			// Disable text selection for legacy browsers.
+			// DISABLED: Now handled using Fit.Events.PreventDefault(ev).
+			//document.onselectstart = function() { return false; }
 
 			// Find mouse position in viewport
 			state.Mouse.Viewport.X = mouseXviewport;
@@ -6867,12 +6917,10 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 				Fit.Array.Add(Fit.DragDrop.DropZone._internal.dropzones, draggableDropZone);
 			}
 
-			if (state.Events.OnDragStart)
-				state.Events.OnDragStart(elm);
-
-			/*if (ev.preventDefault)
-				ev.preventDefault();
-			ev.cancelBubble = true;*/
+			if (ev.type === "touchstart")
+			{
+				Fit.Events.PreventDefault(ev); // Stop page scrolling on iOS (required in both ontouchstart and ontouchmove handlers)
+			}
 		});
 
 		// Mouse Up
@@ -6881,13 +6929,11 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 		{
 			Fit.DragDrop.Draggable._internal.mouseUpRegistered = true;
 
-			Fit.Events.AddHandler(document, "mouseup", function(e)
+			Fit.Events.AddHandler(document, (Fit.Browser.IsTouchEnabled() === true ? "touchend" : "mouseup"), function(e)
 			{
 				if (Fit.DragDrop.Draggable._internal.active === null)
 					return;
 
-				var ev = e || window.event;
-
 				var draggableState = Fit.DragDrop.Draggable._internal.active;
 				var draggable = Fit.DragDrop.Draggable._internal.active.Draggable;
 
@@ -6920,7 +6966,7 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 					draggableState.Events.OnDragStop(draggable);
 
 				// Restore OnSelectStart event
-				document.onselectstart = draggableState.OnSelectStart;
+				//document.onselectstart = draggableState.OnSelectStart;
 			});
 		}
 
@@ -6930,12 +6976,12 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 		{
 			Fit.DragDrop.Draggable._internal.mouseMoveRegistered = true;
 
-			Fit.Events.AddHandler(document, "mousemove", function(e)
+			Fit.Events.AddHandler(document, (Fit.Browser.IsTouchEnabled() === true ? "touchmove" : "mousemove"), { passive: false /* https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener */ }, function(e)
 			{
 				if (Fit.DragDrop.Draggable._internal.active === null)
 					return;
 
-				var ev = e || window.event;
+				var ev = Fit.Events.GetEvent(e);
 
 				// Handle draggable
 
@@ -6944,8 +6990,16 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 				var elm = draggable.GetElement();
 
 				// Mouse position in viewport
-				var mouseXviewport = (ev.clientX || e.pageX);
-				var mouseYviewport = (ev.clientY || e.pageY);
+				var pp = Fit.Events.GetPointerState().Coordinates.ViewPort;
+				var mouseXviewport = pp.X;
+				var mouseYviewport = pp.Y;
+
+				// Prevent user from moving object out of viewport
+				var vpDim = Fit.Browser.GetViewPortDimensions();
+				mouseXviewport = mouseXviewport >= 0 ? mouseXviewport : 0;
+				mouseXviewport = mouseXviewport <= vpDim.Width ? mouseXviewport : vpDim.Width;
+				mouseYviewport = mouseYviewport >= 0 ? mouseYviewport : 0;
+				mouseYviewport = mouseYviewport <= vpDim.Height ? mouseYviewport : vpDim.Height;
 
 				// Positioning (fixed, absolute, or relative)
 				var positioning = Fit.DragDrop.Draggable._internal.active.Positioning;
@@ -7045,12 +7099,55 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 					if (dropzoneActive.OnEnter)
 						dropzoneActive.OnEnter(dropzoneActive.DropZone);
 				}
+
+				// Stop page scrolling on iOS (required in both ontouchstart and ontouchmove handlers).
+				// Ontouchmove must be registered with { passive: false } for this to work in browsers
+				// which defaults to passive:true. This also prevents text selection on older browsers
+				// not supporting user-select:none.
+
+				Fit.Events.PreventDefault(ev);
 			});
 		}
 	}
 
 	// Public
 
+	/// <function container="Fit.DragDrop.Draggable" name="BringToFrontOnActivation" access="public" returns="boolean">
+	/// 	<description> Get/set flag indicating whether to bring draggable to front when activated </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, a value of True enables functionality, False disables it (default) </param>
+	/// </function>
+	this.BringToFrontOnActivation = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			bringToFrontOnActivation = val;
+
+			// NOTICE: z-index is not reset when BringToFrontOnActivation is disabled.
+			// It may have been enabled at some point, but we keep the z-index to make
+			// sure the element remains below other elements that have BringToFrontOnActivation
+			// enabled. Resetting the z-index style attribute will cause the z-index value of
+			// 99999 from CSS to be applied when dragging the element, causing it to temporarily
+			// be positioned above elements with BringToFrontOnActivation enabled while dragging it.
+			// That becomes bad UX when the user stops dragging it and releases it, at which point
+			// the temporary z-index value of 99999 from CSS is no longer in effect and z-index:1200
+			// takes effect again, which causes the element to be hidden behind elements with
+			// BringToFrontOnActivation enabled.
+		}
+
+		return bringToFrontOnActivation;
+	}
+
+	/// <function container="Fit.DragDrop.Draggable" name="BringToFront" access="public">
+	/// 	<description> Bring draggable to front </description>
+	/// </function>
+	this.BringToFront = function()
+	{
+		Fit.DragDrop.Draggable._internal.zIndex++;
+		elm.style.zIndex = Fit.DragDrop.Draggable._internal.zIndex;
+	}
+
 	/// <function container="Fit.DragDrop.Draggable" name="Reset" access="public">
 	/// 	<description> Reset draggable to initial position </description>
 	/// </function>
@@ -7062,6 +7159,7 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 		elm.style.position = posState.position;
 		elm.style.left = posState.left;
 		elm.style.top = posState.top;
+		elm.style.zIndex = "";
 
 		posState = null;
 	}
@@ -7091,9 +7189,15 @@ Fit.DragDrop.Draggable = function(domElm, domTriggerElm)
 		Fit.Dom.RemoveClass(elm, "FitDragDropDraggable");
 		Fit.Dom.RemoveClass((trgElm !== null ? trgElm : elm), "FitDragDropDraggableHandle");
 
+		Fit.Events.RemoveHandler(elm, activationEventId);
 		Fit.Events.RemoveHandler(((trgElm !== null) ? trgElm : elm), mouseDownEventId);
 
-		me = elm = posState = trgElm = onDragStart = onDragging = onDragStop = mouseDownEventId = null;
+		if (Fit.DragDrop.Draggable._internal.active !== null && Fit.DragDrop.Draggable._internal.active.Draggable === me)
+		{
+			Fit.DragDrop.Draggable._internal.active = null;
+		}
+
+		me = elm = posState = trgElm = bringToFrontOnActivation = onDragStart = onDragging = onDragStop = activationEventId = mouseDownEventId = null;
 	}
 
 	// Event handling
@@ -14608,16 +14712,21 @@ Fit.Controls.Dialog = function(controlId)
 	var dialog = me.GetDomElement();
 	var focusTrapStart = null;
 	var focusTrapEnd = null;
-	var title = null;
+	var titleContainer = null;
+	var titleText = null;
 	var titleButtons = null;
 	var cmdMaximize = null;
 	var cmdDismiss = null;
 	var content = null;
 	var iframe = null;
+	var resizer = null;
 	var buttons = null;
 	var modal = false;
 	var layer = null;
 
+	var draggable = null;
+	var suppressPositioning = false;
+
 	var width = null;
 	var minWidth = null;
 	var maxWidth = null;
@@ -14642,6 +14751,7 @@ Fit.Controls.Dialog = function(controlId)
 		Fit.Dom.AddClass(dialog, "FitUiControlDialog");
 		Fit.Dom.Data(dialog, "framed", "false");
 		Fit.Dom.Data(dialog, "maximized", "false");
+		Fit.Dom.Data(dialog, "resizable", "false");
 
 		focusTrapStart = document.createElement("div");
 		focusTrapStart.tabIndex = 0;
@@ -14716,44 +14826,43 @@ Fit.Controls.Dialog = function(controlId)
 
 		if (val !== undefined) // Allow null to remove title
 		{
-			if (val === null && title !== null)
+			if (val === null && titleContainer !== null) // Remove title
 			{
-				if (titleButtons !== null)
+				if (titleButtons !== null || draggable !== null) // Clear title but keep title bar used for buttons and drag support
 				{
-					Fit.Dom.Text(title, "");
-					Fit.Dom.Add(title, titleButtons);
+					Fit.Dom.Text(titleText, "");
 				}
-				else
+				else // Remove title bar
 				{
-					Fit.Dom.Remove(title);
-					title = null;
+					Fit.Dom.Remove(titleContainer);
+					titleContainer = null;
+					titleText = null;
 
 					setContentHeight();
 					updatePosition();
 				}
 			}
-			else
+			else // Set title
 			{
-				if (title === null)
+				if (titleContainer === null)
 				{
-					title = document.createElement("div");
-					Fit.Dom.AddClass(title, "FitUiControlDialogTitle");
-					Fit.Dom.InsertAfter(focusTrapStart, title);
-				}
+					titleContainer = document.createElement("div");
+					Fit.Dom.AddClass(titleContainer, "FitUiControlDialogTitle");
+					Fit.Dom.InsertAfter(focusTrapStart, titleContainer);
 
-				Fit.Dom.Text(title, val);
-
-				if (titleButtons !== null)
-				{
-					Fit.Dom.Add(title, titleButtons);
+					titleText = document.createElement("div");
+					Fit.Dom.AddClass(titleText, "FitUiControlDialogTitleText");
+					Fit.Dom.Add(titleContainer, titleText);
 				}
 
+				Fit.Dom.Text(titleText, val);
+
 				setContentHeight();
 				updatePosition();
 			}
 		}
 
-		return (title !== null ? Fit.Dom.Text(title) : null);
+		return (titleText !== null ? Fit.Dom.Text(titleText) : null);
 	}
 
 	/// <function container="Fit.Controls.Dialog" name="Width" access="public" returns="Fit.TypeDefs.CssValue">
@@ -14775,12 +14884,17 @@ Fit.Controls.Dialog = function(controlId)
 				width = { Value: val, Unit: ((Fit.Validation.IsSet(unit) === true) ? unit : "px") };
 				dialog.style.width = width.Value + width.Unit;
 
-				if (minWidth === null)
+				// Disable default min-width and default max-width from CSS when width alone is set, unless Resizable is
+				// enabled, in which case we must prevent dialog from "collapsing" completely due to resizing, or become
+				// larger than the viewport. When resizing is enabled, appropriate values for min-width and max-width are
+				// set from CSS, but can be overridden using MinimumWidth(..) and MaximumWidth(..)
+
+				if (minWidth === null && me.Resizable() === false)
 				{
 					dialog.style.minWidth = "0";
 				}
 
-				if (maxWidth === null)
+				if (maxWidth === null && me.Resizable() === false)
 				{
 					dialog.style.maxWidth = "none";
 				}
@@ -14819,6 +14933,7 @@ Fit.Controls.Dialog = function(controlId)
 
 		// defaultValue must match min-width in Dialog.css
 		var defaultValue = { Value: 280, Unit: "px" };
+		var defaultValueResizable = { Value: 15, Unit: "em" };
 
 		if (Fit.Validation.IsSet(val) === true)
 		{
@@ -14830,12 +14945,17 @@ Fit.Controls.Dialog = function(controlId)
 			else
 			{
 				minWidth = null;
-				dialog.style.minWidth = (width !== null ? "0" : ""); // Apply "0" (no min-width) if width is set
+				dialog.style.minWidth = (width !== null && me.Resizable() === false ? "0" : ""); // Apply "0" (no min-width) if width is set, to override min-width from CSS - similar logic found in Width(..)
 			}
 
 			updatePosition();
 		}
 
+		if (minWidth === null && me.Resizable() === true)
+		{
+			return defaultValueResizable;
+		}
+
 		return (minWidth !== null ? minWidth : (width !== null ? width : defaultValue));
 	}
 
@@ -14851,6 +14971,7 @@ Fit.Controls.Dialog = function(controlId)
 
 		// defaultValue must match max-width in Dialog.css
 		var defaultValue = { Value: 800, Unit: "px" };
+		var defaultValueResizable = { Value: 100, Unit: "%" };
 
 		if (Fit.Validation.IsSet(val) === true)
 		{
@@ -14862,12 +14983,17 @@ Fit.Controls.Dialog = function(controlId)
 			else
 			{
 				maxWidth = null;
-				dialog.style.maxWidth = (width !== null ? "none" : ""); // Apply "none" (no max-width) if width is set
+				dialog.style.maxWidth = (width !== null && me.Resizable() === false ? "none" : ""); // Apply "none" (no max-width) if width is set, to override max-width from CSS - similar logic found in Width(..)
 			}
 
 			updatePosition();
 		}
 
+		if (maxWidth === null && me.Resizable() === true)
+		{
+			return defaultValueResizable;
+		}
+
 		return (maxWidth !== null ? maxWidth : (width !== null ? width : defaultValue));
 	}
 
@@ -14916,6 +15042,7 @@ Fit.Controls.Dialog = function(controlId)
 
 		// defaultValue must match min-height in Dialog.css (which is not defined)
 		var defaultValue = { Value: -1, Unit: "px" };
+		var defaultValueResizable = { Value: 10, Unit: "em" };
 
 		if (Fit.Validation.IsSet(val) === true)
 		{
@@ -14934,6 +15061,11 @@ Fit.Controls.Dialog = function(controlId)
 			updatePosition();
 		}
 
+		if (minHeight === null && me.Resizable() === true)
+		{
+			return defaultValueResizable;
+		}
+
 		return (minHeight !== null ? minHeight : defaultValue);
 	}
 
@@ -14949,6 +15081,7 @@ Fit.Controls.Dialog = function(controlId)
 
 		// defaultValue must match max-height in Dialog.css (which is not defined)
 		var defaultValue = { Value: -1, Unit: "px" };
+		var defaultValueResizable = { Value: 100, Unit: "%" };
 
 		if (Fit.Validation.IsSet(val) === true)
 		{
@@ -14967,6 +15100,11 @@ Fit.Controls.Dialog = function(controlId)
 			updatePosition();
 		}
 
+		if (maxHeight === null && me.Resizable() === true)
+		{
+			return defaultValueResizable;
+		}
+
 		return (maxHeight !== null ? maxHeight : defaultValue);
 	}
 
@@ -14983,9 +15121,19 @@ Fit.Controls.Dialog = function(controlId)
 			if (val !== modal && me.IsOpen() === true)
 			{
 				if (val === true)
+				{
+					layer.style.zIndex = dialog.style.zIndex; // Update in case dialog was/is draggable and it was brought to front (z-index set by Fit.DragDrop.Draggable when Draggable is enabled)
 					Fit.Dom.InsertBefore(dialog, layer);
+
+					if (me.IsOpen() === true)
+					{
+						me.BringToFront();
+					}
+				}
 				else
+				{
 					Fit.Dom.Remove(layer);
+				}
 			}
 
 			modal = val;
@@ -15199,6 +15347,84 @@ Fit.Controls.Dialog = function(controlId)
 		return (cmdDismiss !== null);
 	}
 
+	/// <function container="Fit.Controls.Dialog" name="Draggable" access="public" returns="boolean">
+	/// 	<description> Get/set flag indicating whether dialog can be moved around on screen </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, a value of True enables dragging, False disables it (default) </param>
+	/// </function>
+	this.Draggable = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			if (val === true && draggable === null)
+			{
+				if (me.Title() === null) // Ensure title element
+				{
+					me.Title("");
+				}
+
+				draggable = new Fit.DragDrop.Draggable(me.GetDomElement(), titleText);
+				draggable.BringToFrontOnActivation(true);
+				draggable.OnDragStart(function()
+				{
+					if (me.Maximized() === true)
+					{
+						return false; // Prevent dragging while maximized
+					}
+
+					suppressPositioning = true;
+				});
+			}
+			else if (val === false && draggable !== null)
+			{
+				draggable.Dispose();
+				draggable = null;
+				suppressPositioning = false;
+
+				if (me.Title() === "")
+				{
+					me.Title(null); // Remove title element - will remain enabled if buttons (dismiss/maximize) are present though
+				}
+
+				updatePosition();
+			}
+		}
+
+		return (draggable !== null);
+	}
+
+	/// <function container="Fit.Controls.Dialog" name="Resizable" access="public" returns="boolean">
+	/// 	<description> Get/set flag indicating whether dialog can be resized by the user </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, a value of True enables resizing, False disables it (default) </param>
+	/// </function>
+	this.Resizable = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			if (val === true && resizer === null)
+			{
+				resizer = createResizerElement();
+				Fit.Dom.InsertAfter(content, resizer);
+				Fit.Dom.Data(dialog, "resizable", "true");
+			}
+			else if (val === false && resizer !== null)
+			{
+				Fit.Dom.Remove(resizer);
+				resizer = null;
+				Fit.Dom.Data(dialog, "resizable", "false");
+
+				// Undo width/height set by user
+				me.Width(me.Width().Value, me.Width().Unit);
+				me.Height(me.Height().Value, me.Height().Unit);
+			}
+		}
+
+		return (resizer !== null);
+	}
+
 	/// <function container="Fit.Controls.Dialog" name="AddButton" access="public">
 	/// 	<description> Add button to dialog </description>
 	/// 	<param name="btn" type="Fit.Controls.Button"> Instance of Fit.Controls.Button </param>
@@ -15298,6 +15524,18 @@ Fit.Controls.Dialog = function(controlId)
 		return Fit.Dom.IsRooted(dialog);
 	}
 
+	/// <function container="Fit.Controls.Dialog" name="BringToFront" access="public">
+	/// 	<description> Bring draggable dialog to front </description>
+	/// </function>
+	this.BringToFront = function()
+	{
+		if (draggable !== null)
+		{
+			draggable.BringToFront();
+			layer.style.zIndex = dialog.style.zIndex; // Ensure modal layer always remains exactly behind dialog with the same z-index value
+		}
+	}
+
 	/// <function container="Fit.Controls.Dialog" name="Open" access="public">
 	/// 	<description> Open dialog </description>
 	/// 	<param name="renderTarget" type="DOMElement" default="undefined">
@@ -15313,8 +15551,13 @@ Fit.Controls.Dialog = function(controlId)
 		if (me.IsOpen() === true)
 			return;
 
+		me.BringToFront();
+
 		if (modal === true)
+		{
+			layer.style.zIndex = dialog.style.zIndex; // Ensure modal layer always remains exactly behind dialog with the same z-index value
 			Fit.Dom.Add(renderTarget || document.body, layer);
+		}
 
 		Fit.Dom.Add(renderTarget || document.body, dialog);
 
@@ -15422,6 +15665,11 @@ Fit.Controls.Dialog = function(controlId)
 			cmdDismiss.Dispose();
 		}
 
+		if (draggable !== null)
+		{
+			draggable.Dispose();
+		}
+
 		if (buttons !== null)
 		{
 			Fit.Array.ForEach(Fit.Array.Copy(buttons.children), function(buttonElm) // Using Copy(..) since Dispose() modifies children collection
@@ -15440,7 +15688,7 @@ Fit.Controls.Dialog = function(controlId)
 			Fit.Events.RemoveHandler(window, resizeHandlerId);
 		}
 
-		me = dialog = title = titleButtons = cmdMaximize = cmdDismiss = content = buttons = modal = layer = width = minWidth = maxWidth = height = minHeight = maxHeight = mutationObserverId = resizeHandlerId = onDismissHandlers = onCloseHandlers = isClosing = null;
+		me = dialog = focusTrapStart = focusTrapEnd = titleContainer = titleText = titleButtons = cmdMaximize = cmdDismiss = content = iframe = resizer = buttons = modal = layer = draggable = suppressPositioning = width = minWidth = maxWidth = height = minHeight = maxHeight = mutationObserverId = resizeHandlerId = onDismissHandlers = onCloseHandlers = isClosing = null;
 
 		base();
 	});
@@ -15488,6 +15736,17 @@ Fit.Controls.Dialog = function(controlId)
 		Fit.Array.Add(onCloseHandlers, cb);
 	}
 
+	// ============================================
+	// Protected
+	// ============================================
+
+	this._internal = (this._internal ? this._internal : {});
+
+	this._internal.GetLayerElement = function()
+	{
+		return layer;
+	}
+
 	// ============================================
 	// Private
 	// ============================================
@@ -15499,6 +15758,130 @@ Fit.Controls.Dialog = function(controlId)
 		return div;
 	}
 
+	function createResizerElement()
+	{
+		// NOTICE: Resizing a dialog with an iframe:
+		// Resizing might not work properly with iframes with content from a foreign domain,
+		// since browsers won't dispatch mouse/touch events over foreign domains.
+		// Some older browsers won't even dispatch the events over iframes with content
+		// originating from the same domain as the one hosting the main page.
+		// This becomes a problem if the user is able to quickly move the mouse over the
+		// iframe while resizing, and the computer/browser is not fast enough to "catch up" with
+		// the movement of the resize handle. Slowly resizing the dialog in this case works.
+		// Possible solution:
+		// If we need better support for resizing dialogs with iframes, consider using a timer
+		// which on a regular basis (2-10 times per second) updates the dialog size based on the
+		// pointer position. That way the missing invocation of OnTouchMove or OnMouseMove is mitigated.
+		// It should also dispatch the logic found in OnTouchEnd, OnTouchCancel and OnMouseUp if the
+		// timer detects that the pointer (mouse or finger) has been released. This can be determined
+		// using: Fit.Events.GetPointerState().Buttons.Touch || Fit.Events.GetPointerState().Buttons.Primary
+		// However, make sure this issue is resolved first: https://github.com/Jemt/Fit.UI/issues/153
+		// The issue relates to the reliablity of Fit.Events.GetPointerState().Buttons.Primary since it
+		// is unset OnMouseOut, which will be triggered if mouse/finger leaves resize handle.
+
+		var resizer = document.createElement("div");
+		Fit.Dom.AddClass(resizer, "FitUiControlDialogResizer");
+
+		Fit.Events.AddHandler(resizer, (Fit.Browser.IsTouchEnabled() === true ? "touchstart" : "mousedown"), function(e)
+		{
+			if (me.Maximized() === true)
+			{
+				return; // Prevent resizing while maximized
+			}
+
+			var ev = Fit.Events.GetEvent(e);
+
+			var initPos = Fit.Events.GetPointerState().Coordinates.ViewPort;
+			var initDim = { Width: me.GetDomElement().offsetWidth, Height: me.GetDomElement().offsetHeight };
+
+			var moveHandler = null;		// OnMouseMove or OnTouchMove event ID
+			var releaseHandler = null;	// OnMouseUp or OnTouchEnd event ID
+			var cancelHandler = null;	// OnTouchCancel event ID (only set on touch devices)
+
+			var cleanup = function()
+			{
+				Fit.Events.RemoveHandler(document, moveHandler);
+				Fit.Events.RemoveHandler(document, releaseHandler);
+
+				if (cancelHandler !== null)
+				{
+					Fit.Events.RemoveHandler(document, cancelHandler);
+				}
+			};
+
+			moveHandler = Fit.Events.AddHandler(document, (Fit.Browser.IsTouchEnabled() === true ? "touchmove" : "mousemove"), { passive: false /* https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener */ }, function(e)
+			{
+				if (me === null) // Unlikely, but theoretically possible that dialog gets disposed while being resized
+				{
+					cleanup();
+					return;
+				}
+
+				var ev = Fit.Events.GetEvent(e);
+
+				// Determine mouse/finger travel
+
+				var pp = Fit.Events.GetPointerState().Coordinates.ViewPort;
+				var left = pp.X - initPos.X;	// Positive = moved right, negative = moved left
+				var top = pp.Y - initPos.Y;		// Positive = moved down, negative = moved up
+
+				if (suppressPositioning === false) // Dialog remains centered - adjust amount of resizing needed ("double up")
+				{
+					left = left * 2;	// Double up when dialog is centered since both left and right side is resized
+					top = top * 1.3;	// Approximate value to adjust resizing vertically - not 100% accurate - resize handle will not follow pointer precisely, but close enough - reason: dialog is not centered 50/50 vertically but 25/75, so a static value such as 1.3 is not accurate - the actual adjustment needed for accurate positioning is variable
+				}
+
+				// Calculate and apply new width and height
+
+				var newWidth = initDim.Width + left;
+				var newHeight = initDim.Height + top;
+
+				if (newWidth > 0)
+				{
+					dialog.style.width = newWidth + "px";
+				}
+
+				if (newHeight > 0)
+				{
+					dialog.style.height = newHeight + "px";
+					setContentHeight();
+				}
+
+				if (newWidth > 0 || newHeight > 0)
+				{
+					updatePosition();
+				}
+
+				// Stop page scrolling on iOS (required in both ontouchstart and ontouchmove handlers).
+				// Ontouchmove must be registered with { passive: false } for this to work in browsers
+				// which defaults to passive:true. This also prevents text selection on older browsers
+				// not supporting user-select:none.
+
+				Fit.Events.PreventDefault(ev);
+			});
+
+			releaseHandler = Fit.Events.AddHandler(document, (Fit.Browser.IsTouchEnabled() === true ? "touchend" : "mouseup"), function(e)
+			{
+				cleanup();
+			});
+
+			if (Fit.Browser.IsTouchEnabled() === true)
+			{
+				cancelHandler = Fit.Events.AddHandler(document, "touchcancel", function(e) // Can be triggered on iOS by swiping down notification panel or control center while resizing
+				{
+					cleanup();
+				});
+			}
+
+			if (ev.type === "touchstart")
+			{
+				Fit.Events.PreventDefault(ev); // Stop page scrolling on iOS (required in both ontouchstart and ontouchmove handlers)
+			}
+		});
+
+		return resizer;
+	}
+
 	function setContentHeight()
 	{
 		if (me.IsOpen() === false)
@@ -15512,10 +15895,10 @@ Fit.Controls.Dialog = function(controlId)
 
 		content.style.height = "";
 
-		if ((buttons !== null || title !== null) && (me.Maximized() === true || me.Height().Value !== -1 || me.MinimumHeight().Value !== -1 || me.MaximumHeight().Value !== -1))
+		if ((buttons !== null || titleContainer !== null) && (me.Maximized() === true || me.Height().Value !== -1 || me.MinimumHeight().Value !== -1 || me.MaximumHeight().Value !== -1))
 		{
 			var dh = dialog.offsetHeight;
-			var th = (title !== null ? title.offsetHeight : 0);
+			var th = (titleContainer !== null ? titleContainer.offsetHeight : 0);
 			var bh = (buttons !== null ? buttons.offsetHeight : 0);
 
 			content.style.height = (dh - th - bh) + "px";
@@ -15524,6 +15907,9 @@ Fit.Controls.Dialog = function(controlId)
 
 	function updatePosition()
 	{
+		if (suppressPositioning === true)
+			return;
+
 		if (me.IsOpen() === false)
 			return;
 
@@ -15547,13 +15933,18 @@ Fit.Controls.Dialog = function(controlId)
 		elm.style.top = "0px";
 
 		var dim = Fit.Browser.GetViewPortDimensions();
-		var offsetLeft = Math.floor((dim.Width / 2) - (elm.offsetWidth / 2));	// Center horizontally - place center of dialog 1/2 (50%) from the left
-		var offsetTop = Math.floor((dim.Height / 3) - (elm.offsetHeight / 2));	// Place center of dialog 1/3 (33%) from the top
+		var offsetTop = (dim.Height - elm.offsetHeight) * 0.25;	// Place dialog vertically with 25% of available space above dialog and remaining 75% space below dialog
+		var offsetLeft = (dim.Width - elm.offsetWidth) * 0.5;	// Place dialog exactly in the middle horizontally
 
-		if (offsetTop < 0)
+		if (offsetTop < 0) // Value becomes negative if dialog is higher than viewport
+		{
 			offsetTop = 0;
-		if (offsetLeft < 0)
+		}
+
+		if (offsetLeft < 0) // Value becomes negative if dialog is wider than viewport
+		{
 			offsetLeft = 0;
+		}
 
 		elm.style.left = offsetLeft + "px";
 		elm.style.top = offsetTop + "px";
@@ -15567,6 +15958,12 @@ Fit.Controls.Dialog = function(controlId)
 		{
 			Fit.Dom.Remove(titleButtons);
 			titleButtons = null;
+
+			if (me.Title() === "")
+			{
+				me.Title(null); // Remove title element - will remain enabled if Draggable is enabled
+			}
+
 			return;
 		}
 
@@ -15579,7 +15976,7 @@ Fit.Controls.Dialog = function(controlId)
 
 			titleButtons = document.createElement("div");
 			Fit.Dom.AddClass(titleButtons, "FitUiControlDialogTitleButtons");
-			Fit.Dom.Add(title, titleButtons);
+			Fit.Dom.Add(titleContainer, titleButtons);
 		}
 
 		// Add/re-add to ensure proper order
@@ -15624,7 +16021,9 @@ Fit.Controls.Dialog._internal.BaseDialog = function(content, showCancel, cb)
 	var d = new Fit.Controls.Dialog();
 	d.Content(content.replace(/\n/g, "<br>"));
 	d.Modal(true);
+
 	Fit.Dom.AddClass(d.GetDomElement(), "FitUiControlDialogBase");
+	Fit.Dom.AddClass(d._internal.GetLayerElement(), "FitUiControlDialogBaseModalLayer");
 
 	// Declare buttons
 
@@ -21693,6 +22092,7 @@ Fit.Controls.Input = function(ctlId)
 	var designEditorMustDisposeWhenReady = false;
 	var designEditorUpdateSizeDebouncer = -1;
 	var designEditorActiveToolbarPanel = null; // { DomElement: HTMLElement, UnlockFocusStateIfEmojiPanelIsClosed: function, CloseEmojiPanel: function }
+	var designEditorDetached = null; // { GetValue: function, Reload: function, Dispose: function }
 	//var htmlWrappedInParagraph = false;
 	var wasAutoChangedToMultiLineMode = false; // Used to revert to single line if multi line was automatically enabled along with DesignMode(true), Maximizable(true), or Resizable(true)
 	var minimizeHeight = -1;
@@ -21708,6 +22108,7 @@ Fit.Controls.Input = function(ctlId)
 	var debounceOnChangeTimeout = -1;
 	var debouncedOnChange = null;
 	var imageBlobUrls = [];				// Specific to DesignMode
+	var locale = null;
 
 	// ============================================
 	// Init
@@ -21773,6 +22174,7 @@ Fit.Controls.Input = function(ctlId)
 		me._internal.Data("designmode", "false");
 
 		Fit.Internationalization.OnLocaleChanged(localize);
+		localize();
 
 		me.OnBlur(function(sender)
 		{
@@ -22015,20 +22417,22 @@ Fit.Controls.Input = function(ctlId)
 				input.value = val;
 			}
 
+			// Notice: Identical logic found in DesignMode(true, config)!
 			if (designEditorConfig !== null && designEditorConfig.Plugins && designEditorConfig.Plugins.Images && designEditorConfig.Plugins.Images.RevokeExternalBlobUrlsOnDispose === true)
 			{
-				// Keep track of image blobs added via Value(..) so we can dispose them automatically.
+				// Keep track of image blobs added via Value(..) so we can dispose of them automatically.
 				// When RevokeExternalBlobUrlsOnDispose is True it basically means that the Input control
 				// is allowed (and expected) to take control over memory management for these blobs
 				// based on the rule set in RevokeBlobUrlsOnDispose.
+				// This code is also found in DesignMode(true, config) since images might be added before
+				// editor is created, in which case we do not yet have the editor configuration used to determine
+				// the desired behaviour.
 
-				var blobImages = val.match(/<img .*?src=(["'])blob:.+?\1.*?>/gi) || [];
+				var blobUrls = Fit.String.ParseImageBlobUrls(val);
 
-				Fit.Array.ForEach(blobImages, function(img)
+				Fit.Array.ForEach(blobUrls, function(blobUrl)
 				{
-					var blobUrl = img.match(/src=(["'])(blob:.*?)\1/i)[2];
-
-					if (Fit.Array.Contains(blobImages, blobUrl) === false)
+					if (Fit.Array.Contains(imageBlobUrls, blobUrl) === false)
 					{
 						Fit.Array.Add(imageBlobUrls, blobUrl);
 					}
@@ -22240,7 +22644,7 @@ Fit.Controls.Input = function(ctlId)
 			});
 		}
 
-		me = orgVal = preVal = input = cmdResize = designEditor = designEditorDom = designEditorDirty = designEditorDirtyPending = designEditorConfig = designEditorReloadConfig = designEditorRestoreButtonState = designEditorSuppressPaste = designEditorSuppressOnResize = designEditorMustReloadWhenReady = designEditorMustDisposeWhenReady = designEditorUpdateSizeDebouncer = designEditorActiveToolbarPanel /*= htmlWrappedInParagraph*/ = wasAutoChangedToMultiLineMode = minimizeHeight = maximizeHeight = minMaxUnit = maximizeHeightConfigured = resizable = nativeResizableAvailable = mutationObserverId = rootedEventId = createWhenReadyIntervalId = isIe8 = debounceOnChangeTimeout = debouncedOnChange = imageBlobUrls = null;
+		me = orgVal = preVal = input = cmdResize = designEditor = designEditorDom = designEditorDirty = designEditorDirtyPending = designEditorConfig = designEditorReloadConfig = designEditorRestoreButtonState = designEditorSuppressPaste = designEditorSuppressOnResize = designEditorMustReloadWhenReady = designEditorMustDisposeWhenReady = designEditorUpdateSizeDebouncer = designEditorActiveToolbarPanel = designEditorDetached /*= htmlWrappedInParagraph*/ = wasAutoChangedToMultiLineMode = minimizeHeight = maximizeHeight = minMaxUnit = maximizeHeightConfigured = resizable = nativeResizableAvailable = mutationObserverId = rootedEventId = createWhenReadyIntervalId = isIe8 = debounceOnChangeTimeout = debouncedOnChange = imageBlobUrls = locale = null;
 
 		base();
 	});
@@ -22751,7 +23155,7 @@ Fit.Controls.Input = function(ctlId)
 	/// 	<description> Configuration for image plugins </description>
 	/// 	<member name="Enabled" type="boolean"> Flag indicating whether to enable image plugins or not (defaults to False) </member>
 	/// 	<member name="EmbedType" type="'base64' | 'blob'" default="undefined">
-	/// 		How to store and embed images. Base64 is persistent while blob (default) is temporary
+	/// 		How to store and embed images. Base64 (default) is persistent while blob is temporary
 	/// 		and must be extracted from memory and uploaded/stored to be permanantly persisted.
 	/// 		References to blobs can be parsed from the HTML value produced by the editor.
 	/// 	</member>
@@ -22785,6 +23189,7 @@ Fit.Controls.Input = function(ctlId)
 	/// 	<member name="Links" type="boolean" default="undefined"> Enable links (defaults to True) </member>
 	/// 	<member name="Emojis" type="boolean" default="undefined"> Enable emoji button (defaults to False) </member>
 	/// 	<member name="Images" type="boolean" default="undefined"> Enable image button (defaults to false) </member>
+	/// 	<member name="Detach" type="boolean" default="undefined"> Enable detach button (defaults to false) </member>
 	/// 	<member name="Position" type="'Top' | 'Bottom'" default="undefined"> Toolbar position (defaults to Top) </member>
 	/// 	<member name="Sticky" type="boolean" default="undefined"> Make toolbar stick to edge of scroll container on supported browsers when scrolling (defaults to False) </member>
 	/// 	<member name="HideInitially" type="boolean" default="undefined"> Hide toolbar until control gains focus (defaults to False) </member>
@@ -22918,6 +23323,20 @@ Fit.Controls.Input = function(ctlId)
 	/// 	<member name="PreventResizeBeyondMaximumHeight" type="boolean" default="undefined"> Prevent user from resizing editor beyond maximum height (see MaximumHeight property - defaults to False) </member>
 	/// </container>
 
+	/// <container name="Fit.Controls.InputTypeDefs.DesignModeDetachable">
+	/// 	<description> Detachable configuration </description>
+	/// 	<member name="Title" type="string" default="undefined"> Dialog title </member>
+	/// 	<member name="Maximizable" type="boolean" default="undefined"> Flag indicating whether dialog is maximizable </member>
+	/// 	<member name="Maximized" type="boolean" default="undefined"> Flag indicating whether dialog is initially maximized </member>
+	/// 	<member name="Draggable" type="boolean" default="undefined"> Flag indicating whether dialog is draggable </member>
+	/// 	<member name="Width" type="{ Value: number, Unit?: Fit.TypeDefs.CssUnit }" default="undefined"> Dialog width </member>
+	/// 	<member name="MinimumWidth" type="{ Value: number, Unit?: Fit.TypeDefs.CssUnit }" default="undefined"> Minimum width of dialog </member>
+	/// 	<member name="MaximumWidth" type="{ Value: number, Unit?: Fit.TypeDefs.CssUnit }" default="undefined"> Maximum Width of dialog </member>
+	/// 	<member name="Height" type="{ Value: number, Unit?: Fit.TypeDefs.CssUnit }" default="undefined"> Dialog height </member>
+	/// 	<member name="MinimumHeight" type="{ Value: number, Unit?: Fit.TypeDefs.CssUnit }" default="undefined"> Minimum height of dialog </member>
+	/// 	<member name="MaximumHeight" type="{ Value: number, Unit?: Fit.TypeDefs.CssUnit }" default="undefined"> Maximum height of dialog </member>
+	/// </container>
+
 	/// <container name="Fit.Controls.InputTypeDefs.DesignModeConfig">
 	/// 	<description> Configuration for DesignMode </description>
 	/// 	<member name="Plugins" type="Fit.Controls.InputTypeDefs.DesignModeConfigPlugins" default="undefined"> Plugins configuration </member>
@@ -22925,6 +23344,7 @@ Fit.Controls.Input = function(ctlId)
 	/// 	<member name="InfoPanel" type="Fit.Controls.InputTypeDefs.DesignModeConfigInfoPanel" default="undefined"> Information panel configuration </member>
 	/// 	<member name="Tags" type="Fit.Controls.InputTypeDefs.DesignModeConfigTags" default="undefined"> Tags configuration </member>
 	/// 	<member name="AutoGrow" type="Fit.Controls.InputTypeDefs.DesignModeAutoGrow" default="undefined"> Auto grow configuration </member>
+	/// 	<member name="Detachable" type="Fit.Controls.InputTypeDefs.DesignModeDetachable" default="undefined"> Detachable configuration </member>
 	/// </container>
 
 	/// <function container="Fit.Controls.Input" name="DesignMode" access="public" returns="boolean">
@@ -22958,6 +23378,7 @@ Fit.Controls.Input = function(ctlId)
 		Fit.Validation.ExpectStringValue(((editorConfig || {}).Toolbar || {}).Position, true);
 		Fit.Validation.ExpectBoolean(((editorConfig || {}).Toolbar || {}).Sticky, true);
 		Fit.Validation.ExpectBoolean(((editorConfig || {}).Toolbar || {}).HideInitially, true);
+		Fit.Validation.ExpectBoolean(((editorConfig || {}).Toolbar || {}).Detach, true);
 		Fit.Validation.ExpectObject((editorConfig || {}).InfoPanel, true);
 		Fit.Validation.ExpectString(((editorConfig || {}).InfoPanel || {}).Text, true);
 		Fit.Validation.ExpectString(((editorConfig || {}).InfoPanel || {}).Alignment, true);
@@ -22971,6 +23392,29 @@ Fit.Controls.Input = function(ctlId)
 		Fit.Validation.ExpectNumber((((editorConfig || {}).AutoGrow || {}).MaximumHeight || {}).Value, true);
 		Fit.Validation.ExpectStringValue((((editorConfig || {}).AutoGrow || {}).MaximumHeight || {}).Unit, true);
 		Fit.Validation.ExpectBoolean(((editorConfig || {}).AutoGrow || {}).PreventResizeBeyondMaximumHeight, true);
+		Fit.Validation.ExpectObject((editorConfig || {}).Detachable, true);
+		Fit.Validation.ExpectString(((editorConfig || {}).Detachable || {}).Title, true);
+		Fit.Validation.ExpectBoolean(((editorConfig || {}).Detachable || {}).Maximizable, true);
+		Fit.Validation.ExpectBoolean(((editorConfig || {}).Detachable || {}).Maximized, true);
+		Fit.Validation.ExpectBoolean(((editorConfig || {}).Detachable || {}).Draggable, true);
+		Fit.Validation.ExpectObject(((editorConfig || {}).Detachable || {}).Width, true);
+		Fit.Validation.ExpectNumber((((editorConfig || {}).Detachable || {}).Width || {}).Value, true);
+		Fit.Validation.ExpectStringValue((((editorConfig || {}).Detachable || {}).Width || {}).Unit, true);
+		Fit.Validation.ExpectObject(((editorConfig || {}).Detachable || {}).MinimumWidth, true);
+		Fit.Validation.ExpectNumber((((editorConfig || {}).Detachable || {}).MinimumWidth || {}).Value, true);
+		Fit.Validation.ExpectStringValue((((editorConfig || {}).Detachable || {}).MinimumWidth || {}).Unit, true);
+		Fit.Validation.ExpectObject(((editorConfig || {}).Detachable || {}).MaximumWidth, true);
+		Fit.Validation.ExpectNumber((((editorConfig || {}).Detachable || {}).MaximumWidth || {}).Value, true);
+		Fit.Validation.ExpectStringValue((((editorConfig || {}).Detachable || {}).MaximumWidth || {}).Unit, true);
+		Fit.Validation.ExpectObject(((editorConfig || {}).Detachable || {}).Height, true);
+		Fit.Validation.ExpectNumber((((editorConfig || {}).Detachable || {}).Height || {}).Value, true);
+		Fit.Validation.ExpectStringValue((((editorConfig || {}).Detachable || {}).Height || {}).Unit, true);
+		Fit.Validation.ExpectObject(((editorConfig || {}).Detachable || {}).MinimumHeight, true);
+		Fit.Validation.ExpectNumber((((editorConfig || {}).Detachable || {}).MinimumHeight || {}).Value, true);
+		Fit.Validation.ExpectStringValue((((editorConfig || {}).Detachable || {}).MinimumHeight || {}).Unit, true);
+		Fit.Validation.ExpectObject(((editorConfig || {}).Detachable || {}).MaximumHeight, true);
+		Fit.Validation.ExpectNumber((((editorConfig || {}).Detachable || {}).MaximumHeight || {}).Value, true);
+		Fit.Validation.ExpectStringValue((((editorConfig || {}).Detachable || {}).MaximumHeight || {}).Unit, true);
 
 		if (editorConfig && editorConfig.Tags)
 		{
@@ -23023,6 +23467,26 @@ Fit.Controls.Input = function(ctlId)
 					designEditorConfig = Fit.Core.Clone(editorConfig); // Clone to prevent external code from making changes later
 				}
 
+				// Notice: Identical logic found in Value(..)!
+				if (designEditorConfig !== null && designEditorConfig.Plugins && designEditorConfig.Plugins.Images && designEditorConfig.Plugins.Images.RevokeExternalBlobUrlsOnDispose === true)
+				{
+					// Keep track of image blobs added via Value(..) so we can dispose of them automatically.
+					// When RevokeExternalBlobUrlsOnDispose is True it basically means that the Input control
+					// is allowed (and expected) to take control over memory management for these blobs
+					// based on the rule set in RevokeBlobUrlsOnDispose.
+					// This code is also found in Value(..) since images might be added after editor has been created.
+
+					var blobUrls = Fit.String.ParseImageBlobUrls(me.Value());
+
+					Fit.Array.ForEach(blobUrls, function(blobUrl)
+					{
+						if (Fit.Array.Contains(imageBlobUrls, blobUrl) === false)
+						{
+							Fit.Array.Add(imageBlobUrls, blobUrl);
+						}
+					});
+				}
+
 				if (me.MultiLine() === false)
 				{
 					me.MultiLine(true);
@@ -23363,6 +23827,11 @@ Fit.Controls.Input = function(ctlId)
 
 				var focused = me.Focused();
 
+				if (focused === true) // Make sure focus is preserved when editor is destroyed
+				{
+					me.GetDomElement().focus();
+				}
+
 				if (Fit._internal.Controls.Input.ActiveEditorForDialog === me)
 				{
 					if (Fit._internal.Controls.Input.ActiveDialogForEditor !== null)
@@ -23413,31 +23882,25 @@ Fit.Controls.Input = function(ctlId)
 				me._internal.Data("toolbar-sticky", null);
 
 				revertToSingleLineIfNecessary();
-
-				// Remove tabindex used to prevent control from losing focus when clicking toolbar buttons
-				Fit.Dom.Attribute(me.GetDomElement(), "tabindex", null);
-
 				if (focused === true)
 				{
-					if (Fit.Browser.GetBrowser() === "MSIE" && Fit.Browser.GetVersion() < 9 && me.MultiLine() === false)
-					{
-						// On IE8 input.focus() does not work if input field is switched to a single line control
-						// above (MultiLine(false)). Wrapping the code in setTimeout(..) solves the problem.
+					// On IE8 input.focus() does not work if input field is switched to a traditional input field,
+					// or if input field is hidden/invisible. It's just not reliable and not worth it. Remove focus
+					// from the control in IE8 when DesignMode is disabled and preserve focus in every other browser.
 
-						setTimeout(function()
-						{
-							if (me === null)
-								return; // Control was disposed
-
-							input.focus();
-						}, 0);
+					if (isIe8 === false)
+					{
+						input.focus();
 					}
 					else
 					{
-						input.focus();
+						me.GetDomElement().blur(); // Control container was given focus further up - this will fire OnBlur as expected
 					}
 				}
 
+				// Remove tabindex used to prevent control from losing focus when clicking toolbar buttons
+				Fit.Dom.Attribute(me.GetDomElement(), "tabindex", null);
+
 				repaint();
 			}
 		}
@@ -23471,6 +23934,17 @@ Fit.Controls.Input = function(ctlId)
 		return debounceOnChangeTimeout;
 	}
 
+	// ============================================
+	// Protected
+	// ============================================
+
+	this._internal = (this._internal ? this._internal : {});
+
+	this._internal.DesignModeEnabledAndReady = function()
+	{
+		return designModeEnabledAndReady();
+	}
+
 	// ============================================
 	// Private
 	// ============================================
@@ -23533,8 +24007,8 @@ Fit.Controls.Input = function(ctlId)
 		}
 
 		var langSupport = ["da", "de", "en"];
-		var locale = Fit.Internationalization.Locale().length === 2 ? Fit.Internationalization.Locale() : Fit.Internationalization.Locale().substring(0, 2);
-		var lang = Fit.Array.Contains(langSupport, locale) === true ? locale : "en";
+		var localeCode = Fit.Internationalization.Locale().length === 2 ? Fit.Internationalization.Locale() : Fit.Internationalization.Locale().substring(0, 2);
+		var lang = Fit.Array.Contains(langSupport, localeCode) === true ? localeCode : "en";
 		var plugins = [];
 		var toolbar = [];
 		var mentions = [];
@@ -23548,7 +24022,7 @@ Fit.Controls.Input = function(ctlId)
 			Fit.Array.Add(plugins, "emoji");
 		}
 
-		if ((config.Plugins && config.Plugins.Images && config.Plugins.Images.Enabled === true) || (config.Toolbar && config.Toolbar.Images === true))
+		if (designModeEnableImagePlugin() === true)
 		{
 			if (config.Toolbar && config.Toolbar.Images === true)
 			{
@@ -23558,6 +24032,8 @@ Fit.Controls.Input = function(ctlId)
 			plugins = Fit.Array.Merge(plugins, ["base64imagepaste", "dragresize"]);
 		}
 
+		Fit.Array.Add(plugins, "custombuttons");
+
 		// Add toolbar buttons
 
 		if (!config.Toolbar || config.Toolbar.Formatting !== false)
@@ -23618,6 +24094,43 @@ Fit.Controls.Input = function(ctlId)
 					items: insert
 				});
 			}
+
+			var customButtons = [];
+			var customToolbarGroups = [];
+
+			if (config.Toolbar.Detach === true)
+			{
+				Fit.Array.Add(customButtons,
+				{
+					Label: locale.Detach,
+					Command: "Detach",
+					Icon: Fit.GetUrl() + "/Controls/Input/" + (window.devicePixelRatio === 2 ? "maximize-highres.png" : "maximize.png"),
+					Callback: function(args)
+					{
+						//console.log("Command " + args.Command.name + " executed", args);
+						openDetachedDesignEditor();
+					}
+				});
+
+				/*Fit.Array.Add(customButtons,
+				{
+					Label: "Testing 1-2-3",
+					Command: "TestButton",
+					Icon: "/files/images/Bird.png",
+					Callback: function(args)
+					{
+						alert("Hello world");
+					}
+				});*/
+
+				Fit.Array.Add(customToolbarGroups,
+				{
+					name: "DetachableEditor",
+					items: ["Detach"/*, "TestButton"*/]
+				});
+			}
+
+			toolbar = Fit.Array.Merge(toolbar, customToolbarGroups);
 		}
 
 		// Configure tags/mentions plugin
@@ -23891,6 +24404,7 @@ Fit.Controls.Input = function(ctlId)
 			resize_dir: resizable === Fit.Controls.InputResizing.Enabled ? "both" : resizable === Fit.Controls.InputResizing.Vertical ? "vertical" : resizable === Fit.Controls.InputResizing.Horizontal ? "horizontal" : "none", // Specific to resize plugin (horizontal | vertical | both - https://ckeditor.com/docs/ckeditor4/latest/features/resize.html)
 			toolbar: toolbar,
 			removeButtons: "", // Set to empty string to prevent CKEditor from removing buttons such as Underline
+			customButtons: customButtons,
 			mentions: mentions,
 			emoji_minChars: 9999, // Impossible requirement to number of search characters to "disable" emoji auto complete menu - we cannot make it work properly with light dismissable panels/callouts since we have no event available for registering the data-disable-light-dismiss="true" attribute, and it's not very useful in any case
 			on:
@@ -23989,17 +24503,21 @@ Fit.Controls.Input = function(ctlId)
 						if (Fit.Dom.GetComputedStyle(toolbarContainer, "position") === "sticky") // False on non-supported browsers as position:sticky is applied via the @supports CSS rule
 						{
 							var scrollParent = Fit.Dom.GetScrollParent(me.GetDomElement());
-							var toolbarPosition = me._internal.Data("toolbar-position"); // top | bottom
 
-							if (toolbarPosition === "top")
+							if (scrollParent !== null) // In case editor is hosted in a container with position:fixed with overflow:hidden, in which case Fit.Dom.GetScrollParent(..) returns null
 							{
-								var paddingOffset = Fit.Dom.GetComputedStyle(scrollParent, "padding-top"); // E.g. "28px"
-								toolbarContainer.style.top = paddingOffset !== "0px" ? "-" + paddingOffset : "";
-							}
-							else
-							{
-								var paddingOffset = Fit.Dom.GetComputedStyle(scrollParent, "padding-bottom"); // E.g. "28px"
-								toolbarContainer.style.bottom = paddingOffset !== "0px" ? "-" + paddingOffset : "";
+								var toolbarPosition = me._internal.Data("toolbar-position"); // top | bottom
+
+								if (toolbarPosition === "top")
+								{
+									var paddingOffset = Fit.Dom.GetComputedStyle(scrollParent, "padding-top"); // E.g. "28px"
+									toolbarContainer.style.top = paddingOffset !== "0px" ? "-" + paddingOffset : "";
+								}
+								else
+								{
+									var paddingOffset = Fit.Dom.GetComputedStyle(scrollParent, "padding-bottom"); // E.g. "28px"
+									toolbarContainer.style.bottom = paddingOffset !== "0px" ? "-" + paddingOffset : "";
+								}
 							}
 						}
 					}
@@ -24163,7 +24681,7 @@ Fit.Controls.Input = function(ctlId)
 						// place focus at the end of the editor as expected.
 						if (me.Focused() === true)
 						{
-							designEditor.focus();
+							designEditor.focus(); // Won't work on iOS as assigning focus must be the result of a direct user interaction, which this is not since it is postponed using setTimeout(..) and async. loading of the editor
 						}
 					}, 0);
 				},
@@ -24229,11 +24747,18 @@ Fit.Controls.Input = function(ctlId)
 
 					if (elm.tagName === "A" && Fit.Dom.Data(elm, "tag-id") !== null)
 					{
-						designEditorSuppressPaste = true;
-						setTimeout(function() // Postpone - otherwise we won't be able to temporarily disable some of the buttons (https://jsfiddle.net/ymv56znq/14/)
+						// Notice that selectionChange handler is invoked while editor is loading if control was given initial focus.
+						// But at this point the toolbar buttons are not yet available to be disabled, so disableDesignEditorButtons()
+						// won't work. However, as soon as the editor is done loading, focus is re-assigned to the editable area
+						// which will trigger selectionChange handler once again, at which point designModeEnabledAndReady() returns true.
+						if (designModeEnabledAndReady() === true)
 						{
-							disableDesignEditorButtons();
-						}, 0);
+							designEditorSuppressPaste = true;
+							setTimeout(function() // Postpone - otherwise we won't be able to temporarily disable some of the buttons (https://jsfiddle.net/ymv56znq/14/)
+							{
+								disableDesignEditorButtons();
+							}, 0);
+						}
 					}
 					else
 					{
@@ -24562,6 +25087,258 @@ Fit.Controls.Input = function(ctlId)
 		}
 	}
 
+	function openDetachedDesignEditor()
+	{
+		me._internal.FocusStateLocked(true);
+
+		var deConfig = null;
+
+		var updateDetachedConfiguration = function()
+		{
+			deConfig = Fit.Core.Clone(designEditorConfig || {});
+
+			// Configure detached editor like original, but with a few required changes.
+			// We need to make sure image blobs are handled properly, that detached editor
+			// cannot created another detached editor, that the toolbar is initially visible
+			// at the top of the dialog, and that auto grow is disabled.
+
+			if (designModeEnableImagePlugin() === true)
+			{
+				deConfig = Fit.Core.Merge(deConfig, // Override image plugin configuration
+				{
+					Plugins:
+					{
+						Images:
+						{
+							Enabled: true,
+							EmbedType: deConfig.Plugins && deConfig.Plugins.Images && deConfig.Plugins.Images.EmbedType,
+
+							// Image blobs added in detached editor must always be disposed if no longer referenced.
+							// Furthermore we make sure image blobs originating from main editor are never disposed.
+							// When detached editor is closed, images transfered from detached editor to main editor
+							// are added to the main editor's index over image blobs so that the main editor becomes
+							// responsible for the memory management of these.
+							// If detached editor is closed without transfering changes (canceled), all images found
+							// in the detached editor, which are not referenced in the main editor, are disposed.
+							// See OnClick handlers for OK and Cancel buttons.
+
+							RevokeBlobUrlsOnDispose: "UnreferencedOnly",	// Make dialog editor preserve newly added (and still referenced) image blobs when disposed
+							RevokeExternalBlobUrlsOnDispose: false			// Make dialog editor preserve images blobs initially added from main editor
+						}
+					}
+				});
+			}
+
+			deConfig.Toolbar = deConfig.Toolbar || {};
+			deConfig.Toolbar.Detach = false;
+			deConfig.Toolbar.Position = "Top";
+			deConfig.Toolbar.Sticky = false;
+			deConfig.Toolbar.HideInitially = false;
+
+			delete deConfig.AutoGrow;
+		};
+
+		updateDetachedConfiguration();
+
+		// Create dialog
+
+		var dia = new Fit.Controls.Dialog();
+		Fit.Dom.AddClass(dia.GetDomElement(), "FitUiControlInputDetached");
+
+		// Create editor
+
+		var de = new Fit.Controls.Input();
+
+		var setDetachedEditorSettings = function()
+		{
+			de.Width(100, "%");
+			de.Height(-1);
+			de.CheckSpelling(me.CheckSpelling());
+			de.DesignMode(true, deConfig);
+		};
+
+		setDetachedEditorSettings();
+		de.Value(me.Value());
+
+		// Make editor adjust to the dimensions of the dialog
+
+		// Adjust editor size to fit dialog using a timer.
+		// Alternatively expose an OnResize event on Fit.Controls.Dialog, use it in
+		// combination with window.onresize, and adjust editor when these events are triggered.
+		// However, the process of monitoring the dimensions using a timer is practically free,
+		// so even though the timer interupts browser events such as onmousemove, onscroll, etc.,
+		// it creates no lack at all.
+		var height = -1
+		var dimMonitorId = setInterval(function()
+		{
+			if (height === -1 && de._internal.DesignModeEnabledAndReady() === false)
+			{
+				return;
+			}
+
+			var newHeight = dia.GetDomElement().offsetHeight;
+
+			if (newHeight !== height)
+			{
+				height = newHeight
+				de.Height(Fit.Dom.GetInnerDimensions(dia.GetContentDomElement()).Height);
+			}
+		}, 250);
+
+		// Configure dialog
+
+		var setDialogSettings = function(update)
+		{
+			var detachConfig = deConfig.Detachable || {};
+			detachConfig = Fit.Core.Merge(detachConfig, // Apply default values - existing properties are preserved (Fit.Core.MergeOverwriteBehaviour.Never)
+			{
+				Title: "",
+				Maximizable: true,
+				Maximized: false,
+				Draggable: true,
+				Resizable: true,
+				Width: detachConfig.Width ? detachConfig.Width : { Value: 850, Unit: "px" },
+				MinimumWidth: detachConfig.MinimumWidth ? detachConfig.MinimumWidth : { Value: 20, Unit: "em" },
+				MaximumWidth: detachConfig.MaximumWidth ? detachConfig.MaximumWidth : { Value: 100, Unit: "%" },
+				Height: detachConfig.Height ? detachConfig.Height : { Value: 550, Unit: "px" },
+				MinimumHeight: detachConfig.MinimumHeight ? detachConfig.MinimumHeight : { Value: 12, Unit: "em" },
+				MaximumHeight: detachConfig.MaximumHeight ? detachConfig.MaximumHeight : { Value: 100, Unit: "%" }
+			}, Fit.Core.MergeOverwriteBehaviour.Never);
+
+			var updateDimensions = (!detachConfig.Resizable || update !== true);
+
+			dia.Title(detachConfig.Title);
+			dia.Modal(true);
+			dia.Draggable(detachConfig.Draggable);
+			dia.Resizable(detachConfig.Resizable);
+			dia.Maximizable(detachConfig.Maximizable);
+			dia.Maximized(detachConfig.Maximized);
+			updateDimensions === true && dia.Width(detachConfig.Width.Value, detachConfig.Width.Unit || "px");
+			updateDimensions === true && dia.Height(detachConfig.Height.Value, detachConfig.Height.Unit || "px");
+			dia.MinimumWidth(detachConfig.MinimumWidth.Value, detachConfig.MinimumWidth.Unit || "px");
+			dia.MinimumHeight(detachConfig.MinimumHeight.Value, detachConfig.MinimumHeight.Unit || "px");
+			dia.MaximumWidth(detachConfig.MaximumWidth.Value, detachConfig.MaximumWidth.Unit || "px");
+			dia.MaximumHeight(detachConfig.MaximumHeight.Value, detachConfig.MaximumHeight.Unit || "px");
+		};
+
+		setDialogSettings();
+
+		// Localization support
+
+		var localizeDetachedEditor = function()
+		{
+			// Editor itself is already localized, so we just need to
+			// localize the dialog. The locale variable will already have
+			// been updated by the OnLocaleChanged handler registered in init().
+
+			cmdOk.Title(locale.Ok);
+			cmdCancel.Title(locale.Cancel);
+		};
+		Fit.Internationalization.OnLocaleChanged(localizeDetachedEditor);
+
+		// Expose detached editor API
+
+		designEditorDetached =
+		{
+			GetValue: function()
+			{
+				return de.Value();
+			},
+
+			Reload: function()
+			{
+				// Update configuration
+				updateDetachedConfiguration();
+
+				// Update editor
+				setDetachedEditorSettings();
+
+				// Update dialog
+				setDialogSettings(true);
+
+				// Make dimension monitor ensure proper editor height (dialog height might have been changed)
+				height = -1;
+			},
+
+			Dispose: function()
+			{
+				clearInterval(dimMonitorId);
+				Fit.Internationalization.RemoveOnLocaleChanged(localizeDetachedEditor);
+				de.Dispose();
+				dia.Dispose(); // Will also dispose associated buttons
+				designEditorDetached = null;
+			}
+		};
+
+		var cmdOk = new Fit.Controls.Button();
+		cmdOk.Title(locale.Ok);
+		cmdOk.Icon("check");
+		cmdOk.Type(Fit.Controls.ButtonType.Success);
+		cmdOk.OnClick(function(sender)
+		{
+			var referencedBlobUrls = Fit.String.ParseImageBlobUrls(de.Value());
+			Fit.Array.ForEach(referencedBlobUrls, function(blobUrl)
+			{
+				if (Fit.Array.Contains(imageBlobUrls, blobUrl) === false)
+				{
+					Fit.Array.Add(imageBlobUrls, blobUrl);
+				}
+			});
+
+			me.Value(de.Value());
+
+			designEditorDetached.Dispose();
+
+			me.Focused(true);
+			me._internal.FocusStateLocked(false);
+		});
+		dia.AddButton(cmdOk);
+
+		var cmdCancel = new Fit.Controls.Button();
+		cmdCancel.Title(locale.Cancel);
+		cmdCancel.Icon("ban");
+		cmdCancel.Type(Fit.Controls.ButtonType.Danger);
+		cmdCancel.OnClick(function(sender)
+		{
+			var closeDialog = function()
+			{
+				var referencedBlobUrls = Fit.String.ParseImageBlobUrls(de.Value());
+				Fit.Array.ForEach(referencedBlobUrls, function(blobUrl)
+				{
+					if (Fit.Array.Contains(imageBlobUrls, blobUrl) === false) // Only remove images added in dialog editor
+					{
+						URL.revokeObjectURL(blobUrl);
+					}
+				});
+
+				designEditorDetached.Dispose();
+
+				me.Focused(true);
+				me._internal.FocusStateLocked(false);
+			};
+
+			if (de.IsDirty() === true)
+			{
+				Fit.Controls.Dialog.Confirm(locale.CancelConfirmTitle + "<br><br>" + locale.CancelConfirmDescription, function(res)
+				{
+					if (res === true)
+					{
+						closeDialog();
+					}
+				});
+			}
+			else
+			{
+				closeDialog();
+			}
+		});
+		dia.AddButton(cmdCancel);
+
+		dia.Open();
+		de.Render(dia.GetContentDomElement());
+		de.Focused(true);
+	}
+
 	function revertToSingleLineIfNecessary()
 	{
 		if (wasAutoChangedToMultiLineMode === true && me.Maximizable() === false && me.Resizable() === Fit.Controls.InputResizing.Disabled && me.DesignMode() === false)
@@ -24625,10 +25402,25 @@ Fit.Controls.Input = function(ctlId)
 		var height = me.Height();
 		var currentWasAutoChangedToMultiLineMode = wasAutoChangedToMultiLineMode; // DesignMode(false) will result in wasAutoChangedToMultiLineMode being set to false if DesignMode(true) changed the control to MultiLine mode
 
+		// Prevent detached editor from being closed when reloading, e.g. if CheckSpelling is changed.
+		// Editor will also be reloaded if a different editor configuration is passed to DesignMode(true, updatedConfig).
+		var detachedEditor = null;
+		if (designEditorDetached !== null)
+		{
+			detachedEditor = designEditorDetached;
+			designEditorDetached = null; // Prevent me.DesignMode(false), which in turn calls destroyDesignEditorInstance(), from closing detached editor dialog
+		}
+
 		me.DesignMode(false);
 		me.DesignMode(true, reloadConfig || designEditorReloadConfig || undefined); // Use reloadConfig if set (and if reload was not postponed) or use designEditorReloadConfig if reload was postponed with updated editor config
 		designEditorReloadConfig = null;
 
+		if (detachedEditor !== null)
+		{
+			designEditorDetached = detachedEditor;
+			designEditorDetached.Reload(); // Reload detached editor to reflect any changes made to configuration
+		}
+
 		me.Height(height.Value, height.Unit);
 		wasAutoChangedToMultiLineMode = currentWasAutoChangedToMultiLineMode;
 	}
@@ -24647,9 +25439,14 @@ Fit.Controls.Input = function(ctlId)
 
 		designEditor.destroy();
 
+		if (designEditorDetached !== null)
+		{
+			designEditorDetached.Dispose();
+		}
+
 		designEditor = null;
 		designEditorDom = null;
-		designEditorDirty = false;
+		//designEditorDirty = false; // Do NOT reset this! We need to preserve dirty state in case DesignMode is reloaded!
 		designEditorDirtyPending = false;
 		//designEditorConfig = null; // Do NOT nullify this! We need it, in case DesignMode is toggled!
 		//designEditorReloadConfig = null; // Do NOT nullify this! We need it, in case DesignMode is reloaded!
@@ -24659,6 +25456,7 @@ Fit.Controls.Input = function(ctlId)
 		designEditorMustReloadWhenReady = false;
 		designEditorMustDisposeWhenReady = false;
 		designEditorActiveToolbarPanel = null;
+		designEditorDetached = null;
 
 		if (designEditorUpdateSizeDebouncer !== -1)
 		{
@@ -24690,12 +25488,47 @@ Fit.Controls.Input = function(ctlId)
 		return designEditorDom !== null; // Editor is fully loaded when editor DOM is made available
 	}
 
+	function designModeEnableImagePlugin()
+	{
+		var config = designEditorConfig || {};
+		var enableImagePlugin = (config.Plugins && config.Plugins.Images && config.Plugins.Images.Enabled === true) || (config.Toolbar && config.Toolbar.Images === true) || false;
+
+		// Force enable image support if images are contained in value - otherwise editor will remove them
+		if (enableImagePlugin === false && designEditorDetached !== null && designEditorDetached.GetValue().indexOf("<img ") > -1)
+		{
+			enableImagePlugin = true;
+		}
+		if (enableImagePlugin === false && me.Value().indexOf("<img ") > -1)
+		{
+			enableImagePlugin = true;
+		}
+
+		return enableImagePlugin;
+	}
+
 	function localize()
 	{
+		locale = Fit.Internationalization.GetLocale(me);
+
 		if (me.DesignMode() === true)
 		{
+			// Prevent reloadEditor() from reloading detached editor.
+			// It will automatically reload when locale is changed.
+			// Without this guard the editor would reload twice.
+			var detachedEditor = null;
+			if (designEditorDetached !== null)
+			{
+				detachedEditor = designEditorDetached;
+				designEditorDetached = null; // Prevent reloadEditor() from reloading detached editor
+			}
+
 			// Re-create editor with new language
 			reloadEditor();
+
+			if (detachedEditor !== null)
+			{
+				designEditorDetached = detachedEditor;
+			}
 		}
 	}
 
@@ -24812,6 +25645,40 @@ Fit.Controls.InputResizing = // Enums must exist runtime
 	Horizontal: "Horizontal",
 	Vertical: "Vertical"
 };
+Fit.Internationalization.AddLocalization(Fit.Controls.Input,
+{
+	// Primary locales must be registered before country specific overrides.
+	// Example order: en, en_GB, de, de_AT, etc.
+	// All locales inherit from en. All country specific overrides inherit
+	// from their general locale (e.g. de_AT inherits from de).
+	// English (en) MUST be defined, and be defined first!
+
+	"en":
+	{
+		"Detach": "Open in dialog",
+		"Ok": "OK",
+		"Cancel": "Cancel",
+		"CancelConfirmTitle": "Discard changes?",
+		"CancelConfirmDescription": "Are you sure you want to discard the changes?"
+	},
+	"da":
+	{
+		"Detach": "Åben i dialog",
+		"Ok": "OK",
+		"Cancel": "Annullér",
+		"CancelConfirmTitle": "Annullér ændringer?",
+		"CancelConfirmDescription": "Er du sikker på at du vil annullere ændringerne?"
+	},
+	"de":
+	{
+		"Detach": "Im Dialog öffnen",
+		"Ok": "OK",
+		"Cancel": "Abbrechen",
+		"CancelConfirmTitle": "Änderungen verwerfen?",
+		"CancelConfirmDescription": "Möchten Sie die Änderungen wirklich verwerfen?"
+	}
+});
+
 /// <container name="Fit.Controls.ListView" extends="Fit.Controls.PickerBase;Fit.Controls.Component">
 /// 	Picker control which allows for entries
 /// 	to be selected in the DropDown control.
@@ -26130,7 +26997,7 @@ Fit.Controls.SoftLog = function(controlId)
 
 	/// <function container="Fit.Controls.SoftLog" name="MaxEntries" access="public" returns="integer">
 	/// 	<description> Get/set number of log entries preserved </description>
-	/// 	<param name="val" type="boolean" default="undefined"> If defined, changes number of log entries preserved </param>
+	/// 	<param name="val" type="integer" default="undefined"> If defined, changes number of log entries preserved </param>
 	/// </function>
 	this.MaxEntries = function(val)
 	{