!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
5 Aug 2019
@_slack_wagtailcms_UANB7K25B:matrix.orgArthur
In reply to@_slack_wagtailcms_UANB7K25B:matrix.org
well - you can skip the ref stuff and just get the elementById i guess - doesn`t matter if you use an oldschool request/response cycle 😉
(edited) ... raw }} ... => ... raw formRef.submit() }} ...
14:04:38
@_slack_wagtailcms_UANB7K25B:matrix.orgArthur
In reply to@_slack_wagtailcms_UANB7K25B:matrix.org
I didn't try it, but the draftail docs seems promising: https://www.draftail.org/docs/importing-and-exporting-html#demo Looks like you could write just some JSON into a hidden form field and save this Maybe you have to tweak the react code a bit:
  {
      hiddenInputRef.current.text = raw
      formRef.submit()
    }}
 
hiddenInputRef.current.text = raw with hiddenInputRef is a ref to your hiddenInputField The loading should be equivalent:
 
But you will need some basic React knowledge to implement this 
(edited) ... raw formRef.submit() }} ... => ... raw formRef.current.submit() }} ...
14:05:04
6 Aug 2019
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
In reply to@_slack_wagtailcms_UANB7K25B:matrix.org
I didn't try it, but the draftail docs seems promising: https://www.draftail.org/docs/importing-and-exporting-html#demo Looks like you could write just some JSON into a hidden form field and save this Maybe you have to tweak the react code a bit:
  {
      hiddenInputRef.current.text = raw
      formRef.current.submit()
    }}
 
hiddenInputRef.current.text = raw with hiddenInputRef is a ref to your hiddenInputField The loading should be equivalent:
 
But you will need some basic React knowledge to implement this 
I’ve been working on this in secret over at https://github.com/thibaudcolas/django-draftail. There isn’t much to see in that repo at the moment, I’m still at the "too afraid to commit" stage considering my poor Django skills
12:25:31
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
I’ve been working on this in secret over at https://github.com/thibaudcolas/django-draftail. There isn’t much to see in that repo at the moment, I’m still at the "too afraid to commit" stage considering my poor Django skills
the TL;DR; is that it can be very straightforward, if you’re only after basic functionality, it’s more work if you want to replicate something closer to what Wagtail has
12:26:04
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
the TL;DR; is that it can be very straightforward, if you’re only after basic functionality, it’s more work if you want to replicate something closer to what Wagtail has
Things that require significant effort are: - Having a server-side API to configure what formatting is enabled in the editor per-field via models, like Wagtail does - Links, images, embeds, documents. Wagtail’s implementation is specific to Wagtail. - Rich text processing
12:27:37
@_slack_wagtailcms_U0ME9SGR1:matrix.orgThibaud
In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
Things that require significant effort are: - Having a server-side API to configure what formatting is enabled in the editor per-field via models, like Wagtail does - Links, images, embeds, documents. Wagtail’s implementation is specific to Wagtail. - Rich text processing
The rich text processing itself is done with https://github.com/springload/draftjs_exporter, so most of the work there would just be to correctly hook this up to the fields’ rendering. Not a massive task but important to get right
12:29:42
@_slack_wagtailcms_U4N6SF7K5:matrix.orgflipperpa
In reply to@_slack_wagtailcms_U0ME9SGR1:matrix.org
The rich text processing itself is done with https://github.com/springload/draftjs_exporter, so most of the work there would just be to correctly hook this up to the fields’ rendering. Not a massive task but important to get right
Thanks Thibaud! I'm mainly interested in just having basic RichText within the Django Admin. We allow our tech team in the Django Admin, and far more people into the Wagtail section.
18:22:50
7 Aug 2019
@_slack_wagtailcms_UJ6DZ84J2:matrix.orgJonathan Liuti changed their profile picture.11:05:21
8 Aug 2019
@_slack_wagtailcms_U0LQA2BFT:matrix.orgmattwestcott changed their profile picture.22:55:11
@_slack_wagtailcms_UB1CW1P53:matrix.orgKalobTaulien changed their profile picture.22:56:13
9 Aug 2019
@_slack_wagtailcms_UJ6DZ84J2:matrix.orgJonathan Liuti changed their profile picture.14:29:09
10 Aug 2019
@_slack_wagtailcms_U1HDLHL9M:matrix.orgcoenvanderkamp changed their profile picture.21:23:23
11 Aug 2019
@_slack_wagtailcms_U0LQA2BFT:matrix.orgmattwestcott changed their profile picture.08:35:17
@_slack_wagtailcms_U6VSCTBH6:matrix.orgscotchester changed their profile picture.14:21:04
@_slack_wagtailcms_UB1CW1P53:matrix.orgKalobTaulien changed their profile picture.16:39:51
12 Aug 2019
@_slack_wagtailcms_U9DQ4PP9R:matrix.orgsharpertool changed their profile picture.03:10:21
@_slack_wagtailcms_U9DQ4PP9R:matrix.orgsharpertool 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 03:10:21
@_slack_wagtailcms_U9DQ4PP9R:matrix.orgsharpertool (edited) ... update state => ... update state, as in useState hook 03:10:26
@_slack_wagtailcms_U9BPTUQKT:matrix.orgRyan Verner changed their profile picture.03:41:17
@_slack_wagtailcms_UJ6DZ84J2:matrix.orgJonathan Liuti changed their profile picture.08:26:10
@_slack_wagtailcms_UFCCF5RND:matrix.orgJason Dilworth joined the room.11:11:21
@_slack_wagtailcms_UFCCF5RND:matrix.orgJason Dilworthimage.png
Download image.png
11:11:21
@_slack_wagtailcms_UFCCF5RND:matrix.orgJason Dilworth 👋 One of the editors of a site I’m working on has raised a thought about lists within Draftail which I’m sure must’ve come up before but I can’t find anything anywhere about it. Forgive me if there is an obvious solution to this issue, but here we go: We’d like to be able to have listed of different types nested within each other. For instance, an ordered list where one of the items has an unordered list contained within it. This image should describe it a bit better: 11:11:21
@_slack_wagtailcms_UFCCF5RND:matrix.orgJason Dilworth Is it possible to make that sub/indented-list unordered? So the markup would look like ol li Stuff /li li Things ul li Sub-stuff 1 /li li Sub-stuff 2 /li /ul /li li Other things /li /ol 11:12:30
@_slack_wagtailcms_UFCCF5RND:matrix.orgJason Dilworth (edited) ... like <ol> <li>Stuff</li> <li>Things<ul><li>Sub-stuff 1</li><li>Sub-stuff 2</li></ul></li> <li>Other things</li> </ol> => ... like ``` <ol> <li>Stuff</li> <li>Things<ul><li>Sub-stuff 1</li><li>Sub-stuff 2</li></ul></li> <li>Other things</li> </ol> ``` 11:12:47
@_slack_wagtailcms_UBVEB3T0T:matrix.orgHanz van Aardt joined the room.19:15:43
@_slack_wagtailcms_UBVEB3T0T:matrix.orgHanz van Aardt Hi there, we have tried various ways to get an image placed into the Draftail editor formatted as Inline. The issue is really that the p element preceding the img element cannot be targeted using CSS (CSS does not allow targetting of parent elements I was surprised to learn). So in effect the answer might be a type of image style which will also affect the elements before and after the img element. Do you know whether such a plugin / extension will be possible. Do you know of any current way to have inline formatting of an image? Any guidance highly appreciated as always. 19:15:47
@_slack_wagtailcms_U1HDLHL9M:matrix.orgcoenvanderkamp changed their profile picture.19:21:42
@_slack_wagtailcms_U1HDLHL9M:matrix.orgcoenvanderkamp Isn't the richtext wrapped with div class="richtext" ? If not it is easy to do. Then you can css it .richtext p img {float:right;}. 19:21:44
@_slack_wagtailcms_U1HDLHL9M:matrix.orgcoenvanderkamp (edited) ... If not it ... => ... If not, it ... 19:21:50

Show newer messages


Back to Room ListRoom Version: 1