Feature of the month - Mentions in CKEditor 5

The unfolding third decade of the 21st century brings new challenges every day, and not just because of the worldwide pandemic, that sent plenty of people to work at home, but for various other reasons as well. It is, however, one of the most perceivable and problematic aspects of life in these perilous times.

Humans are no strangers to written communication. Scientists widely agree that writing was introduced into the culture some five and a half thousand years ago in Mesopotamia. It was — throughout written history — used mostly for business record keeping. Entrepreneurial humans, however, were still used to talking about all of their business dealings face to face. The emergence of a global health crisis put some sort of end to just talking.

One of the most important lessons we have learnt from working from home is that “this meeting could be an email” which is both a great and a terrible thing to witness occuring. With the decline of personal contacts come many troubles and the disruption of communication is one of the big ones. We tend to produce more written content than before, yet often fail to push the message through. Targeting other recipients of our communications the way we intend and grouping relevant information together becomes more and more difficult.

This is true for most environments, where more than two people interact using the written word. Internet forums of ye olden days, Wikipedia discussion pages, Facebook comment threads and multiple-reply emails all suffer from the unclearly addressed target. This is where the mentions feature (also known as the autocomplete feature) comes into play and can save the day for us today. Or at the very least makes the evening more bearable.

# Don’t even mention that!

More often than not, when the discussion becomes multi-threaded, a need arises to reply to a specific message or address a certain person. The mention feature, also known as the autocomplete feature, due to the technical nature of the mechanism it offers, allows for this. Different platforms have independently implemented this kind of feature. Some of the ones mentioned before, including Facebook or Wikipedia, are just the most obvious examples. Using the mentions mechanism (also sometimes known as pings) lets you do two separate things: inform the person you address that this message is specifically directed to them, and let the others know to whom you answer (which can be sometimes tricky, indeed).

This is what a chat with mentions would possibly look like.

The example above allows the participants to mention one another within their writing. All they need to do is start typing the nickname (here listed to the right of the name of the participant — one of many possible solutions) and the system will suggest possible mentions. This is convenient in online chats, forums or other places where people interact, but the possible implementations are numerous — a list of editors working together on a project who can be mentioned in the comments sections of a document or called upon for changes to the document itself are just some of the ideas in which the mentions mechanism can enhance productivity and collaboration in projects, both small and large.

The way the autocompletion mechanism works is under full control of the editor integrator, so it can be configured and fine-tuned to meet specific needs. The search mechanism for the mentions, the data source and the way the mentions themselves are presented — all of these are under control, as you will find further in the blog post. That data can, too, be called and displayed as needed.

# Hashtags and keywords

Let us check one more usage for the mentions. See the screencast below, seemingly similar, but with extended functionality.

The screencast above showcases not only how mentioning the participants of the communication exchange works, but also how one more implementation of the autocomplete feature works. As opposed to mentions, that were configured to be traditionally invoked with a @ tag, here is a mechanism invoked with a # tag. It is commonly known as hashtag and really widespread in current-day social media usage. Instagram or Twitter would be excellent examples of places utilizing such hashtags. These little active anchors are in fact keywords or catch phrases that can direct the reader to check out other similar content. They help categorise and put together information that may be (most probably) related in certain ways to the original topic or idea.

In the example above, the mention feature was configured to present a list of various national cuisines, which would be the right thing to have in a culinary chat like this one. The list can also contain other food-related hashtags like #hungry or #yummy. In fact, it is only limited by the imagination of the admin (although server capabilities and limitations may also come into play for really long lists).

# Implementation

The mentions feature, as stated before, can be configured to contain basically any list of words that can be suggested for autocomplete once the operator is invoked by the user. It can be either a static value or a callback, which allows for linking and other advanced operations.

The output can be similarly changed to contain specific markup, like active URLs, or be decorated with a predefined CSS style. The examples, showcased above, use active anchors attached to the mentions — these may be links, email addresses, leads to personal blogs, corporate pages, keywords lists etc. CSS gives the integrator full control over the look and feel of the mention.

Please bear in mind that the mention feature is not available in any of the predefined CKEditor 5 builds. To utilise it, you need to install it either on your own or with the Online builder.

But do not let that discourage you from delving deeper and finding new ways to utilize the auto completion mechanism!