How to apply rich text features to the parent element in Wagtail DraftJS?

Viewed 94

I am extending Wagtail's DraftJS editor:

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

    feature_name = 'text-uppercase'
    type_ = 'UPPERCASE'
    tag = 'span'

    control = {
        'type': type_,
        'label': 'UP',
        'description': 'Uppercase',
        'style': {'text-transform': 'uppercase'},
    }

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

    db_conversion = {
        'from_database_format': {tag: InlineStyleElementHandler(type_)},
        'to_database_format': {'style_map': {type_: 'span '
                                                    'class="text-uppercase"'}},
    }

    features.register_converter_rule('contentstate', feature_name, db_conversion)
    features.default_features.append('text-uppercase')

The above code works well and applies a element around selected text:

<h1><span class="text-uppercase">example text</span></h1>

However, how I want to apply my feature to the parent element, h1, not add a span element: example text

How can I inherit the parent element?

This would also be helpful to avoid nested <spans> with inline styles.

0 Answers
Related