feat: Add customer code block (#131)

Author: fsbraun

cms_theme/apps.py

@@ -4,3 +4,11 @@
 class CmsThemeConfig(AppConfig):
     default_auto_field = "django.db.models.BigAutoField"
     name = "cms_theme"
+
+    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"
+            

cms_theme/cms_components.py

@@ -948,3 +948,41 @@ def clean(self):
                     ),
                 }
             )
+
+
+@components.register
+class CodeBlock(CMSFrontendComponent):
+    """Code card component to render code snippets with syntax highlighting"""
+    class Media:
+        js = (
+            "admin/vendor/ace/ace.js"
+            if "djangocms_static_ace" in settings.INSTALLED_APPS
+            else "https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.3/ace.js",
+        )
+
+    class Meta:
+        name = _("Code Block")
+        render_template = "code_block/code_block.html"
+        change_form_template = "code_block/admin/code_block.html"
+        allow_children = True
+        child_classes = []
+        mixins = ["Background", "Spacing", "Attributes"]
+        frontend_editable_fields = ("heading",)
+
+    heading = forms.CharField(
+        label=_("Heading"),
+        required=False,
+        help_text=_("Heading for the code block."),
+    )   
+    dark_mode = forms.BooleanField(
+        label=_("Dark mode"),
+        required=False,
+        initial=False,
+        help_text=_("Enable dark mode for code block."),
+    )
+    code_content = forms.CharField(
+        label=_("Code"),
+        initial="",
+        required=True,
+        widget=forms.widgets.Textarea(attrs={"class": "js-ckeditor-use-selected-text"}),
+    )

cms_theme/templates/cms_theme/base.html

@@ -58,7 +58,7 @@
             <script src="{% static 'js/logo_carousel.js' %}"></script>
             <script src="{% static 'js/mobile_slider.js' %}"></script>
             <script src="{% static 'js/quote_slider.js' %}"></script>
-            <script>hljs.highlightAll();</script>
+            <script>document.addEventListener('DOMContentLoaded', function() { hljs.highlightAll(); });</script>
         {% endblock end_js %}
     </body>
 </html>

cms_theme/templates/code_block/admin/code_block.html

@@ -0,0 +1,46 @@
+{% extends "djangocms_frontend/admin/base.html" %}
+
+{% block object-tools %}
+    {{ block.super }}{% spaceless %}
+    <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>', {
+                position: 'absolute',
+                width: '100%',
+                style: 'font-size: 14px',
+                height: textarea.height() * 4,
+                'class': textarea.attr('class'),
+            }).insertBefore(textarea);
+
+            // init editor with settings
+            var editor = ace.edit(div[0]);
+            var darkMode;
+            darkMode = window.parent.CMS.API.Helpers.getColorScheme() === 'dark';
+            if (darkMode) {
+                editor.setTheme('ace/theme/tomorrow_night');
+            }  else {
+                editor.setTheme('ace/theme/xcode');
+            }
+            editor.getSession().setValue(textarea.val());
+            editor.getSession().setMode('ace/mode/python');
+            editor.setOptions({
+                fontSize: '14px',
+                cursorStyle: 'smooth'
+            });
+            editor.renderer.setScrollMargin(5, 5);
+
+            // send data back to textarea when submitting
+            textarea.closest('form').submit(function () {
+                textarea.val(editor.getSession().getValue());
+            });
+
+            // immediate update while typing inside CKEditor
+            editor.getSession().on('change', function () {
+                textarea.val(editor.getSession().getValue());
+            });
+        });
+    </script>{% endspaceless %}
+{% endblock %}

cms_theme/templates/code_block/code_block.html

@@ -0,0 +1,11 @@
+{% load i18n cms_tags frontend %}
+<div class="mb-5 card {% if instance.dark_mode %}bg-dark{% else %}bg-light{% endif %}">
+    {% if instance.heading %}
+        <div class="card-header bg-primary">
+            <p><span class="overline">{% inline_field instance "heading" %}</span></p>
+        </div>
+    {% endif %}
+    <div class="card-body{% if instance.dark_mode %} text-light{% endif %}">
+        <pre{{ instance.get_attributes }}><code>{{ instance.code_content }}</code></pre>
+    </div>
+</div>