python - Wagtail CMS Draftail Inline Elements and Classes not showing

Question

I have registered the following hooks:

from wagtail.core import hooks
from wagtail.admin.rich_text.converters.html_to_contentstate import InlineStyleElementHandler
import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from django.templatetags.static import static
from django.utils.html import format_html

@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<link rel="stylesheet" href="{}">',
        static('css/styles.css')
    )

@hooks.register('register_rich_text_features')
def register_smallcaption_feature(features):

    feature_name = 'dropcap'
    type_ = 'DROPCAP'

    control = {
        'type': type_,
        'label': 'Drop',
        'description': 'Dropcap',
        'element': 'p class="has-dropcap"',
    }

    features.register_editor_plugin(
        'draftail',
        feature_name,
        draftail_features.InlineStyleFeature(control)
    )

    db_conversion = {
        'from_database_format': {
            'p[class="has-dropcap"]':
                   InlineStyleElementHandler(type_)
        },
        'to_database_format': {
            'style_map': {type_: 'p class="has-dropcap"'}
        },
    }

    features.register_converter_rule(
        'contentstate',
        feature_name,
        db_conversion
    )

I am selecting a block of text in the Draftail editor and applying the dropcap feature like this,

This is what the final page looks like,

The text block I selected has been wrapped in the paragraph tag with the has-dropcap class as intended in the published page.

But the inline editor doesn't wrap the block of text with the paragraph tag with the has-dropcap class as I have asked it to do in the controls variable 'element': 'p class="has-dropcap"',

What am I doing wrong, and how do I add elements and classes to the text with selected features in Wagtail's Draftail editor?

Answer 1

This doesn't work because p class="has-dropcap" is not a valid HTML tag name. Injecting an attribute via the tag name might work as an unofficial hack in some places because those particular internals of Wagtail work by piecing together HTML strings, but other parts of Wagtail code (such as the Draftail editor) use the Javascript DOM API where tag names and attributes are completely distinct concepts.

I don't know if there's a workaround, but in any case, I wouldn't advise implementing dropcaps in this way. The whole point of a CMS like Wagtail is to separate content from presentation: if a user writing website content is making decisions about typography while writing it, then something has gone wrong in that process.

If your site design calls for the first paragraph of the body text to have a dropcap, then your CSS should represent that design choice, using a rule such as .body p:first, rather than a manually-applied class name.