998697: Need to update and improve UG contents of Blockeditor based on API refinements

ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md

@@ -3,7 +3,7 @@ layout: post
 title: Appearance in ##Platform_Name## Block Editor Control | Syncfusion
 description: Checkout and learn about appearance with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details.
 platform: ej2-asp-core-mvc
-control: Block Editor
+control: BlockEditor
 publishingplatform: ##Platform_Name##
 documentation: ug
 ---
@@ -31,7 +31,7 @@ You can specify the width and height for the Block Editor control using the [Wid
 
 ## Setting readonly mode
 
-You can utilize the [Readonly](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ReadOnly) property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it.
+You can utilize the [ReadOnly](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ReadOnly) property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it.
 
 ```cshtml
 

ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md

@@ -3,7 +3,7 @@ layout: post
 title: Blocks in ##Platform_Name## Block Editor control | Syncfusion
 description: Checkout and learn about Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
-control: Block Editor
+control: BlockEditor
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
@@ -15,9 +15,9 @@ The Block Editor control enables you to create block-based content editing solut
 
 ## Blocks
 
-Blocks are the fundamental building elements of the Block Editor. Each block represents a distinct content unit such as a `paragraph`, `heading`, `list`, or specialized content like `code snippets` or `images`. The Block Editor organizes content as a collection of `blocks`, allowing for better structure and formatting options.
+Blocks are the fundamental building elements of the Block Editor. Each block represents a distinct content unit such as a `Paragraph`, `Heading`, `List`, or specialized content like `Code Snippets` or `Images`. The Block Editor organizes content as a collection of `blocks`, allowing for better structure and formatting options.
 
-You can configure blocks with various properties such as [Id](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Id), [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type), [Content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Content), [Children](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) and more to create rich, structured editor.
+You can configure blocks with various properties such as `id`, `blockType`, `content` and more to create rich and structured editor.
 
 ## Block types
 
@@ -40,9 +40,9 @@ The Block Editor supports multiple block types. Each block type offers different
 
 ## Configure indent
 
-You can specify the indentation level of a block using the [Indent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
+You can specify the indentation level of a block using the `indent` property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
 
-By default, the [Indent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property is set to `0`.
+By default, the `indent` property is set to `0`.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -57,7 +57,7 @@ By default, the [Indent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion
 
 ## Configure CSS Class
 
-You can apply custom styling to individual blocks using the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_CssClass) property. This property accepts a string containing one or more CSS class names.
+You can apply custom styling to individual blocks using the `cssClass` property. This property accepts a string containing one or more CSS class names.
 
 Custom CSS classes allow you to define specialized styling for specific blocks in your editor.
 
@@ -74,7 +74,7 @@ Custom CSS classes allow you to define specialized styling for specific blocks i
 
 ## Configure templates
 
-The Block Editor allows you to use custom templates for specialized content using the [Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Template)  property. Templates can be defined as strings, functions, or HTML elements.
+The Block Editor allows you to use custom templates for specialized content using the `template` property. Templates can be defined as strings, functions, or HTML elements.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}

ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/code-block.md

@@ -3,63 +3,40 @@ layout: post
 title: Code Block in ##Platform_Name## Block Editor control | Syncfusion
 description: Checkout and learn about Code Block with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
-control: Block Editor
+control: BlockEditor
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
 # Code Blocks in ##Platform_Name## Block Editor control
 
-You can render Code blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Code`. By setting the `Props` property, you can configure the languages available for syntax highlighting and the default language. The default language is `javascript`.
+You can render Code blocks by setting the `blockType` property as `Code`. By setting the `properties` property, you can configure the default language. The default language is `plainText`.
 
-## Configure code properties
+## Global Code Settings
 
-For Code blocks, you can configure syntax highlighting and language options using the [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property.
+You can configure global settings for code blocks using the `CodeBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for syntax highlighting and language options across all code blocks.
 
-The code [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options:
+The `CodeBlockSettings` property supports the following options:
 
 | Property | Description | Default Value |
 |----------|-------------|---------------|
-| languages | Array of language options for syntax highlighting | [] |
-| defaultLanguage | The default language to use for syntax highlighting | 'javascript' |
+| [languages](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.CodeBlockSettingsModel.html#Syncfusion_EJ2_BlockEditor_CodeBlockSettingsModel_Languages) | Specifies the array of language options for syntax highlighting. | [] |
+| [defaultLanguage](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.CodeBlockSettingsModel.html#Syncfusion_EJ2_BlockEditor_CodeBlockSettingsModel_DefaultLanguage) | Defines the default language to use for syntax highlighting. | 'plaintext' |
 
 Each language object in the `languages` array should have:
 - `language`: The language value used for syntax highlighting
 - `label`: The display name shown in the language selector
 
-### Type & Props
-```typescript
-// Adding Code block
-{
-    Type = BlockType.Code,
-    Content = new List<object>()
-    {
-            new 
-            {
-                    type = "Text",
-                    content = "function greeting() {\n  console.log(\"Hello, world!\");\n}"
-            }
-    },
-    Props = new
-    {
-            defaultLanguage = "javascript",
-            languages = new List<object>()
-            {
-                    new
-                    {
-                            label = "JavaScript",
-                            language = "javascript"
-                    },
-                    new
-                    {
-                            label = "TypeScript",
-                            language = "typescript"
-                    }
-            }
-    }
-    }
-```
+## Configure code properties
+
+For Individual Code blocks, you can configure default language using the `properties` property in the block model.
+
+The property supports the following options:
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| language | The default language to use for syntax highlighting | '' |
 
 Below example illustrates how to render the different code block in the Block Editor.
 

ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/embed.md

@@ -3,7 +3,7 @@ layout: post
 title: Embed Blocks in ##Platform_Name## Block Editor control | Syncfusion
 description: Checkout and learn about Embed Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
-control: Block Editor
+control: BlockEditor
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
@@ -15,53 +15,40 @@ Block Editor supports addition of embeds to help you organize, showcase contents
 
 ## Image Block
 
-You can use the `image` block to showcase an image content within your editor.
+You can use the `Image` block to showcase an image content within your editor.
 
-### Configure image block
+### Configure Image Block
 
-You can render Image blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Image`. By setting the `Props` property, you can configure the image source, allowed file types, and display dimensions etc.
+You can render an `Image` block by setting the `blockType` property to `Image` in the block model. The `properties` property allows you to configure the image source, allowed file types, display dimensions, and more.
 
-The image [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options:
+#### Global Image Settings
+
+You can configure global settings for image blocks using the `ImageBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for image uploads, resizing, and display.
+
+The `ImageBlockSettings` property supports the following options:
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| saveFormat | Specifies the format to save the image. | `Base64` |
+| allowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` |
+| width | Specifies the default display width of the image. | `auto` |
+| height | Specifies the default display height of the image. | `auto` |
+| enableResize | Enables or disables image resizing. | `true` |
+| minWidth | Minimum width allowed for resizing. | `''` |
+| maxWidth | Maximum width allowed for resizing. | `''` |
+| minHeight | Minimum height allowed for resizing. | `''` |
+| maxHeight | Maximum height allowed for resizing. | `''` |
+
+#### Configure Image Block Properties
+
+The `Image` block `properties` property in the block model supports the following options:
 
 | Property | Description | Default Value |
 |----------|-------------|---------------|
-| saveFormat | Specifies the format to save the image | Base64 |
-| src | Specifies the image path | ' '|
-| allowedTypes | Specifies the allowed image file types that can be uploaded | ['.jpg', '.jpeg', '.png'] |
-| width | Specifies the display width of the image | ' ' |
-| height | Specifies the display height of the image | ' '|
-| minWidth | Specifies the minimum width of the image in pixels or as a string unit | 40|
-| maxWidth | Specifies the maximum width of the image in pixels or as a string unit | ' '|
-| minHeight | Specifies the minimum height of the image in pixels or as a string unit | 40|
-| maxHeight | Specifies the maximum height of the image in pixels or as a string unit | ' '|
-| altText | Specifies the alternative text to be displayed when the image cannot be loaded | ' '|
-| cssClass | Specifies one or more CSS classes to be applied to the image element | ' ' |
-| readOnly | Specifies whether the image is in read-only mode | false
-
-
-### Type & Props
-
-```typescript
-// Adding image block
- {
-    Type = BlockType.Image,
-    Props = new
-    {
-        src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png",
-        altText = "Sample image"       
-        saveFormat= "Base64",
-        allowedTypes = ['.png', '.gif'],
-        width = '200px',
-        height = '100px',
-        minWidth = 50,
-        maxWidth = 500,
-        minHeight = 50,
-        maxHeight = 300,
-        cssClass = 'img-custom',
-        readOnly = true
-    }
-}
-```
+| src | Specifies the image path. | `''` |
+| width | Specifies the display width of the image. | `''` |
+| height | Specifies the display height of the image. | `''` |
+| altText | Specifies the alternative text to display when the image cannot be loaded. | `''` |
 
 The below sample demonstrates the configuration of image block in the Block Editor.