Package future with Draftail.

[SalahAdDin]

Recently, Wagtail 2.0 was released and it brings a new feature: Draftail, using Draft.js, a powerful jseditor.

One of the package derivated from Wagtail, Puput, is using the new feature API for inject code in the RichTextFields: https://github.com/APSL/puput/commit/be7eacb9f580b98109397aba16876172b01dc4e5#diff-2e7915c4db5fe6d98fea8c5525939930 You can see a prism.js plugin for Draftail: https://github.com/withspectrum/draft-js-prism-plugin

So, my question is, what's about this Package? What is the future for this package?

There is a content related issue: https://github.com/FlipperPA/wagtailcodeblock/issues/9

[MiltonLn]

Hey @SalahAdDin, I work on Puput too, I was the dev who added support for Wagtail 2.0. Currently there is only support for code lines on there.

Our intention in this repo is to keep supporting code blocks as StreamFields (Using this project as it is) and also, provide support for a plugin to add code blocks directly on Draftail.

However, that process has been slowed down a little due to some changes which are being done into Wagtail's Draftail feature.

Our plans is to have a cool project here to support all the stuff related to code snippets for Wagtail and related ones

[FlipperPA]

@MiltonLn has it correct - this package will be hanging around for those of us who still prefer StreamFields. It's just my obsessive-compulsive nature to want everything segmented, even with as cool as Draftail is!

[thibaudcolas]

I don't think there's that big improvements in using code blocks within the rich text editor instead of as separate StreamField block like this library does already. I guess the main advantage is having the syntax highlighting directly in the typed text, but if you copy-paste code snippets from elsewhere that doesn't seem super important.

Of course the rich text editor has much more advanced capabilities than a textarea so it might still be worth exploring.

---

If/when anyone wants to tackle this, there's already a Draft.js decorator based on Prism, compatible with Draftail, over at https://github.com/springload/draftail/blob/master/examples/components/PrismDecorator.js.

You can see it in use here: https://github.com/springload/draftail/blob/995e4c3a5286d62d94295848c8c1cc0e2a0039df/examples/index.js, as part of the Draftail demo site.

This is only a decorator (something that highlights text in some way), so it's missing a way to select what language to use when highlighting. This could be as simple as adding a special keyword lang: python or similar to use at the top of the code blocks. It could also use a custom React component to render the block (with a language picker) – something that's not supported in Draftail at the moment IIRC, but we could add easily if there is a need.

[FlipperPA]

Just an update: I'm going to be updating this block to support Wagtail 2.7. I'm wondering if there is any appetite to bring it into core as a contrib module, such as wagtail.contrib.table_block.

[SalahAdDin]

I'm agreed with that.

[thibaudcolas]

FYI I made a quick attempt at using Draftail for the StreamField block yesterday – without any further features enabled, just the syntax highlighting.

It’s working surprisingly well considering the amount of time I spent on this, but there would be more needed for it to be anywhere near production-ready. However I’m not sure it’s that valuable of a change, as mentioned above 😄What do you think?

[FlipperPA]

That's bananas, @thibaudcolas, I love it!

I will say that I find myself copy/pasting code in a lot more than doing "live coding" in a browser window, but I do think it is a much nicer experience for the author. Would this work lend itself towards eventually allowing syntax highlighting withing Draftail RichTextFields rather than blocks as well?

[FlipperPA]

@thibaudcolas I'm going to close this issue - if we end up wanted to revisit, I'm game for it, but there hasn't seemed to be too much pent up demand. :) I'm guessing it would require a total rewrite with telepath.