diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html
index 331fcff33..be5339287 100644
--- a/ej2-javascript-toc.html
+++ b/ej2-javascript-toc.html
@@ -17,6 +17,7 @@
@@ -289,6 +290,7 @@
@@ -433,113 +441,131 @@
API Reference
-Chart
-
API Reference
@@ -2141,6 +2169,7 @@
Table Manipulation
Code Block
Selection
+Clipboard Clean-up
Paste Clean-up
Enter Key Configuration
Undo and Redo
@@ -2660,6 +2689,7 @@
Column Chooser
Column Menu
Responsive Columns
+Column Spanning
Row
@@ -2670,6 +2700,7 @@
Row Template
Detail Template
Row Drag and Drop
+Row Spanning
Cell
@@ -2837,6 +2868,7 @@
Drag and Drop
Template
Accessibility
+Styles and Appearance
How To
Release Notes
- - 2025 Volume 3 - 31.*
+
- 2025 Volume 4 - 32.*
- 2025 Volume 3 - 31.*
- Weekly Release
- 31.2.10
- 31.2.5
- 31.2.4
diff --git a/ej2-javascript/Release-notes/32.1.19.md b/ej2-javascript/Release-notes/32.1.19.md
new file mode 100644
index 000000000..a4ef3cc0f
--- /dev/null
+++ b/ej2-javascript/Release-notes/32.1.19.md
@@ -0,0 +1,98 @@
+---
+title: Essential Studio for ##Platform_Name## Release Notes
+description: Learn here about the controls in the Essential Studio for ##Platform_Name## 2025 Volume 4 Main Release - Release Notes
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## - v32.1.19 Release Notes
+
+{% include release-info.html date="December 16, 2025" version="v32.1.19" passed="68209" failed="0" %}
+
+{% directory path: _includes/release-notes/v32.1.19 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 208 | 208 | 0 | All Passed |
+| AI Assist View | 432 | 432 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 177 | 177 | 0 | All Passed |
+| Carousel | 61 | 61 | 0 | All Passed |
+| Chart | 5025 | 5025 | 0 | All Passed |
+| Chat UI | 500 | 500 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 429 | 429 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 139 | 139 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 105 | 105 | 0 | All Passed |
+| Data Grid | 3697 | 3697 | 0 | All Passed |
+| Date Picker | 427 | 427 | 0 | All Passed |
+| Date Range Picker | 515 | 515 | 0 | All Passed |
+| Date Time Picker | 325 | 325 | 0 | All Passed |
+| Diagram | 16255 | 16255 | 0 | All Passed |
+| Dialog | 63 | 63 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 203 | 203 | 0 | All Passed |
+| Dropdown Tree | 104 | 104 | 0 | All Passed |
+| File Manager | 2188 | 2188 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 4368 | 4368 | 0 | All Passed |
+| HeatMap Chart | 478 | 478 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 426 | 426 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1244 | 1244 | 0 | All Passed |
+| Mention | 45 | 45 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 254 | 254 | 0 | All Passed |
+| Multiselect Dropdown | 442 | 442 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5348 | 5348 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 625 | 625 | 0 | All Passed |
+| Rich Text Editor | 5135 | 5135 | 0 | All Passed |
+| schedule | 4645 | 4645 | 0 | All Passed |
+| sidebar | 88 | 88 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 57 | 57 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 144 | 144 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 379 | 379 | 0 | All Passed |
+| Tab | 69 | 69 | 0 | All Passed |
+| Text Area | 107 | 107 | 0 | All Passed |
+| TextBox | 58 | 58 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 135 | 135 | 0 | All Passed |
+| ToolTip | 136 | 136 | 0 | All Passed |
+| TreeGrid | 3791 | 3791 | 0 | All Passed |
+| Treemap | 264 | 264 | 0 | All Passed |
+| Treeview | 370 | 370 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-javascript/ai-assistview/events.md b/ej2-javascript/ai-assistview/events.md
index fbdb33d84..a9fab7d9f 100644
--- a/ej2-javascript/ai-assistview/events.md
+++ b/ej2-javascript/ai-assistview/events.md
@@ -15,7 +15,7 @@ This section describes the AI AssistView events that will be triggered when appr
## created
-The AI AssistView control triggers the [created](../api/ai-assistview/#created) event when the control rendering is completed.
+The AI AssistView control triggers the [created](../api/ai-assistview#created) event when the control rendering is completed.
{% if page.publishingplatform == "typescript" %}
@@ -43,7 +43,7 @@ The AI AssistView control triggers the [created](../api/ai-assistview/#created)
## promptRequest
-The [promptRequest](../api/ai-assistview/#promptrequest) event is triggered when the prompt request is made in the AI AssistView control.
+The [promptRequest](../api/ai-assistview#promptrequest) event is triggered when the prompt request is made in the AI AssistView control.
{% if page.publishingplatform == "typescript" %}
@@ -71,7 +71,7 @@ The [promptRequest](../api/ai-assistview/#promptrequest) event is triggered when
## promptChanged
-The [promptChanged](../api/ai-assistview/#promptchanged) event is triggered when the prompt text is changed in the AI AssistView control.
+The [promptChanged](../api/ai-assistview#promptchanged) event is triggered when the prompt text is changed in the AI AssistView control.
{% if page.publishingplatform == "typescript" %}
@@ -99,7 +99,7 @@ The [promptChanged](../api/ai-assistview/#promptchanged) event is triggered when
## beforeAttachmentUpload
-The [beforeAttachmentUpload](../api/ai-assistview/#beforeattachmentupload) event is triggered before the attached files upload begins in the AI AssistView
+The [beforeAttachmentUpload](../api/ai-assistview#beforeattachmentupload) event is triggered before the attached files upload begins in the AI AssistView
{% if page.publishingplatform == "typescript" %}
@@ -127,7 +127,7 @@ The [beforeAttachmentUpload](../api/ai-assistview/#beforeattachmentupload) event
## attachmentUploadSuccess
-The [attachmentUploadSuccess](../api/ai-assistview/#attachmentuploadsuccess) event is triggered when the attached file is successfully uploaded in the AI AssistView.
+The [attachmentUploadSuccess](../api/ai-assistview#attachmentuploadsuccess) event is triggered when the attached file is successfully uploaded in the AI AssistView.
{% if page.publishingplatform == "typescript" %}
@@ -155,7 +155,7 @@ The [attachmentUploadSuccess](../api/ai-assistview/#attachmentuploadsuccess) eve
## attachmentUploadFailure
-The [attachmentUploadFailure](../api/ai-assistview/#attachmentuploadfailure) event is triggered when the attached file upload fails in the AI AssistView.
+The [attachmentUploadFailure](../api/ai-assistview#attachmentuploadfailure) event is triggered when the attached file upload fails in the AI AssistView.
{% if page.publishingplatform == "typescript" %}
@@ -183,7 +183,7 @@ The [attachmentUploadFailure](../api/ai-assistview/#attachmentuploadfailure) eve
## attachmentRemoved
-The [attachmentRemoved](../api/ai-assistview/#attachmentremoved) event is triggered when an attached file is removed in the AI AssistView.
+The [attachmentRemoved](../api/ai-assistview#attachmentremoved) event is triggered when an attached file is removed in the AI AssistView.
{% if page.publishingplatform == "typescript" %}
@@ -207,4 +207,32 @@ The [attachmentRemoved](../api/ai-assistview/#attachmentremoved) event is trigge
{% endhighlight %}
{% endtabs %}
+{% endif %}
+
+## attachmentClick
+
+The [attachmentClick](../api/ai-assistview#attachmentclick) event is triggered when an attached file is clicked in the AI AssistView.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/ai-assistview/events/attachment-click/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/events/attachment-click/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/ai-assistview/events/attachment-click/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/events/attachment-click/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/ai-assistview/file-attachments.md b/ej2-javascript/ai-assistview/file-attachments.md
index 82f7b6ef3..4d571f35d 100644
--- a/ej2-javascript/ai-assistview/file-attachments.md
+++ b/ej2-javascript/ai-assistview/file-attachments.md
@@ -15,7 +15,7 @@ The `Attachment` support in AI AssistView specifies user to include file attachm
## Enable attachment
-You can enable the attachment by using the `enableAttachments` property. By default, the value is `false`.
+You can enable the attachment by using the [enableAttachments](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#enableattachments) property. By default, the value is `false`.
{% if page.publishingplatform == "typescript" %}
@@ -44,13 +44,13 @@ You can enable the attachment by using the `enableAttachments` property. By defa
{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/enable-attachment" %}
{% endif %}
-## Configuring attachments
+## Configure attachment settings
-You can use the `attachmentSettings` property to configure the attachments in the AI AssistView.
+Use the [attachmentSettings](../api/ai-assistview/attachmentSettings) property to customize file attachment behavior, including upload endpoints, file type restrictions, and size limits.
### Setting saveUrl and removeUrl
-You can use the `saveUrl` and `removeUrl` property to add the save and remove the URL for the file uploaded in the AI AssistView.
+Set the [saveUrl](../api/ai-assistview/attachmentSettings#saveurl) and [removeUrl](../api/ai-assistview/attachmentSettings#removeurl) properties to specify server endpoints for handling file uploads and removals. The `saveUrl` processes file uploads, while the `removeUrl` handles file deletion requests.
{% if page.publishingplatform == "typescript" %}
@@ -81,7 +81,7 @@ You can use the `saveUrl` and `removeUrl` property to add the save and remove th
### Setting file type
-You can use the `allowedFileType` property to upload the specific file types in the attachment.
+Use the [allowedFileTypes](../api/ai-assistview/attachmentSettings#allowedfiletypes) property to specify which file types users can upload. This property accepts file extensions (e.g., '.pdf', '.docx') or MIME types to control the types of files that can be attached.
{% if page.publishingplatform == "typescript" %}
@@ -112,7 +112,7 @@ You can use the `allowedFileType` property to upload the specific file types in
### Setting file size
-You can use the `maxFileSize` property to allow the maximum file size of the upload file in the AI AssistView. By default, the value is `2000000` bytes.
+Configure the [maxFileSize](../api/ai-assistview/attachmentSettings#maxfilesize) property to define the maximum file size allowed for uploads. Specify the size in bytes. The default value is `2000000` bytes (2 MB). Files exceeding this limit will not be uploaded.
{% if page.publishingplatform == "typescript" %}
@@ -139,4 +139,35 @@ You can use the `maxFileSize` property to allow the maximum file size of the upl
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/file-size" %}
+{% endif %}
+
+### Setting maximum count
+
+Restrict how many files can be attached at once using [maximumCount](../api/ai-assistview/attachmentSettings#maximumcount) property. The default value is `10`. If users select more than the allowed count, the maximum count reached error will be displayed.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/ai-assistview/file-attachments/maximum-count/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/file-attachments/maximum-count/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/maximum-count" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/ai-assistview/file-attachments/maximum-count/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/file-attachments/maximum-count/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/maximum-count" %}
{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/ai-assistview/toolbar-items.md b/ej2-javascript/ai-assistview/toolbar-items.md
index fc87a1537..540906e78 100644
--- a/ej2-javascript/ai-assistview/toolbar-items.md
+++ b/ej2-javascript/ai-assistview/toolbar-items.md
@@ -11,7 +11,137 @@ domainurl: ##DomainURL##
# Toolbar items in ##Platform_Name## AI AssistView control
-You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](../api/ai-assistview#toolbarsettings), [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings) & [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) properties.
+You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](../api/ai-assistview#toolbarsettings), [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings), [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) & [footerToolbarSettings](../api/ai-assistview#footertoolbarsettings) properties.
+
+## Configure footer toolbar
+
+By default, the footer toolbar renders the `send`, if attachment is enabled the `attachment` item will also be rendered which allows users to send the prompt text or attach files as needed.
+
+In the following example, AI AssistView component rendered with footer toolbar items such as `send` and `attachment` icons.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/enable-attachment" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/enable-attachment" %}
+{% endif %}
+
+### Toolbar positioning
+
+You can use the [toolbarPosition](../api/ai-assistview/footerToolbarSettingsModel#toolbarPosition) property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the toolbarPosition is `Inline`.
+
+By settings toolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-position" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-position" %}
+{% endif %}
+
+### Adding custom items
+
+You can use the [footerToolbarSettings](../api/ai-assistview#footertoolbarsettings) property to add custom items for the footer toolbar in the AI AssistView. The custom items will be added with the existing built-in items in the footer toolbar.
+
+> To know more about the items, please refer to the [items](#items) section.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-settings" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-settings" %}
+{% endif %}
+
+### Item click
+
+The [itemClick](../api/ai-assistview/footerToolbarSettingsModel#itemclick) event is triggered when the footer toolbar item is clicked.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-itemclick" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-itemclick" %}
+{% endif %}
## Adding header toolbar items
@@ -410,11 +540,11 @@ In the following example, AI AssistView control rendered with built-in toolbar i
#### Setting width
-You can use the [width](../api/ai-assistview/promptToolbarSettingsModel/#width) property to set the width of the prompt toolbar in the AI AssistView.
+You can use the [width](../api/ai-assistview/promptToolbarSettingsModel#width) property to set the width of the prompt toolbar in the AI AssistView.
#### Item clicked
-The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel/#itemclicked) event is triggered when the prompt toolbar item is clicked.
+The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel#itemclicked) event is triggered when the prompt toolbar item is clicked.
{% if page.publishingplatform == "typescript" %}
@@ -478,11 +608,11 @@ In the following example, AI AssistView renders with built-in toolbar items.
#### Setting width
-You can use the [width](../api/ai-assistview/responseToolbarSettingsModel/#width) property to set the width of the response toolbar in the AI AssistView.
+You can use the [width](../api/ai-assistview/responseToolbarSettingsModel#width) property to set the width of the response toolbar in the AI AssistView.
#### Item clicked
-The [itemClicked](../api/ai-assistview/responseToolbarSettingsModel/#itemclicked) event is triggered when the response toolbar item is clicked.
+The [itemClicked](../api/ai-assistview/responseToolbarSettingsModel#itemclicked) event is triggered when the response toolbar item is clicked.
{% if page.publishingplatform == "typescript" %}
@@ -583,4 +713,4 @@ You can use the [responseToolbarSettings](../api/ai-assistview#responsetoolbarse
#### Item clicked
-The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel/#itemclicked) event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items.
+The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel#itemclicked) event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items.
diff --git a/ej2-javascript/block-editor/appearance.md b/ej2-javascript/block-editor/appearance.md
index 471ef7f2c..371ae6f05 100644
--- a/ej2-javascript/block-editor/appearance.md
+++ b/ej2-javascript/block-editor/appearance.md
@@ -11,11 +11,11 @@ domainurl: ##DomainURL##
# Appearance in ##Platform_Name## Block Editor control
-The Block Editor control provides various appearance customization options to match your application's design requirements. These properties allow you to control the visual styling, layout, and overall look and feel of the editor.
+The Block Editor control provides several properties to customize its visual appearance, allowing you to control its dimensions, styling, and behavior.
## Setting width and height
-You can specify the width and height for the Block Editor control using the [width](../api/blockeditor/#width) and [height](../api/blockeditor/#height) properties.
+You can specify the width and height for the Block Editor control using the [width](../api/blockeditor#width) and [height](../api/blockeditor#height) properties.
```typescript
const editor = new BlockEditor({
@@ -32,17 +32,17 @@ const editor = new BlockEditor({
## Setting readonly mode
-You can utilize the [readonly](../api/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](../api/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.
```typescript
const editor = new BlockEditor({
- readonly: true
+ readOnly: true
});
```
## Customization using CSS Class
-You can use the [cssClass](../api/blockeditor/#cssclass) property to customize the appearance of the Block Editor control.
+You can use the [cssClass](../api/blockeditor#cssClass) property to customize the appearance of the Block Editor control.
```typescript
const editor = new BlockEditor({
@@ -52,7 +52,7 @@ const editor = new BlockEditor({
});
```
-Below example demonstrates the usage of readonly and cssClass properties.
+The following example demonstrates the usage of `readOnly` and `cssClass` properties of the Block Editor.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/built-in-blocks/built-in-blocks.md b/ej2-javascript/block-editor/built-in-blocks/built-in-blocks.md
index 010b25cf7..8f3c784af 100644
--- a/ej2-javascript/block-editor/built-in-blocks/built-in-blocks.md
+++ b/ej2-javascript/block-editor/built-in-blocks/built-in-blocks.md
@@ -11,38 +11,39 @@ 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](../api/blockeditor/#blocks) property allows you to define and manage the content structure of your editor.
+The Syncfusion Block Editor uses **blocks** as the fundamental units for creating and managing content. The entire editor content is structured as a collection of these blocks, which are configured and managed through the [blocks](../api/blockeditor#blocks) property.
## 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 core building elements of the editor, where each block represents a distinct content unit, such as a `Paragraph`, `Heading`, `List`, or specialized content like a `Code Snippet` or `Image`. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.
-You can configure blocks with various properties such as [id](../api/blockeditor/blockModel/#id), [type](../api/blockeditor/blockModel/#type), [content](../api/blockeditor/blockModel/#content), [children](../api/blockeditor/blockModel/#children) and more to create rich, structured editor.
+You can configure blocks with various properties such as [id](../api/blockeditor/blockModel#id), [blockType](../api/blockeditor/blockModel#blockType), [content](../api/blockeditor/blockModel#content) to create a rich and structured editor.
## Block types
-The Block Editor supports multiple block types. Each block type offers different formatting and functionality options:
-
-| Built-in Block Types | Description |
-|-----------------------------------------|---------------------------------------------------|
-| Paragraph | Default block type for regular text content. |
-| Heading1 to Heading4 | Different levels of headings for document structure.|
-| Checklist | Interactive to-do lists with checkable items. |
-| BulletList | Unordered lists with bullet points. |
-| NumberedList | Ordered lists with sequential numbering. |
-| Code | Formatted code blocks with syntax highlighting. |
-| Quote | Styled block for quotations. |
-| Callout | Highlighted block for important information. |
-| Divider | Horizontal separator line. |
-| CollapsibleParagraph and CollapsibleHeading1-4 | Collapsible content blocks. |
-| Image | Block for displaying images. |
-| Template | Predefined custom templates. |
+The Block Editor supports multiple block types, each offering different formatting options and functionality:
+
+| Built-in Block Types | Description |
+|-----------------------------------------|-----------------------------------------------------------------------------|
+| Paragraph | Default block type for regular text content. |
+| Heading1 to Heading4 | Different levels of headings for document structure. |
+| Table | Block for displaying data in a tabular format with rows and columns. |
+| Checklist | Interactive to-do lists with checkable items. |
+| BulletList | Unordered lists with bullet points. |
+| NumberedList | Ordered lists with sequential numbering. |
+| Code | Formatted code blocks with syntax highlighting. |
+| Quote | Styled block for quotations. |
+| Callout | Highlighted block for important information. |
+| Divider | Horizontal separator line. |
+| CollapsibleParagraph and CollapsibleHeading1-4 | Content blocks that can be expanded or collapsed to show or hide their children. |
+| Image | Block for displaying images. |
+| Template | Renders custom content using predefined templates, allowing for user-defined block structures. |
## Configure indent
-You can specify the indentation level of a block using the [indent](../api/blockeditor/blockModel/#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](../api/blockeditor/blockModel#indent) property. This property accepts a numeric value that determines how deeply a block is nested from the left margin.
-By default, the [indent](../api/blockeditor/blockModel/#indent) property is set to `0`.
+By default, the [indent](../api/blockeditor/blockModel#indent) property is set to `0`.
{% if page.publishingplatform == "typescript" %}
@@ -73,7 +74,7 @@ By default, the [indent](../api/blockeditor/blockModel/#indent) property is set
## Configure CSS Class
-You can apply custom styling to individual blocks using the [cssClass](../api/blockeditor/blockModel/#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](../api/blockeditor/blockModel#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.
@@ -112,7 +113,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](../api/blockeditor/blockModel/#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](../api/blockeditor/blockModel#template) property. Templates can be defined as strings, functions, or HTML elements.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/built-in-blocks/code-block.md b/ej2-javascript/block-editor/built-in-blocks/code-block.md
index ecba7205b..4b90a14b7 100644
--- a/ej2-javascript/block-editor/built-in-blocks/code-block.md
+++ b/ej2-javascript/block-editor/built-in-blocks/code-block.md
@@ -11,34 +11,36 @@ domainurl: ##DomainURL##
# Code Blocks in ##Platform_Name## Block Editor control
-You can render Code blocks by setting the [type](../api/blockeditor/blockModel/#type) 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`.
+The Syncfusion Block Editor allows you to render code snippets with syntax highlighting by setting the block's [blockType](../api/blockeditor/blockModel#blockType) property to `Code`. You can customize the available programming languages and set a default language using the `properties` property.
-## Configure code properties
+## Global Code Settings
-For Code blocks, you can configure syntax highlighting and language options using the [props](../api/blockeditor/blockModel/) 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](../api/blockeditor/blockModel/) property supports the following options:
+The `codeBlockSettings` property supports the following options:
| Property | Description | Default Value |
|----------|-------------|---------------|
-| [languages](../api/blockeditor/codeSettingsModel/#languages) | Array of language options for syntax highlighting | [] |
-| [defaultLanguage](../api/blockeditor/codeSettingsModel/#defaultlanguage) | The default language to use for syntax highlighting | 'javascript' |
+| [languages](../api/blockeditor/codeSettingsModel#languages) | Specifies the array of language options for syntax highlighting. | [] |
+| [defaultLanguage](../api/blockeditor/codeSettingsModel#defaultlanguage) | Defines the default language to use for syntax highlighting. | 'plaintext' |
+
+## Configure code properties
-Each language object in the `languages` array should have:
-- [language](../api/blockeditor/codeLanguageModel/#language): The language value used for syntax highlighting
-- [label](../api/blockeditor/codeLanguageModel/#label): The display name shown in the language selector
+For Code blocks, you can specify the language for syntax highlighting using the [properties](../api/blockeditor/blockModel) property. This property supports the following options:
-### Type & Props
+- [language](../api/blockeditor/codeLanguageModel#language): The language value used for syntax highlighting.
+
+### BlockType & Properties
```typescript
// Adding Code block
{
- type: 'Code',
+ blockType: 'Code',
content: [
{
- //your content
+ const x = 10;
}
],
- props: {
+ properties: {
defaultLanguage: 'javascript',
languages: [
{ language: 'javascript', label: 'JavaScript' },
@@ -47,10 +49,10 @@ Each language object in the `languages` array should have:
{ language: 'css', label: 'CSS' }
]
}
- }
+}
```
-Below example illustrates how to render the different code block in the Block Editor.
+The following example demonstrates how to configure and render a Code block within the Block Editor.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/built-in-blocks/embed.md b/ej2-javascript/block-editor/built-in-blocks/embed.md
index d457b8822..a2c20995f 100644
--- a/ej2-javascript/block-editor/built-in-blocks/embed.md
+++ b/ej2-javascript/block-editor/built-in-blocks/embed.md
@@ -11,58 +11,63 @@ domainurl: ##DomainURL##
# Embed Blocks in ##Platform_Name## Block Editor control
-Block Editor supports addition of embeds to help you organize, showcase contents and format your content effectively.
+The Block Editor supports the addition of embeds to help you organize and showcase visual content effectively.
-## Image Block
+## Adding an 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](../api/blockeditor/blockModel/#type) 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](../api/blockeditor/blockModel#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](../api/blockeditor/blockModel/) 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 |
-| 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
+| 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](../api/blockeditor/blockModel) property supports the following options:
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| 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. | `''` |
+
+### BlockType & Properties
+
+The following example demonstrates how to pre-configure an `Image` block in the editor.
```typescript
// Adding image block
{
- type: 'Image',
- props: {
+ blockType: 'Image',
+ properties: {
src: '',
- saveFormat: 'Base64',
- allowedTypes: ['.png', '.gif'],
width: '200px',
height: '100px',
- minWidth: 50,
- maxWidth: 500,
- minHeight: 50,
- maxHeight: 300,
altText: '',
- cssClass: 'img-custom',
- readOnly: true
}
}
```
-The below sample demonstrates the configuration of image block in the Block Editor.
+This sample demonstrates the configuration of the `Image` block in the Block Editor.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/built-in-blocks/inline-content.md b/ej2-javascript/block-editor/built-in-blocks/inline-content.md
index 50466f42c..3396ade05 100644
--- a/ej2-javascript/block-editor/built-in-blocks/inline-content.md
+++ b/ej2-javascript/block-editor/built-in-blocks/inline-content.md
@@ -11,90 +11,67 @@ domainurl: ##DomainURL##
# Inline Content in ##Platform_Name## Block Editor control
-Content in the Block Editor is managed through the [content](../api/blockeditor/blockModel/#content) property of blocks.
+In the Syncfusion Block Editor, all content is organized within blocks. Each block contains an array of [content](../api/blockeditor/blockModel#content) property that define the text and functionality within that block.
-Each content can have properties like [id](../api/blockeditor/contentModel/#id), [type](../api/blockeditor/contentModel/#type), [content](../api/blockeditor/contentModel/#content), [styles](../api/blockeditor/contentModel/#styles), and more to customize the appearance and behavior of your text.
+Each [contentModel](../api/blockeditor/contentModel) is an object with properties such as [id](../api/blockeditor/contentModel#id), [contentType](../api/blockeditor/contentModel#contentType), [content](../api/blockeditor/contentModel#content), and [properties](../api/blockeditor/contentModel#properties), allowing for granular control over its appearance and behavior.
## Setting content type
-You can specify the type of content using the [type](../api/blockeditor/contentModel/#type) property. The Block Editor supports several content types through the `ContentType` enum:
+The Block Editor supports several inline content types through the `ContentType` enum, which can be set using the [contentType](../api/blockeditor/contentModel#contentType) property.
-| Built-in Content Type | Description |
-|------------------------|-------------------------------------|
-| Text | Represents plain text content. |
-| Link | Represents a hyperlink. |
-| Code | Represents a code snippet. |
-| Mention | Represents a user mention. |
-| Label | Represents a label or tag. |
+| Built-in Content Type | Description |
+| ----------------------- | ------------------------------ |
+| Text | Represents plain text content. |
+| Link | Represents a hyperlink. |
+| Mention | Represents a user mention. |
+| Label | Represents a label or tag. |
-> By default, the content type is set to `Text`.
+By default, the content type is `Text`.
## Configure text content
-You can configure Text content by setting the type property to `Text`. The default content type is `Text`.
+To configure text content, set the `contentType` property to `Text`. This is the default content type if none is specified.
-### Type
+### ContentType
```typescript
// Adding inline text
{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [
{
- type: 'Text',
+ contentType: 'Text',
content: 'Inline Text'
}
]
}
```
-## Configure inline code
-
-You can configure inline code content by setting the type property to `Code`. Code content is used for inline code snippets within regular text.
-
-### Type
-
-```typescript
-// Adding inline code
-{
- type: 'Paragraph',
- content: [
- {
- type: 'Code',
- content: 'Inline Code'
- }
- ]
-}
-```
-
## Configure hyperlink
-You can configure hyperlink content by setting the type property to `Link`. By setting the `props` property, you can configure the url of the link and specifies the link should open in a new tab/window.
+To create a hyperlink, set the `contentType` property to `Link`. You can configure the link's URL using the `properties` property.
### Configure link properties
-Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the link [props](../api/blockeditor/blockModel/) property.
+Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the [properties](../api/blockeditor/contentModel#properties) property.
-The link [props](../api/blockeditor/blockModel/) property supports the following options:
+Link settings accepts the following options:
-| Option | Description | Default Value |
-|--------------|-----------------------------------------------------------------------------|---------------|
-| [url](../api/blockeditor/linkSettingsModel/#url) | Specifies the URL of the link. | '' |
-| [openInNewWindow](../api/blockeditor/linkSettingsModel/#openinnewwindow) | Specifies whether the link should open in a new window/tab. | false |
+ | Option | Description | Default Value |
+| ------------------------- | ----------------------------------------------------------------- | ------------- |
+|[url](../api/blockeditor/linkSettingsModel#url)| Specifies the destination URL of the link. | `''` |
-
-### Type & Props
+### ContentType & Properties
```typescript
{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [
{
- type: 'Link',
+ contentType: 'Link',
content: 'hyperlinks',
- props: {
+ properties: {
url: 'https://ej2.syncfusion.com/documentation',
- openInNewWindow: true
}
}
]
@@ -103,7 +80,7 @@ The link [props](../api/blockeditor/blockModel/) property supports the following
## Configure Label
-You can render labels by setting the [type](../api/blockeditor/blockModel/#type) property as `Label`. Additionally, by configuring the `props` 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.
+To render labels, set the [contentType](../api/blockeditor/contentModel#contentType) property to `Label`. The `properties` property allows you to specify which label to display.
### Built-in items
@@ -114,45 +91,46 @@ The Block Editor comes with offers different built-in options. These include:
### Customize label
-You can customize the labels by using the `props` property with type `Label`.
+You can customize the labels by using the `properties` property along with contentType `Label`.
-### Type & Props
+### ContentType & Properties
```typescript
// Adding inline label
{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [
- {
- type: 'Label',
- props: {lableId: 'Name of the label'}
- }
+ {
+ contentType: 'Label',
+ properties: { lableId: 'progress' }
+ }
]
}
```
-### Trigger Character configuration
+#### Trigger Character configuration
-You can use the [triggerChar](../api/blockeditor/labelSettingsModel/#triggerchar) property to specify the character that will trigger the label suggestions popup while typing. The default trigger character is `$`.
+Use the [triggerChar](../api/blockeditor/labelSettingsModel#triggerchar) property to define the character that opens the label suggestions popup. The default trigger character is `$`.
### Label items configuration
-The [labelItems](../api/blockeditor/labelSettingsModel/#labelitems) array allows you to define the available labels in your editor. Each label item can have the following properties:
+Define the labels using the [items](../api/blockeditor/labelSettingsModel#items) array. When a user types the trigger character, a popup will show the given items.
-| Property | Description |
-|-------------|---------------------------------------------|
-| [id](../api/blockeditor/labelItemModel/#id) | Unique identifier for the label |
-| [text](../api/blockeditor/labelItemModel/#text) | Display text for the label |
-| [groupHeader](../api/blockeditor/labelItemModel/#groupheader) | Category/group name for organizing labels |
-| [labelColor](../api/blockeditor/labelItemModel/#labelcolor) | Background color of the label |
-| [iconCss](../api/blockeditor/labelItemModel/#iconcss) | CSS class for an icon to display with label |
+Each item in the [items](../api/blockeditor/labelSettingsModel#items) array supports the following properties:
+| Property | Description |
+| --------------------------------------------------| --------------------------------------------------- |
+| [id](../api/blockeditor/labelItemModel#id) | A unique identifier for the label. |
+| [text](../api/blockeditor/labelItemModel#text) | The display text for the label. |
+| [groupBy](../api/blockeditor/labelItemModel#groupBy) | The category name for grouping similar labels. |
+| [labelColor](../api/blockeditor/labelItemModel#labelcolor) | The background color of the label. |
+| [iconCss](../api/blockeditor/labelItemModel#iconcss) | A CSS class for an icon to display with the label. |
When users type the trigger character followed by text, a popup will appear showing matching label items from which they can select. The selected label will be inserted into the content as a Label content item.
### Using labels with group headers
-Labels with the same [groupHeader](../api/blockeditor/labelItemModel/#groupheader) value will be grouped together in the label selection popup:
+Labels with the same [groupBy](../api/blockeditor/labelItemModel#groupBy) value will be grouped together in the label selection popup:
The below sample demonstrates the customization of labels in the Block Editor.
@@ -185,26 +163,26 @@ The below sample demonstrates the customization of labels in the Block Editor.
## Configure mention
-Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the type property to `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](../api/blockeditor/#users) collection defined in the Block Editor.
+Mentions are typically triggered by the `@` character and are linked to the [users](../api/blockeditor#users) collection defined in the Block Editor.
-### Type
+### ContentType
```typescript
// Adding inline code
{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [
{
- type: 'Mention',
- id: 'user1'
- }
+ contentType: 'Mention',
+ properties: { userId: 'user1' }
+ }
]
}
```
-Below is an example of how to configure different types of content in the Block Editor.
+The sample below demonstrates how to configure mentions and other content types.
{% if page.publishingplatform == "typescript" %}
@@ -233,27 +211,27 @@ Below is an example of how to configure different types of content in the Block
{% previewsample "page.domainurl/code-snippet/block-editor/blocks/content-types" %}
{% endif %}
-## Setting content styles
+## Applying Inline Styles
-The Block Editor enables you to customize the appearance of Text, Link, and Code elements using the [styles](../api/blockeditor/contentModel/#styles) property. This property offers rich formatting options to enhance the visual presentation of these content types.
+The Block Editor allows you to apply rich formatting to block contents using the [styles](../api/blockeditor/contentModel#styles) property.
-The [styles](../api/blockeditor/contentModel/#styles) property supports the following formatting options:
+The `styles` property supports the following options:
-| Style Property | Description | Default Value |
-|---------------|-------------|---------------|
-| [bold](../api/blockeditor/styleModel/#bold) | Makes the text bold | false |
-| [italic](../api/blockeditor/styleModel/#italic) | Makes the text italicized | false |
-| [underline](../api/blockeditor/styleModel/#underline) | Adds an underline to the text | false |
-| [strikethrough](../api/blockeditor/styleModel/#strikethrough) | Adds a line through the text | false |
-| [color](../api/blockeditor/styleModel/#color) | Sets the text color (HEX or RGBA format) | '' |
-| [backgroundColor](../api/blockeditor/styleModel/#bgcolor) | Sets the background color for the text | '' |
-| [superscript](../api/blockeditor/styleModel/#superscript) | Displays the text as superscript | false |
-| [subscript](../api/blockeditor/styleModel/#subscript) | Displays the text as subscript | false |
-| [uppercase](../api/blockeditor/styleModel/#uppercase) | Converts the text to uppercase | false |
-| [lowercase](../api/blockeditor/styleModel/#lowercase) | Converts the text to lowercase | false |
-| [custom](../api/blockeditor/styleModel/#custom) | Adds custom CSS styles to the text | '' |
+| Style Property | Description | Default Value |
+| ------------------------------------------------- | ------------------------------------------ | ------------- |------------- |
+| [bold](../api/blockeditor/styleModel#bold) | Makes the text bold. | `false` |
+| [italic](../api/blockeditor/styleModel#italic) | Makes the text italicized. | `false` |
+| [underline](../api/blockeditor/styleModel#underline) | Adds an underline to the text. | `false` |
+| [strikethrough](../api/blockeditor/styleModel#strikethrough) | Adds a line through the text. | `false` |
+| [color](../api/blockeditor/styleModel#color) | Sets the text color (HEX or RGBA format). | `''` |
+| [backgroundColor](../api/blockeditor/styleModel#backgroundColor) | Sets the background color for the text. | `''` |
+| [superscript](../api/blockeditor/styleModel#superscript) | Renders the text as superscript. | `false` |
+| [subscript](../api/blockeditor/styleModel#subscript) | Renders the text as subscript. | `false` |
+| [uppercase](../api/blockeditor/styleModel#uppercase) | Converts the text to uppercase. | `false` |
+| [lowercase](../api/blockeditor/styleModel#lowercase) | Converts the text to lowercase. | `false` |
+| [inlineCode](../api/blockeditor/styleModel#inlineCode) | Converts the text to InlineCode. | `false` |
-You can apply one or more of these styles to any content element for rich text formatting:
+You can apply one or more of these styles to any supported content element for rich text formatting.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/built-in-blocks/list-types.md b/ej2-javascript/block-editor/built-in-blocks/list-types.md
index 9a1d19af0..e3f7ccbfa 100644
--- a/ej2-javascript/block-editor/built-in-blocks/list-types.md
+++ b/ej2-javascript/block-editor/built-in-blocks/list-types.md
@@ -11,106 +11,106 @@ 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 [type](../api/blockeditor/blockModel/#type) 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.
+The Syncfusion Angular Block Editor control uses list blocks to organize content into structured lists. To render a specific list type, set the [blockType](../api/blockeditor/blockModel#blockType) property of the `BlockModel` to `BulletList`, `NumberedList`, or `Checklist`. Bullet lists are ideal for unordered items, numbered lists for ordered items, and checklists for interactive to-do lists.
-## Configure bullet list
+## Configuring the Bullet List
-You can render Bullet List block by setting the [type](../api/blockeditor/blockModel/#type) property as `BulletList`. This block type is used for unordered lists.
+You can render a Bullet List block by setting the [blockType](../api/blockeditor/blockModel#blockType) property to `BulletList`. This block type is used to display unordered lists.
-### Type
+### BlockType
```typescript
// Adding bulletlist block
{
- type: 'BulletList',
+ blockType: 'BulletList',
content: [
{
- type: ContentType.Text,
+ contentType: ContentType.Text,
content: 'your content'
}
]
}
```
-### Configure placeholder
+### Configure Placeholder
-You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel/#placeholder) property. This text appears when the block is empty. The default placeholder for bullet list is `Add item`.
+The [placeholder](../api/blockeditor/blockModel#placeholder) property sets the text that appears when the block is empty. The default placeholder for a bullet list is `Add item`.
```typescript
// Adding placeholder value
{
- type: 'BulletList',
- props: { placeholder: 'bullet'},
+ blockType: 'BulletList',
+ properties: { placeholder: 'bullet'},
content: [
{
- type: ContentType.Text,
+ contentType: ContentType.Text,
content: 'your content'
}
]
}
```
-## Configure numbered list
+## Configuring the Numbered List
-You can render Numbered List block by setting the [type](../api/blockeditor/blockModel/#type) property as `NumberedList`.This block type is used for ordered lists.
+You can render a Numbered List block by setting the [blockType](../api/blockeditor/blockModel#blockType) property to `NumberedList`. This block type is used to display ordered lists.
### Type
```typescript
// Adding numberedlist block
{
- type: 'NumberedList',
+ blockType: 'NumberedList',
content: [
{
- type: ContentType.Text,
+ contentType: ContentType.Text,
content: 'your content'
}
]
}
```
-### Configure placeholder
+### Configure Placeholder
-You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel/#placeholder) property. This text appears when the block is empty. The default placeholder for numbered list is `Add item`.
+The [placeholder](../api/blockeditor/blockModel#placeholder) property sets the text that appears when the block is empty. The default placeholder for a numbered list is `Add item`.
```typescript
// Adding placeholder value
{
- type: 'NumberedList',
- props: { placeholder: 'number'},
+ blockType: 'NumberedList',
+ properties: { placeholder: 'number'},
content: [
{
- type: ContentType.Text,
+ contentType: ContentType.Text,
content: 'your content'
}
]
}
```
-## Configure checklist
+## Configure the Checklist
-You can render Check List block by setting the [type](../api/blockeditor/blockModel/#type) property as `Checklist`. This block type is used for creating interactive to-do lists.
+You can render a Checklist block by setting the [blockType](../api/blockeditor/blockModel#blockType) property to `Checklist`. This block type is used for creating interactive to-do lists.
-### Type
+### BlockType
```typescript
-// Adding checklist block
+ // Adding checklist block
{
- type: 'Checklist',
+ blockType: 'Checklist',
content: [
{
- type: ContentType.Text,
+ contentType: ContentType.Text,
content: 'your content'
}
]
}
```
-### Configure checked state
+### Configure Checked State
-For blocks that support selection states such as `CheckList`, you can configure the checked state using the `props` property with [isChecked](../api/blockeditor/blockModel/#ischecked).
+For blocks that support selection states, such as a `Checklist`, you can configure the checked state using the `properties` property with [isChecked](../api/blockeditor/blockModel#ischecked).
-By default, the [isChecked](../api/blockeditor/blockModel/#ischecked) property is set to `false`.
+By default, the [isChecked](../api/blockeditor/blockModel#ischecked) property is set to `false`.
{% if page.publishingplatform == "typescript" %}
@@ -141,16 +141,16 @@ By default, the [isChecked](../api/blockeditor/blockModel/#ischecked) property i
### Configure placeholder
-You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel/#placeholder) property. This text appears when the block is empty. The default placeholder for check list is `To Do`.
+You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel#placeholder) property. This text appears when the block is empty. The default placeholder for check list is `Todo`.
```typescript
// Adding placeholder value
{
- type: 'Checklist',
- props: { placeholder: 'check'},
+ blockType: 'Checklist',
+ properties: { placeholder: 'check'},
content: [
{
- type: ContentType.Text,
+ contentType: ContentType.Text,
content: 'your content'
}
]
@@ -187,4 +187,3 @@ Below example illustrates how to render the different types of list blocks in th
{% previewsample "page.domainurl/code-snippet/block-editor/blocks/block-types/list-block" %}
{% endif %}
-
diff --git a/ej2-javascript/block-editor/built-in-blocks/table-block.md b/ej2-javascript/block-editor/built-in-blocks/table-block.md
new file mode 100644
index 000000000..ed4b34b97
--- /dev/null
+++ b/ej2-javascript/block-editor/built-in-blocks/table-block.md
@@ -0,0 +1,96 @@
+---
+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
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Table Blocks in ##Platform_Name## Block Editor control
+
+The Syncfusion Block Editor allows you to render structured data in rows and columns by setting the block's [blockType](../api/blockeditor/blockModel#blockType) property to `Table`. You can customize the table layout, header, row numbers, and define columns and rows using the `properties` property.
+
+### Configure Table Block
+
+For Table blocks, you can configure layout and structure using the [properties](../api/blockeditor/blockModel#properties) property. This property supports the following options:
+
+| Property | Description | Default Value |
+|----------|-------------|---------------|
+| width | Specifies the display width of the table. | `100%` |
+| enableHeader | Specifies whether to enable header for the table. | `true` |
+| enableRowNumbers | Specifies whether to enable row numbers for the table. | `true` |
+| readOnly | Specifies whether to render the table in read-only mode, disabling edits. | `false` |
+| columns | Defines the columns of the table, including their types and headers. | `[]` |
+| rows | Defines the rows of the table, each containing cells tied to columns. | `[]` |
+
+### BlockType & Properties
+
+The following example demonstrates how to pre-configure a `Table` block in the editor.
+
+```typescript
+// Adding an Table block
+{
+ blockType: BlockType.Table,
+ properties: {
+ columns: [{ id: 'col1', headerText: 'Column 1' }, { id: 'col2', headerText: 'Column 2' }],
+ rows: [
+ {
+ cells: [
+ {
+ columnId: 'col1',
+ blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 1' }] }]
+ },
+ {
+ columnId: 'col2',
+ blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 2' }] }]
+ }
+ ]
+ },
+ {
+ cells: [
+ {
+ columnId: 'col1',
+ blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 3' }] }]
+ },
+ {
+ columnId: 'col2',
+ blocks: [{ blockType: BlockType.Paragraph, content: [{ contentType: ContentType.Text, content: 'Cell 4' }] }]
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+This sample demonstrates the configuration of the `Table` block in the Block Editor.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/block-editor/blocks/block-types/table-block/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/block-editor/blocks/block-types/table-block/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/block-editor/blocks/block-types/table-block" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/block-editor/blocks/block-types/table-block/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/block-editor/blocks/block-types/table-block/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/block-editor/blocks/block-types/table-block" %}
+{% endif %}
diff --git a/ej2-javascript/block-editor/built-in-blocks/typography.md b/ej2-javascript/block-editor/built-in-blocks/typography.md
index bcf9dca44..f2492e881 100644
--- a/ej2-javascript/block-editor/built-in-blocks/typography.md
+++ b/ej2-javascript/block-editor/built-in-blocks/typography.md
@@ -11,28 +11,28 @@ domainurl: ##DomainURL##
# Typography Blocks in ##Platform_Name## Block Editor control
-Typography blocks are essential for organizing and presenting text-based content in your documents. The BlockEditor component supports various structural blocks—such as Paragraph, Heading, Collapsible Block, Divider, Quote, and Callout to help you format and structure content effectively.
+Typography blocks are essential for organizing and presenting text-based content. The Block Editor control supports various structural blocks—such as Paragraph, Heading, Collapsible (CollapsibleParagraph and CollapsibleHeading), Divider, Quote, and Callout—to help you format and structure content effectively.
## Configure paragraph block
-You can render Paragraph blocks by setting the [type](../api/blockeditor/blockModel/#type) property as `Paragraph`. Paragraph blocks are the most common type, used for regular text content. They provide standard text formatting options and serve as the default block type.
+Paragraph blocks are the most common type, used for standard text content. They serve as the default block type and provide basic text formatting options. To render a Paragraph block, set the [blockType](../api/blockeditor/blockModel#blockType) property to `Paragraph`.
-### Type
+### BlockType
```typescript
// Adding paragraph block
{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [
{
- type: 'Text',
+ contentType: 'Text',
content: 'This is a paragraph block example.'
}
]
}
```
-The below sample demonstrates the configuration of paragraph block in the Block Editor.
+The following sample demonstrates the configuration of a paragraph block in the Block Editor.
{% if page.publishingplatform == "typescript" %}
@@ -63,15 +63,15 @@ The below sample demonstrates the configuration of paragraph block in the Block
### Configure placeholder
-You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel/#placeholder) property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`.
+You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel#placeholder) property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`.
-### Type & Props
+### BlockType & Properties
```typescript
// Adding placeholder
{
- type: 'Paragraph',
- props: {placeholder: 'Start typing ...'}
+ blockType: 'Paragraph',
+ properties: {placeholder: 'Start typing ...'}
}
```
@@ -107,31 +107,30 @@ The below sample demonstrates the configuration of placeholder in the Block Edit
## Configure heading block
-You can render Heading blocks by setting the [type](../api/blockeditor/blockModel/#type) property as `Heading`. Heading blocks are used to create document titles and section headers of varying importance. These blocks help structure your content hierarchically, making it easier to read and navigate.
+Heading blocks create document titles and section headers. These blocks help structure content hierarchically, making it easier to read and navigate. Render a Heading block by setting the [blockType](../api/blockeditor/blockModel#blockType) property to `Heading`.
-### Configure levels
+### Configuring Levels
-You can configure the heading blocks using the property `level`.
-The heading level representing a title `level: 1`, heading `level: 2`, subheading `level: 3` and a subsection by `level: 4`.
+By using the [properties](../api/blockeditor/blockModel#properties), you can set the heading level using the `level` property, with `1` being the highest level (title) and `4` being the lowest (subsection).
-### Type & Props
+### BlockType & Properties
```typescript
// Adding heading block
{
- type: 'Heading',
- props: { level: 1 },
+ blockType: 'Heading',
+ properties: { level: 1 },
// levels range from 1 to 4
content: [
{
- type: 'Text',
+ contentType: 'Text',
content: 'This is a heading block example.'
}
]
}
```
-The below sample demonstrates the configuration of heading block in the Block Editor.
+The following sample demonstrates the configuration of a heading block in the Block Editor.
{% if page.publishingplatform == "typescript" %}
@@ -162,13 +161,13 @@ The below sample demonstrates the configuration of heading block in the Block Ed
### Configure placeholder
-You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel/#placeholder) property. This text appears when the block is empty. The default placeholder for heading block is `Heading{levels}`.
+You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel#placeholder) property. This text appears when the block is empty. The default placeholder for heading block is `Heading{level}`.
```typescript
// Adding placeholder value to blocktype
{
- type: 'Heading',
- props: {
+ blockType: 'Heading',
+ properties: {
level: 1,
placeholder: 'Heading1'
}
@@ -177,29 +176,34 @@ You can configure placeholder text for block using the [placeholder](../api/bloc
## Configure collapsible blocks
-You can render Collapsible blocks by setting the [type](../api/blockeditor/blockModel/#type) property as `CollapsibleParagraph` or `CollapsibleHeading`. Collapsible blocks allow users to expand or collapse sections, providing a way to hide or show content as needed.
+You can render Collapsible blocks by setting the [blockType](../api/blockeditor/blockModel#blockType) property as `CollapsibleParagraph` or `CollapsibleHeading`. Collapsible blocks allow users to expand or collapse sections, providing a way to hide or show content as needed.
### Configure levels
-You can configure the CollapsibleHeading using the property `level` inside the `props` property . The levels can be varied from `level: 1` to `level: 4`.
+You can configure the CollapsibleHeading using the property `level` inside the `properties` property . The levels can be varied from `level: 1` to `level: 4`.
### Configure children
-The Block Editor supports hierarchical content structures through the [children](../api/blockeditor/blockModel/#children) property. This property can be achieved through `props` property that allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks.
+The Block Editor supports hierarchical content structures through the [children](../api/blockeditor/blockModel#children) property. This can be achieved by using the `properties` property that allows you to create nested blocks, which is applicable only for `Callout` and `Collapsible` blocks.
Child blocks can be configured with all the same properties as top-level blocks.
+### Configure parent id
+To establish a clear parent-child relationship, the [parentId](../api/blockeditor/blockModel#parentid) of each child block must match the [id](../api/blockeditor/blockModel#id) of its parent block.
+
+This structure is essential for maintaining nested relationships within the editor.
+
### Configure expanded state
-You can control whether a block is expanded or collapsed using the [isExpanded](../api/blockeditor/blockModel/#isexpanded) property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to Collapsible blocks.
+You can control whether a block is expanded or collapsed using the [isExpanded](../api/blockeditor/blockModel#isExpanded) property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to `Collapsible` blocks.
-### Type & Props
+### BlockType & Properties
```typescript
// Configuring CollapsibleHeading block
{
- type: 'CollapsibleHeading',
- props:{
+ blockType: 'CollapsibleHeading',
+ properties:{
level: 1, //level varies from 1 to 4
isExpanded: true,
children: [
@@ -211,8 +215,8 @@ You can control whether a block is expanded or collapsed using the [isExpanded](
}
// Configuring CollapsibleParagraph block
{
- type: 'CollapsibleParagraph',
- props:{
+ blockType: 'CollapsibleParagraph',
+ properties:{
children: [
{
//your content to be here..
@@ -222,7 +226,7 @@ You can control whether a block is expanded or collapsed using the [isExpanded](
}
```
-The below sample demonstrates the configuration of collapsibleHeading and collapsibleParagraph blocks in the Block Editor.
+This example shows how to configure `CollapsibleHeading` and `CollapsibleParagraph` blocks.
{% if page.publishingplatform == "typescript" %}
@@ -253,54 +257,54 @@ The below sample demonstrates the configuration of collapsibleHeading and collap
### Configure placeholder
-You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel/#placeholder) property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is `Collapsible Heading{levels}` and `Collapsible Paragraph` respectively.
+You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel#placeholder) property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is `Collapsible Heading{level}` and `Collapsible Paragraph` respectively.
```typescript
// Adding placeholder value to collapsible heading
{
- type: 'CollapsibleHeading',
- props: {
+ blockType: 'CollapsibleHeading',
+ properties: {
level: 2,
placeholder: 'Heading block'
}
}
//Adding placeholder value for collapsible paragraph
{
- type: 'CollapsibleParagraph',
- props: { placeholder: 'Collapsible Paragraph'}
+ blockType: 'CollapsibleParagraph',
+ properties: { placeholder: 'Collapsible Paragraph'}
}
```
## Configure divider block
-Divider blocks insert horizontal lines that separate different sections of content. You can render Divider blocks by setting the [type](../api/blockeditor/blockModel/#type) property as `Divider`.
+A Divider block inserts a horizontal line to separate content. Render it by setting the [blockType](../api/blockeditor/blockModel#blockType) to `Divider`.
-### Type & Props
+### BlockType & Properties
```typescript
// Adding divider block
{
{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [
- type: 'Text',
+ contentType: 'Text',
content: 'This is a paragraph 1.'
]
},
{
- type: 'Divider'
+ blockType: 'Divider'
},
{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [
- type: 'Text',
+ contentType: 'Text',
content: 'This is a paragraph 1.'
]
}
}
```
-The below sample demonstrates the configuration of divider block in the Block Editor.
+This sample shows how to place a divider between two blocks.
{% if page.publishingplatform == "typescript" %}
@@ -332,22 +336,21 @@ The below sample demonstrates the configuration of divider block in the Block Ed
## Configure quote block
-You can render Quote blocks by setting the [type](../api/blockeditor/blockModel/#type) property as `Quote`. Quote blocks are specially styled for quotations or excerpts.
+Quote blocks are styled for displaying quotations or excerpts. Render a Quote block by setting the [blockType](../api/blockeditor/blockModel#blockType) to `Quote`.
-### Type & Props
+### BlockType & Properties
```typescript
// Adding quote block
{
- type: 'Quote',
+ blockType: 'Quote',
content: [
- type: 'Text',
+ contentType: 'Text',
content: ''
]
}
```
-
-The below sample demonstrates the configuration of quote block in the Block Editor.
+The following sample shows how to configure a quote block.
{% if page.publishingplatform == "typescript" %}
@@ -378,31 +381,31 @@ The below sample demonstrates the configuration of quote block in the Block Edit
### Configure placeholder
-You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel/#placeholder) property. This text appears when the block is empty. The default placeholder for quote block is `Write a quote`.
+You can configure placeholder text for block using the [placeholder](../api/blockeditor/blockModel#placeholder) property. This text appears when the block is empty. The default placeholder for quote block is `Write a quote`.
```typescript
// Adding placeholder value to blocktype
{
- type: 'Quote',
- props: { placeholder: 'Quote'}
+ blockType: 'Quote',
+ properties: { placeholder: 'Quote'}
}
```
## Configure callout block
-You can render Callout blocks by setting the [type](../api/blockeditor/blockModel/#type) property as `Callout`. They're useful for notes, warnings, or tips that require special attention.
+Callout blocks highlight important information such as notes, warnings, or tips. Render one by setting the [blockType](../api/blockeditor/blockModel#blockType) to `Callout`.
-### Type & Props
+### BlockType & Properties
```typescript
// Adding callout block
- {
- type: 'Callout',
- props:{
+ {
+ blockType: 'Callout',
+ properties:{
children: [{
- type: 'Paragraph',
+ blockType: 'Paragraph',
content: [{
- type: 'Text',
+ contentType: 'Text',
content: 'Important information: This is a callout block used to highlight important content.'
}]
}]
@@ -410,7 +413,7 @@ You can render Callout blocks by setting the [type](../api/blockeditor/blockMode
}
```
-The below sample demonstrates the configuration of callout block in the Block Editor.
+The following sample adds a callout block to the editor.
{% if page.publishingplatform == "typescript" %}
@@ -441,15 +444,15 @@ The below sample demonstrates the configuration of callout block in the Block Ed
### Configure children
-The Block Editor supports hierarchical content structures through the [children](../api/blockeditor/blockModel/#children) property. This property allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks.
+The Block Editor supports hierarchical content structures through the [children](../api/blockeditor/blockModel#children) property. This can be achieved by using the `properties` property that allows you to create nested blocks, which is applicable only for `Callout` and `Collapsible` blocks.
Child blocks can be configured with all the same properties as top-level blocks.
### Configure parent id
-For proper hierarchy, you should ensure that the [parentId](../api/blockeditor/blockModel/#parentid) of each child block matches the [id](../api/blockeditor/blockModel/#id) of its parent block. This structure helps maintain the nested relationships within the editor.
+To establish a clear parent-child relationship, the [parentId](../api/blockeditor/blockModel#parentid) of each child block must match the [id](../api/blockeditor/blockModel#id) of its parent block.
-The below sample demonstrates the configuration of children in the Block Editor using parentId.
+This structure is essential for maintaining nested relationships within the editor. The following sample demonstrates how to create a nested hierarchy.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/drag-drop.md b/ej2-javascript/block-editor/drag-drop.md
index 62ce658bc..71214c0a0 100644
--- a/ej2-javascript/block-editor/drag-drop.md
+++ b/ej2-javascript/block-editor/drag-drop.md
@@ -11,23 +11,21 @@ domainurl: ##DomainURL##
# Drag and drop in ##Platform_Name## Block Editor control
-The drag and drop feature in Block Editor allows users to easily rearrange blocks within the editor by dragging them to different positions.
+The drag and drop feature in the Block Editor allows users to intuitively rearrange content blocks by dragging them to different positions within the editor.
## Enable Drag and Drop
-You can control drag and drop operations within Block Editor using the [enableDragAndDrop](../api/blockeditor/#enabledraganddrop) property. By default, it is set to `true`.
-
-## Dragging blocks
+You can control the drag and drop functionality within the Block Editor using the [enableDragAndDrop](../api/blockeditor#enabledraganddrop) property. This feature is enabled by default (`true`).
When drag and drop is enabled, users can rearrange blocks in the following ways:
The Block Editor supports both single and multiple block dragging. Users can drag individual blocks or select multiple blocks and drag them together to a new position.
-- **Single Block Dragging**: For single block, users can hover over a block to reveal the drag handle, then click and drag to move it to a new position.
+- **Single Block Dragging**: To drag a single block, hover over it to reveal the drag handle. Click and hold the handle, then drag the block to a new position.
-- **Multiple Block Dragging**: For multiple blocks, users first select the blocks they want to move. Once selected, users can drag the entire group to a new position.
+- **Multiple Block Dragging**: To move multiple blocks, first select the desired blocks. Once selected, click and drag the entire group to a new location.
-During the drag operation, the editor provides visual cues to indicate where the blocks will be positioned when dropped. This helps users precisely place blocks where they want it.
+During the drag operation, a visual indicator will show precisely where the blocks will be placed when dropped, ensuring accurate placement.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/editor-menus.md b/ej2-javascript/block-editor/editor-menus.md
index b6651d6db..dd27ceecd 100644
--- a/ej2-javascript/block-editor/editor-menus.md
+++ b/ej2-javascript/block-editor/editor-menus.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Editor Menus in ##Platform_Name## Block Editor control
-The Block Editor control provides several interactive menus to enhance content creation and editing. These menus offer quick access to various commands and formatting options.
+The Block Editor control includes several intuitive, context-aware menus that streamline content creation and editing. These menus provide quick access to formatting options and commands, improving user productivity.
## Slash command menu
@@ -21,34 +21,29 @@ The Slash Command menu allows users to quickly insert or transform blocks by typ
The Slash Command menu comes with a set of pre-defined commands for all block types:
-- **Headings(Level 1 to 4)**: to insert respective heading blocks.
-- **Lists(Bullet, Numbered, Checklist)**: for different list types.
-- **Paragraph**: for standard text blocks.
-- **Image**: for media insertion.
-- **Toggle**: for collapsible content.
-- **Callout**: for highlighting important information.
-- **Utility(Divider, Quote, Code)**: for other utility blocks.
+- **Headings (Level 1 to 4)**: Inserts a heading block of the corresponding level.
+- **Lists (Bullet, Numbered, Checklist)**: Creates a block for the specified list type.
+- **Paragraph**: Inserts a standard text block.
+- **Image**: Inserts a media block for images.
+- **Table**: Inserts a table block.
+- **Toggle**: Creates a collapsible content block.
+- **Callout**: Inserts a block for highlighting important information.
+- **Utility (Divider, Quote, Code)**: Inserts a utility block like a divider, quote, or code block.
### Customize Slash command menu
-You can utilize the [commandMenu](../api/blockeditor/#commandmenu) property on the Block Editor control to customize the Slash Command menu to include your own custom commands and other modifications.
-
-#### Show or hide tooltip
-
-By default, the tooltip is displayed when the user hovers over the command item. You can show or hide the tooltip using the [enableTooltip](../api/blockeditor/commandMenuSettingsModel/#enabletooltip) property on the command menu settings.
+You can use the [commandMenuSettings](../api/blockeditor#commandmenusettings) property to modify the Slash Command menu. This allows you to add custom commands, remove default items, or change the behavior of existing commands to fit your application's requirements.
### Events
-The following events are available in the Slash Command menu.
+The following events are available for the Slash Command menu:
|Name|Args|Description|
|---|---|---|
-|[open](../api/blockeditor/commandMenuSettingsModel/#open)|CommandMenuOpenEventArgs|Triggers when the command menu is opened.|
-|[close](../api/blockeditor/commandMenuSettingsModel/#close)|CommandMenuCloseEventArgs|Triggers when the command menu is closed.|
-|[queryFiltering](../api/blockeditor/commandMenuSettingsModel/#queryfiltering)|CommandQueryFilteringEventArgs|Triggers when the user types to filter the command menu items.|
-|[itemClicked](../api/blockeditor/commandMenuSettingsModel/#itemclicked)|CommandItemClickedEventArgs|Triggers when the user clicks on a command menu item.|
+|[filtering](../api/blockeditor/commandMenuSettingsModel#filtering)|CommandFilteringEventArgs|Triggers when the user types to filter the command menu items.|
+|[itemSelect](../api/blockeditor/commandMenuSettingsModel#itemselect)|CommandItemSelectEventArgs|Triggers when the user clicks on a command menu item.|
-Below example demonstrates the customization of the Slash Command menu.
+The following example demonstrates how to customize the Slash Command menu.
{% if page.publishingplatform == "typescript" %}
@@ -83,30 +78,28 @@ The Context menu appears when a user right-clicks within a specific block. It pr
### Built-in items
-The Context menu offers different built-in options:
+The Context menu offers the following built-in options:
-- **Undo/Redo**: Undo and redo actions.
-- **Cut/Copy/Paste**: Standard clipboard actions.
-- **Indent**: Increase or decrease the indent level of the selected block.
-- **Link**: Add or edit a hyperlink.
+- **Undo/Redo**: Reverses or re-applies the last action.
+- **Cut/Copy/Paste**: Standard clipboard actions for selected content.
+- **Indent**: Increases or decreases the indent level of the selected block.
+- **Link**: Adds or edits a hyperlink for the selected text.
### Customize Context menu
-You can utilize the [contextMenu](../api/blockeditor/#contextmenu) property on the Block Editor to customize the Context menu to add specific actions or modify existing ones based on the application needs.
+You can use the [contextMenuSettings](../api/blockeditor#contextmenusettings) property to customize the Context menu. This allows you to add specific actions or modify existing items based on your application needs.
### Events
-The following events are available in the Context menu.
+The following events are available for the Context menu:
|Name|Args|Description|
|---|---|---|
-|[beforeOpen](../api/blockeditor/contextMenuSettingsModel/#beforeopen)|ContextMenuBeforeOpenEventArgs|Triggers before the context menu opens.|
-|[open](../api/blockeditor/contextMenuSettingsModel/#open)|ContextMenuOpenEventArgs|Triggers when the context menu is opened.|
-|[beforeClose](../api/blockeditor/contextMenuSettingsModel/#beforeclose)|ContextMenuBeforeCloseEventArgs|Triggers before the context menu closes.|
-|[close](../api/blockeditor/contextMenuSettingsModel/#close)|ContextMenuCloseEventArgs|Triggers when the context menu is closed.|
-|[itemClick](../api/blockeditor/contextMenuSettingsModel/#itemclick)|ContextMenuItemClickEventArgs|Triggers when a context menu item is clicked.|
+|[opening](../api/blockeditor/contextMenuSettingsModel#opening)|ContextMenuOpeningEventArgs|Triggers before the context menu opens.|
+|[closing](../api/blockeditor/contextMenuSettingsModel#closing)|ContextMenuClosingEventArgs|Triggers before the context menu closes.|
+|[itemSelect](../api/blockeditor/contextMenuSettingsModel#itemselect)|ContextMenuItemSelectEventArgs|Triggers when a context menu item is clicked.|
-Below example demonstrates the customization of the Context menu.
+The following example demonstrates how to customize the Context menu.
{% if page.publishingplatform == "typescript" %}
@@ -137,36 +130,36 @@ Below example demonstrates the customization of the Context menu.
## Block action menu
-The Block Action menu typically appears next to a block when you hover over it and click on the drag handle icon, offering quick actions specific to that block.
+The Block Action menu appears next to a block when you hover over it and click the drag handle icon, offering quick actions specific to that block.
### Built-in items
The Block Action menu provides convenient actions for managing individual blocks:
-- **Duplicate**: Create a copy of the current block.
-- **Delete**: Remove the block from the editor.
-- **Move Up**: Move the block one level up in the hierarchy.
-- **Move Down**: Move the block one level down in the hierarchy.
+- **Duplicate**: Creates an exact copy of the current block.
+- **Delete**: Removes the block from the editor.
+- **Move Up**: Moves the block one position higher.
+- **Move Down**: Moves the block one position lower.
### Customize Block action menu
-You can utilize the [blockActionsMenu](../api/blockeditor/#blockactionsmenu) property on the Block Editor to customize the Block action menu to include block-specific commands relevant to your application. This allows for highly tailored user experiences.
+You can use the [blockActionMenuSettings](../api/blockeditor#blockactionmenusettings) property to customize the Block action menu. This enables you to add block-specific commands that are relevant to your application, allowing for a highly tailored user experience.
#### Show or hide tooltip
-By default, the tooltip is displayed when the user hovers over the action item. You can show or hide the tooltip using the [enableTooltip](../api/blockeditor/blockActionMenuSettingsModel/#enabletooltip) property on the block action menu settings.
+By default, a tooltip is displayed when the user hovers over an action item. You can show or hide the tooltip using the [enableTooltip](../api/blockeditor/blockActionMenuSettingsModel#enabletooltip) property in the block action menu settings.
### Events
-The following events are available in the Block action menu.
+The following events are available for the Block action menu:
|Name|Args|Description|
|---|---|---|
-|[open](../api/blockeditor/blockActionMenuSettingsModel/#open)|BlockActionMenuOpenEventArgs|Triggers when the block action menu is opened.|
-|[close](../api/blockeditor/blockActionMenuSettingsModel/#close)|BlockActionMenuCloseEventArgs|Triggers when the block action menu is closed.|
-|[itemClick](../api/blockeditor/blockActionMenuSettingsModel/#itemClick)|BlockActionMenuItemClickEventArgs|Triggers when a block action menu item is clicked.|
+|[opening](../api/blockeditor/blockActionMenuSettingsModel#opening)|BlockActionMenuOpeningEventArgs|Triggers when the block action menu is opened.|
+|[closing](../api/blockeditor/blockActionMenuSettingsModel#closing)|BlockActionMenuClosingEventArgs|Triggers when the block action menu is closed.|
+|[itemSelect](../api/blockeditor/blockActionMenuSettingsModel#itemselect)|BlockActionItemSelectEventArgs|Triggers when a block action menu item is clicked.|
-Below example demonstrates the customization of the Block action menu.
+The following example demonstrates how to customize the Block action menu.
{% if page.publishingplatform == "typescript" %}
@@ -197,37 +190,31 @@ Below example demonstrates the customization of the Block action menu.
## Inline Toolbar
-The Inline Toolbar appears when a text is selected in the editor, providing quick access to common text formatting actions that apply to the inline content.
+The Inline Toolbar appears when a text is selected in the editor, providing quick access to common text formatting actions that apply to inline content.
### Built-in items
-The Inline Toolbar includes below built-in formatting options:
+The Inline Toolbar includes the following built-in formatting options:
-- **Text Styles**: Bold, Italic, Underline, Strikethrough.
+- **Text Styles**: Bold, Italic, Underline, and Strikethrough.
- **Superscript/Subscript**: For mathematical or scientific notations.
-- **Case Conversion**: Uppercase, Lowercase.
-- **Text Color**: Change text color.
-- **Background Color**: Change background color.
+- **Case Conversion**: Change text to uppercase or lowercase.
+- **Text Color**: Change the color of the selected text.
+- **Background Color**: Change the background color of the selected text.
### Customize Inline Toolbar
-You can utilize the [inlineToolbar](../api/blockeditor/#inlinetoolbar) property on the Block Editor to customize the Inline Toolbar to add or remove formatting options based on your application's needs.
+You can use the [inlineToolbarSettings](../api/blockeditor#inlinetoolbarsettings) property to customize the Inline Toolbar by adding or removing formatting options based on your application's needs.
-#### Show or hide tooltip
-
-By default, the tooltip is displayed when the user hovers over the toolbar item. You can show or hide the tooltip using the [enableTooltip](../api/blockeditor/inlineToolbarSettingsModel/#enabletooltip) property on the inline toolbar settings.
-
-### Events
+## Events
-The following events are available in the Inline Toolbar.
+The following events are available for the Inline Toolbar:
|Name|Args|Description|
|---|---|---|
-|[open](../api/blockeditor/inlineToolbarSettingsModel/#open)|ToolbarOpenEventArgs|Triggers when the inline toolbar is opened.|
-|[close](../api/blockeditor/inlineToolbarSettingsModel/#close)|ToolbarCloseEventArgs|Triggers when the inline toolbar is closed.|
-|[itemClicked](../api/blockeditor/inlineToolbarSettingsModel/#itemclicked)|ToolbarItemClickedEventArgs|Triggers when the user clicks on an inline toolbar item.|
+|[itemClick](../api/blockeditor/inlineToolbarSettingsModel#itemclick)|ToolbarItemClickEventArgs|Triggers when the user clicks on an inline toolbar item.|
-Below example demonstrates the customization of the Inline Toolbar.
+The following example demonstrates how to customize the Inline Toolbar.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/block-editor/editor-security/cross-site-script.md b/ej2-javascript/block-editor/editor-security/cross-site-script.md
new file mode 100644
index 000000000..6c4b6a321
--- /dev/null
+++ b/ej2-javascript/block-editor/editor-security/cross-site-script.md
@@ -0,0 +1,47 @@
+---
+layout: post
+title: Cross-Site script in ##Platform_Name## Block Editor control | Syncfusion
+description: Checkout and learn about Cross-Site scripting with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Block Editor
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Cross-Site scripting in ##Platform_Name## Block Editor control
+
+The Block Editor allows users to edit the content with security by preventing cross-site scripting (XSS). By default, it provides built-in support to remove elements from editor content that cause XSS attacks. The editor removes the elements based on the attributes if it is possible to execute a script.
+
+## Enabling XSS prevention
+
+The [enableHtmlSanitizer](../api/blockeditor/index-default#enablehtmlsanitizer), enabled by default, activates XSS prevention. When active, the editor automatically removes elements like `
-
-
-
-