# Configuration of annotations

You can change the behavior and appearance of annotations by configuring the collaboration features through editor configuration options for comments, track changes, and the sidebar.

<a id="collaboration-features-configuration">

## Collaboration features configuration

The full documentation of available configuration options can be found in the [comments feature editor configuration](../../../api/module_core_editor_editorconfig-EditorConfig.md#member-comments), the [track changes feature editor configuration](../../../api/module_core_editor_editorconfig-EditorConfig.md#member-trackChanges) and the [sidebar feature editor configuration](../../../api/module_core_editor_editorconfig-EditorConfig.md#member-sidebar) guides.

Note that comments configuration also applies to comments in a suggestion thread.

> **Note**
>
> The examples below are based on a working editor setup that includes collaboration features. We highly recommend you get your setup ready based on the [comments feature integration](../comments/comments-integration.md#before-you-start) guide before moving any further.

<a id="comment-editor-configuration">

## Comment editor configuration

The editor used for adding and editing comments is also a CKEditor 5 instance. By default, it uses the following plugins:

* [`Essentials`](../../../api/module_essentials_essentials-Essentials.md),
* [`Paragraph`](../../../api/module_paragraph_paragraph-Paragraph.md),

These plugins allow for creating the comment content with some basic styles.

However, it is possible to extend the comment editor configuration and add some extra plugins or even overwrite the entire configuration and replace the list of plugins. You can modify the comment editor configuration by using the [`comments.editorConfig`](../../../api/module_comments_config-CommentsConfig.md#member-editorConfig) property in the main editor configuration.

See the sample below to learn how to add the [`Mention`](../../../api/module_mention_mention-Mention.md) plugin to the comment editor:

**NPM**

```js
import {
	ClassicEditor,

	// Make sure to import the plugins you want to use for the comments editor.
	Bold, Italic, Mention
} from 'ckeditor5';

// ...

const editorConfig = {
	// ...

	toolbar: {
		items: [
			'undo', 'redo',
			'|', 'comment', 'commentsArchive',
			'|', 'heading',
			'|', 'bold', 'italic',
			'|', 'link',
			'|', 'bulletedList', 'numberedList'
		]
	},
	sidebar: {
		container: document.querySelector( '#sidebar' )
	},
	comments: {
		editorConfig: {
			extraPlugins: [ Bold, Italic, Mention ],
			mention: {
				feeds: [
					{
						marker: '@',
						feed: [
							'@Barney', '@Lily',
							'@Marshall', '@Robin', '@Ted'
						],
						minimumCharacters: 1
					}
				]
			}
		}
	}

	// ...
};

ClassicEditor.create( editorConfig );
```

**CDN**

```js
const {
	ClassicEditor,

	// Make sure to import the plugins you want to use for the comments editor.
	Bold, Italic, Mention
} = CKEDITOR;

// ...

const editorConfig = {
	// ...

	toolbar: {
		items: [
			'undo', 'redo',
			'|', 'comment', 'commentsArchive',
			'|', 'heading',
			'|', 'bold', 'italic',
			'|', 'link',
			'|', 'bulletedList', 'numberedList'
		]
	},
	sidebar: {
		container: document.querySelector( '#sidebar' )
	},
	comments: {
		editorConfig: {
			extraPlugins: [ Bold, Italic, Mention ],
			mention: {
				feeds: [
					{
						marker: '@',
						feed: [
							'@Barney', '@Lily',
							'@Marshall', '@Robin', '@Ted'
						],
						minimumCharacters: 1
					}
				]
			}
		}
	}

	// ...
};

ClassicEditor.create( editorConfig );
```

Note that additional plugins need to be a part of the same package, just like the main editor plugins. By default, the `ckeditor5` package carries all open-source plugins, while the `ckeditor5-premium-plugins` one keeps all premium plugins at hand.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="sidebar-configuration">

## Sidebar configuration

The sidebar configuration allows for setting the container element for the sidebar and tuning the positioning mechanism. Check the [sidebar configuration](../../../api/module_comments_config-AnnotationsSidebarConfig.md) API documentation for all available options.

<a id="example-of-use">

### Example of use

```js
// ...

const editorConfig = {
	// ...

	comments: {
		// Show the first comment and the two most recent comments when collapsed.
		maxCommentsWhenCollapsed: 3,
		// Make comments shorter when collapsed.
		maxCommentCharsWhenCollapsed: 100,
		// Allow for up to 3 comments before collapsing.
		maxThreadTotalWeight: 600,

		// You may set the comments editor configuration.
		// In this case, use the default configuration.
		editorConfig: {}
	},
	sidebar: {
		container: document.querySelector( '#sidebar' ),
		preventScrollOutOfView: true
	},

	// ...
};

ClassicEditor.create( editorConfig );
```

Using the [`comments.CommentThreadView`](../../../api/module_comments_config-CommentsConfig.md#member-CommentThreadView) and [`comments.CommentView`](../../../api/module_comments_config-CommentsConfig.md#member-CommentView) configuration options is described in the [Annotations custom view](annotations-custom-view.md) guide.

<a id="custom-date-format">

## Custom date format

The comments feature allows you to set a custom date format for comments and suggestions. To enable that, pass a function to the [`locale.dateTimeFormat`](../../../api/module_collaboration-core_config-LocaleConfig.md#member-dateTimeFormat) property in the main editor configuration. This function is invoked with one argument: a comment or suggestion creation date.

```js
// You can use any other library, like moment.js.
import { DateTime } from 'luxon';

// ...

const editorConfig = {
	// ...

	locale: {
		dateTimeFormat: date => DateTime.fromJSDate( date ).toFormat( 'dd/LL/yyyy' )
	}

	// ...
};

ClassicEditor.create( editorConfig );
```

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)