Image Resizing In HtmlEditor

Radzen.Blazor/Common.cs

@@ -3972,4 +3972,25 @@ 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; }
+    }
 }

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,14 @@ 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(ImageResizeEventArgs data)
+        {
+            await ImageResize.InvokeAsync(data);
+        }
     }
 }

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

@@ -35,6 +35,56 @@ $editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)) !default;
   background-color: var(--rz-editor-content-background-color);
 }
 
+.rz-html-editor .rz-html-editor-content img.rz-state-selected {
+  position: relative;
+  outline: 2px solid var(--rz-primary);
+  outline-offset: 2px;
+}
+
+.rz-html-editor .rz-html-editor-content {
+  .rz-image-resize-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: var(--rz-primary);
+    border: 2px solid var(--rz-on-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1000;
+    pointer-events: all;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+
+    &.rz-resize-nw {
+      top: -6px;
+      left: -6px;
+      cursor: nw-resize;
+    }
+
+    &.rz-resize-ne {
+      top: -6px;
+      right: -6px;
+      cursor: ne-resize;
+    }
+
+    &.rz-resize-sw {
+      bottom: -6px;
+      left: -6px;
+      cursor: sw-resize;
+    }
+
+    &.rz-resize-se {
+      bottom: -6px;
+      right: -6px;
+      cursor: se-resize;
+    }
+  }
+
+  .rz-image-resize-container {
+    position: relative;
+    display: inline-block;
+  }
+}
+
 .rz-html-editor-source.rz-textarea {
     --rz-input-hover-shadow: none;
     --rz-input-border: none;
@@ -62,6 +112,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 +274,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;
-      }
-    }
-  }
 }