Update to CKEditor 5 v30.x

Note

When updating your CKEditor 5 installation, ensure all the packages are the same version to avoid errors.

For custom builds, you may try removing the package-lock.json or yarn.lock files (if applicable) and reinstalling all packages before rebuilding the editor. For best results, make sure you use the most recent package versions.

Update to CKEditor 5 v30.0.0

Released on September 29, 2021.

For the entire list of changes introduced in version 30.0.0, see the release notes for CKEditor 5 v31.0.0.

Below are the most important changes that require your attention when upgrading to CKEditor 5 v30.0.0.

Starting from v30.0.0, the EditorConfig#toolbar.viewportTopOffset configuration is deprecated.

The new EditorConfig#ui.viewportOffset option allows to set viewportOffset from every direction.

const config = {
    ui: {
        viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
    }
}

Here is the exact change you need to introduce for proper integration with the new EditorConfig#ui.viewportOffset configuration change:

// Before v30.0.0.
ClassicEditor
    .create( ..., {
        // ...
        toolbar: {
            items: [ ... ],
            viewportTopOffset: 100
        }
    } )

// Since v30.0.0.
ClassicEditor
    .create( ..., {
        // ...
        toolbar: {
            items: [ ... ]
        },
        ui: {
            viewportOffset: {
                top: 100
            }
        }
    } )