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 on the comments feature API and track changes feature API sites.

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,
• Autoformat,
• Bold,
• Italic,
• List.

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:

const MentionPlugin = ClassicEditor.builtinPlugins.find(
    plugin => plugin.pluginName == 'Mention'
);

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: {
            items: [ 'bold', 'italic', '|', 'comment' ]
        },
        sidebar: {
            container: document.querySelector( '#sidebar' )
        },
        comments: {
            editorConfig: {
                extraPlugins: [ MentionPlugin ],
                mention: {
                    feeds: [
                        {
                            marker: '@',
                            feed: [
                                '@Barney', '@Lily',
                                '@Marshall', '@Robin', '@Ted'
                            ],
                            minimumCharacters: 1
                        }
                    ]
                }
            }
        }
    } )
    .catch( error => console.error( error ) );

Note that additional plugins need to be a part of the same build just like the main editor plugins. They do not need to be enabled in the main editor but make sure that they are in the build. Refer to the Installing plugins guide to learn more.

# 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 config.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';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: {
            items: [ 'bold', 'italic', '|', 'comment' ]
        },
        sidebar: {
            container: document.querySelector( '#sidebar' )
        },
        locale: {
            dateTimeFormat: date => format( date, 'DD/MM/YYYY' )
        }
    } )
    .catch( error => console.error( error ) );