Feature of the month - Lists in CKEditor 5

Among features offered by CKEditor 5 WYSIWYG editor, some are widely used (like text formatting or images) and some are rather specialized (like restricted editing or read-only mode). There are only a few features, however, that are so versatile and applicable to so many use cases and solutions as lists.

# What are the lists good for anyway?

Why use lists at all, one may ask? They serve multiple purposes, honestly. They can be used to highlight a series of steps, enumerate items of a collection, list — nomen omen — requirements, or deliver information clearly. Lists draw readers’ attention when applied in the body of text, but that’s not all. Some useful effects of employing lists in your content include:

• Highlighting importance
• Arranging the order
• Enumerating or recapping the most important data
• Defining steps of a process or elements of an issue
• Presenting cases, items, elements, data chunks

Using lists, just like block quotes or indentation, gives the text structure and breathing room. It helps visually separate passages for a better reading experience and makes skimming for information easier.

Lists can do much more in the area of structure and organization:

• Top-level items come first.
• You may have more than one top-level item.
• In fact, you may have a whole lot of these.
  • But you may have intermediate items, too.
  • More of those.
  • As much as you need.
    • And using the indentation feature you may go deeper (if you need).
    • But it’s good to put a stop to nesting at some point.
  • Having too many levels affects the readability of the list.
• We do not need inception, do we?

Did you notice the multiple levels of nesting and the indentation that supports the text semantics? Many online editors find it troublesome to manage indentation and properly nested list items. CKEditor 5 offers this powerful capability as a production standard!

# Bulleted lists to collect items

The most basic type of a list is called unordered list in the HTML nomenclature but is often referred to as a bulleted list. This is because of the markers employed to highlight list items which are, by default, thick bullets.

This kind of list is perfect for:

• Listing loose ideas
• Providing a collection of features
• Gathering some information chunks
• Summarizing data mentioned previously

This is perfect for unordered and less organized provisions of information, like listing items for a delicious pork with rice recipe or places to visit while in Gothenburg. It may also list participants of a party (that you will throw when the pandemic is over) or a large number of flowers and herbs you plan on planting this April. Or in a more practical tone, the participants of a strategy meeting next Tuesday. These lists are a bit unruly but we love them in spite of (or maybe because of) that.

# Numbered lists to bring order

Unordered lists are the foundation for all things listed, but sometimes you need some more order. This is where ordered lists come into play and the difference is that, well, they are ordered. They do not employ simple markers but rather use numerals or letters to provide additional information about precedence or importance.

How to use ordered lists:

1. Decide the precedence or importance of items first.
2. Organize them loosely.
3. Revise the order.
4. Put it down in a list mid-text.
5. Review the effect.

Remember the delicious pork mentioned in the previous section? We have already listed the ingredients with an unordered list. Now it is the best time to present the preparation steps with an ordered list. So that the aspiring cook knows what to do in order and will not start with simmering before cutting the pork into strips. You can also use a numbered list to highlight which places are more worth visiting. And the order of speakers in this one important meeting’s agenda.

# To-do lists

There is one more special sibling to the big ordered and unordered list sisters. This one is used less often even though it offers far greater capabilities as well as some really useful practical applications like note-taking apps or mobile shopping lists. We call them to-do lists and it is nothing more and nothing less but a list you can tick or check. Even though it seems to be just a regular unordered list at first glance, the possible applications are obvious. They give users full control of what they are doing. Whether shopping lists, this week’s programming tasks, blog posts to write or those little pesky changes in the software documentation that you need to introduce, you will never lose track of your progress with this cool feature.

Does it really work? Just look at this ingredients list!

Applicable? Relatable? Useful? The lists are here and they do a good job. Now, let’s make the job even better.

# List styles

Bulleted lists are perfectly fine and do the job just right. But what if you need to employ more than one level of listing? This is where list styles come in handy. And they will not only apply to unordered lists but the ordered ones too!

In CKEditor 5, there is a predefined set of markers for you to choose from to best suit the needs and distinguish between different levels of items.

Observe how importance level is underlined by different markers in this list of spaceships:

• Soyuz (Soviet/Russian)
  • Early-stage (all retired)
    • 7K-OK
    • 7KT-OK
    • 7K-T
    • 7K-TM
  • Soyuz T (retired)
  • Soyuz TM (retired)
  • Soyuz TMA (retired)
  • Soyuz TMA-M (retired)
  • Soyuz MS

Of course, unordered lists are not the only ones that get all the pretty. Alphanumerical markers are a thing, too!

1. We mostly use roman numerals for top-level list items if we need a complicated structure.
   1. Capital letters or Arabic numerals may go next — they are customizable in fact.
      1. Remember the numerals? Here we go.
         1. Oh, man, so many levels… This one employs lowercase letters.
2. OK, that’s it, we got carried away a little but we are back to basics.

# Implementing the list feature right

Lists seem to be a rather obvious functionality of any WYSIWYG editor, but don’t be deceived. Many online editors struggle with several severe problems in this area. One of those is mixing ordered and unordered lists (or even adding the to-do list to the mix). These cases are not as rare as it might seem. Please observe the spacecraft list from the previous paragraph employing both bulleted and numbered lists with different markers. The possibilities here are indeed rich.

CKEditor 5 puts lots of attention to details like this one. Based on the real-life scenarios of our customers, for business deals, law papers and similar documents, enumerating things with utter precision is a basic need. We know that proper nesting and indentation levels are important and the user may always be certain these will be structured correctly.

Another troublesome area of list implementation in online HTML editing is pasting. List styles and nesting list items give your content the structure that when broken, can change the content’s semantics and misrepresent the author’s intentions. More often than not, pasting lists in many WYSIWYG editors will result in some aberrations that will have to be corrected by hand.

With CKEditor you can be sure that whatever you paste will retain its styles, indentation and nesting levels without any doubt. In addition to support for pasting HTML content, CKEditor 5 offers a set of pasting tools, allowing the users to paste from Microsoft Word or paste from Google Docs. This is, again, crucial when the feature is employed in production and business environments.

# Wrap-up and a further reading list

Whatever you do, lists are here to help — be it lesson plans, task breakdowns, party invitation lists, shopping reminders. They bring a clear and concise message, provide a visual break in a wall of text, and help structure and tidy the document. Employ them for your own benefit and for the good of your readers.

As for the delicious pork recipe — maybe some other time. Instead, remember to check out our other feature-oriented blog posts on using CKEditor 5 as a Markdown editor to boost productivity and speed, employing its real-time collaboration with comments and suggestion mode for online discussions and team cooperation and creating printable documents and forms with pagination and restricted editing that can later be easily prepared for printing with Export to PDF or further editing with Export to Word features.