🚀 Enhancing Quill Editor Functionality: Solving List Rendering Challenges 🚀

Quill is one of the most user-friendly rich-text editors available for building modern applications. While it provides excellent text-beautifying features like bold, italic, underline, and more, it falls short in certain areas like file uploads and managing tabular data. Surprisingly, even some of its existing features, like list rendering, can be less practical than they initially seem.

Here’s an interesting challenge I faced: Handling mixed list types (ordered and unordered) in Quill.

By default, Quill renders lists using a single <ol> tag and differentiates items using the data-list attribute. For example:

<ol>
  <li data-list="ordered">one</li>
  <li data-list="ordered">two</li>
  <li data-list="bullet">tea</li>
</ol>        

While this looks fine in the editor, saving it to a database and rendering it back in HTML results in:

<ol>
  <li>one</li>
  <li>two</li>
  <li>tea</li>
</ol>        

Which renders as:

1. one
2. two
3. tea

Bullet points (data-list="bullet") are treated as numbered items by browsers, as HTML doesn’t recognize the data-list attribute. (Neither does Quill understand any <ol> tags). This creates a mismatch between the editor view and the rendered output.

Hence, the question arises, how do you actually figure out a way to save and render correctly the data entered, as it actually is supposed to be saved while apprehending what's happening behind the scenes?

If you have the same question popping up in your head, here's something for you!

The Solution

I have designed an algorithm to restructure Quill's mixed list structure into separate <ol> and <ul> lists while preserving the order and integrity of the original content. Here's a brief overview:

Objective:

Convert mixed <ol> and <ul> structures into correctly typed lists while maintaining item order.

Algorithm Steps:

1. Retrieve All Lists: Collect all <ol> and <ul> elements in the document.
2. Process Each List: For each list: Classify items <li> based on their (data-list) attribute (ordered or bullet). Create new lists (<ol> or <ul>) as needed when the type changes.
3. Maintain Order: Append each item to the appropriate list.
4. Clean Up: Remove the original lists after restructuring.
5. Repeat: Process the next list until all are converted.

Pseudocode:

Input: Document with mixed lists with 'data-list' attribute
Output: Document with properly separated `ol` and `ul` lists while maintaining their order

1. Get all lists (ol elements as per Quill) → lists
2. For each list in lists:
   a. Initialize `newList` as NULL
   b. Get the `parentNode` of the list

   c. For each `li` in the current list:
      i. Determine `listType` based on `li.data-list`:
         - If `data-list` is "ordered": `listType` = "ol"
         - If `data-list` is "bullet": `listType` = "ul"

      ii. If `newList` is NULL or `newList.tagName` != `listType`:
          - Create a new list element (`ol` or `ul`) based on `listType`
          - Insert `newList` before the current list in `parentNode`

      iii. Append the current `li` to `newList`

   d. Remove the original list (`list`) from `parentNode`

3. End
        

The result? A properly rendered list structure in the database and on the page!

Why It Matters?

This small yet significant tweak ensures that your rich-text editor functions seamlessly across all use cases. Whether you're dealing with user-generated content or managing data-driven applications, attention to detail in list rendering can make all the difference.

💡 Tip: Try customizing open-source tools to fit your needs, its challenging, yet interesting. The flexibility of Quill makes it a fantastic starting point for crafting powerful, tailored experiences.

What challenges have you faced while customizing rich-text editors? Share your experiences below!👇