Migration to CKEditor 5 v30.0.0

When updating your CKEditor 5 installation, make sure 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.

For the entire list of changes introduced in version 30.0.0, see the changelog for CKEditor 5 v30.0.0.

Listed 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 config is deprecated.

The new EditorConfig#ui.viewportOffset editor config 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 would need to introduce for proper integration with the new EditorConfig#ui.viewportOffset config change:

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

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

Every day, we work hard to keep our documentation complete. Have you spotted an outdated information? Is something missing? Please report it via our issue tracker.

Migration to CKEditor 5 v30.0.0

# Viewport (toolbar) offset config change