« See all

CKEditor 5 v31.0.0 with enhanced restricted modes handling and new collaboration samples

CKEditor on the first center. Some circle shapes in the background

CKEditor 5 v31.0.0 brings new, better ways to handle editing modes with write restrictions in connection with advanced features. There are new developer samples for collaboration features both for vanilla JavaScript and the React framework. Better code block editing, new icons, and several important bug fixes have arrived with this release, too. And that is not all!

# New rich text editor features

Coming in this release are several important changes and new features. The Command#affectsData property changes the way the restricted edition modes are handled and enables the use of features that do not affect the content directly. The mentions feature has been updated to enable the customization of the dropdown list with mention hints. A new way to escape code blocks makes the feature more comfortable, while new toolbar icons for comments and export to Word provide a better aesthetic experience. And there are the new collaboration samples for the React framework integration and for comments outside the editor. Keep on reading to learn all the important details!

Just as with every release, we are looking forward to your feedback on these changes. Your comments, suggestions, recommendations, and bug reports allow us to choose the proper direction for future development and tend better to our users’ needs.

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

# New approach to handling restricted editing modes

Editing modes with restricted write permissions, such as read-only, comments-only or restricted editing, may seem like a less used feature, they are, however, still quite popular and widely useful in the editing and proofreading process. CKEditor 5 v31.0.0 release brings substantial changes in handling these modes thanks to the introduction of the Command#affectsData property, addressing several recurring issues in various areas. Before, when e.g. the author entered the read-only mode, the toolbar would be inaccessible, blocking functionality that does not affect content, like export to PDF or Word. This was improved and now certain functions and features, including exports, select all or find would be accessible, even though regular editions of the content may not be available in these modes.

The find and replace feature’s search capability is still available after the editor is switched into read-only mode.
The find and replace feature’s search capability is still available after the editor is switched into read-only mode.

# Mentions unleashed

The mentions feature (these are also known as tags or keywords - name them and use them any way you need) is small but neat and offers great productivity enhancements e.g. while proofreading and commenting. So far, the maximum number of mentions available to be configured and delivered in the dropdown list was ten. It has just been changed. Ten is still the default maximum number of list items. However, if you need a longer list, you can now configure the available maximum number of items to be displayed in the list and create a list of mentions that possibly takes from here to infinity and beyond.

Mentions list in a chat-type integration, allowing to add persons and keywords.
Mentions list in a chat-type integration, allowing to add persons and keywords.

# New collaboration features samples

The ckeditor5-collaboration-samples GitHub repository is a real treasure chest for all the developers and there are new items in this chest. These new additions to the lot include:

If you have not tried this repository before, it also provides plenty of various vanilla JavaScript samples as well as integrations with other popular frameworks like Angular and Vue.

# Code block behavior changed

The code block feature is an excellent tool for all programmers, developers, and educators creating content about programming alike. It allows for adding code listings to the document. From v31.0.0 the handling of Enter keystroke has been updated. Due to the fact that many programmers separate their code with blank lines, the usual double keystroke to escape a code block was upgraded to a triple keystroke. This way, typing Enter twice will create an empty line within the block code, and only the third keystroke will escape the block, remove the trailing blank line, and return to normal editing mode, creating a new paragraph. It makes writing and editing code inside CKEditor 5 documents much easier and more intuitive.

A code block is escaped with three <kbd>Enter</kbd> keystrokes.
A code block is escaped with three Enter keystrokes.

# Other improvements

Besides new features, we have also worked on some important improvements.

# New toolbar icons

User experience is not only about how things work, it is also about the simple pleasure of using one’s tools. Embracing this aesthetic approach, CKEditor 5 user interface gets occasional liftings and amendments. Coming with v31.0.0 are two new icons for the comments feature and the export to Word feature. The new critters were designed to match the current icon set a lot better and be generally more appealing.

The new export to Word feature’s toolbar icon is more readable and matches the overall toolbar styling better.
The new export to Word feature’s toolbar icon is more readable and matches the overall toolbar styling better.

# Changes in the documentation system

For the past few weeks, we have been working hard on improving our documentation site. Several changes have already been introduced: we added the new “premium features”  badges to the already existing “new or updated” ones  in the table of contents, along with useful tooltips. We have also amended the structure of the installation and builds sections. New useful links will guide you from the nightly docs straight to their corresponding production guides for the newest release. There were also new descriptive introductions in several sections to let the user know where to look for certain information.

We are utilizing the small steps approach, trying to make the changes as noninvasive for our users as possible. Upcoming changes that we have already started to work on will help first-time users as well as CKEditor 5 veterans, making it easier to kick-start your integration, find the needed information, and learn the advanced quirks. We hope these changes will make your experience better!

# Bug fixes

As usual, we fixed quite a few bugs in an effort to make the user experience for your favorite WYSIWYG editor even better than before:

# Selecting elements on block edge

A small but pesky bug affected several elements (like links, mentions, or inline images). If one of those was located at the edge of a block (e.g. the beginning or the end of a paragraph), it was not possible to select such an element correctly by dragging a mouse pointer. This bug has been eliminated as of v31.0.0 and elements can now be properly selected with a mouse no matter what their location in the content is.

# Table toolbar location corrected

In certain situations, in an editor that had both the tables and link features loaded, upon removing a link from the table cell contents, the table toolbar would be rendered outside the editor window, making it difficult if not outright annoying to use. It was corrected.

The table toolbar shows properly attached to the edited table cell.
The table toolbar shows properly attached to the edited table cell.

# Nested tables operation.

Previously, if the selected table cells contained a nested table, the nested table’s handle would still be visible, which would disturb the editing flow. This bug has been corrected and now a selection of cells containing nested tables does not display unnecessary table handles.

# HTML embed blocks in read-only mode

If the editor content contained an HTML embed block, a bug in the UI would make it possible to edit the block in read-only mode, although it was not possible to save the changes. Adding new blocks was not possible. The v31.0.0 release removes this problem - when the editor enters read-only mode, it is now read-only for all editable content elements and the HTML embed blocks cannot be modified anymore.
Please refer to the changelog for more new features, improvements, and bug fixes.

# Breaking changes

This release introduces some breaking changes, both major and minor. Make sure you check the changelog for more details. Please also visit the Migration to v31.0.0 guide for important details on updating your CKEditor 5 installation.

# What’s next?

We keep on constantly improving and adding new features to our software. Here is what’s on our plate for the next few weeks:

Some bug fixes and improvements are on the line, too, so follow the iteration 49 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.

Share this post

Linkedin Reddit
Content collaboration best practices
Feature of the month - Images in CKEditor 5