« See all

CKEditor 5 v25.0.0 with flexible annotations, improved text blocks handling and performance fixes

The new release is here, packed with improvements, fixes and a security patch. We have redesigned the architecture of annotations, making it possible to use inline and sidebar annotations for collaboration features at the same time. We made changes to block editing so content blocks are now more comfortable to handle. Stability has been improved when formatting large content as well as several errors concerning images were corrected. There is also a new, neat feature in the documentation, that especially the first-time users will greatly enjoy — the toolbar helpers.

# Security issue fixed

Recently, we have been contacted by the GitHub Security Lab regarding a regular expression denial of service (ReDoS) vulnerability in the CKEditor 5 Markdown plugin (CVE-2021-21254). The vulnerability allowed for abuse of a link recognition regular expression, which could cause a significant performance drop resulting in a browser tab freeze. After investigating the issue, a patch has been released in CKEditor 5 v25.0.0.

Even though this is a low impact issue only affecting the victim’s browser with no risk of data leakage, an upgrade is highly recommended!

You can read more details in the relevant security advisory and contact us if you have more questions.

The CKEditor 5 team would like to thank Erik Krogh Kristensen from the GitHub team for recognizing this vulnerability and Alvaro Muñoz from GitHub for reporting it.

# New rich text editor features

A major new feature brought with this release is the annotations architecture redesign in collaboration features. This brings several major and minor breaking changes, so be sure to check them out in detail before you upgrade — we have a handy guide just for this purpose.

As always, we are looking forward to your feedback on these changes. Any comments, recommendations, and bug reports that you submit allow us to choose the proper direction for future development and tend better to our users’ needs.

# Multiple annotation UIs in collaboration features

Annotations — comments and suggestions — are what powers the UI of collaboration features. They are really flexible and customizable, as besides the display mode you choose (inline, narrow sidebar, wide sidebar), you can also customize them a lot, modifying the theme and adding your own templates or views with your custom UI elements and functionality.

The annotations API has been largely redesigned in this release, bringing major breaking changes into the code. Earlier, you were able to use only one annotation UI type at the same time, i.e. the annotations were displayed either in inline balloons or in one of the sidebars. The rewrite is aimed to address the management of multiple sources of annotations from various UIs. For example, consider displaying comments in the sidebar. At the same time suggestions from track changes are displayed in inline balloons. Managing this kind of input required considerable changes to the annotation API architecture but based on the feedback we got from our customers, this should bring some exciting new possibilities to integrating collaboration features with your applications.

Because of the breaking changes this redesign introduces, please refer to the annotations migration guide to check how to adapt to these changes.

# Important improvements

Other than that, we keep on improving and enhancing the existing WYSIWYG editor features as well as eliminating any possible bugs in an effort to make working with CKEditor 5 as smooth as possible.

Find out more about all these rich text editor features and make sure to check out the demos and documentation that accompany them.

# Improving behavior of content blocks

Content blocks are one of the cool features that help structure and format a document. Paragraphs, headings, block quotes often constitute the majority of your content so any undesired behavior here often turns into a serious annoyance.

In this iteration, we have reviewed some aspects of content blocks and brought a few improvements. From now on, pressing Backspace at the beginning of the empty first block should reset it to a paragraph which is the expected behavior for many content creators. Additionally, the changes helped fix some scenarios where it was impossible to add text before a block quote that was located at the beginning of the document or to delete a list after a widget element.

# Formatting large sections of text

Formatting is the second most important thing to do with a document (right after writing and just before collaborative editing). It is, however, a nuisance, if you need to format a large portion of the content (or even all of it, for that matter) and it freezes the editor. It could happen in the past, especially in Chrome and Firefox browsers if the content was voluminous. It will not be happening anymore, though, as this has been fixed in this release and formatting management has been improved to handle large amounts of data more efficiently. We are really happy about this performance improvement and hope it will make working with large documents much more pleasant for you.

Formatting large selections is now quick and stable.
Formatting large selections is now quick and stable.

# Image management improvements

There would be no real rich content without images. Photos, pictures, diagrams and schemata are what make the text tick and appeal to the reader. The CKEditor 5 framework offers an elaborate and extended set of image management plugins and we constantly adjust them to make sure they work flawlessly in all scenarios.

This release includes further adjustments of image linking and resizing (see #8749, #8401 and #8270).

Additionally, we fixed an issue where strict Content Security Policy rules would prevent pasting a Base64 image into the editor.

Image manipulation in CKEditor 5 WYSIWYG editor.
Image manipulation in CKEditor 5 WYSIWYG editor.

# Toolbar tooltips in guides

Vast and comprehensive documentation is our pride and we strive to make it better and better. We have just introduced a feature that will be especially helpful for newcomers and first-time users of our online help. All features that introduce a toolbar button or dropdown will now be highlighted with a tooltip in the editor demos. Thanks to this change, they are easier and faster to find, access and test within the documentation.

Handy tooltip shows the way in the CKEditor 5 guides.
Handy tooltip shows the way in the CKEditor 5 guides.

# More improvements

Here are some more enhancements introduced in this release:

  • Autoformatting was integrated with to-do lists so you can now write [ ] to create a to-do list item (#7518).
  • Autoformatting was also integrated with horizontal line, allowing you to type --- in a new line to insert a horizontal rule (#5720).
  • It will now be possible to pass the comment creation date and timezone to the export to Word converter.
  • A placeholder should now be displayed if the HTML snippet is not previewable or empty (#8435).

# Bug fixes

As usual, we fixed quite a few bugs in an effort to make the user experience even better than before. Numerous small fixes were applied to the image features, HTML embed, autoformatting as well as the pagination, export to Word and export to PDF.

  • Pasting an HTML embed widget from the clipboard will not clear its content anymore (#8789).
  • The save button should close the source mode in the HTML embed feature even if there are no changes (#8560).
  • The pagination plugin should be disabled and a warning should be displayed if its configuration is missing.
  • Dropping an image on the page break widget should not crash the editor (#8788).
  • The special characters dropdown should always fit into the viewport (#7700, #8669).
  • The table properties balloon should always follow the table when the alignment changes (#6223).
  • The “Show more items” toolbar button tooltip should not overflow the editor (#8655).
  • The ‘-’ (new line) divider should not be rendered when grouping is enabled (#8582).
  • The word count feature should consider a string with a special character as a single word (#8078).

Please refer to the changelog for more new features, improvements and bug fixes.

# Breaking changes

This release introduces breaking changes in the collaboration features. Make sure you check the changelog and the annotations API migration guide for more details.

# What’s next?

We keep on constantly improving and adding new features to our software. We have actually started working on two bigger topics, adding plugins to builds and support for inline images. Some bug fixes and improvements are on the line, too, so follow the iteration 40 roadmap for more news and features we have already started working on.

# Download

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

# License

CKEditor 5 is available under Open Source and Commercial licenses. Full details can be found on our license page.

# Reporting issues and contributing

You can report all issues for any of the CKEditor 5 packages in the CKEditor 5 repository. Read more in the Reporting issues guide.

# Support

The CKEditor 5 documentation is growing and always up to date. Community support is available through Stack Overflow. Read more in the Getting support guide.

Be sure to check out our blog, featuring the first in a series of the “Feature of the Month” blog highlights for the most interesting or unjustly overlooked cool features of CKEditor 5. Collaborative writing opens the new season of 2021 with a spotlight on features that make teamwork much easier when creating content!

Do you think what we do is cool? Do you have what it takes to match challenges like the ones we face daily? Join us — we are looking for JavaScript developers and technical leaders!

Share this post

Linkedin Reddit
Feature of the month - Lists in CKEditor 5
CKEditor 4.16 with improved image pasting, High Contrast support and a new color API