🏁 Release: CKEditor 5 v1.0.0 beta

[Reinmar]

When we were releasing v1.0.0-alpha.2 in November last year, we already knew the next release will be huge. The plan for the first beta release was to continue implementing new features, but our main goal was to review the entire public API of CKEditor 5 Framework and improve it where possible.

After 4 months of the most intense period in the history of this project we ended up rewriting and improving more than half of the CKEditor 5 engine's interface and significant part of other core packages and features. The overall improvement was so big and the community asked for these changes so often that we decided to release beta.1 as soon as the code was stable, which was a month ago in March. This was also a moment when we released CKEditor 4.9 and opened CKEditor Cloud Services' Easy Image service to the users. Long story short, we did not manage to "go with socials" and even write the release notes back then, in March. So, here we are, in April with beta.2 and proper release notes for both releases! :)

New features

Here is the summary of the new features that were introduced in the beta. Refer to the respective Features documentation for more details and samples.

Highlight

The highlight feature offers text marking tools that help content authors speed up their work, for example when reviewing content or marking it for future reference. It is a flexible tool that lets you define your own markers and pens, too!

See the highlight feature guide to see it live and learn how to install it.

Font size and font family

The font size and font family features do not need to be introduced so follow the Font feature guide to see it live and learn how to install it.

Text alignment

The text alignment feature lets you align your text to the left or right, justify and center it. Refer to the Text alignment guide to see it live and learn how to install it.

Decoupled editor and document editor build

The document editor build is based on the (also new) decoupled editor and a set of features targeted at "document editing". It is the only build to include the new features such as text alignment and font but, naturally, you can install these plugins in all other builds as well.

This editor build and the editor itself come with a "decoupled UI" which means that the design of this editor's UI is left in your hands. One of the possible implementations is the one showcased in the Document editor's example:

Effortless build localization

Since the v1.0.0 beta release to change the UI language of the build of your choice, you do not have to rebuild it. It is enough to load an additional language file included in the build and configure the editor to use it:

<script src="[ckeditor-path]/ckeditor.js"></script>
<script src="[ckeditor-path]/translations/de.js"></script>
<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            language: 'de'
        } )
        .then( editor => {
            console.log( editor );
        } )
        .catch( error => {
            console.error( error );
        } );
</script>

Read more about Setting the UI language in the dedicated guide.

Brand new everything

In the life of every project, after a time of rapid development, there is a need to slow down and look at what you have done with a pair of fresh eyes. We started to work on CKEditor 5 in 2014 and refactored many parts of code since then. However, we have been fully aware that a moment will come when we will need to rethink some more fundamental decisions. The reason why we decided to go for that now is that we knew we would need to change the API significantly and we wanted to do that as early as possible. After all, breaking changes are not what developers like, even if they mean a completely new quality.

So, what did we change? The basic concepts like using operation-based custom data model, the virtual DOM, the plugin system or the editor architecture remain the same. Our focus was on the API — its ease of use, robustness, safety and clarity. The biggest changes, by far, were done in the engine where nearly 350 files were changed, 42.000 insertions and 26.000 deletions were made. To put that into perspective, the whole engine is around 80.000 lines of code.

But not only the engine was improved. The UI framework and UI library were also reviewed, the theme was redesigned, SASS was replaced with PostCSS, code split in features was proposed differently and selected plugins got some love, too.

The engine

The engine has a brand new API on all levels. The model and the view can now only be changed in their respective change blocks (see model.change() and view.change()) and only through their respective writers (see model Writer and view Writer). The new change() block ensures the same execution order (it does not delay the callback) which made it safer to use. All changes, even on detached model nodes, are done through operations, which unblocked using markers in them. Downcasting (which is the conversion from the model to the view) is done only once all changes are done in the model, which is supported by the all-new Differ. Upcasting (so, the conversion from the view to the model) is done "in place", based on positions, instead of recursively. The conversion API has been completely redesigned.

Even if you were familiar with the old API, we recommend reading the Editing engine architecture guide once more. It was improved and extended, too.

The UI library

The rendering flow of UI views was simplified and it is synchronous now. The creation of some UI components like dropdowns was redesigned to allow the implementation of more types of them (e.g. variations of dropdowns are all combinations of (button, split button) x (panel, toolbar)).

Once again, we recommend reading the UI library architecture guide.

The theme

The previous theme was redesigned; it is now lighter and more modern-looking.

Besides that, we replaced SASS with safer and more flexible PostCSS (which unlocked using two different editor types on one page). We also rewrote the theme by using native CSS variables which made customizing the theme wonderfully easy.

The link feature

The UI of the link feature was redesigned. Instead of opening the link URL edit balloon on the initial click on a link, first you will see the link balloon with an option to open the link in a new tab or edit the link.

However, this is not all yet. We also introduced the so-called "two-step caret movement" around links which allows you to type in the link or outside it. Look how easy it is now:

See it yourself!

To play with the editors see the examples. You can also learn more about even more features (such as Markdown output, image support, font size and font family, text alignment, changing the UI language or setting the editor to read-only) and see more examples in the Features section. And if you want to run the editor yourself, refer to the Quick start guide.

What’s next?

Stability, even more stability and, once more, features!

We consider the API to be quite stable now and we do not expect any significant API changes at this stage. Feel free to fully try out CKEditor 5’s potential and update your code to align with the recent API changes.

In addition to normal bug fixing, we are also working on improving the renderer so the editor will work with text composition (IME). The stability on Android and iOS will improve, too.

We have also begun working on the Tables feature (see [1] and [2]) and we will soon start working on the Paste from Word support.

Finally, we plan to work on integrations with popular frameworks (Angular, React and Vue.js) and we could really use some 💜 from the community on that.

Samples

Check out the Examples section in the documentation. You can also find some more examples in the Features section.

Changelogs

For a detailed list of changes go to [email protected] and [email protected] where you can check each package's changelog.

Thanks!

We would like to use this occasion to thank all of you — those who got involved, those who supported us and those who followed us. We are very grateful for the insight that you provide through GitHub discussions, on Stack Overflow or Gitter. Your feedback, questions, comments were tremendous help when planning both new features and choosing the areas that should be refactored to make the editor more versatile and easier to use. Thank you.

Feedback and collaboration

We are most excited about the project and would really love to get some feedback about the beta version of CKEditor 5.

You can report all general issues in the main CKEditor 5 repository. Specific issues, like those related to the editing engine, can also be reported in their respective repositories.

Support

The project documentation is growing and always up to date. Community support is available through Stack Overflow. Visit the Gitter channel if you have some quick questions. Read more about Getting support in the Support guide.