Configuration of annotations

Tweaking the configuration of CKEditor 5 collaboration features is another easy way to change the behavior of the collaboration features views.

# Collaboration features configuration

The full documentation of available configuration options can be found in the comments feature editor configuration, the track changes feature editor configuration and the sidebar feature editor configuration guides.

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

# 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,
• Paragraph,

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 property in the main editor configuration.

See the sample below to learn how to add the Mention plugin to the comment editor:

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(document.querySelector('#editor'), 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.

# Sidebar configuration

The sidebar configuration allows for setting the container element for the sidebar and tuning the positioning mechanism. Check the sidebar configuration API documentation for all available options.

# Example of use

// ...

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(document.querySelector('#editor'), editorConfig);

Using the comments.CommentThreadView and comments.CommentView configuration options is described in the Annotations custom view guide.

# 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 property in the main editor configuration. This function is invoked with one argument: a comment or suggestion creation date.

// You can use any other library, like moment.js.
import format from 'date-fns/format';

// ...

const editorConfig = {
    // ...

    locale: {
        dateTimeFormat: date => format( date, 'dd/MM/yyyy' )
    }

    // ...
};

ClassicEditor.create(document.querySelector('#editor'), editorConfig);