15 Aug 2019 |
Thibaud | 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 |
flipperpa | Awesome to see that Draftail is getting adopted outside of our ecosystem - great work, Thibaud! 🙂 | 16:00:00 |
| Eric Sherman joined the room. | 16:29:29 |
Eric Sherman | interested in talking about tables! | 16:29:29 |
KalobTaulien | 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 |
| Eric Sherman changed their profile picture. | 23:03:54 |
22 Aug 2019 |
| flipperpa changed their profile picture. | 01:30:51 |
| sharpertool changed their profile picture. | 10:55:11 |
| mattwestcott changed their profile picture. | 14:23:36 |
23 Aug 2019 |
| Jonathan Liuti changed their profile picture. | 10:32:59 |
| Jason Dilworth changed their profile picture. | 11:31:06 |
| harris changed their profile picture. | 16:42:50 |
| KalobTaulien changed their profile picture. | 17:22:24 |
25 Aug 2019 |
| @faabler:matrix.org joined the room. | 04:21:09 |
| @faabler:matrix.org left the room. | 04:21:18 |
| coenvanderkamp changed their profile picture. | 09:02:29 |
26 Aug 2019 |
| Martin Kimmig joined the room. | 06:58:28 |
Martin 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 |
| Ryan Verner changed their profile picture. | 05:21:23 |
| Thibaud changed their profile picture. | 08:55:44 |
Thibaud | 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 |
Thibaud | 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 |
Thibaud | 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 |
Thibaud | 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 |
Thibaud | 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 |
Thibaud | 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 |
Thibaud | 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 |
| Hanz van Aardt changed their profile picture. | 01:26:09 |
29 Aug 2019 |
| scotchester changed their profile picture. | 17:57:33 |
30 Aug 2019 |
Martin 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 |