Code plugin admin hardcodes URL to "ace" JS module

[greyhare]

Describe the bug
The Frontend "Code" plugin's admin templates have hardcoded URLs (including version numbers) for loading the JS for the "ace" module, which is used as a code editor. This breaks badly on systems without internet access.

To Reproduce
Steps to reproduce the behavior:

1. Be offline, and have a properly setup development project, fully migrated.
2. Run manage.py runserver as normal. Login as an admin, and edit a page. Add a Frontend Code plugin.
3. In the admin pane that opens to edit the new plugin, there is just empty space next to "Code:". The plugin cannot be saved due to the missing field.
4. Check Safari's debug console and see Failed to load resource: A server with the specified hostname could not be found. https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js

Expected behavior
Some kind of functioning code editor should appear. Or it should fallback to a textarea.

Screenshots
Not readily available due to network isolation, sorry.

Desktop (please complete the following information):

• OS: MacOS
• Browser Safari
• Version 15.6 (16613.3.9.1.7, 16613)

Additional context
The offending URL is in contrib/content/templates/djangocms_frontend/admin/code.html line 6:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js" integrity="sha512-6ts6Fu561/yzWvD6uwQp3XVYwiWNpWnZ0hdeQrETqtnQiGjTfOS06W76aUDnq51hl1SxXtJaqy7IsZ3oP/uZEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

In django_bootstrap4, to solve a similar situation, I simply have to set the BOOTSTRAP4 setting, using code that looks something like:

BOOTSTRAP4 = {
    'css_url': f'{node_root}bootstrap/dist/css/bootstrap.css',
    'javascript_url': f'{node_root}bootstrap/dist/js/bootstrap.js',
    'jquery_url': f'{node_root}jquery/dist/jquery.js',
    'include_jquery': 'full'
}

I use npm to get Bootstrap (and jQuery and Popperjs) from our internal mirror. (Bootstrap5 doesn't use jQuery, but I do.)

[marksweb]

@greyhare Thanks for raising. We'll have a look at this.

[marksweb]

@fsbraun Implementing a similar setting to the BS4 app might make most sense here. What do you think?

[fsbraun]

@greyhare Thanks very much for reporting this. The ace editor is used in the plugin admin (and hence is part of the admin site) and is not loaded elsewhere. I'd suggest the follow the Django convention (which - except here - is also followed by django CMS) to include the ace editor as a static file, just as Django admin's jQuery or CMS.jquery. This ensures that it does not interfere with the site setup and can be used when not connected to the internet.

@marksweb I fear we have exactly the same issue with djangocms-bootstrap4 and djangocms-snippet. I'll create 3 separate PR.

[greyhare]

Sounds fine to me. I had no idea how big ace is or how feasible it was to pull in statically. I figured it was pulled in via CDN for a reason. (I use MathJax with my Sphinx docs at work, and statically pulling it in would be some 100 MB of data. So it's not my first choice.)

[greyhare]

And yes, you have exactly this issue with djangocms-bootstrap4. I found it there first and found this project while trying to figure out what to migrate to since it seemed dead. djangocms-bootstrap5 has the same problem as well, I believe.

[fsbraun]

@greyhare #49 fixes this issue. Would you like to test it? Try:

pip install git+https://github.com/django-cms/djangocms-frontend.git@master#egg=djangocms-frontend[static-ace]

(Remember to escape the square brackets to avoid your shell to match files)

Then add djangocms_static_ace to your project's INSTALLED_APPS.

[greyhare]

The system in question doesn't have Internet access (which is what caused the problem in the first place), so pip install from Github will fail.

Do you have a command that'll let me download a tarball, which I can manually copy over and then install?

[fsbraun]

Well, I guess pip is the standard way of managing python packages. Of course you can download tar balls from GitHub and install them.

https://github.com/django-cms/djangocms-frontend/archive/refs/heads/master.zip

You'll also need djangocms-static-ace:
https://github.com/django-cms/djangocms-static-ace/archive/refs/heads/main.zip