Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 29, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec5afab
Fix: Load ace editor from static files if `djangocms-static-ace` is …
fsbraun Aug 29, 2022
e039d07
Add: Weak dependency on djangocms-static-ace
fsbraun Aug 29, 2022
cecc189
Fix: remove unused import
fsbraun Aug 29, 2022
25dc483
Fix: Add changelog info
fsbraun Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
==================
Expand Down
5 changes: 5 additions & 0 deletions README.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
-------------
Expand Down
7 changes: 7 additions & 0 deletions djangocms_snippet/admin.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',)}
Expand Down
21 changes: 17 additions & 4 deletions djangocms_snippet/templates/djangocms_snippet/admin/change_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@

{% block object-tools %}
{{ block.super }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm assuming that the media is being handled already somewhere else in the parent templates?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very djangonic: In the admin's Media class! I like the idea (which @jgadelange proposed)! It's the right place for js files to be loaded and handles static files automatically. In Django 4.2 we can even assume to have integrity parameters added for cdn downloads.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fsbraun Oh is it magic through the admin classes?! I don't really do that anywhere so was half expecting something like {{ form.media }} like you would if this was a custom form.


<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
Expand All @@ -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 () {
Expand Down
5 changes: 5 additions & 0 deletions setup.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
'django-treebeard>=4.3,<4.5',
]

EXTRA_REQUIREMENTS = {
'static-ace': ['djangocms-static-ace', ],
}


CLASSIFIERS = [
'Development Status :: 5 - Production/Stable',
Expand Down Expand Up @@ -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',
)