flipperpa / wagtailcodeblock Goto Github PK
View Code? Open in Web Editor NEWStreamField code blocks for the Wagtail CMS with real-time PrismJS Syntax Highlighting.
License: BSD 3-Clause "New" or "Revised" License
StreamField code blocks for the Wagtail CMS with real-time PrismJS Syntax Highlighting.
License: BSD 3-Clause "New" or "Revised" License
Recently, Wagtail 2.0
was released and it brings a new feature: Draftail
, using Draft.js
, a powerful js
editor.
One of the package derivated from Wagtail, Puput, is using the new feature API for inject code in the RichTextFields: APSL/puput@be7eacb#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: #9
Please replace insert_editor_css with insert_global_admin_css in wagtailcodeblock/wagtail_hooks.py
Hey there,
I really like this package. I went to install it on a project I have that's using wagtail react streamfields and it doesn't show the preview. Something in DOM has probably changed.
I just thought I should bring this up as it's looking like it'll be added to Wagtail 2.6 which should be out in a few months. This is the pull request I'm referring to
Clientside error on admin when using wagtailcodeblock "Uncaught ReferenceError: Prism is not defined at prism_repaint". I believe its due to Wagtail recent releases; the error is shown when using versions >= 2.13.
When viewing the page live everything works fine, the error is only shown on the Wagtail Admin.
Hi,
I have just tried to use wagtailcodeblock 0.3.1 in my wagtail site and the frontend bit appears to be fine when I preview.
Unfortunately, when I saved the code the Language selected and code input boxes 'jumped' to the right and now I'm unable to access various parts of the editing UI including adding/removing blocks.
The problem occurs in both Safari, Chrome and Firefox on macOS 10.13.1.
Is there any other information you need from me to try and figure out what is going wrong?
Hi,
What I can do to increase loading time prism.js file on the frontend?
According to Google Speed Insight it takes 3 383 ms to load this file.
Hi, Flipper,
First of all, I want to express my gratitude for your hard work on this project. I really appreciate the effort you've put into creating it. However, I've encountered an issue when trying to use it with Wagtail 5. While it works perfectly fine with Wagtail 4.2, it seems to break with Wagtail 5.
I've spent the last two days trying to debug and identify the problem, but unfortunately, I haven't been able to find a solution yet. I was wondering if you could provide me with some hints or guidance on how to fix it.
Here's what's currently happening: whenever I add a code block to the stream field, the entire stream field disappears. Additionally, I sometimes encounter the following error:
self.full_clean()
project/macaw/venv/lib/python3.9/site-packages/django/forms/forms.py", line 433, in full_clean
self._clean_fields()
/project/macaw/venv/lib/python3.9/site-packages/django/forms/forms.py", line 440, in _clean_fields
value = bf.initial if field.disabled else bf.data
project/macaw/venv/lib/python3.9/site-packages/django/forms/boundfield.py", line 127, in data
return self.form._widget_data_value(self.field.widget, self.html_name)
project/macaw/venv/lib/python3.9/site-packages/django/forms/forms.py", line 224, in _widget_data_value
return widget.value_from_datadict(self.data, self.files, html_name)
/project/macaw/venv/lib/python3.9/site-packages/wagtail/blocks/base.py", line 579, in value_from_datadict
return self.block_def.value_from_datadict(data, files, name)
/project/macaw/venv/lib/python3.9/site-packages/wagtail/blocks/stream_block.py", line 116, in value_from_datadict
count = int(data["%s-count" % prefix])
project/macaw/venv/lib/python3.9/site-packages/django/utils/datastructures.py", line 86, in __getitem__
raise MultiValueDictKeyError(key)
django.utils.datastructures.MultiValueDictKeyError: 'content-count'
Any help or suggestions you can provide would be greatly appreciated.
Thank you once again for your contributions and support.
Is there any example of coderedCMS use?
PrismJS no longer seems to be maintained. There are also some underlying issues with CSS namespacing that conflict with Wagtail's admin, particularly around the CSS class named comment
.
I'm considering switching to highlight.js as our underlying syntax highlighting library.
Pros:
Cons:
I wanted to open this issue for discussion to our users before moving in this direction. Thoughts?
I keep getting an error in the terminal when I create a new page that is using wagtailcodeblock as a streamfield, also all of my other streamfields go missing in the page admin and the terminal shows the error listed below.
I am using wagtailcodeblock 1.28.0.0. with Wagtail 4.2 and Django 4.1.7. I installed all of the dependencies that the Wagtail doc’s recommended.
class HomePage(Page):
content = StreamField([
('paragraph', blocks.RichTextBlock()),
('image', ImageChooserBlock()),
('code', CodeBlock())
], use_json_field=True)
content_panels = Page.content_panels + [
FieldPanel("content"),
]
This is the terminal error:
[02/Mar/2023 00:59:10] "GET /admin/pages/3/edit/ HTTP/1.1" 200 78981
[02/Mar/2023 00:59:10] "GET /admin/jsi18n/ HTTP/1.1" 200 3343
[02/Mar/2023 00:59:10] "GET /admin/sprite-cede3484/ HTTP/1.1" 200 108109
[02/Mar/2023 00:59:10] "GET /admin/pages/3/edit/preview/?in_preview_panel=true&mode= HTTP/1.1" 200 1844
[02/Mar/2023 00:59:10] "DELETE /admin/pages/3/edit/preview/ HTTP/1.1" 200 17
[02/Mar/2023 00:59:10] "GET /admin/sprite-cede3484/ HTTP/1.1" 200 108109
Internal Server Error: /admin/pages/3/edit/preview/
Traceback (most recent call last):
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/utils/datastructures.py", line 84, in __getitem__
list_ = super().__getitem__(key)
KeyError: 'content-count'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/core/handlers/exception.py", line 56, in inner
response = get_response(request)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/core/handlers/base.py", line 197, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/views/decorators/cache.py", line 62, in _wrapped_view_func
response = view_func(request, *args, **kwargs)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/wagtail/admin/urls/__init__.py", line 175, in wrapper
return view_func(request, *args, **kwargs)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/wagtail/admin/auth.py", line 182, in decorated_view
response = view_func(request, *args, **kwargs)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/views/generic/base.py", line 103, in view
return self.dispatch(request, *args, **kwargs)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/wagtail/admin/views/generic/preview.py", line 30, in dispatch
return super().dispatch(request, *args, **kwargs)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/views/generic/base.py", line 142, in dispatch
return handler(request, *args, **kwargs)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/wagtail/admin/views/generic/preview.py", line 74, in post
is_valid = form.is_valid()
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/wagtail/admin/forms/pages.py", line 176, in is_valid
return super().is_valid()
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/modelcluster/forms.py", line 343, in is_valid
form_is_valid = super().is_valid()
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/forms/forms.py", line 205, in is_valid
return self.is_bound and not self.errors
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/forms/forms.py", line 200, in errors
self.full_clean()
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/forms/forms.py", line 437, in full_clean
self._clean_fields()
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/forms/forms.py", line 444, in _clean_fields
value = bf.initial if field.disabled else bf.data
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/forms/boundfield.py", line 127, in data
return self.form._widget_data_value(self.field.widget, self.html_name)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/forms/forms.py", line 224, in _widget_data_value
return widget.value_from_datadict(self.data, self.files, html_name)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/wagtail/blocks/base.py", line 576, in value_from_datadict
return self.block_def.value_from_datadict(data, files, name)
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/wagtail/blocks/stream_block.py", line 104, in value_from_datadict
count = int(data["%s-count" % prefix])
File "/home/scott/django-sandbox/wagtailcodeblock/env/lib/python3.9/site-packages/django/utils/datastructures.py", line 86, in __getitem__
raise MultiValueDictKeyError(key)
django.utils.datastructures.MultiValueDictKeyError: 'content-count'
[02/Mar/2023 00:59:10] "POST /admin/pages/3/edit/preview/ HTTP/1.1" 500 152270
Apparently, TextBlock
can take rows as an attribute:
https://github.com/FlipperPA/wagtailcodeblock/blob/main/wagtailcodeblock/blocks.py#L52
When I reload the website sometimes the syntax highlighting and the numbering doesn't appear. If I keep reloading the webpage multiple times, then it appears after several tries. And if I reload it one more time, then the highlighting and numbering disappear again.
It's an issue only encountered when rendering on templates, not the admin panel.
Thanks for this useful library!
I'm having trouble overriding styles - I think because your block includes the prism css with the content, so it takes precedence over my site-wide styles that are included in the page header.
Wondering if instead the prism styles could be loaded in the header if the page includes a code block, so that local styles could be given precedence. Could maybe be done as a new template tag, or a revised version of the existing load_prism_css
tag.
When trying to use wagtailcodeblock in a streamfield, in the admin, I get the following Javascript error which prevents the streamfield from loading.
It worked fine in wagtail 4.1, but it's broken in 4.2.
Uncaught TypeError: Class constructor g cannot be invoked without 'new'
at new CodeBlockDefinition (wagtailcodeblock.js:2:60)
at t.value (VM90 telepath.js:1:3635)
at VM90 telepath.js:1:3030
at Array.map (<anonymous>)
at t.value (VM90 telepath.js:1:3004)
at VM90 telepath.js:1:3030
at Array.map (<anonymous>)
at t.value (VM90 telepath.js:1:3004)
at VM90 telepath.js:1:3030
at Array.map (<anonymous>)
How do you disable line numbering for the code block in the django template ?
prism.js 1.29.0
Wagtail 5.0
https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.css
that returns a 404 in the browser console.https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js
and returns a 404 in the browser consoleFor the copy-to-clipboard 404 error we can drop the following code:
For the HTML language 404 we can add if language check:
A very simple one - but worth clarifying for those who aren't sure.
I think it is worth showing the pip install command and that wagtailcodeblock
needs adding to INSTALLED_APPS
in the README.MD
The default right now is to use the CDN, but this isn't always what people want to do.
For example I use NPM for several other packages and tend to bundle my code. Adding a CDN download just adds extra latency.
I'd propose adding a setting to turn off the use of the CDN so you can add your own script.
This would also have the added benefit of being able to add the script once, instead of having it execute multiple times (which would be the default).
I will provide a PR for this when I have a bit of time (hopefully today).
Hey, thank you for you work.
I'm using your package and i'm trying to improve it, you can see my pr about it.
I'm thinking about how can i render the code block and i did make this in my code:
<div class="">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/themes/prism-coy.min.css"
rel="stylesheet"/>
<pre>
<code class="language-{{ self.code.language }}">{{ self.code.code }}</code>
</pre>
{% if self.reference %}
<div class="caption">
Reference <a href="{{ self.reference }}">here.</a>
</div>
{% endif %}
<script defer
src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/prism.min.js'></script>
<script defer
src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/components/prism-{{ self.code.language }}.min.js'></script>
</div>
This is the template for my code; but if you think about it, if i have many code blocks in the body, this template will be rendered many times, getting the same template one by one time, the same template. But it is only useful with the specify language page, getting the other two files won't be useful and it will terrible for performance too.
We have two options, put in the documentation that user have to render it in the base template, or create a template tag. I think the second option will be better, why? Because actually we have two get the latest version, and because we want too have our template.
I was thinking about print the theme option in the template, but i think it isn't a securely option.
In addition, if we load the prism
main file in a template tag in script body, we have to upload the specific language files after it, so, we have to make other template tag, or, create one that update first this file, and after the other files, in the same way that admin(it could have a difficult getting all code laguange values from the body. If you put the specific file before the main file, the highlighting will be wrong.
So, what do you think about it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.