Merge branch 'hotfix/hotfix-v27.1.48' into BLAZ-910110-MultiH1C

Author: MalleshRavichandran

blazor-toc.html

@@ -3101,6 +3101,13 @@
 			<li> <a href="/blazor/image-editor/redact">Redact</a></li>
 			<li> <a href="/blazor/image-editor/localization">Localization</a></li>
 			<li> <a href="/blazor/image-editor/accessibility">Accessibility</a></li>
+			<li>How To
+				<ul>
+					<li> <a href="/blazor/input-mask/how-to/clear-image">Clear an Image</a></li>
+					<li> <a href="/blazor/input-mask/how-to/render-dialog">Render Dialog in Image Editor</a></li>
+					<li> <a href="/blazor/input-mask/how-to/reset"></a>Reset an image</li>
+				</ul>
+			</li>
 			<li>
 				<a href="/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html"> API Reference</a>
 			</li>

blazor/image-editor/annotation.md

@@ -656,3 +656,33 @@ In the following example, you can use the [`DrawImageAsync`](https://help.syncfu
 ```
 
 ![Blazor Image Editor with Add Image in an image](./images/blazor-image-editor-add-image.png)
+
+### Customize Default Stroke Color for Shapes 
+
+We provide default settings for stroke color, stroke width, fill color, and other customizations. If users wish to modify only the default options while preserving their previously selected customizations, they can do so by utilizing the [`ShapeChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html) event. Within this event, users can update the values in the [`CurrentShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_ShapeChangeEventArgs_CurrentShapeSettings) object to apply their own preferences instead of the defaults. This approach allows conditional updates to the [`CurrentShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_ShapeChangeEventArgs_CurrentShapeSettings), ensuring that only the desired defaults are changed while maintaining the other settings.
+
+```cshtml
+@using Syncfusion.Blazor.ImageEditor
+
+<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
+    <ImageEditorEvents Created="CreatedAsync" ShapeChanging="ShapeChangingAsync"></ImageEditorEvents>
+</SfImageEditor> 
+
+@code {
+    SfImageEditor ImageEditor; 
+    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { }; 
+
+    private async void CreatedAsync() 
+    { 
+        await ImageEditor.OpenAsync("nature.png"); 
+    }
+
+    private async void ShapeChangingAsync(ShapeChangingEventArgs args)
+    {
+        if (args.action === "insert" && args.currentShapeSettings?.type === "FreehandDraw") {
+            args.currentShapeSettings.strokeColor = "red";
+        }
+    }
+}
+```
+![Blazor Image Editor with Default Color](./images/blazor-image-editor-default-stroke-color.jpeg)

blazor/image-editor/how-to/clear-image.md

@@ -0,0 +1,38 @@
+---
+layout: post
+title: Clear an Image with Blazor Image Editor Component | Syncfusion
+description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: Image Editor
+documentation: ug
+---
+
+# Clear an Image in the Blazor Image Editor component
+
+The [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection.
+
+```cshtml
+@using Syncfusion.Blazor.ImageEditor
+@using Syncfusion.Blazor.Buttons
+
+<div style="padding-bottom: 15px">
+    <SfButton OnClick="ClearImageAsync">Clear Image</SfButton>
+</div>
+<SfImageEditor @ref="ImageEditor" Height="400">
+    <ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
+</SfImageEditor> 
+
+@code {
+    SfImageEditor ImageEditor; 
+
+    private async void OpenAsync() 
+    { 
+        await ImageEditor.OpenAsync("nature.png"); 
+    }
+
+    private async void ClearImageAsync()
+    {
+        await ImageEditor.ClearImageAsync();
+    }
+}
+```

blazor/image-editor/how-to/render-dialog.md

@@ -0,0 +1,65 @@
+---
+layout: post
+title: Clear an Image with Blazor Image Editor Component | Syncfusion
+description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: Image Editor
+documentation: ug
+---
+
+# Render Image Editor in Dialog Component
+
+Rendering the Image Editor in a dialog involves displaying the image editor component within a modal dialog window, allowing users to edit images in a pop-up interface. This can be useful for maintaining a clean layout and providing a focused editing experience without navigating away from the current page.
+
+```cshtml
+@using Syncfusion.Blazor.ImageEditor
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Inputs
+
+<div style="padding-bottom: 15px">
+    @if (this.ShowButton)
+    {
+        <SfButton OnClick="OpenDialogAsync">Open Image</SfButton>
+    }
+</div>
+ <SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
+    <DialogTemplates>
+        <Content>
+                <div class="dialogContent">
+                   
+                        <SfImageEditor @ref="ImageEditor" Height="400px">
+                            <ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
+                        </SfImageEditor>
+                </div>
+        </Content>
+    </DialogTemplates>
+    <DialogEvents OnOpen="@BeforeDialogOpen" Closed="@DialogClosed"></DialogEvents> 
+</SfDialog>
+
+@code {
+    private bool Visibility { get; set; } = false;
+    private bool ShowButton { get; set; } = true;
+    SfImageEditor ImageEditor; 
+
+    private async void OpenDialogAsync() 
+    { 
+        this.Visibility = true;
+    }
+
+    private async void OpenAsync() 
+    { 
+        await ImageEditor.OpenAsync("nature.png"); 
+    }
+
+    private void BeforeDialogOpen(BeforeOpenEventArgs args)
+    {
+        this.ShowButton = false;
+    }
+
+    private void DialogClosed(CloseEventArgs args)
+    {
+        this.ShowButton = true;
+    }
+}
+```

blazor/image-editor/how-to/reset.md

@@ -0,0 +1,14 @@
+---
+layout: post
+title: Reset an Image with Blazor Image Editor Component | Syncfusion
+description: Learn here all about Reset an image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+platform: Blazor
+control: Image Editor
+documentation: ug
+---
+
+# Reset an image in the Blazor Image Editor component
+
+The [`ResetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. 
+
+By invoking the [`ResetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image.