Feature of the month - Mentions in CKEditor 5

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.

Chat with mentions thanks to the CKEditor 5 mention feature.

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 autocomplete feature in action: both the @mention and #autocomplete mechanisms are used.

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.

An example of a mention formatted to display with highlight, but no links attached.

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!

Feature of the month is a series of articles showcasing these more utilized and those sometimes less known features of CKEditor 5. You may want to check out other blog posts dedicated to features like tables, collaboration or productivity enhancers.

If you have enjoyed reading this, be sure to check out our other blog posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

We use cookies and other technologies to provide you with a better user experience.

Learn more

Hi there, any questions about products or pricing?

Any questions about our products or pricing?

Send us a quick message and one of our Sales Representatives will be in touch with you as soon as possible.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.