Why is Google Docs-Style Suggestion so complex to build in WordPress?

When it comes to collaborating on an online document, all of us straight away head to Google Docs. Offering seamless collaborative features that make real-time and asynchronous collaboration a breeze, the platform has set the bar high for other Content Management systems to follow.

And when it comes to WordPress, we all know how Gutenberg Phase 3 is underway to bring powerful collaborative features to its users. The community, at large, wants to see fully-functional Google Docs- Style Suggestion and real-time collaboration features at play. 

So, what’s the catch? Why is Google Docs-Style suggestion so complex to build in WordPress? Let’s find out. 

What is Google Docs-style suggestion?

When multiple people are working on a document, Google Docs lets collaborators make suggestions that are effectively deferred edits waiting for approval. Users can make suggestions or edits to a copy without directly modifying the original text. It then lets them decide whether these ‘suggestions’ should be added to the document, maintaining a record of all changes made.

When a document is in “Suggesting” mode, any modifications made by a collaborator appear as suggested edits, indicated by a different colour and formatting. 

These suggestions include ‘adding’, ‘deleting’, or ‘modifying’ text and inserting comments. The original author or document owner can review these suggestions and choose to accept or reject them.

The said feature can also be found in Apple Pages as ‘Track Changes’. It is a part of the Apple Pages application, available on macOS and iOS devices. 

It allows users to keep track of edits, revisions, and comments made to a document. This feature is helpful for collaborative writing and editing workflows, enabling users to see and review changes made by multiple contributors. Users can make changes to the document individually and send it back to the original author, who can then review and accept or reject the changes. Also, Apple’s Track Changes is primarily designed for offline collaboration. 

Limitation: Collaboration, however, is limited to users who can access Pages and use Apple devices.

The ‘Track Changes’ feature in Microsoft Word also deserves mention for the Suggestions feature.  

In Microsoft Word’s Track Changes feature, edits made by different contributors are displayed in a distinct format, such as ‘insertions’, ‘deletions’, or formatting changes. Users can enable ‘Track Changes mode’ and edit the document; the changes are visually highlighted and tracked. 

In Microsoft Word’s Track Changes feature, edits made by different contributors are displayed in a distinct format, such as ‘insertions’, ‘deletions’, or formatting changes. Users can enable ‘Track Changes mode’ and edit the document; the changes are visually highlighted and tracked. 

Other users can review the changes and choose to accept or reject them individually. Additionally, comments can be added to specific document sections to provide feedback or suggestions.

Microsoft Track Changes is a feature available in Microsoft Word, which is available for Windows, macOS, and some mobile platforms.

Limitation: Collaboration is limited to users who have access to Microsoft Word and are using compatible devices.

Suggestions feature in Web Content Management Systems

Now that we have talked about the Suggestions features in some online tools, it is worth exploring some other Content Management Systems that offer the same. Before we do that, it is essential to know that there are two types of Content Management Systems:

1. Self-hosted CMS like WordPress, Drupal, and Joomla
2. Hosted CMS like Storyblok and Wix

The primary distinctions between a hosted CMS and a self-hosted CMS lie in the maintenance obligations for keeping them operational and the level of control over their code and infrastructure. 
Most self-hosted Content Management Systems and other popular web CMSs do not have a built-in “Track Changes” feature like Microsoft Word. However, some of these platforms offer similar capabilities through plugins or extensions. 

Challenges of building the Suggestions feature in WordPress

1. Implementing a ‘Track Changes’ or ‘Suggestions’ feature similar to that of Microsoft Word or Google Docs within WordPress can pose some challenges. Setting up and managing a ‘Track Changes’ workflow within WordPress can involve multiple stages, such as draft creation, review, and approval processes.
2. Coordinating these stages, managing user notifications, and facilitating smooth collaboration can be challenging, particularly for larger teams or complex content creation processes.

In addition to the above, WordPress also faces additional considerations when implementing a ‘Track Changes’ feature while ensuring that user changes in posts or pages do not directly impact the end-user copy. 

So, how do we go around these challenges? And with Gutenberg Phase 3 in full swing, what are the points to be considered that will make these desired features an absolute reality? 

• Content Separation: WordPress must ensure a clear separation between the original content and the users’ changes. Whenever a user applies modifications, these changes mustn’t immediately affect the live or published version of the content.

• Block Compatibility: WordPress’s block-based editor, Gutenberg, introduces various types of blocks, including dynamic blocks, custom blocks, and native blocks. Each block has its attributes and properties, making it challenging to make the ‘Track Changes’ feature compatible with all block types.

• Attribute and Property Handling: WordPress needs to handle the attributes and properties associated with blocks, such as sidebar attributes and toolbar formatting. When a user makes changes, these elements need to be appropriately adjusted or preserved to maintain the integrity and intended appearance of the content.
  
• Versioning and Revisions: WordPress already has a built-in revision management system that tracks changes made to posts and pages. Integrating the ‘Track Changes’ feature would require expanding or enhancing this system to accommodate the suggested edits while maintaining a clear history of revisions.

• User Experience: Ensuring a smooth and intuitive user experience is crucial. WordPress must design an interface that allows users to apply easily and review suggested changes without confusion or disruption.

The Technical Architect behind the Suggestion feature on Self-hosted CMS or WordPress

To implement a suggestion mode in WordPress, one typically will need a combination of technologies and tools. Here are a few ways to do so:

• There is a need to develop a custom WordPress plugin or theme that can handle the Suggestion mode functionality. This can be done using PHP, the primary programming language for WordPress development.

• JavaScript is commonly used to handle dynamic interactions and provide a smooth user experience. AJAX (Asynchronous JavaScript and XML) can perform background requests and update content without refreshing the page.

• In addition to JavaScript and AJAX, we can leverage other JavaScript frameworks and libraries, such as React, a popular front-end library for building user interfaces. 

• React provides a component-based approach to web development, making it easier to manage and update different parts of the application independently. React can enhance the interactivity and responsiveness of the suggestion mode feature.

Regarding the frameworks and libraries mentioned above, several libraries can help find differences between strings or DOM elements. Two commonly used libraries are “diff-match-patch” and “visual DOM diff checker.” 

Both “diff-match-patch” and “visual DOM diff checker” provide functionalities for identifying differences, but they focus on different areas. “diff-match-patch” is more suitable for comparing textual content, while “visual DOM diff checker” is tailored for comparing and visualizing changes in DOM structures.

1. diff-match-patch: The “diff-match-patch” library provides algorithms for finding the differences between two strings. It can identify added, deleted, or modified sections within the strings and generate a set of operations to transform one string into another. This library is commonly used for tasks like text comparison, version control, or generating patches for updates.
2. Visual DOM Diff Checker:  Visual DOM diff checker is a library that helps identify differences between two versions of a DOM (Document Object Model) structure. It analyzes the structure, attributes, and content of the HTML elements and identifies any modifications, additions, or deletions. This library is commonly used for tracking changes in web page layouts or templates, ensuring consistency across different versions, and facilitating efficient updates.

Now that we have explored the intricacies involved in building a Google Docs-tyle Suggestions feature in WordPress, we also need to be looking at specific WordPress tools that are already working on this feature and have made it available to their users via a plugin.

Multicollab is one such plugin developed by the Multdots team. You can learn more about the plugin and how it can help you experience specific Google Docs-style features within WordPress.