Integrated latest changes at 11-17-2025 1:30:06 PM

Author: SyncfusionBuild

ej2-javascript/code-snippet/rich-text-editor/mention-suggestion-count/js/index.html

@@ -24,19 +24,15 @@
     <div id="container">
         <div id="mentionEditor"></div>
             <div id="mention_integration">
-                 <p>
-                Hello
-                <span contenteditable="false" class="e-mention-chip"
-                  ><a href="mailto:maria@gmail.com" title="maria@gmail.com"
-                    >Maria</a
-                  ></span
-                >
-              </p>
-
-              <p>
-                Type <code>@</code> followed by at least
-                <strong>3 characters</strong> to trigger the suggestion list.
-              </p>
+                  <p>
+                    Hello
+                    <span contenteditable="false" class="e-mention-chip"
+                      ><a href="mailto:maria@gmail.com" title="maria@gmail.com"
+                        >Maria</a
+                      ></span
+                    >&#8203;
+                  </p>
+                  <p>The suggestion list displays only 5 items when typing the &#64; character, as the data source contains a large set of entries</p>
             </div>
     </div>
 

ej2-javascript/code-snippet/rich-text-editor/mention-suggestion-count/ts/index.html

@@ -26,19 +26,15 @@
     <div id='container'>
         <div id="mentionEditor"></div>
             <div id="mention_integration">
-                 <p>
-                Hello
-                <span contenteditable="false" class="e-mention-chip"
-                  ><a href="mailto:maria@gmail.com" title="maria@gmail.com"
-                    >Maria</a
-                  ></span
-                >
-              </p>
-
-              <p>
-                Type <code>@</code> followed by at least
-                <strong>3 characters</strong> to trigger the suggestion list.
-              </p>
+                  <p>
+                    Hello
+                    <span contenteditable="false" class="e-mention-chip"
+                      ><a href="mailto:maria@gmail.com" title="maria@gmail.com"
+                        >Maria</a
+                      ></span
+                    >&#8203;
+                  </p>
+                  <p>The suggestion list displays only 5 items when typing the &#64; character, as the data source contains a large set of entries</p>
             </div>
     </div>
 </body>

ej2-javascript/code-snippet/rich-text-editor/nested-blockquote/index.js

@@ -9,12 +9,6 @@ var editor = new ej.richtexteditor.RichTextEditor({
             </blockquote>
         </blockquote>
     </blockquote>
-`,
-    toolbarSettings: {
-        items: ['Blockquote', 'Bold', 'Italic', 'Underline', 'StrikeThrough',
-            'FontName', 'FontSize',
-            'LowerCase', 'UpperCase', '|',
-            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
-            'Outdent', 'Indent', '|', 'Undo', 'Redo']
-    }});
+`
+});
 editor.appendTo('#editor');

ej2-javascript/code-snippet/rich-text-editor/nested-blockquote/index.ts

@@ -12,12 +12,6 @@ let editor: RichTextEditor = new RichTextEditor({
             </blockquote>
         </blockquote>
     </blockquote>
-`,
-    toolbarSettings: {
-        items: ['Blockquote', 'Bold', 'Italic', 'Underline', 'StrikeThrough',
-            'FontName', 'FontSize',
-            'LowerCase', 'UpperCase', '|',
-            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
-            'Outdent', 'Indent', '|', 'Undo', 'Redo']
-    }});
+`
+});
 editor.appendTo('#editor');

ej2-javascript/rich-text-editor/selection.md

@@ -27,6 +27,8 @@ This functionality is useful for scenarios where precise text selection is neede
 {% include code-snippet/rich-text-editor/selection/index.html %}
 {% endhighlight %}
 {% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/selection" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
@@ -59,6 +61,8 @@ The following example demonstrates how to select a paragraph node programmatical
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/node-selection" %}
+
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
@@ -73,6 +77,7 @@ The following example demonstrates how to select a paragraph node programmatical
 {% previewsample "page.domainurl/code-snippet/rich-text-editor/node-selection" %}
 {% endif %}
 
+
 ## Cell selection
 
 Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction.
@@ -90,6 +95,8 @@ The following example demonstrates how to select a table cell programmatically u
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/cell-selection" %}
+
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
@@ -119,6 +126,8 @@ To select all content within the Rich Text Editor, use the [selectAll](https://e
 {% endhighlight %}
 {% endtabs %}
 
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/select-all" %}
+
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
@@ -130,5 +139,5 @@ To select all content within the Rich Text Editor, use the [selectAll](https://e
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/cell-selection" %}
-{% endif %}
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/select-all" %}
+{% endif %}

ej2-javascript/rich-text-editor/smart-editing/mentions.md

@@ -15,7 +15,7 @@ By integrating the [Mention](https://ej2.syncfusion.com/documentation/mention/ge
 
 ## Setup and configuration
 
-Use the [target](https://ej2.syncfusion.com/documentation/api/mention/#target) property of the Mention control to specify the `ID` of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix `_rte-edit-view` to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text.
+Use the [target](https://ej2.syncfusion.com/documentation/api/mention#target) property of the Mention control to specify the `ID` of the content editable div element within the Rich Text Editor. When setting the target, make sure to append the suffix `_rte-edit-view` to the ID. This allows you to enable the Mention functionality within the Rich Text Editor, so that users can mention or tag other users or objects from the suggested list while editing the text.
 
 ## Using mentions
 
@@ -28,11 +28,11 @@ When the user types the `@` symbol followed by a character, the Rich Text Editor
 
 ### Minimum input length for Mention suggestions
 
-You can control when the suggestion list appears by setting the [minLength](https://ej2.syncfusion.com/documentation/api/mention/#minlength) property in the Mention control. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance.
+You can control when the suggestion list appears by setting the [minLength](https://ej2.syncfusion.com/documentation/api/mention#minlength) property in the Mention control. This property defines the minimum number of characters a user must type after the mention character (@) to trigger the search action. This is especially useful when working with large datasets, as it helps reduce unnecessary queries and improves performance.
 
 By default, `minLength` is set to 0, which means the suggestion list appears immediately after the mention character is entered. However, you can increase this value to delay the search until the user has typed a specific number of characters.
 
-In the following example, the ``minLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol.
+In the following example, the `minLength` is set to 3, so the suggestion list will only appear once the user types three or more characters after the @ symbol.
 
 {% if page.publishingplatform == "typescript" %}
 
@@ -63,7 +63,7 @@ In the following example, the ``minLength` is set to 3, so the suggestion list w
 
 ### Customizing suggestion list count
 
-You can control the number of items displayed in the Mention suggestion list using the [suggestionCount](https://ej2.syncfusion.com/documentation/api/mention/#suggestioncount) property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user.
+You can control the number of items displayed in the Mention suggestion list using the [suggestionCount](https://ej2.syncfusion.com/documentation/api/mention#suggestioncount) property. This is particularly useful when working with large datasets, allowing you to limit the number of suggestions shown to the user.
 
 By default, the suggestion list displays 25 items. You can customize this value to show fewer or more items based on your application's needs.
 
@@ -93,18 +93,18 @@ In the example below, the `suggestionCount` is set to 5, so only 5 items will be
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/rich-text-editor/mention-min-char" %}
+{% previewsample "page.domainurl/code-snippet/rich-text-editor/mention-suggestion-count" %}
 {% endif %}
 
 ### Customizing suggestion list using templates
 
 #### Item template
 
-You can customize how each item appears in the suggestion list using the [itemTemplate](https://ej2.syncfusion.com/documentation/api/mention/#itemtemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name.
+You can customize how each item appears in the suggestion list using the [itemTemplate](https://ej2.syncfusion.com/documentation/api/mention#itemtemplate) property. This allows you to display additional details such as email, role, or profile image alongside the mention name.
 
 #### Display template 
 
-Use the [displayTemplate](https://ej2.syncfusion.com/documentation/api/mention/#displaytemplate) property to define how the selected mention appears in the editor content.
+Use the [displayTemplate](https://ej2.syncfusion.com/documentation/api/mention#displaytemplate) property to define how the selected mention appears in the editor content.
 
 For example, by default, the mention chip renders as:
 
@@ -124,10 +124,10 @@ This allows you to create more interactive and informative mentions within the e
 
 In the following sample, we configured the following properties:
 
-* [itemTemplate](https://ej2.syncfusion.com/documentation/api/mention/#itemtemplate) - Used to display the customized appearance in suggestion list.
-* [displayTemplate](https://ej2.syncfusion.com/documentation/api/mention/#displaytemplate) - Used to customize how the selected value appears in the editor content.
-* [allowSpaces](https://ej2.syncfusion.com/documentation/api/mention/#allowspaces) - Allow to continue search action if user enter space after mention character while searching.
-* [suggestionCount](https://ej2.syncfusion.com/documentation/api/mention/#suggestioncount) - The maximum number of items that will be displayed in the suggestion list.
+* [itemTemplate](https://ej2.syncfusion.com/documentation/api/mention#itemtemplate) - Used to display the customized appearance in suggestion list.
+* [displayTemplate](https://ej2.syncfusion.com/documentation/api/mention#displaytemplate) - Used to customize how the selected value appears in the editor content.
+* [allowSpaces](https://ej2.syncfusion.com/documentation/api/mention#allowspaces) - Allow to continue search action if user enter space after mention character while searching.
+* [suggestionCount](https://ej2.syncfusion.com/documentation/api/mention#suggestioncount) - The maximum number of items that will be displayed in the suggestion list.
 
 {% if page.publishingplatform == "typescript" %}