After using Execute Command 'InsertHTML', the 'Undo' Command doesn't work as expected

[SyncfusionUser]

Hi Syncfusion Team!

I want to use the Execute Command 'InsertHTML' from my custom designed toolbar item in order to insert some default text paragraph enclosed in < p > tags at the current cursor position.

This all works fine!

I also would like to use the 'Undo' Execute Command to be able to undo the InsertHTML action.

But somehow, the Undo Command doesn't work as expected. It doesn't clear the inserted HTML, it only clears previously typed text in the RTE editable area.

Am I missing something here?

[Vinitha Jeyakumar]

Hi SyncfusionUser,

We have prepared a sample as per your requirements to use ExecuteCommand to insert html and to do undo actions within the RichTextEditor using custom toolbar button. Please check the code and sample below,

Code snippet:

 

<SfRichTextEditor @ref="rteObj" @bind-Value="@Value">
    <RichTextEditorToolbarSettings Items="@Tools">
        <RichTextEditorEvents OnActionComplete="@OnActionCompleteHandler" />
        <RichTextEditorCustomToolbarItems>
            <RichTextEditorCustomToolbarItem Name="InsertHtml">
                <Template>
                    <button class="@buttonClass" @onclick="InsertHtml">
                        <div class="e-tbar-btn-text" style="font-weight: 500;">InsertHtml</div>
                    </button>
                </Template>
            </RichTextEditorCustomToolbarItem>
            <RichTextEditorCustomToolbarItem Name="Undo">
                <Template>
                    <button class="@buttonClass" @onclick="Undo">
                        <div class="e-tbar-btn-text" style="font-weight: 500;">Undo</div>
                    </button>
                </Template>
            </RichTextEditorCustomToolbarItem>
        </RichTextEditorCustomToolbarItems>
    </RichTextEditorToolbarSettings>
</SfRichTextEditor>

@code{

public async Task Undo()
{
    await this.rteObj.ExecuteCommandAsync(CommandName.Undo);
}

private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
    ......
     .......
    new ToolbarItemModel() { Name = "InsertHtml", TooltipText = "Insert Html" },
    new ToolbarItemModel() { Name = "Undo", TooltipText = "Undo" },
    
};

private async Task InsertHtml()
{
    ExecuteCommandOption executeCommandOption = new ExecuteCommandOption();
    executeCommandOption.Undo = true;
    await this.rteObj.ExecuteCommandAsync(CommandName.InsertHTML, "Inserted html", executeCommandOption);
}

Sample attached below,

Regards,

Vinitha

Attachment: RTE_Server_11_52f0a97c.zip

[SyncfusionUser]

Hi Vinitha,

Thank You very much for your quick and adequate reply!

ExecuteCommandOption.Undo proved to be the solution to my problem, so thank You for your great support!

Regards,

SyncfusionUser

[Vinothkumar Yuvaraj]

Hi SyncfusionUser,

Please get back to us if you have any further questions or concerns.