Open
Conversation
Contributor
Reviewer's GuideAdds a new CMS CodeBlock component with ACE-powered admin editing and a styled frontend template, updates the app config to override the plugin change form template, and adjusts highlight.js initialization timing for safer DOM usage. Sequence diagram for CodeBlock admin editing with Ace editorsequenceDiagram
actor Editor
participant DjangoAdmin as Django_admin
participant CodeBlockPlugin as CodeBlock_plugin
participant Browser as Browser_page
participant AceEditor as Ace_editor
Editor->>DjangoAdmin: Open CodeBlock change form
DjangoAdmin->>CodeBlockPlugin: Resolve change_form_template
CodeBlockPlugin-->>DjangoAdmin: code_block/admin/code_block.html
DjangoAdmin-->>Browser: Render admin form with textarea and Ace init JS
Browser->>Browser: Hide textarea and insert div before it
Browser->>AceEditor: ace.edit(div)
AceEditor->>AceEditor: Initialize theme based on parent CMS color scheme
AceEditor->>AceEditor: Set mode ace/mode/python and options
AceEditor->>Browser: Keep textarea value in sync on change
Editor->>Browser: Submit form
Browser->>Browser: Copy AceEditor session value into textarea
Browser-->>DjangoAdmin: POST form with code_content
DjangoAdmin-->>Editor: Save confirmation and redirect
Sequence diagram for frontend syntax highlighting timing changesequenceDiagram
participant Browser as Browser_page
participant HLJS as highlight_js
Browser->>Browser: DOMContentLoaded event fires
Browser->>HLJS: hljs.highlightAll()
HLJS-->>Browser: Highlight all code elements
Note over Browser,HLJS: Initialization now waits for DOMContentLoaded instead of running immediately
Class diagram for new CodeBlock CMS componentclassDiagram
direction TB
class CMSFrontendComponent {
}
class CodeBlock {
+CharField heading
+BooleanField dark_mode
+CharField code_content
}
class CodeBlock_Media {
+tuple js
}
class CodeBlock_Meta {
+CharField name
+CharField render_template
+CharField change_form_template
+Boolean allow_children
+list child_classes
+list mixins
+tuple frontend_editable_fields
}
CMSFrontendComponent <|-- CodeBlock
CodeBlock *-- CodeBlock_Media
CodeBlock *-- CodeBlock_Meta
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- The Ace admin template currently hides and replaces all
textareaelements on the page; it would be safer to target only the specific code field (e.g., byidor a dedicated CSS class) to avoid interfering with other form fields. - The Ace editor mode is hardcoded to
ace/mode/python; if this component is intended for general code snippets, consider adding a language field or configuration so the syntax mode can be selected rather than fixed. - In
CodeBlock.code_content, thejs-ckeditor-use-selected-textclass suggests integration with CKEditor, which may conflict with the Ace setup; consider removing or replacing this with a class specific to the code editor behavior.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The Ace admin template currently hides and replaces all `textarea` elements on the page; it would be safer to target only the specific code field (e.g., by `id` or a dedicated CSS class) to avoid interfering with other form fields.
- The Ace editor mode is hardcoded to `ace/mode/python`; if this component is intended for general code snippets, consider adding a language field or configuration so the syntax mode can be selected rather than fixed.
- In `CodeBlock.code_content`, the `js-ckeditor-use-selected-text` class suggests integration with CKEditor, which may conflict with the Ace setup; consider removing or replacing this with a class specific to the code editor behavior.
## Individual Comments
### Comment 1
<location path="cms_theme/templates/code_block/admin/code_block.html" line_range="8" />
<code_context>
+ <script>
+ django.jQuery(function () {
+ // ace editor cannot be attached directly to a textarea
+ var textarea = django.jQuery('textarea').css('display', 'none');
+ var settings = textarea.data();
+ var div = django.jQuery('<div>', {
</code_context>
<issue_to_address>
**issue (bug_risk):** The Ace editor setup targets all textareas, which can cause issues if the form has multiple textarea fields.
Since this binds Ace to every textarea, it can interfere with other fields now or in the future. Please scope the selector to the specific `code_content` field (e.g., by name, id, or a dedicated class) so other textareas are not hidden or synced unintentionally.
</issue_to_address>
### Comment 2
<location path="cms_theme/apps.py" line_range="11-12" />
<code_context>
+ def ready(self) -> None:
+ from cms.plugin_pool import plugin_pool
+
+ code_plugin = plugin_pool.get_plugin("CodeBlockPlugin")
+ if code_plugin:
+ code_plugin.change_form_template = "code_block/admin/code_block.html"
+
</code_context>
<issue_to_address>
**issue (bug_risk):** The `ready()` hook may run before the plugin is registered, causing this customization to be silently skipped.
Because plugin registration timing can vary, `get_plugin("CodeBlockPlugin")` may return `None` here and the template override will never take effect. To avoid this, either ensure the module that registers the plugin is imported in `ready()` (e.g., import the app’s `cms_plugins` there), or move this customization alongside the plugin definition so it’s applied at registration time.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| <script> | ||
| django.jQuery(function () { | ||
| // ace editor cannot be attached directly to a textarea | ||
| var textarea = django.jQuery('textarea').css('display', 'none'); |
Contributor
There was a problem hiding this comment.
issue (bug_risk): The Ace editor setup targets all textareas, which can cause issues if the form has multiple textarea fields.
Since this binds Ace to every textarea, it can interfere with other fields now or in the future. Please scope the selector to the specific code_content field (e.g., by name, id, or a dedicated class) so other textareas are not hidden or synced unintentionally.
Comment on lines
+11
to
+12
| code_plugin = plugin_pool.get_plugin("CodeBlockPlugin") | ||
| if code_plugin: |
Contributor
There was a problem hiding this comment.
issue (bug_risk): The ready() hook may run before the plugin is registered, causing this customization to be silently skipped.
Because plugin registration timing can vary, get_plugin("CodeBlockPlugin") may return None here and the template override will never take effect. To avoid this, either ensure the module that registers the plugin is imported in ready() (e.g., import the app’s cms_plugins there), or move this customization alongside the plugin definition so it’s applied at registration time.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by Sourcery
Introduce a reusable CMS code block component with syntax-highlighted editing and rendering, and adjust global syntax highlighting initialization.
New Features:
Enhancements:
Fixes #118