988174: Rich Text Editor Missing topics Are Added

ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor

@@ -0,0 +1,158 @@
+
+@using Syncfusion.EJ2.DropDowns
+
+@{
+
+    string rteValue = @"<p>Dear <span contenteditable=""false"" class=""e-mention-chip""><span>{{FirstName}}</span></span> <span contenteditable=""false"" class=""e-mention-chip""><span>{{LastName}}</span></span>,</p>
+    <p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{PromoCode}}</span></span>.</p>
+    <p>Your current subscription plan is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{SubscriptionPlan}}</span></span>.</p>
+    <p>Your customer ID is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{CustomerID}}</span></span>.</p>
+    <p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
+    <p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href=""mailto:{{SupportEmail}}""><span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportPhoneNumber}}</span></span>.</p>
+    <p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
+    char mentionChar = '{';
+    var tools = new object[]
+    {
+        "Bold",
+        "Italic",
+        "Underline",
+        "|",
+        "Formats",
+        "Alignments",
+        "OrderedList",
+        "UnorderedList",
+        "|",
+        "CreateLink",
+        "Image",
+        "CreateTable",
+        "|",
+        new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" },
+        new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" },
+        "SourceCode",
+        "|",
+        "Undo",
+        "Redo",
+    };
+    var items = new List<object>
+    {
+        new { text = "First Name" },
+        new { text = "Last Name" },
+        new { text = "Support Email" },
+        new { text = "Company Name" },
+        new { text = "Promo Code" },
+        new { text = "Support Phone Number" },
+        new { text = "Customer ID" },
+        new { text = "Expiration Date" },
+        new { text = "Subscription Plan" }
+    };
+
+    var mergeData = new List<object>
+    {
+        new { text = "First Name", value = "FirstName" },
+        new { text = "Last Name", value = "LastName" },
+        new { text = "Support Email", value = "SupportEmail" },
+        new { text = "Company Name", value = "CompanyName" },
+        new { text = "Promo Code", value = "PromoCode" },
+        new { text = "Support Phone Number", value = "SupportPhoneNumber" },
+        new { text = "Customer ID", value = "CustomerID" },
+        new { text = "Expiration Date", value = "ExpirationDate" },
+        new { text = "Subscription Plan", value = "SubscriptionPlan" }
+    };
+}
+<div class="control-section">
+    <div class="control-wrapper">
+        @Html.EJS().RichTextEditor("mailMergeEditor").ActionBegin("actionBeginHandler").ActionComplete("actionCompleteHandler").SaveInterval(1).Created("created").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render()
+        @Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render()
+        @Html.EJS().DropDownButton("insert_Field").Content("Insert Field").Close("onDropDownClose").Select("onItemSelect").Items(items).CssClass("e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu").Render()
+        @Html.EJS().Mention("mentionField").MentionChar(mentionChar).Created("onMentionCreate").Target("#mailMergeEditor_rte-edit-view").DataSource(mergeData).AllowSpaces(true).Fields(new MentionFieldSettings { Text = "Text" }).DisplayTemplate("<span> {{${Value}}} </span>").PopupWidth("250px").PopupHeight("200px").Render()
+    </div>
+</div>
+
+
+
+<script>
+    var mailMergeEditor;
+    var mentionObj;
+    const textToValueMap = {
+        'First Name': 'FirstName',
+        'Last Name': 'LastName',
+        'Support Email': 'SupportEmail',
+        'Company Name': 'CompanyName',
+        'Promo Code': 'PromoCode',
+        'Support Phone Number': 'SupportPhoneNumber',
+        'Customer ID': 'CustomerID',
+        'Expiration Date': 'ExpirationDate',
+        'Subscription Plan': 'SubscriptionPlan'
+    };
+    var placeholderData = {
+        "FirstName": "John",
+        "LastName": "Doe",
+        "PromoCode": "ABC123",
+        "SubscriptionPlan": "Premium",
+        "CustomerID": "123456",
+        "ExpirationDate": "2024-12-31",
+        "SupportEmail": "[email protected]",
+        "SupportPhoneNumber": "+1-800-555-5555",
+        "CompanyName": "Example Inc."
+    };
+    function created() {
+        mailMergeEditor = this;
+    }
+    function onMentionCreate() {
+        mentionObj = this;
+    }
+    function actionBeginHandler(args) {
+        if (
+            args.requestType === 'EnterAction' &&
+            mentionObj.element.classList.contains('e-popup-open')
+        ) {
+            args.cancel = true;
+        }
+    }
+    function onDropDownClose() {
+        if (mailMergeEditor) {
+            mailMergeEditor.focusIn();
+        }
+    }
+    function onItemSelect(args) {
+        if (args.item.text != null) {
+            const value = textToValueMap[args.item.text];
+            const trimmedValue = value.trim();
+            mailMergeEditor.formatter.editorManager.nodeSelection.restore();
+            mailMergeEditor.executeCommand(
+                'insertHTML',
+                `<span contenteditable="false" class="e-mention-chip"><span>{{${trimmedValue}}}</span></span>&nbsp;`,
+                { undo: true }
+            );
+        }
+    }
+    function actionCompleteHandler(e) {
+        if (e.requestType === 'SourceCode') {
+            mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay');
+            mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.add('e-overlay');
+        } else if (e.requestType === 'Preview') {
+            mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay');
+            mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.remove('e-overlay');
+        }
+    }
+    function onClickHandler() {
+        if (mailMergeEditor) {
+            let editorContent = mailMergeEditor.value;
+            let mergedContent = replacePlaceholders(editorContent, placeholderData);
+            if (mailMergeEditor.formatter.getUndoRedoStack().length === 0) {
+                mailMergeEditor.formatter.saveData();
+            }
+            mailMergeEditor.value = mergedContent;
+            mailMergeEditor.formatter.saveData();
+        } else {
+            console.log('MailMergeEditor is not initialized.');
+        }
+    }
+    function replacePlaceholders(template, data) {
+        return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => {
+            var value = data[key.trim()];
+            var result = value !== undefined ? value : match;
+            return result;
+        });
+    }
+</script>

ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/tagHelper

@@ -0,0 +1,171 @@
+@{
+    string rteValue = @"<p>Dear <span contenteditable=""false"" class=""e-mention-chip""><span>{{FirstName}}</span></span> <span contenteditable=""false"" class=""e-mention-chip""><span>{{LastName}}</span></span>,</p>
+    <p>We are thrilled to have you with us! Your unique promotional code for this month is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{PromoCode}}</span></span>.</p>
+    <p>Your current subscription plan is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{SubscriptionPlan}}</span></span>.</p>
+    <p>Your customer ID is: <span contenteditable=""false"" class=""e-mention-chip""><span>{{CustomerID}}</span></span>.</p>
+    <p>Your promotional code expires on: <span contenteditable=""false"" class=""e-mention-chip""><span>{{ExpirationDate}}</span></span>.</p>
+    <p>Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at <a href=""mailto:{{SupportEmail}}""><span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportEmail}}</span></span></a> or call us at <span contenteditable=""false"" class=""e-mention-chip""><span>{{SupportPhoneNumber}}</span></span>.</p>
+    <p>Best regards,<br>The <span contenteditable=""false"" class=""e-mention-chip""><span>{{CompanyName}}</span></span> Team</p>";
+    char mentionChar = '{';
+    var tools = new object[]
+    {
+        "Bold",
+        "Italic",
+        "Underline",
+        "|",
+        "Formats",
+        "Alignments",
+        "OrderedList",
+        "UnorderedList",
+        "|",
+        "CreateLink",
+        "Image",
+        "CreateTable",
+        "|",
+        new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" },
+        new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" },
+        "SourceCode",
+        "|",
+        "Undo",
+        "Redo",
+    };
+    var items = new List<object>
+    {
+        new { text = "First Name" },
+        new { text = "Last Name" },
+        new { text = "Support Email" },
+        new { text = "Company Name" },
+        new { text = "Promo Code" },
+        new { text = "Support Phone Number" },
+        new { text = "Customer ID" },
+        new { text = "Expiration Date" },
+        new { text = "Subscription Plan" }
+    };
+
+    var mergeData = new List<object>
+    {
+        new { text = "First Name", value = "FirstName" },
+        new { text = "Last Name", value = "LastName" },
+        new { text = "Support Email", value = "SupportEmail" },
+        new { text = "Company Name", value = "CompanyName" },
+        new { text = "Promo Code", value = "PromoCode" },
+        new { text = "Support Phone Number", value = "SupportPhoneNumber" },
+        new { text = "Customer ID", value = "CustomerID" },
+        new { text = "Expiration Date", value = "ExpirationDate" },
+        new { text = "Subscription Plan", value = "SubscriptionPlan" }
+    };
+}
+
+
+
+<div class="control-section">
+    <div class="sample-container">
+        <div class="default-section">
+                <ejs-richtexteditor id="mailMergeEditor" value="@rteValue" actionBegin="actionBeginHandler" actionComplete="actionCompleteHandler" created="created" saveInterval="1">
+                    <e-richtexteditor-toolbarsettings items="@tools"></e-richtexteditor-toolbarsettings>                    
+                </ejs-richtexteditor>
+                <ejs-button id="merge_data" content="Merge Data" onclick="onClickHandler()" cssClass="e-tbar-btn e-btn" tabindex="-1" style="width: 100%"></ejs-button>
+                <ejs-dropdownbutton id="insert_Field" select="onItemSelect" close="onDropDownClose" content="Insert Field" items="items" cssClass="e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu"></ejs-dropdownbutton>
+                <ejs-mention id="mentionField" target="#mailMergeEditor_rte-edit-view" mentionChar="@mentionChar" created="onMentionCreate" dataSource="@mergeData" popupHeight="200px" popupWidth="250px" allowSpaces="true" displayTemplate="<span> {{${value}}} </span>">
+                    <e-mention-fields text="text"></e-mention-fields>
+                </ejs-mention>
+        </div>
+    </div>
+</div>
+
+<script>
+    var mailMergeEditor;
+    var mentionObj;
+
+    const textToValueMap = {
+        'First Name': 'FirstName',
+        'Last Name': 'LastName',
+        'Support Email': 'SupportEmail',
+        'Company Name': 'CompanyName',
+        'Promo Code': 'PromoCode',
+        'Support Phone Number': 'SupportPhoneNumber',
+        'Customer ID': 'CustomerID',
+        'Expiration Date': 'ExpirationDate',
+        'Subscription Plan': 'SubscriptionPlan'
+    };
+
+    var placeholderData = {
+        "FirstName": "John",
+        "LastName": "Doe",
+        "PromoCode": "ABC123",
+        "SubscriptionPlan": "Premium",
+        "CustomerID": "123456",
+        "ExpirationDate": "2024-12-31",
+        "SupportEmail": "[email protected]",
+        "SupportPhoneNumber": "+1-800-555-5555",
+        "CompanyName": "Example Inc."
+    };
+
+    function created() {
+        mailMergeEditor = this;
+    }
+
+    function onMentionCreate() {
+        mentionObj = this;
+    }
+
+    function actionBeginHandler(args) {
+        if (
+            args.requestType === 'EnterAction' &&
+            mentionObj.element.classList.contains('e-popup-open')
+        ) {
+            args.cancel = true;
+        }
+    }
+
+    function actionCompleteHandler(e) {
+        if (e.requestType === 'SourceCode') {
+            mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay');
+            mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.add('e-overlay');
+        } else if (e.requestType === 'Preview') {
+            mailMergeEditor.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay');
+            mailMergeEditor.getToolbar().querySelector('#insert_Field').parentElement.classList.remove('e-overlay');
+        }
+    }
+
+    function onDropDownClose() {
+        if (mailMergeEditor) {
+            mailMergeEditor.focusIn();
+        }
+    }
+
+    function onItemSelect(args) {
+        if (args.item.text != null) {
+            const value = textToValueMap[args.item.text];
+            const trimmedValue = value.trim();
+            mailMergeEditor.formatter.editorManager.nodeSelection.restore();
+            mailMergeEditor.executeCommand(
+                'insertHTML',
+                `<span contenteditable="false" class="e-mention-chip"><span>{{${trimmedValue}}}</span></span>&nbsp;`,
+                { undo: true }
+            );
+        }
+    }
+
+    function onClickHandler() {
+        if (mailMergeEditor) {
+            let editorContent = mailMergeEditor.value;
+            let mergedContent = replacePlaceholders(editorContent, placeholderData);
+            if (mailMergeEditor.formatter.getUndoRedoStack().length === 0) {
+                mailMergeEditor.formatter.saveData();
+            }
+            mailMergeEditor.value = mergedContent;
+            mailMergeEditor.formatter.saveData();
+        } else {
+            console.log('MailMergeEditor is not initialized.');
+        }
+    }
+
+    function replacePlaceholders(template, data) {
+        return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => {
+            var value = data[key.trim()];
+            var result = value !== undefined ? value : match;
+            return result;
+        });
+    }
+</script>

ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/EmployeeData.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace WebApplication1.Models
+{
+    public class EmployeeData
+    {
+        public string Name { get; set; }
+        public string EmailId { get; set; }
+
+        public List<EmployeeData> EmployeeList()
+        {
+            List<EmployeeData> mention = new List<EmployeeData>()
+            {
+                new EmployeeData { Name = "Selma Rose" EmailId = "[email protected]" },
+                new EmployeeData { Name = "Russo Kay", EmailId = "[email protected]" },
+                new EmployeeData { Name = "Camden Kate",  EmailId = "[email protected]" },
+                new EmployeeData { Name = "Mary Kate",  EmailId = "[email protected]" },
+                new EmployeeData { Name = "Ursula Ann",  EmailId = "[email protected]" },
+                new EmployeeData { Name = "Margaret",  EmailId = "[email protected]" },
+            };
+            return mention;
+        }
+
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/razor

@@ -0,0 +1,10 @@
+@{
+    List<EmployeeData> data = new EmployeeData().EmployeeList();
+
+    string value = @"<p>Hello <span contenteditable=""false"" class=""e-mention-chip""><a title=""[email protected]"">@@Maria</a></span>&#8203;</p>
+    <p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>";
+}
+
+@Html.EJS().RichTextEditor("mentionIntegration").Value(value).Render()
+
+@Html.EJS().Mention("mentionRTE").Target("#mentionIntegration_rte-edit-view").DataSource((IEnumerable<EmployeeData>)data).MinLength(3).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name", Value="EmailId" }).Render()

ej2-asp-core-mvc/code-snippet/rich-text-editor/mention-min-length/tagHelper

@@ -0,0 +1,12 @@
+@{
+    List<EmployeeData> data = new EmployeeData().EmployeeList();
+
+    string value = @"<p>Hello <span contenteditable=""false"" class=""e-mention-chip""><a title=""[email protected]"">@@Maria</a></span>&#8203;</p>
+<p>Welcome to the mention integration with rich text editor demo. Type <code>@@</code> character and tag user from the suggestion list. </p>";
+}
+
+<ejs-richtexteditor id="mention_integration" placeholder="Type @@ and tag the name" value="@value"></ejs-richtexteditor>
+
+<ejs-mention id="mention" target="#mention_integration_rte-edit-view" dataSource="@data" minLength="3" suggestionCount="8" >
+        <e-mention-fields text="Name" Value="EmailId"></e-mention-fields>                                                                                                                                                                                      
+</ejs-mention>