Giter VIP home page Giter VIP logo

Comments (8)

MiltonLn avatar MiltonLn commented on July 16, 2024 2

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

from wagtailcodeblock.

FlipperPA avatar FlipperPA commented on July 16, 2024 2

@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!

from wagtailcodeblock.

thibaudcolas avatar thibaudcolas commented on July 16, 2024 2

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.

from wagtailcodeblock.

FlipperPA avatar FlipperPA commented on July 16, 2024 2

@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.

from wagtailcodeblock.

FlipperPA avatar FlipperPA commented on July 16, 2024 1

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.

from wagtailcodeblock.

thibaudcolas avatar thibaudcolas commented on July 16, 2024 1

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

draftail-codeblock

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?

from wagtailcodeblock.

FlipperPA avatar FlipperPA commented on July 16, 2024 1

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?

from wagtailcodeblock.

SalahAdDin avatar SalahAdDin commented on July 16, 2024

I'm agreed with that.

from wagtailcodeblock.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.