Working with comments

Collects all the comments from the document and displays them in the custom interface.

There are no comments in the document.

ADD REPLY
DELETE
ADD COMMENT
<
>

How it works

When the user opens a document, the GetAllComments method is executed to collect all the comments from the document and display them in the custom interface. The following comment data is displayed: the comment author, the time when the comment was posted, the comment text, and the comment replies:
```
var comments = [];
var onDocumentReady = function () {
    window.connector = docEditor.createConnector();
    ...
    connector.executeMethod("GetAllComments", null, function (data) {
        comments = data;
    });
    ...
}
```

When the user clicks the Add comment button in the custom interface, the AddComment method is executed to add a new comment to the document. After this method is called, the onAddComment event is fired to add a new comment to an array with all the document comments:

var onDocumentReady = function () {
    ...
    connector.attachEvent("onAddComment", function (val) {
        var index = comments.findIndex((comment) => comment["Id"] === val["Id"]);
        if (index == -1) {
            comments = [val, ...comments];
        }
    });
    ...
}
...
$("#addComment").on("click", function () {
    ...
    var comment = $("#addCommentArea").val();
    if (Boolean(comment)) {
        var currentdate = Date.now();
        var datetime = "" + currentdate;
        connector.executeMethod("AddComment", [{ 
                Text: comment, 
                UserName: "John Smith", 
                Time: datetime 
            }]
        );
    }
    ...
});

When the user clicks the Remove comment button in the custom interface, the RemoveComments method is executed to remove a comment from the document. After this method is called, the onRemoveComment event is fired to remove a comment from an array with all the document comments:

var onDocumentReady = function () {
    ...
    connector.attachEvent("onRemoveComment", function (val) {
        const index = comments.findIndex((comment) => comment["Id"] === val["Id"]);
        if (index !== -1) {
            comments.splice(index, 1);
        }
        ...
    });
    ...
}
$("#deleteComment").on("click", function () {
    ...
    connector.executeMethod("RemoveComments", [[comments[indexComment]["Id"]]]);
    ...
});

When the user clicks the arrow buttons in the custom interface, the MoveToComment method is executed to move between the comments in the document:
```
...
connector.executeMethod("MoveToComment", [comments[indexComment]["Id"]]);
...
```

When the user clicks the Add reply button in the custom interface, the ChangeComment method is executed to add a reply to the existing comment by changing the CommentData object. After this method is called, the onChangeCommentData event is fired to add a new comment reply to an array with all the document comments:

var onDocumentReady = function () {
    ...
    connector.attachEvent("onChangeCommentData", function (val) {
        const index = comments.findIndex((comment) => comment["Id"] === val["Id"]);
        if (index !== -1) {
            comments[index]["Data"] = val["Data"];
        }
    });
    ...
}
$("#addReply").on("click", function () {
    ...
    var reply = $("#addReplyArea").val();
    if (Boolean(reply)) {
        var currentdate = Date.now();
        var datetime = "" + currentdate;
        comments[indexComment]["Data"]["Replies"].push({
            Text: reply
            Time: datetime,
            UserName: "John Smith"
        });
        connector.executeMethod(
            "ChangeComment", 
            [comments[indexComment]["Id"],
            comments[indexComment]["Data"]]
        );
    }
    ...
});

Getting help

If you have any questions, ask our developers on ONLYOFFICE forum (registration required).