Image Resizing In HtmlEditor

Radzen.Blazor/Common.cs

@@ -3972,4 +3972,46 @@ public enum FrozenColumnPosition
         /// </summary>
         Right
     }
+
+    /// <summary>
+    /// Supplies information about an image resize event in the RadzenHtmlEditor.
+    /// </summary>
+    public class ImageResizeEventArgs
+    {
+        /// <summary>
+        /// Gets or sets the source URL of the resized image.
+        /// </summary>
+        public string Src { get; set; }
+
+        /// <summary>
+        /// Gets or sets the new width of the image.
+        /// </summary>
+        public string Width { get; set; }
+
+        /// <summary>
+        /// Gets or sets the new height of the image.
+        /// </summary>
+        public string Height { get; set; }
+    }
+
+    /// <summary>
+    /// Data structure for image resize information passed from JavaScript.
+    /// </summary>
+    public class ImageResizeData
+    {
+        /// <summary>
+        /// Gets or sets the source URL of the resized image.
+        /// </summary>
+        public string Src { get; set; }
+
+        /// <summary>
+        /// Gets or sets the new width of the image.
+        /// </summary>
+        public string Width { get; set; }
+
+        /// <summary>
+        /// Gets or sets the new height of the image.
+        /// </summary>
+        public string Height { get; set; }
+    }
 }

Radzen.Blazor/RadzenHtmlEditor.razor.cs

@@ -459,6 +459,12 @@ public override void Dispose()
         [Parameter]
         public EventCallback<UploadCompleteEventArgs> UploadComplete { get; set; }
 
+        /// <summary>
+        /// Gets or sets the callback which is invoked when an image is resized.
+        /// </summary>
+        /// <value>The image resize callback.</value>
+        [Parameter]
+        public EventCallback<ImageResizeEventArgs> ImageResize { get; set; }
 
         internal async Task RaiseUploadComplete(UploadCompleteEventArgs args)
         {
@@ -487,5 +493,19 @@ public async Task OnUploadComplete(string response)
 
             await UploadComplete.InvokeAsync(new UploadCompleteEventArgs() { RawResponse = response, JsonResponse = doc });
         }
+
+        /// <summary>
+        /// Invoked by interop when an image is resized.
+        /// </summary>
+        [JSInvokable("OnImageResize")]
+        public async Task OnImageResize(ImageResizeData data)
+        {
+            await ImageResize.InvokeAsync(new ImageResizeEventArgs 
+            { 
+                Src = data.Src, 
+                Width = data.Width, 
+                Height = data.Height 
+            });
+        }
     }
 }

Radzen.Blazor/themes/components/blazor/_editor.scss

@@ -33,6 +33,54 @@ $editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)) !default;
   padding: 0.5rem;
   outline: none;
   background-color: var(--rz-editor-content-background-color);
+
+  img.rz-state-selected {
+    position: relative;
+    outline: 2px solid var(--rz-primary);
+    outline-offset: 2px;
+  }
+
+  .rz-image-resize-handle {
+    position: absolute !important;
+    width: 12px !important;
+    height: 12px !important;
+    background-color: var(--rz-primary) !important;
+    border: 2px solid var(--rz-on-primary) !important;
+    border-radius: 50% !important;
+    cursor: pointer !important;
+    z-index: 1000 !important;
+    pointer-events: all !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
+
+    &.rz-resize-nw {
+      top: -6px !important;
+      left: -6px !important;
+      cursor: nw-resize !important;
+    }
+
+    &.rz-resize-ne {
+      top: -6px !important;
+      right: -6px !important;
+      cursor: ne-resize !important;
+    }
+
+    &.rz-resize-sw {
+      bottom: -6px !important;
+      left: -6px !important;
+      cursor: sw-resize !important;
+    }
+
+    &.rz-resize-se {
+      bottom: -6px !important;
+      right: -6px !important;
+      cursor: se-resize !important;
+    }
+  }
+
+  .rz-image-resize-container {
+    position: relative !important;
+    display: inline-block !important;
+  }
 }
 
 .rz-html-editor-source.rz-textarea {
@@ -62,6 +110,21 @@ $editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)) !default;
   > * {
     margin: var(--rz-editor-toolbar-item-margin);
   }
+
+  .rz-html-editor-colorpicker {
+    .rz-colorpicker {
+      &:not(:disabled):not(.rz-state-disabled):hover {
+        border: none;
+      }
+    }
+
+    .rz-colorpicker-trigger {
+      .rzi {
+        font-size: 1.25rem;
+        height: 1rem;
+      }
+    }
+  }
 }
 
 .rz-html-editor-colorpicker {
@@ -209,22 +272,4 @@ $editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)) !default;
 .rz-html-editor-separator {
   width: 1px;
   background-color: var(--rz-editor-separator-background-color);
-}
-
-.rz-html-editor-toolbar {
-
-  .rz-html-editor-colorpicker {
-    .rz-colorpicker {
-      &:not(:disabled):not(.rz-state-disabled):hover {
-        border: none;
-      }
-    }
-
-    .rz-colorpicker-trigger {
-      .rzi {
-        font-size: 1.25rem;
-        height: 1rem;
-      }
-    }
-  }
 }