| 13 Aug 2019 |
 thp44 | Would it be possible to add an “edit in html” button? 😉 | 14:33:52 |
 coenvanderkamp | 'Edit in json' should be possible! | 14:35:02 |
|  flipperpa changed their profile picture. | 22:10:18 |
| 14 Aug 2019 |
|  alejandro changed their profile picture. | 14:05:02 |
| 15 Aug 2019 |
|  Arthur changed their profile picture. | 09:18:32 |
|  sonny changed their profile picture. | 09:55:22 |
|  Thibaud changed their profile picture. | 14:15:11 |
| Thibaud | New Draftail release, & blog post: https://www.draftail.org/blog/2019/08/15/draftail-v1-3-0-community-improvements-beyond-wagtail
TL;DR; – nothing new for Wagtail in here 😅 but hopefully useful improvements for people using the editor elsewhere | 14:19:11 |
| 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 |
