1. Delete selected comment

To delete a comment using an API method, use the deleteSelectedComment() method.

if (client) {
  const commentElement = client.getCommentElement();
  commentElement.deleteSelectedComment();
}

2. Add comment on selected text

By default, when you highlight over any text in textMode a Comment Tool button will appear. Clicking the button will add a comment on the highlighted text.

If you want to trigger the comment using an API method call instead of clicking the button, you can do the following:

const commentElement = client.getCommentElement();
// to add comment on selected text
commentElement.addCommentOnSelectedText();

3. Turning on and off Comment Mode

Turns Comment mode on or off.

When you click on the comment tool, it turns on comment mode and user can attach comment to any element on the DOM. Using this method you can programatically turn on the commenting mode.

const commentElement = client.getCommentElement();
commentElement.enableCommentMode();
commentElement.disableCommentMode();

4. Add Comments on specific elements

Adds a Comment on a specific element by ID.

To add a comment on a specific element through an API method, use the addCommentOnElement() method and pass in an object with the schema shows in the example:


const element = {
  "targetElement": {
    "elementId": "element_id", // optional (pass elementId if you want to add comment on a specific element)
    "targetText": "target_text", // optional (pass targetText if you want to add comment on a specific text)
    "occurrence": 1, // optional (default: 1) This is relevant for text comment. By default, we will attach comment to the first occurence of the target text in your document. You can change this to attach your comment on a more specific text.
  	"selectAllContent": true, // Set to `true` if you want to select all the text content of the target element.
  },
  "commentData": [
    {
      "commentText": "This is awesome! Well done.", // To set plain text content
      "commentHtml": "This <span style=\"color: green; background-color: aliceblue; display: inline-block; padding: 4px; border-radius: 4px;\">is test</span> comment.", // To set HTML formatted content
      "replaceContentText": "This is new comment", // provide this replaceContentText to replace current text with
      "replaceContentHtml": "<span>This is <b>new</b> comment.</span>", // If replacement text contains html formatted text, then provide it here
    }
  ],
  "status": "open", // optional (default: open)
}

const commentElement = client.getCommentElement();
commentElement.addCommentOnElement(element);

5. Get the Xpath of the DOM element on which the comment was added

This will return the Xpath of the DOM element on which the comment was added.

const commentElement = client.getCommentElement();
let elementRef = commentElement.getElementRefByAnnotationId('annotationId')

6. Scroll the page directly to the comment element

This will scroll the page to the element directly. This will work if the element is present on the DOM.

const commentElement = client.getCommentElement();
commentElement.scrollToCommentByAnnotationId('annotationId')

Was this page helpful?

Inbox SetupAdd Custom Dropdown Lists