# Comments JavaScript API: Useful Tips and Tricks > The Comments JavaScript API is a powerful interface to customize the behavior of comments in the Document Editor. This article provides useful tips and tricks to get the most out of it. - **Author:** Bjoern Meyer - **Published:** 2024-04-01 - **Modified:** 2025-11-16 - **Description:** The Comments JavaScript API is a powerful interface to customize the behavior of comments in the Document Editor. This article provides useful tips and tricks to get the most out of it. - **4 min read** (698 words) - **Tags:** - ASP.NET - React - Angular - Comments - **Web URL:** https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/llms-full.txt --- Working asynchronously on a document with multiple authors is an important feature in many processes. Have in mind a contract that is to be the subject of negotiation between 2 or more parties. Traditionally, these documents are sent back and forth as an MS Word document to be red-lined by each of the parties involved. When implementing a document collaboration process, this is still very common and should be compatible. With TX Text Control, comments can be added to any area of text and changes can be tracked. These comments are compatible with MS Word and can be imported and exported to and from supported formats. ### Web-Based Collaboration In modern web-based applications, documents do not need to be shared, but can be redlined directly in the browser by all participants. The following is a screen capture video that shows the comments feature in action: ![Red-Lining in TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/04/01/a/assets/ribbon4.webp "Red-Lining in TX Text Control") ### Combine Track Changes and Comments Comments can also be added directly to tracked changes using the right-click menu or the ribbon bar. These comments are linked to the tracked change, so that when the change is removed (accepted or rejected), the comment is automatically removed as well. ![Red-Lining in TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2024/04/01/a/assets/comments2.webp "Red-Lining in TX Text Control") The intelligent combination of tracked changes and the new comments feature provides a powerful toolkit for building collaborative processes into your applications. A comment contains the location (index), the comment text, a timestamp, and author information. In addition, a comment can contain replies from other authors, which are stored in those comments to allow for a conversation. ### JavaScript API The JavaScript API provides a powerful interface to customize the behavior of comments in the Document Editor. The following code shows how to add a comment to the current input position: ``` async function insertComment(comment) { return new Promise((resolve, reject) => { TXTextControl.comments.add(comment, (e) => { e.comment.getComment((comment) => { resolve(comment); }); }); }); } ``` Now, you can call *insertComment* function using async/await to handle it asynchronously: ``` const insertedComment = await insertComment("This is a new comment"); console.log(insertedComment); ``` #### Looping Through Comments A *forEach* method for looping through all comments is provided in the comments collection. The following code returns the commented text and the comment for all comments in a document. ``` TXTextControl.comments.forEach((comment) => { comment.getText((text) => { comment.getComment((commentText) => { console.log(text + ": " + commentText); }); }); }); ``` #### Getting Replies Replies to a comment can be retrieved using the *getReplies* method. The following code shows how to get all replies for a all comments. ``` async function processComments() { TXTextControl.comments.forEach(async (comment) => { const replies = await new Promise((resolve, reject) => { comment.getReplies((replies) => { resolve(replies); }); }); replies.forEach(async (reply) => { const replyComment = await new Promise((resolve, reject) => { reply.getComment((replyComment) => { resolve(replyComment); }); }); console.log(replyComment); }); }); } ``` #### Deleting Comments Comments can be deleted using the *remove* method. The following code shows how to delete all comments written by a specific author. ``` function deleteCommentsByName(index, numComments, TXTextControl, name) { if (index >= numComments) { return; } TXTextControl.comments.elementAt(index, (comment) => { comment.getUserName((author) => { if (author === name) { TXTextControl.comments.remove(comment, () => { TXTextControl.comments.getCount((newNumComments) => { deleteCommentsByName(0, newNumComments, TXTextControl, name); }); }); } else { deleteCommentsByName(index + 1, numComments, TXTextControl, name); } }); }); } TXTextControl.comments.getCount((numComments) => { deleteCommentsByName(0, numComments, TXTextControl, "Tim Typer"); }); ``` If a field is removed, all of the fields must be recursively fetched again, since the collection has been changed. ### Locking Comments You can programmatically lock comments added by authors other than the current user. The following code uses *commentChanged* and *commentDeleted* events to compare the author name with the current username to undo the action. ``` // Enable commands for TXTextControl TXTextControl.enableCommands(); // Add event listeners for comment changes and deletions TXTextControl.addEventListener("commentChanged", preventComment); TXTextControl.addEventListener("commentDeleted", preventComment); // Function to prevent comment changes from other authors function preventComment(comment) { TXTextControl.getUserNames(userNames => { if (comment.commentedText.userName !== userNames[0]) { TXTextControl.undo(() => { TXTextControl.sendCommand(TXTextControl.Command.CommentsViewerRefresh); alert("Comments from other authors cannot be changed!"); }); } }); } ``` ### Conclusion The Comments JavaScript API is a powerful interface to customize the behavior of comments in the Document Editor. This article provides useful tips and tricks to get the most out of it. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and Content Controls](https://www.textcontrol.com/blog/2024/04/04/form-fields-working-with-acroforms-legacy-ms-word-forms-and-content-controls/llms.txt) - [Integrating Document Lifecycle Management with ASP.NET Core and C#](https://www.textcontrol.com/blog/2024/03/29/integrating-document-lifecycle-management-with-asp-net-core-and-c-sharp/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Convert Plain Text to Bulleted Lists in C# with .NET](https://www.textcontrol.com/blog/2025/01/21/convert-plain-text-to-bulleted-lists-in-csharp-with-dotnet/llms.txt) - [Extracting Comments from DOCX Files in .NET C#](https://www.textcontrol.com/blog/2025/01/17/extracting-comments-from-docx-files-in-net-csharp/llms.txt) - [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt) - [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt) - [Implementing a Security Middleware for Angular Document Editor Applications in C#](https://www.textcontrol.com/blog/2024/10/14/implementing-a-security-middleware-for-angular-document-editor-applications/llms.txt) - [Meet Text Control at DDC .NET Developer Conference 2024](https://www.textcontrol.com/blog/2024/10/07/meet-text-control-at-ddc-net-developer-conference-2024/llms.txt) - [Visit Text Control at VSLive! in Orlando, Florida](https://www.textcontrol.com/blog/2024/10/01/visit-tx-text-control-at-vslive-in-orlando-florida/llms.txt) - [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt) - [Back in the Pocono Mountains: Meet Text Control at TechBash 2024](https://www.textcontrol.com/blog/2024/09/24/back-in-the-pocono-mountains-meet-text-control-at-techbash-2024/llms.txt) - [Back from Copenhagen Developers Festival 2024](https://www.textcontrol.com/blog/2024/09/05/back-from-copenhagen-developers-festival-2024/llms.txt) - [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt) - [Video Tutorial: Creating a MailMerge Template and JSON Data Structure](https://www.textcontrol.com/blog/2024/08/16/video-tutorial-creating-a-mailmerge-template-and-json-data-structure/llms.txt) - [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt) - [Mail Merge: The Pre-Shaped Data Concept Explained](https://www.textcontrol.com/blog/2024/05/30/mail-merge-the-pre-shaped-data-concept-explained/llms.txt) - [Meet Text Control at NDC Oslo 2024](https://www.textcontrol.com/blog/2024/05/28/meet-text-control-at-ndc-oslo-2024/llms.txt) - [Loading Documents into the Document Viewer in React](https://www.textcontrol.com/blog/2024/03/12/loading-documents-into-the-document-viewer-in-react/llms.txt) - [Customizing Electronic Signature Fonts for Typed Signatures in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/11/customizing-electronic-signature-fonts-for-typed-signatures-in-angular-and-asp-net-core/llms.txt) - [TX Text Control React Packages Released](https://www.textcontrol.com/blog/2024/02/29/tx-text-control-react-packages-released/llms.txt) - [Using the Document Editor in an ASP.NET Core React Application](https://www.textcontrol.com/blog/2024/02/27/using-the-document-editor-in-an-asp-net-core-react-application/llms.txt) - [View and Edit MS Word DOCX Documents in Angular](https://www.textcontrol.com/blog/2023/10/26/view-and-edit-ms-word-docx-documents-in-angular/llms.txt) - [Impressions from Web Developer Conference WDC 2023 in Hamburg, Germany](https://www.textcontrol.com/blog/2023/09/21/impressions-from-web-developer-conference-wdc-2023-in-hamburg-germany/llms.txt)