Merge pull request #4698 from syncfusion-content/998697-updated-snippets

998697: Need to ensure the sample and  contents of Blockeditor based on API refinements

Author: IndrajithSrinivasan

ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md

@@ -62,4 +62,4 @@ You can use the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusi
 {% endhighlight %}
 {% endtabs %}
 
-![Appearance](images/appearance.png)
+![Appearance](./../images/appearance.png)

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

@@ -11,13 +11,13 @@ domainurl: ##DomainURL##
 
 # Blocks in ##Platform_Name## Block Editor control
 
-The Block Editor control enables you to create block-based content editing solution using various types of blocks. The [Blocks](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Blocks.html) property allows you to define and manage the content structure of your editor.
+The Block Editor control enables you to create block-based content editing solution using various types of blocks. The [Blocks](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_Blocks) property allows you to define and manage the content structure of your editor.
 
 ## 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.
 
-You can configure blocks with various properties such as `id`, `blockType`, `content` and more to create rich and structured editor.
+You can configure blocks with various properties such as `id`, [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html), `content` and more to create rich and structured editor.
 
 ## Block types
 
@@ -53,11 +53,11 @@ By default, the `indent` property is set to `0`.
 {% endhighlight %}
 {% endtabs %}
 
-![Block Indent](images/block-indent.png)
+![Block Indent](./../../images/block-indent.png)
 
 ## Configure CSS Class
 
-You can apply custom styling to individual blocks using the `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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_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.
 
@@ -70,11 +70,11 @@ Custom CSS classes allow you to define specialized styling for specific blocks i
 {% endhighlight %}
 {% endtabs %}
 
-![Block cssClass](images/block-cssClass.png)
+![Block cssClass](./../../images/block-cssClass.png)
 
 ## Configure templates
 
-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.
+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.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Template)  property. Templates can be defined as strings, functions, or HTML elements.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
@@ -85,4 +85,4 @@ The Block Editor allows you to use custom templates for specialized content usin
 {% endhighlight %}
 {% endtabs %}
 
-![Template Block](images/block-template.png)
+![Template Block](./../../images/block-template.png)

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

@@ -11,18 +11,18 @@ domainurl: ##DomainURL##
 
 # Code Blocks in ##Platform_Name## Block Editor control
 
-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`.
+You can render Code blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Code](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Code). By setting the `properties` property, you can configure the default language. The default language is `plainText`.
 
 ## Global Code Settings
 
-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.
+You can configure global settings for code blocks using the [CodeBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CodeBlockSettings) property in the Block Editor root configuration. This ensures consistent behavior for syntax highlighting and language options across all code blocks.
 
-The `CodeBlockSettings` property supports the following options:
+The [CodeBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CodeBlockSettings) property supports the following options:
 
 | Property | Description | Default Value |
 |----------|-------------|---------------|
-| [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' |
+| `languages` | Specifies the array of language options for syntax highlighting. | [] |
+| `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
@@ -49,4 +49,4 @@ Below example illustrates how to render the different code block in the Block Ed
 {% endhighlight %}
 {% endtabs %}
 
-![Code Block](images/block-code.png)
+![Code Block](./../../images/block-code.png)

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

@@ -15,17 +15,17 @@ 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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block to showcase an image content within your editor.
 
 ### Configure Image Block
 
-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.
+You can render an [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property to [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) in the block model. The `properties` property allows you to configure the image source, allowed file types, display dimensions, and more.
 
 #### 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.
+You can configure global settings for image blocks using the [ImageBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_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:
+The [ImageBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ImageBlockSettings) property supports the following options:
 
 | Property | Description | Default Value |
 |----------|-------------|---------------|
@@ -41,7 +41,7 @@ The `ImageBlockSettings` property supports the following options:
 
 #### Configure Image Block Properties
 
-The `Image` block `properties` property in the block model supports the following options:
+The [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block `properties` property in the block model supports the following options:
 
 | Property | Description | Default Value |
 |----------|-------------|---------------|
@@ -50,6 +50,24 @@ The `Image` block `properties` property in the block model supports the followin
 | height | Specifies the display height of the image. | `''` |
 | altText | Specifies the alternative text to display when the image cannot be loaded. | `''` |
 
+### BlockType & Properties
+
+The following example demonstrates how to pre-configure an [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block in the editor.
+
+```typescript
+// Adding image block
+ {
+    blockType = "Image",
+    properties = new
+    {
+        src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png",
+        width = '200px',
+        height = '100px',
+        altText = '',
+    }
+}
+```
+
 The below sample demonstrates the configuration of image block in the Block Editor.
 
 {% tabs %}
@@ -61,4 +79,4 @@ The below sample demonstrates the configuration of image block in the Block Edit
 {% endhighlight %}
 {% endtabs %}
 
-![Image Block](images/block-image.png)
+![Image Block](./../../images/block-image.png)

ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/inline-content.md

@@ -28,6 +28,19 @@ You can specify the type of content using the `contentType` property. The Block
 
 > By default, the content type is set to `Text`.
 
+### ContentType 
+
+```typescript
+// Adding inline text
+{
+    blockType = "Paragraph",
+    content = new List<object>()
+        {
+        new { contentType = 'Text', content = "Inline Text" }
+    }
+}
+```
+
 ## Configure text content
 
 You can configure Text content by setting the `contentType` property to `Text`. The default content type is `Text`.
@@ -46,6 +59,25 @@ Link settings accepts the following options:
 | -------------------------  | ----------------------------------------------------------------- | ------------- |
 |`url`| Specifies the destination URL of the link.     | `''`          |
 
+### ContentType & Properties
+
+```typescript
+{
+    blockType = "Paragraph",
+    content = new List<object>()
+        {
+        new 
+        {
+            contentType = 'Link',
+            content = 'hyperlinks',
+            properties = {
+                url = 'https://ej2.syncfusion.com/documentation',
+            }
+        }
+    }
+}
+```
+
 ## Configure Label
 
 You can render labels by setting the `contentType` property as `Label`. Additionally, by configuring the `properties` property, you can customize how labels behave in your editor. This setup allows you to define the trigger character and specify the available label items.
@@ -61,6 +93,19 @@ The Block Editor comes with offers different built-in options. These include:
 
 You can customize the labels by using the `properties` property with type `Label`.
 
+### ContentType & Properties
+
+```typescript
+// Adding inline label
+{
+    blockType = "Paragraph",
+    content = new List<object>()
+        {
+        new {contentType = 'Label', properties = { lableId = "progress" }}
+        }
+}
+```
+
 ### Trigger Character configuration
 
 You can use the `triggerChar` property to specify the character that will trigger the label suggestions popup while typing. The default trigger character is `$`.
@@ -94,14 +139,29 @@ The below sample demonstrates the customization of labels in the Block Editor.
 {% endhighlight %}
 {% endtabs %}
 
-![Block label-settings](images/block-label.png)
+![Block label-settings](./../../images/block-label.png)
 
 ## Configure mention
 
 Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the `contentType` property to `Mention`.
 
 Mentions are typically triggered by the `@` character and are linked to the `Users` collection defined in the Block Editor.
 
+### ContentType
+
+```typescript
+// Adding inline code
+{
+    blockType = "Paragraph",
+    content = new List<object>()
+    {
+        new { 
+            contentType = "Mention", properties = new { userId = "user1" }
+        }
+    }
+}
+```
+
 ## Applying inline styles
 
 The Block Editor allows you to apply rich formatting to block contents using the `styles` property.

ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/list-types.md

@@ -11,31 +11,98 @@ domainurl: ##DomainURL##
 
 # Lists in ##Platform_Name## Block Editor control
 
-List blocks in the BlockEditor component are used to organize content into structured lists. You can render List blocks by setting the `blockType` property as `BulletList`, `NumberedList`, or `Checklist`. Bullet lists and numbered lists are ideal for unordered and ordered items, respectively, while checklist blocks enable interactive to-do lists with checkable items.
+List blocks in the BlockEditor component are used to organize content into structured lists. You can render List blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [BulletList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_BulletList), [NumberedList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_NumberedList), or [Checklist](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist). Bullet lists and numbered lists are ideal for unordered and ordered items, respectively, while checklist blocks enable interactive to-do lists with checkable items.
 
 ## Configure bullet list 
 
-You can render Bullet List block by setting the `blockType` property as `BulletList`. This block type is used for unordered lists.
+You can render Bullet List block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [BulletList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_BulletList). This block type is used for unordered lists.
+
+### BlockType
+
+```typescript
+// Adding bulletlist block
+{
+    blockType = 'BulletList',
+    content = new List<object>()
+        {
+        new 
+        {
+            contentType = "Text"
+            content = 'your content'
+        }
+    }
+}
+```
 
 ### Configure placeholder
 
 You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for bullet list is  `Add item`.
 
+```typescript
+// Adding placeholder value 
+{
+    blockType = 'BulletList',
+    properties = new { placeholder = "Add item" }
+}
+```
+
 ## Configure numbered list
 
-You can render Numbered List block by setting the `blockType` property as `NumberedList`. This block type is used for ordered lists.
+You can render Numbered List block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [NumberedList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_NumberedList),. This block type is used for ordered lists.
+
+### BlockType
+
+```typescript
+// Adding bulletlist block
+{
+    blockType = 'NumberedList',
+    content = new List<object>()
+    {
+        new 
+        {
+            contentType = "Text"
+            content = 'your content'
+        }
+    }
+}
+```
 
 ### Configure placeholder
 
 You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for numbered list is  `Add item`.
 
+```typescript
+// Adding placeholder value 
+{
+    blockType = 'NumberedList',
+    properties = new { placeholder = "Add item" }
+}
+```
+
 ## Configure checklist
 
-You can render Checklist block by setting the `blockType` property as `Checklist`. This block type is used for creating interactive to-do lists.
+You can render Checklist block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Checklist](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist). This block type is used for creating interactive to-do lists.
+
+### BlockType
+
+```typescript
+// Adding bulletlist block
+{
+    blockType = 'CheckList',
+    content = new List<object>()
+    {
+        new 
+        {
+            contentType = "Text"
+            content = 'your content'
+        }
+    }
+}
+```
 
 ### Configure checked state
 
-For blocks that support selection states such as `Checklist`, you can configure the checked state using the `properties` property with `isChecked`.
+For blocks that support selection states such as [Checklist](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist), you can configure the checked state using the `properties` property with `isChecked`.
 
 By default, the `isChecked` property is set to `false`.
 
@@ -48,23 +115,31 @@ By default, the `isChecked` property is set to `false`.
 {% endhighlight %}
 {% endtabs %}
 
-![Block isChecked](images/block-ischecked.png)
+![Block isChecked](./../../images/block-ischecked.png)
 
 ### Configure placeholder
 
 You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for check list is  `Todo`.
 
+```typescript
+// Adding placeholder value 
+{
+    blockType = 'Checklist',
+    properties = new { placeholder = "Todo" }
+}
+```
+
 ## Configure list blocks
 
 Below example illustrates how to render the different types of list blocks in the Block Editor.
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/razor %}
+{% include code-snippet/blockeditor/blocks/blockTypes/list-block/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="List.cs" %}
 {% include code-snippet/blockeditor/blocks/blockTypes/list-block/list.cs %}
 {% endhighlight %}
 {% endtabs %}
 
-![List Block](images/block-list.png)
+![List Block](./../../images/block-list.png)