Published on 23-09-2019

Collaboration journey of CKEditor 5 - What were we up to

CKEditor 5 collaboration journey and update on what were we up to

Categories:

Articles

Tags:

It has been a while since we updated you about how we are doing on the collaboration front. Today, we are happy to announce that all three of CKEditor 5 collaboration features: comments, track changes, and real-time collaborative editing are now in perfect harmony. You can edit, use key features like tables, paste from Word and Google Docs, comment or suggest changes on the document with collaborators. All in real-time.

This article summarizes all the things we have done since the launch of collaboration features for CKEditor 5. We will be sharing collaboration updates regularly as well!

A free trial with all of the collaboration features — comments, track changes, and real-time collaborative editing — is available for your convenience. Integrations with popular JavaScript frameworks such as Angular, React, Vue and Electron are also available.

# Background of collaboration in CKEditor 5

There are multiple other collaboration applications on the market that promise to take your writing to the next level. But often, these applications force you to adopt a new authoring workflow rather than fit into yours. The difference with CKEditor 5 is exactly this. It is a customizable rich-text editing component you can implement in any web application you are building or already using.

Our collaboration story began with Letters, a distraction-free collaborative editor based on CKEditor 5. With its minimalist approach, Letters solved a very specific creative problem: focusing on content. It encouraged users to write together first and format later so it prioritized the features accordingly. But soon, it became clear that by making the product more extensible we could solve a broader range of collaboration problems.

Every team has a unique writing and content creation workflow. Inflexible components would hardly provide you with the thriving authoring environment you need and ultimately you would have to sacrifice the user experience and their creative power. Besides, the initial structure of CKEditor 5 allowed for much more than just Letters so we decided to make our collaboration solution easier to fit into any unique workflow.

As a result, we reshaped our collaboration offer to fit CKEditor 5’s plugin-based extensible structure. Comments, track changes, and real-time collaborative editing were extracted from Letters as separate features. This meant an easier implementation and customization for any type of solution possible, including the edge cases. And also, mix and matching of collaboration features with other CKEditor 5 features (e.g. comments with mentions) became easier. You can learn more about customizability below.

During the development process, we learned a lot not only about creating a rich-text editor with real-time collaboration but also about collaboration itself. Thanks to the implementation of Operational Transformation, which was rewritten and improved a couple of times, even the most complex collaboration solutions are possible for CKEditor 5.

# What are the CKEditor 5 collaboration features?

# Comments

Allows you to have a quick discussion with your collaborators and exchange notes on the content. With this feature, you can add, delete or edit comments, reply and create threads. You can customize comments with mentions to make the conversation easier. There is also a comments-only mode available.

# Track changes

Allows you to suggest, accept and reject changes in the content. Users can switch between the suggestion and editing mode, accept or decline all or specifically selected changes with just a click. It is also possible to comment on suggested changes and create threads as this feature is combined with comments. The feature does a perfect job when handling suggestions by different users.

# Real-time collaborative editing

Last but not least, the knot that ties it all together: real-time collaboration. This feature allows users to write, select and edit the content together with their fellow collaborators and can be used with both comments and track changes. It also includes the user presence list which allows you to see the users that are currently connected to the document. The click action API lets you connect existing user profiles and information on other platforms to the user presence list.

# The power of collaboration

# Customizability

As mentioned above, it was crucial for us to enable easy implementation and customization of collaboration features to provide for a wider range of use cases. It is possible to implement the collaboration features as standalone plugins or all together. For example, you might not need real-time collaboration and just use track changes and comments for the users to collaborate asynchronously. You might only need comments in the beginning and decide to add real-time collaboration later on. You might also want to combine them with other CKEditor 5 plugins etc. You can further customize the features with CSS variables to create a tailored UI that matches your application.

The users, comments and track changes APIs and custom adapters bring multiple ways to further adapt your setup and allow for a custom integration of track changes and comments.

The sidebar for comments and track changes is customizable, too — you can choose between wide, narrow and inline sidebar display modes. This means that working on your document is equally comfortable on a desktop with a lot of screen estate and on mobile devices or in applications with a limited editing space. It is also possible to quickly change between wide and narrow sidebar modes, so the users can stay focused on creating content without comments or suggestions getting in their way. You can check the samples to get a more clear feeling of the implementation possibilities.

Apart from collaboration features, CKEditor 5 itself is flexible, too. Every bit of it is customizable. You get to choose which rich-text features will be available for your users and what the editor will look like. You can go ahead and see the demos for some of the UIs available out-of-the-box.

# Cloud or on-premises

All of our collaboration solutions are delivered as cloud services or on-premises. Additionally, we provide an image uploading solution that you can integrate with your WYSIWYG editor. We provide all the tools for you to create a perfectly connected and fully synchronized content creation system. You can build upon solutions such as REST API where you can synchronize data between the cloud and other systems. You can also use webhooks to build a customized notification system, for example set up notification emails when a new comment is added.

For customers who would like to store their data within their own data centers, we also have an on-premises backend solution for collaboration. It can be easily implemented with a Docker image via our Docker registry. The on-premises solution is fully scalable and allows you to save data in different environments like development or production.

# User-friendly approach

Besides the obvious ones, we equipped CKEditor 5 collaboration features with many things that will make it easier to create content.

Autosave and pending actions manager plugins help users easily save the progress and prevent any data loss before they finish working on the document. And in case of any crashes, watchdog for collaboration allows the editor to restart with the latest content, providing far more stability.
Users can have multiple sessions. They do not have to log out from a session in order to be able to connect to the same document on another browser or device.
Features like paste from Word and Google Docs or tables are compatible with collaboration, too! You can paste formatted content and work on it together with other users without any extra workload or collaborate on tables in real time.
With assigned user roles, the editor can switch to read-only or comments-only mode automatically to prevent any unwanted edits.

# Everything else in-between

The powerful CKEditor 5 architecture allows for complex and scalable solutions, meaning a better experience for both you and your users.

Unlike other collaborative editing solutions, there is no limit to how many users can connect to a document. So if you have a project that requires 50+ collaborators, CKEditor 5 collaboration features will be perfect for you.
Many users mean lots of content. Our collaboration handles big documents smoothly as well. To give an example, 422-page-long content only loads in 20 seconds in Chrome!
Any collaboration solution that allows users to exchange data on a user-to-user basis needs to be secure. Collaboration features follow the best practices to make sure your data is safe with granular user permissions, token-based authentication, and encrypted communication. Your data in the cloud service is encrypted, too! Besides, CKEditor 5 has CSP support and built-in XSS protection in all of its features.

# What’s next for collaboration?

We have tried to update you on the most crucial features but you can be sure we are not done yet. We have a dedicated team that works on CKEditor 5 collaboration features on a daily basis, in close cooperation with the development of CKEditor 5 Framework itself. All new features added to CKEditor 5 are also collaboration-ready right from the start.

Guided by your feedback, every day we try to improve collaboration and make it perfect for anyone who is looking for a collaborative solution that can handle complexity. So go ahead, start your free trial and let us know what you think. We ❤️ feedback!

If you would like to learn more about how we approached collaborative editing when working on the new CKEditor version, check Lessons learned from creating a rich-text editor with real-time collaboration. See also how we reworked our collaboration protocol to greatly reduce the amount of data that we send during collaboration in How we reduced traffic 10-20 times - data compression in real-time collaboration.

And if you are curious to see how collaboration inspired us to work on some side projects, check out HangHub, a team productivity tool for GitHub.

You can read more on the topic of collaboration in our blog posts: