Creating Draftail entity with additional data

Question

I've been using Wagtail to create a website with additional text annotations. The user flow is that there is some highlighted text in a paragraph, which when clicked shows an annotation off to one side. The expected HTML result is:

A sentence with <span class='link'>A link<span class='hidden-text'>Hidden text</span></span>

I would like to achieve this with a single item on the draftail menu, with a UI similar to the URL creator- the user selects the text, and adds the annotation text. I have followed the instructions on https://docs.wagtail.io/en/stable/advanced_topics/customisation/extending_draftail.html to create a new inline style which produces the link, however I can't then add the hidden-text:

# 1. Use the register_rich_text_features hook.
@hooks.register('register_rich_text_features')
def register_mark_feature(features):
    """
    Registering the `mark` feature, which uses the `MARK` Draft.js inline style type,
    and is stored as HTML with a `<mark>` tag.
    """
    feature_name = 'mark'
    type_ = 'SAMPLE'
    tag = 'sample'

    # 2. Configure how Draftail handles the feature in its toolbar.
    control = {
        'type': type_,
        'label': '?',
        'description': 'Hint link',
    }

    # 3. Call register_editor_plugin to register the configuration for Draftail.
    features.register_editor_plugin(
        'draftail', feature_name, draftail_features.InlineStyleFeature(control)
    )

    # 4.configure the content transform from the DB to the editor and back.
    db_conversion = {
        'from_database_format': {tag: InlineStyleElementHandler(type_)},
        'to_database_format': {'style_map': {type_: tag}},
    }

    # 5. Call register_converter_rule to register the content transformation conversion.
    features.register_converter_rule('contentstate', feature_name, db_conversion)

    # 6. (optional) Add the feature to the default features list to make it available
    # on rich text fields that do not specify an explicit 'features' list
    features.default_features.append('mark')

Answer 1

to get What you want, easiest way is to create your own Template tags filters, create your own markdown replacements, let's say, in the rich text you assigned the link to part of your paragraph like this "Click here this is a hidden text" and then you put [ht] right before the "this is a hidden text" and a[th] right after that targeted hidden text,then in the template use self.field_name|replace:"[ht]"|replace:"[th]"

in template tag file (for example myapp/templatetags/my_richtext.py):

from django import template
from wagtail.images.models import Image
from django.utils.safestring import mark_safe


register = template.Library()


@register.filter(needs_autoescape=True)
def replace(value, arg, autoescape=True):
    if arg == "[ht]": result = value.replace(arg, "<span class='hidden'>")
    elif arg == "[th]": result = value.replace(arg, "</span>")
    return mark_safe(result)