Allow more options for using prismjs about wagtailcodeblock HOT 12 CLOSED

@SalahAdDin Soon :-)

work has taken over for a bit.

from wagtailcodeblock.

Just an update - this has been completely rewritten for telepath, and now only imports each library once. If we want to talk about possibly overriding the CDN with local assets, I'm game, but it is currently not supported.

from wagtailcodeblock.

IIRC, this is a bit trickier than it may appear. While Wagtail allows injection of CSS and JS on the editor side, it isn't quite that simple on the user-facing rendering side. I hope you can come up with something a bit more clever than my attempts - let me know if you have any questions. Your efforts are appreciated!

from wagtailcodeblock.

You mean in the editor itself?

I was only thinking about client side TBH. (I'd designed a very simple version before stumbling on your package which did this). I'll see if I can incorporate a single JS script for the editor while I'm at it.

from wagtailcodeblock.

What I meant is that the way Wagtail works, when you define the editor, you can inject both CSS and JS files like this with the media() method:

https://github.com/FlipperPA/wagtailcodeblock/blob/master/wagtailcodeblock/blocks.py#L27

However, the template gets displayed multiple times if you have multiple code blocks on the same page being rendered to the user:

https://github.com/FlipperPA/wagtailcodeblock/blob/master/wagtailcodeblock/templates/wagtailcodeblock/code_block.html#L3

As you can see, I'm using the CDN on the editor side to only include the necessary languages on themes. However, on the template side, I'm repeating the JavaScript and CSS injection on each and every code block on the page. Does that make sense? I couldn't find a better way, and am relying on the browser to be smart enough to not re-load the JS/CSS on every occurrence in the DOM.

from wagtailcodeblock.

Ok I get it.

The lib won't be downloaded multiple times - but it will be run as often as it is called which is not ideal.

I have two ideas in mind:

1. A flag is set in the JS - this flag can be checked in the js and if not true the lib can be downloaded.

2. (my personal preference as it fits the above) - Don't provide the prism files for the developer. Put it in the instructions that if they want to use this they should provide prismjs somewhere where it won't be run n times. - I think this is a reasonable request (there are plenty of libraries which expect you to provide your own dependencies, or include tags yourself where appropriate).

To be honest I reckon both can be done and live alongside each other - considering that I'd like to be able to define my own place to pull the files from. 1 can be set to the default (get the file from the CDN, run once) with 2 as a setting (disable CDN, expect user to provide their own).

What do you think?

from wagtailcodeblock.

I know @gasman has been thinking about this a bunch lately - let me ping him and see what he thinks. I'd want to at least leave the current functionality as the default - plug and play - since several projects depend on it being this way, including my workplace that paid me to get this off the ground! :)

We might be able to achieve all these goals:

• set a flag in JS, and only load the JS / CSS assets once
• create a setting to override this default behavior, and require "BYO Prism assets"

I had done some work to only include the JS / CSS assets once with a flag, but ran out of time. My JS-fu is not strong.

from wagtailcodeblock.

That's why you should always pin dependencies 😉. Although I agree you should keep the default behaviour as default.

I'll see if I can prototype 1.

from wagtailcodeblock.

Hehehehe, not always! Django, for example, I do this:

Django>=1.11,<1.12

:)

from wagtailcodeblock.

@NDevox Please.

from wagtailcodeblock.

@NDevox Thank you.

from wagtailcodeblock.

I did some work towards this goal by creating {% renderonce %} template tag. This approach was flawed though, as it only respected the context of the template rather than the page. I'm continuing to look into improving this.

from wagtailcodeblock.