Update to ace 1.9.6, load ace editor from static files if djangocms_static_ace is installed, add dark mode (#123)

Fix:		Load ace editor from static files if `djangocms-static-ace` is installed
Fix:		Respect if user has set dark mode
Add:	Weak dependency on djangocms-static-ace
Doc:	optional static-ace dependency

Author: fsbraun

CHANGELOG.rst

@@ -5,6 +5,8 @@ Changelog
 unreleased
 ==========
 
+* Add support for ace editor loaded from static files through djangocms-static-ace
+* Add dark mode support
 
 3.0.0 (2020-09-02)
 ==================

README.rst

@@ -62,6 +62,11 @@ For a manual install:
 * add ``djangocms_snippet`` to your ``INSTALLED_APPS``
 * run ``python manage.py migrate djangocms_snippet``
 
+Djangocms-snippet uses the ace code editor which normally is loaded from a CDN.
+If you prefer your application to provide the editor locally, you can change
+the requirement from `djangocms_snippet` to `djangocms_snippet[static-ace]` and
+add `djangocms_static_ace` to your project's `INSTALLED_APPS`.
+
 
 Configuration
 -------------

djangocms_snippet/admin.py

@@ -7,6 +7,13 @@
 
 
 class SnippetAdmin(admin.ModelAdmin):
+    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.9.6/ace.js",
+        )
+
     list_display = ('slug', 'name')
     search_fields = ['slug', 'name']
     prepopulated_fields = {'slug': ('name',)}

djangocms_snippet/templates/djangocms_snippet/admin/change_form.html

@@ -3,8 +3,6 @@
 
 {% block object-tools %}
 {{ block.super }}
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script>
 <script>
 django.jQuery(function () {
     // ace editor cannot be attached directly to a textarea
@@ -19,14 +17,29 @@
 
     // init editor with settings
     var editor = ace.edit(div[0]);
-    editor.setTheme('ace/theme/' + settings.theme);
+    var darkMode;
+    if (window.CMS) {
+        if (CMS.API.Helpers.getColorScheme) {
+            darkMode = CMS.API.Helpers.getColorScheme() === 'dark';
+        } else {
+            // django CMS pre-3.11.1
+            darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+    } else if (window.localStorage) {
+        // CMS not loaded: set color scheme for admin site / popup window according to settings
+        darkMode = JSON.parse(localStorage.getItem('cms_cookie') || '{}').color_scheme === 'dark';
+    }
+    if (darkMode) {
+        editor.setTheme('ace/theme/tomorrow_night');
+    }  else {
+        editor.setTheme(settings.theme ? 'ace/theme/' + settings.theme : 'ace/theme/github');
+    }
     editor.getSession().setValue(textarea.val());
     editor.getSession().setMode('ace/mode/' + settings.mode);
     editor.setOptions({
         fontSize: '14px',
         cursorStyle: 'smooth'
     });
-    editor.renderer.setScrollMargin(5, 5);
 
     // send data back to textarea when submitting
     textarea.closest('form').submit(function () {

setup.py

@@ -11,6 +11,10 @@
     'django-treebeard>=4.3,<4.5',
 ]
 
+EXTRA_REQUIREMENTS = {
+    'static-ace': ['djangocms-static-ace', ],
+}
+
 
 CLASSIFIERS = [
     'Development Status :: 5 - Production/Stable',
@@ -57,6 +61,7 @@
     include_package_data=True,
     zip_safe=False,
     install_requires=REQUIREMENTS,
+    extras_require=EXTRA_REQUIREMENTS,
     classifiers=CLASSIFIERS,
     test_suite='tests.settings.run',
 )