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:

const extraCommentsPlugins = ClassicEditor.builtinPlugins.filter(
    plugin => [ 'Bold', 'Italic', 'Mention' ].includes( plugin.pluginName );
);

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: {
            items: [ 'bold', 'italic', '|', 'comment' ]
        },
        sidebar: {
            container: document.querySelector( '#sidebar' )
        },
        comments: {
            editorConfig: {
                extraPlugins: extraCommentsPlugins,
                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.

# Sidebar configuration

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

# Example of use

ClassicEditor.create( document.querySelector( '#editor' ), {
    comments: {
        // Show the first comment and 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 comments editor configuration.
        // In this case, use the default configuration.
        editorConfig: {}
    },
    sidebar: {
        container: document.querySelector( '#sidebar' ),
        preventScrollOutOfView: true
    }
} );

Using the CommentThreadView and CommentView properties 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 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 ) );