Wagtail inserts div instead of svg tag for custom rich text features

[Olexander Mykhalniuk]

Issue Summary

We extend the default styling options of the paragraph through "register_rich_text_features" and when we adding an icon for feature not from the default wagtail set, it inserts svg code inside the div, not svg tag. In version 3 of wagtail we did not have such a problem.

Python code:

@hooks.register("register_rich_text_features", order=3)
def register_centertext_feature(features):
    feature_name = "center_aligned_text_block"
    type_ = "center_aligned_text_block"
    tag = "div"

    control = {
        "type": type_,
        "icon": [
            "M 83.625 179.625 L 84.265625 212.265625 L 946.132812 212.265625 L 946.773438 179.625 L 947.414062 "
            "147.199219 L 82.988281 147.199219 Z M 83.625 179.625 ",
            "M 232.535156 334.933594 L 232.535156 369.066406 L 819.199219 369.066406 L 819.199219 300.800781 "
            "L 232.535156 300.800781 Z M 232.535156 334.933594 ",
            "M 83.199219 502.398438 L 83.199219 535.464844 L 953.601562 535.464844 L 953.601562 469.332031 "
            "L 83.199219 469.332031 Z M 83.199219 502.398438 ",
            "M 232.535156 666.667969 L 232.535156 701.867188 L 812.800781 701.867188 L 812.800781 631.464844 "
            "L 232.535156 631.464844 Z M 232.535156 666.667969 ",
            "M 81.066406 842.667969 L 81.066406 878.933594 L 951.464844 878.933594 L 951.464844 806.398438 "
            "L 81.066406 806.398438 Z M 81.066406 842.667969 ",
        ],
        "description": "Centered text",
        "style": {
            "display": "block",
            "text-align": "center",
        },
        "element": "div",
    }

    features.register_editor_plugin("draftail", feature_name, draftail_features.BlockFeature(control))

    db_conversion = {
        "from_database_format": {"div[class=center_aligned_text_block]": BlockElementHandler(type_)},
        "to_database_format": {
            "block_map": {type_: {"element": tag, "props": {"class": "center_aligned_text_block"}}}
        },
    }

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

    features.default_features.append(feature_name)

Code generated by wagtail:

<div role="option" aria-selected="false" id="downshift-0-item-3" class="w-combobox__option w-combobox__option--col1"><div class="w-combobox__option-icon">M 83.625 179.625 L 84.265625 212.265625 L 946.132812 212.265625 L 946.773438 179.625 L 947.414062 147.199219 L 82.988281 147.199219 Z M 83.625 179.625 M 232.535156 334.933594 L 232.535156 369.066406 L 819.199219 369.066406 L 819.199219 300.800781 L 232.535156 300.800781 Z M 232.535156 334.933594 M 83.199219 502.398438 L 83.199219 535.464844 L 953.601562 535.464844 L 953.601562 469.332031 L 83.199219 469.332031 Z M 83.199219 502.398438 M 232.535156 666.667969 L 232.535156 701.867188 L 812.800781 701.867188 L 812.800781 631.464844 L 232.535156 631.464844 Z M 232.535156 666.667969 M 81.066406 842.667969 L 81.066406 878.933594 L 951.464844 878.933594 L 951.464844 806.398438 L 81.066406 806.398438 Z M 81.066406 842.667969 </div><div class="w-combobox__option-text">Centered text</div></div>

Steps to Reproduce

1. Add hook written below to wagtail_hooks.py
2. Create paragraph on wagtail page and try to add some styles.
3. See this:

Technical details

• Wagtail version: 5.2

Working on this

The code was written following the guide from here https://docs.wagtail.org/en/stable/extending/extending_draftail.html