Commands, Events and APIs for the comments plugin

Commands

The Comments plugin provides the following TinyMCE commands.

Command Description

tc-delete-conversation-at-cursor

Attempts to delete the comment at the current cursor position. A confirmation dialog will be shown prior to deletion.

tc-try-delete-all-conversations

Attempts to delete all comments in the editor. A confirmation dialog will be shown prior to deletion.

Examples
tinymce.activeEditor.execCommand('tc-delete-conversation-at-cursor');
tinymce.activeEditor.execCommand('tc-try-delete-all-conversations');

Events

The following events are provided by the Tiny Comments plugin.

Name Data Description

mce-tinycomments-update

N/A

Fired when the comments sidebar is opened or closed.

CommentChange

{ getEventLog: () ⇒ EventLog[] }

Fired when a comment is added, resolved, deleted, edited, or replied to.

CommentChange event

This feature is only available for TinyMCE 6.1 and later.

Fired when a comment is added, resolved, deleted, edited, or replied to. Contains the getEventLog API for retrieving log of comment changes.

Example: The CommentChange event

tinymce.init({
  selector: 'textarea',
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  init_instance_callback: (editor) => {
    editor.on('CommentChange', (evt) => {
      console.log(evt.getEventLog());
    });
  }
});

APIs

The Comments plugin provides the following API.

getEventLog()

This feature is only available for TinyMCE 6.1 and later.

Returns a log with information and timestamps of all changes to comments, including when:

  • A new comment is added (and who added it).

  • A comment is edited (and who edited it).

  • A reply to a comment is added (and who added the reply).

  • A comment is resolved (and who resolved the comment).

  • A comment is deleted (and who deleted the comment).

The event log can be retrieved either in full or with the after option, which restricts the returned list to Comment events after a time-stamp date in the ISO-8601 format, both shown in the following:

Example: Using getEventLog()

const comments = tinymce.activeEditor.plugins.tinycomments;

console.log(comments.getEventLog());
console.log(comments.getEventLog(
  { after: '2022-02-22T12:34:56Z' }  // ISO-8601 standard: YYYY-MM-DDThh:mm:ssZ
));