CKEditor 5 v11.0.0 with block toolbar, autosave and Electron

We are happy to report the release of CKEditor 5 v11.0.0. This version brings a few new features (the block toolbar, the autosave plugin, Electron support), many improvements (typing on Android, selection stability and selection handle for tables) and an upgrade to webpack 4.

# New features

Although the first stable version of CKEditor 5 was released not so long ago, we are proud to see the framework to be so stable and robust that we can continue adding new features in a really fast pace. Here is what this release brings on top of all the goodies that we already provide!

# Block toolbar

You may already know the block toolbar from Letters. It is now available for CKEditor 5, too!
This type of toolbar is positioned next to the block element that the selection is anchored to (e.g. a paragraph) and it naturally accommodates the features that modify entire blocks (e.g. create headers or paragraphs) rather than inline styles (e.g. bold, italic, etc.).

Check out a demo and how to install it in the Block toolbar’s guide.

# Autosave

The new autosave feature allows you to easily integrate the editor with your system by taking care of saving the data when needed and handling situations like a user leaving the page before the data is saved.

We also introduced a general guide about Getting and saving data which explains how to handle saving editor data in a great detail.

# Compatibility with Electron

If you like desktop applications created with JavaScript as much as we do, you will be happy to know that you are now able to include CKEditor 5 in Electron. Are you ready to build the next generation productivity app with Electron? You can now include CKEditor 5 with all its awesome features in it!

Check out how real-time collaboration works in Electron:

# And more

Besides the two new plugins, we also introduced smaller additions, such as:

• The editor.state property which makes it easier to check whether the editor is already initialized or not.
• The CKEDITOR_VERSION global variable which simplifies checking which CKEditor version you use (reporting tickets has never been simpler — just use console.log( CKEDITOR_VERSION ); to check the editor version 😉).
• The editor.ui.update() method which allows for updating the editor UI if a website or application knows that something has changed (e.g. the size of the container in which the editor is being used) while the editor does not.
• The table selection handle that makes it easier to select the table content to format it, copy or delete.

# Improvements

Here are some welcome improvements to the CKEditor 5 Framework that we have recently introduced.

# Typing on Android

Handling typing on Android turned out to be one of the most demanding challenges of the 21st century. Fortunately, we succeeded and heavily improved support for Android in this release.

# Misc

Some other relevant changes:

• It is now possible to create new editors without specifying the element to be replaced or upcasted. You can just pass the data to the create() method and append the created editor to the page when you want. Refer to the API documentation of specific create() methods for more information.
• The stability and the UX of the table feature have been improved.
• Selection over widgets is now more reliable and easier to make.
• The editor.destroy() method waits for the editor to become ready.

# Breaking changes

This release brings two important breaking changes in the CKEditor 5 environment. Read more about upgrading from v10.1.0 to v11.0.0 in the migration guide.

# Build source repositories simplification

We changed the structure of build source repositories and changed the naming of the Editor class properties used by builds.
Previously, the src/ckeditor.js file (which is webpack’s entry point) was automatically created based on the build-config.js file. This meant that both these files were describing the same thing: the creator, the list of plugins and the default configuration. We decided to leave only src/ckeditor.js because being a real JavaScript module it is more flexible than its declarative sibling and a single-file setup will be easier to understand for developers.
The second change that we did was splitting the Editor.build property to Editor.builtinPlugins and Editor.defaultConfig. This creates a more flat and direct structure of the src/ckeditor.js file and we hope to prevent the developers from mistakenly taking Editor.build for the configuration and extending it (which did not work).
If you maintain a fork of one of the official builds and want to upgrade to CKEditor v11.0.0 we recommend reading the migration guide.

# Upgrade to webpack 4

Besides changing the structure of build source repositories, we also decided to finally migrate to webpack 4. Webpack 4 was released in February, however, it brought a good number of breaking changes so we decided to stick to webpack 3 until the situation stabilized.
This upgrade required releasing new versions of @ckeditor/ckeditor5-dev-utils and @ckeditor/ckeditor5-dev-webpack-plugin as well as updating the existing webpack.config.js files.
If you maintain a fork of one of the official builds or integrate CKEditor 5 from source, we recommend reading the migration guide.

# Editor#element became Editor#sourceElement

This is a minor breaking change. Editor#element was renamed to Editor#sourceElement and Editor#updateElement() to Editor#updateSourceElement().

# CKEditor 5 v11.0.1

We made a small mistake in the release process which resulted in the CKEDITOR_VERSION global returning the previous version number. We thus needed to re-release CKEditor 5 builds with this minor fix as version 11.0.1.
Other than that the 11.0.0 and 11.0.1 releases are identical. Sorry about the confusion caused 😃

# What’s next?

The ability to create detached editors which was introduced in this release finally unblocked React and Angular integrations which we hope to release very soon.
A longer term roadmap includes features such as Paste from Word, Media embed and support for block content in table cells.

# Download

CKEditor 5 builds can be downloaded from the CDN, npm or as zip packages. Read more in the Installation guide.