!MMqDFaFUehZZVwknKE:matrix.org

Draftail

50 Members
A configurable rich text editor built with Draft.js https://www.draftail.org/21 Servers

Load older messages


SenderMessageTime
15 Aug 2019
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud I’m just back from holidays, I see there’s been lots of activity here, will try my best to answer all of the messages tomorrow or early next week 14:19:42
@_slack_wagtailcms_U4N6SF7K5:matrix.orgflipperpa Awesome to see that Draftail is getting adopted outside of our ecosystem - great work, Thibaud! 🙂 16:00:00
@_slack_wagtailcms_UJHDYNXJP:matrix.orgEric Sherman joined the room.16:29:29
@_slack_wagtailcms_UJHDYNXJP:matrix.orgEric Sherman interested in talking about tables! 16:29:29
@_slack_wagtailcms_UB1CW1P53:matrix.orgKalobTaulien
In reply to@_slack_wagtailcms_UJHDYNXJP:matrix.org
interested in talking about tables!
https://media.giphy.com/media/X83Y7r03T6uty/giphy.gif
20:06:22
21 Aug 2019
@_slack_wagtailcms_UJHDYNXJP:matrix.orgEric Sherman changed their profile picture.23:03:54
22 Aug 2019
@_slack_wagtailcms_U4N6SF7K5:matrix.orgflipperpa changed their profile picture.01:30:51
@_slack_wagtailcms_U9DQ4PP9R:matrix.orgsharpertool changed their profile picture.10:55:11
@_slack_wagtailcms_U0LQA2BFT:matrix.orgmattwestcott changed their profile picture.14:23:36
23 Aug 2019
@_slack_wagtailcms_UJ6DZ84J2:matrix.orgJonathan Liuti changed their profile picture.10:32:59
@_slack_wagtailcms_UFCCF5RND:matrix.orgJason Dilworth changed their profile picture.11:31:06
@_slack_wagtailcms_U3T796GEP:matrix.orgharris changed their profile picture.16:42:50
@_slack_wagtailcms_UB1CW1P53:matrix.orgKalobTaulien changed their profile picture.17:22:24
25 Aug 2019
@faabler:matrix.org@faabler:matrix.org joined the room.04:21:09
@faabler:matrix.org@faabler:matrix.org left the room.04:21:18
@_slack_wagtailcms_U1HDLHL9M:matrix.orgcoenvanderkamp changed their profile picture.09:02:29
26 Aug 2019
@_slack_wagtailcms_UMQ2MVBEJ:matrix.orgMartin Kimmig joined the room.06:58:28
@_slack_wagtailcms_UMQ2MVBEJ:matrix.orgMartin Kimmig 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! 06:58:29
27 Aug 2019
@_slack_wagtailcms_U9BPTUQKT:matrix.orgRyan Verner changed their profile picture.05:21:23
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud changed their profile picture.08:55:44
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
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!
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}
       }
09:53:08
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
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}
       }
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,
    })
09:55:49
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
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,
    })
I haven’t tried the code though
09:55:56
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
In reply to@_slack_wagtailcms_UFCCF5RND:matrix.org
image.png
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
12:59:01
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
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
I’ve seen this before as well
13:16:55
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I’ve seen this before as well
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
13:18:32
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
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
https://github.com/springload/draftail/issues/208
14:01:46
28 Aug 2019
@_slack_wagtailcms_UBVEB3T0T:matrix.orgHanz van Aardt changed their profile picture.01:26:09
29 Aug 2019
@_slack_wagtailcms_U6VSCTBH6:matrix.orgscotchester changed their profile picture.17:57:33
30 Aug 2019
@_slack_wagtailcms_UMQ2MVBEJ:matrix.orgMartin Kimmig
In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I haven’t tried the code though
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!
07:36:56

Show newer messages


Back to Room ListRoom Version: 1