Comments in Blazor DocumentEditor Component

17 Oct 20252 minutes to read

The Blazor Word Processor (Document Editor) provides comprehensive support for adding, navigating, and managing comments within a document. These features facilitate collaborative review and feedback cycles. Operations can be performed both through the built-in user interface and programmatically using APIs.

Add a new comment

Using InsertCommentAsync method, comments can be inserted to the selected text.

await container.DocumentEditor.Editor.InsertCommentAsync("Test comment");

Comment navigation

Next and previous comments can be navigated using the below code snippet.

//Navigate to next comment
await container.DocumentEditor.Selection.NavigateNextCommentAsync();

//Navigate to previous comment
await container.DocumentEditor.Selection.NavigatePreviousCommentAsync();

Delete comment

You can delete current comment in the document using DeleteCommentsAsync method as shown in the following code snippet.

await container.DocumentEditor.Editor.DeleteCommentAsync();

Delete all comment

You can delete all the comments in the document using DeleteAllCommentsAsync method as shown in the following code snippet.

await container.DocumentEditor.Editor.DeleteAllCommentsAsync();

Protect the Document in Comments-Only Mode

The Document Editor supports a special protection mode that restricts user actions to only adding or editing comments. When CommentsOnly protection is active, users cannot make changes to the document’s content.

Document editor provides an option to protect and unprotect document using EnforceProtectionAsync and StopProtectionAsync API.

The following example code illustrates how to enforce and stop protection in Document editor container.

@using Syncfusion.Blazor.DocumentEditor

<button @onclick="protectDocument">Protection</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar=true></SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;
    protected async void protectDocument(object args)
    {
        //enforce protection
        await container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.CommentsOnly);
        //stop the document protection
        await container.DocumentEditor.Editor.StopProtectionAsync("123");
    }
}

Comment only protection can be enabled in UI by using Restrict Editing pane

NOTE

In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly. In stop protection method, parameter denotes the password.