---
title: "Using TinyMCE Comments"
description: "How to add, edit, resolve, and remove comments in TinyMCE"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/comments-using-comments/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/comments-using-comments/index.md"
version: "latest"
last_updated: "2024-10-09T05:34:31Z"
tokens: 1505
---
# Using TinyMCE Comments

## Overview

This guide provides visual instructions for using the comments plugin, including how to:

- [add new comments](#add-a-comment) to selected content
- [replying to comments](#replying-to-comments)
- [edit existing comments](#edit-a-comment)
- [delete individual comments](#delete-a-comment)
- [delete entire conversations](#delete-a-comment-thread-conversation)
- [resolving conversations](#resolve-a-comment-thread-conversation)
- [viewing comments](#show-or-view-a-comment) using the sidebar
- [deleting all conversations](#delete-all-comment-threads) in a document

> **Tip:** The editor must contain content before a comment can be added.

## Add a comment

1. Select the content from the desired location in the editor body.

  1. From the menubar, toggle **Insert** → **Add comment**, or
  2. click on the **Add comment**

![Add comment](../_images/icons/comment-add.svg)
toolbar button, or
  3. press `Ctrl+Alt+M` (Windows/Linux) or `Cmd+Option+M` `⌥ + ⌘ + M` (Mac) to add a comment.
2. The Comments sidebar will appear on the right side of the editor instance.
3. The `<textarea>` within the comments box will display the placeholder text " *Add comment…* " and the selected field will have a visible blue `focus` highlight.

![Add Comment](../_images/comment-add-comment.png)
4. Type a comment in the comment box, and the " *Add comment…* " placeholder text will disappear, replaced by the user’s comment.
5. Click **Save** or press **Enter** to store the comment.

![Comment Created](../_images/comment-comment-created.png)
6. Or press **Cancel** to discard the comment before it is saved.

**Result**: The selected content will now display a blue `focus` border with an orange `backcolor` highlight. The comment will be displayed in the Comments sidebar.

## Replying to comments

1. Select or focus the desired conversation from either the editor body or Comments sidebar.
2. From the selected comment card Click on the **Add comment** button.

![Reply Add Comment Focus](../_images/comment-reply-add-comment-focus.png)
3. The `<textarea>` within the comments box will display the placeholder text " *Add comment…* " and the selected field will have a visible blue `focus` highlight.

![Reply Add Comment Textarea](../_images/comment-reply-add-comment-textarea.png)
4. Type a comment in the comment box, and the " *Add comment…* " placeholder text will disappear, replaced by the user’s comment.

![Reply Add Comment Pre Submit](../_images/comment-reply-add-comment-pre-submit.png)
5. Click **Save** or press **Enter** to store the comment.

![Reply Add Comment Submitted](../_images/comment-reply-to-comment-submitted.png)
6. Or press **Cancel** to discard the comment before it is saved.

## Edit a comment

Follow this procedure to edit a comment.

1. Click on the ellipsis

![(ellipsis - 3 horizontal dots)](../_images/icons/image-options.svg)
icon above the comments box to expand the menu.

![Edit Existing Comment Ellipsis](../_images/comment-edit-existing-comment-ellipsis.png)
2. Select **Edit** from the menu items.

![Edit Comment](../_images/comment-edit-comment.png)
3. The comment field now displays a blue `focus` border and becomes editable.
4. Make the required changes to the comment.
5. Click **Save** to store the changes.

![Comment Edited Comment](../_images/comment-edited-comment.png)
6. Or press **Cancel** to discard the changes before saving.

## Delete a comment

Follow this procedure to delete a comment.

> **Note:** This option is not available for the first comment in a conversation.

1. Click on the ellipsis

![(ellipsis - 3 horizontal dots)](../_images/icons/image-options.svg)
icon above the comments box to expand the menu.

![Delete Comment](../_images/comment-delete-comment.png)
2. Select **Delete** from the menu items.
3. The following options will appear in the comments sidebar:
4. After selecting the **Delete** option, the following decision dialog box will appear with two options:

  1. **Cancel**: cancel the action.
  2. **Delete**: delete the comment from the current active focused conversation.

![Delete Comment Dialog](../_images/comment-delete-comment-dialog.png)

## Delete a comment thread (conversation)

This option is only available for the first comment in a conversation. Once the comment is saved, follow this procedure to delete a conversation.

1. Click on the ellipsis

![(ellipsis - 3 horizontal dots)](../_images/icons/image-options.svg)
icon above the comments box to expand the menu.
2. Select **Delete conversation** from the menu items.

![Delete Conversation](../_images/comment-delete-conversation.png)
3. After selecting the **Delete conversation** option, the following decision dialog box will appear:
4. **Cancel**: cancel the action.
5. **Delete**: remove the conversation.

![Delete Conversation Dialog](../_images/comment-delete-conversation-dialog.png)
**Result**: The conversation and all its subsequent comments will be deleted from the document.

## Resolve a comment thread (conversation)

> **Note:** This feature requires the [`tinycomments_resolve`](../comments-callback-mode/#tinycomments_resolve) or [`tinycomments_can_resolve`](../comments-embedded-mode/#tinycomments_can_resolve) setting to be configured.
This option is only available for the first comment in a conversation. Once a comment is saved, follow this procedure to resolve a conversation.

1. Click on the ellipsis

![(ellipsis - 3 horizontal dots)](../_images/icons/image-options.svg)
icon above the comments box to expand the menu.
2. Select **Resolve conversation** from the menu items.

![Resolve Conversation](../_images/comment-resolve-conversation.png)


**Result**: The conversation will be resolved and removed from the stored conversations.

## Show or view a comment

Follow this procedure to display the comments sidebar:

1. Place the cursor on the desired content in the editor body:
2. From the navigation menu, choose **View** → **Show comments**, or
3. Click on the **Show comments**

![Comments](../_images/comments-toolbar-button.png)
toggle toolbar button.
**Result**: The comments sidebar will appear and display the corresponding conversation for the highlighted content.

## Delete all comment threads

Follow this procedure to delete all conversations in the document:

1. From the navigation menu, choose **File** → **Delete all conversations** to delete all the comments in a document.

![Delete All Conversations File Menu](../_images/comment-delete-all-conversations-file-menu.png)
2. The following decision dialog box will appear:

![Delete All Conversations](../_images/comment-delete-all-conversations.png)
3. Click **Yes** to remove all the comments in the selected document, or **No** to dismiss this action.