Add extra HTML markup to features in Wagtail RichTextField editor?

Question

How can I add extra HTML markup to individual features in Wagtail's RichTextField and have it be stored in the database? Specifically, I need to change the default appearance of a rendered <ul> list, so it would use custom font icons instead of bullet points.

So instead of a <ul> list like this:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

It would save the following in the database:

<ul>
    <li><i class="bx bx-chevron-right">Item 1</li>
    <li><i class="bx bx-chevron-right">Item 2</li>
    <li><i class="bx bx-chevron-right">Item 3</li>
    <li><i class="bx bx-chevron-right">Item 4</li>
</ul>

Is that possible?

Answer 1

You can extend the wagtail's draftail editor. See Creating new blocks