From 1635d533b7f6561ee107952da3344e4406a9fa3c Mon Sep 17 00:00:00 2001 From: Kokila Poovendran Date: Tue, 25 Nov 2025 10:30:15 +0530 Subject: [PATCH 1/2] 945108: Staging Failure Resolved --- blazor/rich-text-editor/mail-merge.md | 35 +++++++++++-------- .../code-snippet/nesting-table.razor | 0 2 files changed, 20 insertions(+), 15 deletions(-) rename blazor/rich-text-editor/{ => tools}/code-snippet/nesting-table.razor (100%) diff --git a/blazor/rich-text-editor/mail-merge.md b/blazor/rich-text-editor/mail-merge.md index 55b9c1e9ba..e7cf1e46c4 100644 --- a/blazor/rich-text-editor/mail-merge.md +++ b/blazor/rich-text-editor/mail-merge.md @@ -7,11 +7,11 @@ control: RichTextEditor documentation: ug --- -# Mail Merge in Blazor Rich Text Editor +# Mail merge in Blazor Rich Text Editor Control -The Mail Merge feature in Blazor Rich Text Editor enables developers to create dynamic, personalized documents by inserting placeholders (merge fields) into the editor content. These placeholders are later replaced with actual data at runtime, making it ideal for generating letters, invoices, and bulk communication templates. +The Mail merge feature in Blazor Rich Text Editor enables developers to create dynamic, personalized documents by inserting placeholders (merge fields) into the editor content. These placeholders are later replaced with actual data at runtime, making it ideal for generating letters, invoices, and bulk communication templates. -## Rendering Custom Toolbar Items +## Rendering custom toolbar items Custom toolbar items are added using the [RichTextEditorCustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorCustomToolbarItems.html) tag. Each item is defined with: @@ -46,11 +46,11 @@ Custom toolbar items are added using the [RichTextEditorCustomToolbarItems](http {% endhighlight %} {% endtabs %} -## Populating and Using Insert Field Dropdown +## Populating and using insert field dropdown The `Insert Field` dropdown in the Rich Text Editor is designed to let users quickly insert predefined merge fields into the editor content. This dropdown is powered by the `SfDropDownButton` control, which uses its [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_Items) property to bind a collection of menu items. -### How the Items Property Works +### How the items property works - The `Items` property accepts a list of [DropDownMenuItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html) objects. - Each item in this list represents a merge field and contains a [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Text) property, which is displayed in the dropdown. @@ -92,20 +92,22 @@ When the user selects an item from the dropdown: - The snippet is inserted at the current cursor position using [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_System_String_Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_). ```csharp + {% raw %} public async Task OnItemSelect(MenuEventArgs args) { if (args.Item.Text != null) { var value = _mergeData.FirstOrDefault(md => md.Text == args.Item.Text)?.Value; - string htmlContent = $"{{{{{value}}}}} "; + string htmlContent = $"{{{{{value}}}}} var undoOption = new ExecuteCommandOption { Undo = true }; this._mailMergeEditor.ExecuteCommandAsync(CommandName.InsertHTML, htmlContent, undoOption); await this._mailMergeEditor.SaveSelectionAsync(); } } + {% endraw %} ``` -## Role of Mention Control in Mail Merge +## Role of Mention control in mail merge Mention control enhances usability by enabling inline field suggestions: @@ -118,7 +120,9 @@ Mention control enhances usability by enabling inline field suggestions: - {{@((context as MergeData).Value)}} + {% raw %} + @((context as MergeData).Value) + {% endraw %} @@ -130,7 +134,7 @@ Mention control enhances usability by enabling inline field suggestions: This feature is ideal for users who prefer keyboard-driven workflows. -## Maintaining Cursor Position During Dropdown Operations +## Maintaining cursor position during dropdown operations When the `Insert Field` dropdown opens, the editor loses its current selection because focus shifts to the popup. To ensure the placeholder is inserted at the correct position: @@ -156,7 +160,7 @@ When the `Insert Field` dropdown opens, the editor loses its current selection b } ``` -## Handling Editor Mode Changes with OnActionComplete +## Handling editor mode changes with OnActionComplete The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_OnActionComplete) event fires after specific actions in the RichTextEditor, such as switching between Source Code and Preview modes. @@ -183,7 +187,7 @@ The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.R **Why is this important?** This prevents users from triggering merge operations or inserting fields while editing raw HTML, which could cause unexpected behavior. -## Executing Merge Data Action +## Executing merge data action When the `Merge Data` button is clicked: @@ -192,7 +196,7 @@ When the `Merge Data` button is clicked: - Each placeholder is replaced with its corresponding value from a dictionary. ```csharp - +{% raw %} public void OnClickHandler() { if (this._mailMergeEditor != null) @@ -202,7 +206,8 @@ When the `Merge Data` button is clicked: _rteValue = mergedContent; } } - public static string ReplacePlaceholders(string template, Dictionary data) + + public static string ReplacePlaceholders(string template, Dictionary data) { return Regex.Replace(template, @"{{\s*(\w+)\s*}}", match => { @@ -210,7 +215,7 @@ When the `Merge Data` button is clicked: return data.TryGetValue(key, out var value) ? value : match.Value; }); } - +{% endraw %} ``` This ensures all placeholders are dynamically replaced without manual editing. @@ -222,6 +227,6 @@ This ensures all placeholders are dynamically replaced without manual editing. ![Blazor RichTextEditor Mail Merge](./images/blazor-richtexteditor-mail-merge.png) -## Related Resources +## Related resources [Mention Control Guide](https://blazor.syncfusion.com/documentation/mention/getting-started-webapp) \ No newline at end of file diff --git a/blazor/rich-text-editor/code-snippet/nesting-table.razor b/blazor/rich-text-editor/tools/code-snippet/nesting-table.razor similarity index 100% rename from blazor/rich-text-editor/code-snippet/nesting-table.razor rename to blazor/rich-text-editor/tools/code-snippet/nesting-table.razor From 82638820ad5b74a0a337d86046f33a0dbbb809f1 Mon Sep 17 00:00:00 2001 From: Kokila13081999 <93525217+Kokila13081999@users.noreply.github.com> Date: Tue, 25 Nov 2025 10:32:37 +0530 Subject: [PATCH 2/2] Update mail-merge.md --- blazor/rich-text-editor/mail-merge.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/rich-text-editor/mail-merge.md b/blazor/rich-text-editor/mail-merge.md index e7cf1e46c4..5714b8eeff 100644 --- a/blazor/rich-text-editor/mail-merge.md +++ b/blazor/rich-text-editor/mail-merge.md @@ -98,7 +98,7 @@ When the user selects an item from the dropdown: if (args.Item.Text != null) { var value = _mergeData.FirstOrDefault(md => md.Text == args.Item.Text)?.Value; - string htmlContent = $"{{{{{value}}}}} + string htmlContent = $"{{{{{value}}}}}"; var undoOption = new ExecuteCommandOption { Undo = true }; this._mailMergeEditor.ExecuteCommandAsync(CommandName.InsertHTML, htmlContent, undoOption); await this._mailMergeEditor.SaveSelectionAsync(); @@ -229,4 +229,4 @@ This ensures all placeholders are dynamically replaced without manual editing. ## Related resources -[Mention Control Guide](https://blazor.syncfusion.com/documentation/mention/getting-started-webapp) \ No newline at end of file +[Mention Control Guide](https://blazor.syncfusion.com/documentation/mention/getting-started-webapp)