How to restrict track changes for users in React DOCX Editor?

You can restrict the ability to accept or reject tracked changes for specific users using the Syncfusion® React DOCX Editor. This dedicated UI tool provides a rich, Word-like editing experience within a web application, allowing users to create, edit, view, and print Word documents (DOCX, WordML, DOC, RTF, TXT) directly in the browser.

Roles and permissions
You can define roles and assign permission levels to users using their email addresses. Below is a sample configuration:

Editing Guidelines

• Managers and Team Leads have Full Access. They can:
  • Edit all sections of the document.
  • Accept or reject tracked changes made by other users.
  • Modify formatting and content structure.
• Engineers and Content Writers have Revisions Only access. They can:
  • Suggest changes using Track Changes.
  • Cannot accept or reject tracked changes.
  • Cannot make direct edits to the final content.

Prerequisites

Before starting, ensure your development environment meets the following requirements:
• Node.js: Version 14.0.0 or above
• React: Version 15.5.4 or higher.
For detailed system requirements, refer to the documentation.

Step-by-step guide to restrict accept and reject track changes actions for specific users

Step 1: Create a React app

Start creating a React application and integrating the Syncfusion® React DOCX Editor. This integration enables you to configure and manage restricted editing features within your application.

Step 2: Add a role selection dropdown

Update the src/App.js file to add a dropdown menu to your React application that allows users to select their role.

<DropDownListComponent
 id="ddlelement" 
 dataSource={userList} 
 change={onChange.bind(this)} 
 placeholder="Select a game" 
 value={userList[0]} 
 popupHeight="220px" 
/> 

Step 3: Configure role-based editing in the Document Editor

Update the src/App.js file to add a dropdown that simulates different user roles and applies editing restrictions accordingly

const userList = [
  '[email protected]',
  '[email protected]', 
  '[email protected]',
  '[email protected]',
];  

const onChange = (event) => { 
  container.current.documentEditor.currentUser = event.value;
  if (event.value === '[email protected]' || event.value === '[email protected]') {
    container.current.documentEditor.editor.enforceProtection('123', 'revisionsonly'); 
  } else { 
    container.current.documentEditor.editor.stopProtection('123');
  } 
}; 

Step 4: Web API for restrict editing in DOCX Editor

Create a new ASP.NET Core Web API using your preferred development tool or CLI.  This project will be the backend for managing Restrict

[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("RestrictEditing")]
public string[] RestrictEditing([FromBody]CustomRestrictParameter param)
{
    if (param.passwordBase64 == "" && param.passwordBase64 == null)
               return null;
     return WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount);
 }
 public class CustomRestrictParameter
 {
     public string passwordBase64 { get; set; }
     public string saltBase64 { get; set; }
     public int spinCount { get; set; }
 } 

Refer and reuse the GitHub Web Service example  for hosting your own web service and use it for the serviceUrl property.

Step 5: Add the license key

From v20.1.047 onwards, it is necessary to register a license key for Syncfusion® React components. For more information on obtaining and registering your license key, please refer to the documentation.

Step 6: Run the application

To see the Syncfusion® React DOCX Editor in action with a functioning backend, ensure your Web API service is running, then run your React application.
• Start your Web API service
• Run your React application: Open your terminal in the React project directory and run:

npm start 

Once your ASP.NET Core Web API service is running (e.g., http://localhost:5257/api/documenteditor/), update the serviceUrl property in your src/App.js file to point to this URL.

Step 7: Show or hide track changes actions based on user

Hide the “Accept” and “Reject” buttons in the Track Changes panel for roles like Engineers or Content Writers.

Show the “Accept” and “Reject” buttons in the Track Changes panel for roles like Managers or Team Leads.

You can download a complete working sample of restrict accept and reject track changes actions for specific users in React from GitHub

Conclusion

We hope this guide helped you understand how to restrict accept and reject track changes actions for specific users in Syncfusion® React DOCX Editor.

You can refer to our React DOCX Editor feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React DOCX Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!