Part 1 | Part 2 | Part 3 | Part 4

Table of Contents

How realistic is collaborative editing in content management systems? Many ecosystems have tried to enable shared editing through plugins and add-ons, but WordPress is the first to bring support for collaborative editing to content management systems with the goal of offering it out of the box. With the advent of Yjs, an open-source framework for real-time collaboration, the Gutenberg team is working with the help of Tag1 Consulting to enable shared editing natively on WordPress. Though the requirements are numerous, the prospect of collaborative content creation goes well beyond simple text; the possibilities of collaborative layout building or even collaborative drawing illuminate a bright future ahead for CMS feature development.

I (Preston So, Editor in Chief at Tag1 and author of Decoupled Drupal in Practice) joined Kevin Jahns (creator of Yjs and Real-Time Collaboration Systems Lead at Tag1), and Michael Meyers (Managing Director at Tag1) for a Tag1 Team Talks episode about supporting collaborative editing in Gutenberg with Yjs. In this multi-part blog series, we cover the implications and nuances of how to realize this dream in content management, and in this second installment, we cover some of the challenges the team is facing during the implementation process.

Feature requirements

Before we proceed, I recommend you read the first installment of this multi-part blog series on enabling collaborative content creation in Gutenberg in order to better understand the motivations that led to the high priority given to this initiative. The previous blog post in this series also describes some of the thrilling opportunities presented when a foundation of real-time collaboration is implemented in content management systems that can enable collaboration on more than just text.

Shared cursors and versioning

At the conclusion of the first installment in this series, we examined the concept of shared cursors, an idea we have already discussed in previous Tag1 Team Talks episodes about Yjs. Shared cursors enable editors to have a contextual understanding of where other editors are situated in the content in question, and an important expectation is that two collaborators are able to edit text within the same paragraph rather than having limitations due to the nature of how shared editing is implemented.

Another important potential consideration is content versioning in Gutenberg, where document versions can be leveraged via Yjs. For instance, the Yjs.dev website, the official website for the Yjs framework, uses ProseMirror, a shared editor that integrates gracefully with Yjs and is also the subject of a previous Tag1 Team Talks episode. Yjs’ linkage with ProseMirror enables a particularly exciting feature in which you can take a version snapshot of a content item, register another version of that content, and finally view the difference (diff) between those identified versions, in the process highlighting the changes made by the user who implemented them.

Offline editing

Another key consideration, and one we covered previously in another Tag1 Team Talks episode, has to do with offline editing. Collaborators must frequently synchronize with others after being offline for a long time, and today, content creation occurs with increasing frequency on planes, trains, and other vehicles on poor internet connections. Kevin believes that enabling offline editing in Gutenberg is within the realm of possibility, thanks to the offline capabilities enabled by Yjs and technologies like IndexedDB, a browser-based database we have covered previously on this blog.

Could these features lend weight to the notion of popularizing WordPress even further? Michael argues that one of the key reasons why WordPress has become the most famous CMS on the planet is its polished user experience and the relatively limited surface area of its installation. In order to make collaboration a reality on the WordPress platform, it needs to become a core aspect because of the infrastructural challenges inherent to this mission, according to Michael. Certainly, there are many plugins available across a bevy of CMSs that enable collaboration in the form of a plugin, but meeting key requirements like the above is the bare minimum for enabling collaborative content management off the shelf in CMSs like WordPress. Nonetheless, the availability of collaboration out of the box in traditionally server-side CMSs like WordPress is a tall order.

Implementation challenges

Bringing shared editing to WordPress and Drupal may seem impossible or unrealistic, but luckily there are options already available in the web development landscape that make it possible. For instance, technologies like WebRTC, a browser-based communication protocol, and WebSockets, which provides a persistent connection with a server, can be available in the form of WordPress plugins and Drupal modules. Nonetheless, there are significant steps remaining in order to enable shared editing on systems like WordPress.

Yjs and peer-to-peer collaboration

According to Kevin during our Tag1 Team Talks episode, one of the cornerstones of shared editing in WordPress is Yjs, particularly for WordPress. Yjs itself, after all, is network-agnostic, and this means that there is no restriction on a specific protocol or endpoint that needs to be in place to enable shared editing. Moreover, Yjs also works peer-to-peer by default, though a key question centers around whether peer-to-peer collaboration is indeed necessary for contemporary content management systems.

In a previous Tag1 Team Talks episode, we discussed peer-to-peer collaboration, especially in decentralized applications, at length. Performance is a key consideration for peer-to-peer collaboration. After all, we don’t want to send every request to a WordPress site; instead, it may be best to use a WebRTC connector to enable communication between a variety of collaborators. In short, WebRTC with Yjs supports the creation of a mesh network between all peers on the same document, who will communicate with each other directly rather than overloading a WordPress site. Though the WordPress site will still need to act as a signaling server for peer-to-peer collaboration. Signaling provides the handshake needed to introduce one peer to another in order to create a mesh network.

Luckily, because Yjs is network-agnostic, you can use a third-party tool to facilitate peer-to-peer collaboration. WordPress developers can ship a WordPress installation containing Yjs as a single bundle, and there is no need to set up anything additional. However, these steps do not yet go so far as to facilitate a collaborative editor. But because Gutenberg represents state as immutable JavaScript objects, changes on the state object can be easily calculated and shared among peers. As such, the first iteration of shared editing was a breeze to implement, because WordPress already does this recording of state very well, according to Kevin. With a simple sharing of the state, the editor is now collaborative with minimal overhead.

Next steps and MVP requirements

Among the next steps enumerated for collaborative editing in Gutenberg by Kevin are shared cursors and interface features that make it clear to the end user what is happening while collaborative editing is taking place. Beyond these primary challenges, other absent features include a WordPress plugin for WebRTC or WebSockets among other things. As with any project of this nature, scope is one of the most difficult aspects of any implementation to ascertain. I asked Kevin during our Tag1 Team Talks episode whether the scope of the minimum viable product (MVP) needed to evolve during the development cycle.

Kevin admits that one of the things the team needed to descope at the very outset of the project was making the full Gutenberg editor a collaborative experience, because there were certain elements missing at the time, such as a WebRTC connector. In addition, one of the most important considerations for any editorial experience is security and end-to-end encryption to preserve privileged content. Thanks to y-webrtc, the subject of a previous Tag1 Team Talks episode, authenticated content collaboration is possible. Fortunately, according to Kevin, all of these challenges have now been resolved, and all the groundwork is now present, but the features have yet to be implemented within the user interface.

Conclusion

Collaborative content creation is a uniquely difficult proposition for content management systems, primarily because of the challenges involved in implementing a Google Docs-like experience in a web environment. For CMS ecosystems like WordPress and Drupal, enabling shared editing could open the door to a variety of possibilities, such as shared layout building and other fascinating use cases. In collaboration with Tag1 Consulting and Yjs creator Kevin Jahns, the Gutenberg team has implemented shared editing in Gutenberg, but it was not without its challenges, as this post demonstrated.

In the second installment of this multi-part blog series about shared editing in Gutenberg and Yjs, we covered some of the implementation challenges that the working group faced in making the initiative a reality. In addition, we covered some of the project management issues around scoping an MVP for shared editing and how the team grappled with problems during the development cycle. In the next installment, the third blog post in this series, we dive into how shared editing could become a reality in Drupal and some of the particularities involved in collaborative editing.

Special thanks to Kevin Jahns and Michael Meyers for their feedback during the writing process.

For more Yjs content, see Yjs - Add real-time collaboration to any application.

Photo by CoWomen on Unsplash