Report an issue

guideComments display mode

There are two ways how comment threads and suggestion annotations can be displayed in the editor: in a sidebar or as inline balloons.

# Inline balloons

CKEditor 5 comments with the inline display mode

Inline display mode is the default solution. It is used when the sidebar configuration is not specified.

Even if the sidebar configuration is set, you can dynamically switch to the inline display mode:

editor.plugins.get( 'Annotations' ).switchTo( 'inline' );

// Sidebar container is not removed automatically,
// so it is up to your integration to hide it (or manage in another way).
document.querySelector( '#sidebar' ).style.display = 'none';

CKEditor 5 comments with the sidebar display mode

To use a sidebar for displaying comments and suggestion annotations, first prepare a proper HTML structure:

<html>
    <head>
        <style type="text/css">
            #container {
                display: flex;
                position: relative;
            }

            #container .ck.ck-editor {
                width: 100%;
                max-width: 700px;
            }

            #sidebar {
                min-width: 300px;
                padding: 0 10px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="editor"></div>
            <div id="sidebar"></div>
        </div>
    </body>
</html>

Then, initialize the rich-text editor using a build that includes the comments plugin.

To create the build that includes the comments plugin, go to the comments integration guide. Alternatively, use an editor from one of the provided samples.

In the configuration, set the editor to use the <div id="sidebar"> element as the comments container.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // Your configuration.
        ...
        sidebar: {
            container: document.querySelector( '#sidebar' )
        }
    } );

After setting the configuration as in the sample above, the sidebar display mode will be used. If the display mode was changed, you can change it back:

editor.plugins.get( 'Annotations' ).switchTo( 'sidebar' );

You can also set the sidebar container dynamically:

editor.plugins.get( 'Sidebar' ).setContainer( element );

If the sidebar container has already been set, all the items inside it will be moved to the new container.

# Automatic switching between inline and sidebar display modes

The code snippet below enables automatic switching between the inline and sidebar display modes. It bases on the rich-text editor’s container width and responds to window resizing. You can modify it to fit your application needs.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor 5 automatic display mode switching</title>
        <style type="text/css">
            #container {
                display: flex;
                position: relative;
            }

            #container .ck.ck-editor {
                width: 100%;
                max-width: 700px;
            }

            #sidebar {
                min-width: 300px;
                padding: 0 10px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="editor">
                <p>Try to add a comment and resize the browser window!</p>
            </div>
            <div id="sidebar"></div>
        </div>

        <script src="../build/ckeditor.js"></script>
        <script>
            // If the container width is below this value, the display mode will switch to inline.
            const switchWidthLimit = 900;

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    toolbar: {
                        items: [ 'bold', 'italic', '|', 'comment' ]
                    },
                    sidebar: {
                        container: document.querySelector( '#sidebar' )
                    }
                } )
                .then( editor => {
                    // Switch between the inline and sidebar comments according to the window size.
                    const container = document.querySelector( '#container' );
                    const sidebar = document.querySelector( '#sidebar' );

                    const annotations = editor.plugins.get( 'Annotations' );
                    const users = editor.plugins.get( 'Users' );

                    // You need to define "me" to be able to add a comment.
                    users.addUser( { id: 'user-1', name: 'Joe Doe' } );
                    users.defineMe( 'user-1' );

                    function refreshDisplayMode() {
                        if ( container.offsetWidth < switchWidthLimit ) {
                            annotations.switchTo( 'inline' );
                            sidebar.style.display = 'none';
                        } else {
                            annotations.switchTo( 'sidebar' );
                            sidebar.style.display = null;
                        }
                    }

                    editor.ui.view.listenTo( window, 'resize', refreshDisplayMode );

                    refreshDisplayMode();
                } )
                .catch( error => console.error( error ) );
        </script>
    </body>
</html>

The sample below showcases the above snippet: