In reply to@_slack_wagtailcms_UMQ2MVBEJ:matrix.org
Hello together, We are trying to support fontawesomes Icons for the RichtextEditor(Draftail). So if an editor enters for example "fa-lightbulb" as content, the output will be the lightbulb-Icon on the content page. This works with following code plus Javascript-manipulation. hooks.register('register_rich_text_features') def register_mark_feature(features): feature_name = 'fontawesome_icon' type_ = 'MARK' tag = 'i' # configure how Draftail handles the feature in its toolbar. control = { 'type': type_, 'label': 'FontAwesome', 'description': 'Mark as FontAwesome Icon', 'style': {'background': 'lightblue'}, } ... # configure the content transform from the DB to the editor and back. db_conversion = { 'from_database_format': { 'i[class="rtfa fa"]': InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': {type_: 'i class="rtfa fa"'} }, } ... JS-Manipulation: window.onload = function () { // get all elements that were marked as font awesome icons in richtext let richtTextFontAwesomeIcons = document.querySelectorAll(".rtfa"); // make them display the icon richtTextFontAwesomeIcons.forEach(rtfa => { rtfa.classList.add(rtfa.textContent); rtfa.textContent = ''; }); }; A prettier solution would be to directly manipulate the input string inside the register_mark_feature method. Do anybody of you know, whether there is a way to access the input string to use it in db_conversion? Thank you in advance for any help!

'to_database_format': {
           'style_map': {type_: convert_icon_to_html}
       }

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I think you should be able to access the string by passing a function in style_map for type_:

'to_database_format': {
           'style_map': {type_: convert_icon_to_html}
       }

from draftjs_exporter.dom import DOM

def convert_icon_to_html(props):
    text = props['children']
    icon_name = text

    return DOM.create_element('i', {
        'class': 'rtfa fa %s' % icon_name,
    })

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
then this function would be defined as:

from draftjs_exporter.dom import DOM

def convert_icon_to_html(props):
    text = props['children']
    icon_name = text

    return DOM.create_element('i', {
        'class': 'rtfa fa %s' % icon_name,
    })

In reply to@_slack_wagtailcms_UFCCF5RND:matrix.org
image.png

In reply to@_slack_wagtailcms_U9DQ4PP9R:matrix.org
Thibaud - I’m integrating draftail into an application. The application is wagtail, but I’m putting this into the non-wagtail, react part. I’m getting this error when I ‘unmount’ a component. Might you have a suggestion? > Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in CommentEditor (created by CommentEditForm) in div (created by CommentEditForm) in form (created by CommentEditForm) in CommentEditForm (created by CommentItem) The error happens when the editor calls ‘save’ and my handler tries to update state, as in useState hook

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I’ve seen this before as well

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I think this is exactly what you described, and probably a bug in Draftail – it should stop trying to call the "save" handler once unmounted

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I haven’t tried the code though

In reply to@_slack_wagtailcms_UMQ2MVBEJ:matrix.org
Hi Thibaud. I just tested it - and it seems to work 🙂 Thank you very very much! I highly appreciate your help! Have a nice weekend!

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I don’t think it’s possible unfortunately. There might be variations in markup that are close, but with the current implementation of list items this would make "Here’s a third item" behave as if it was the first item in a new ordered list

In reply to@_slack_wagtailcms_UFCCF5RND:matrix.org
Ah that’s a real shame, I’m used to using some Markdown and having it ‘just work’ for want of a better phrase. I will ask the editors to just choose one type of list for now, thanks for the answer.

In reply to@_slack_wagtailcms_UFCCF5RND:matrix.org
Thibaud Ah that’s a real shame, I’m used to using some Markdown and having it ‘just work’ for want of a better phrase. I will ask the editors to just choose one type of list for now, thanks for the answer.

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I’ll check whether it would be possible to implement this but can’t promise anything

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
https://github.com/springload/draftail/issues/208

In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I see someone has just filed an issue for this, are they working with you or is it just a coincidence? https://github.com/springload/draftail/issues/209