The module depends on external cdn for js plugins

Created on 5 July 2024, 6 months ago
Updated 27 August 2024, 4 months ago

Problem/Motivation

When plugins like "CKEditor 5 Font Plugins" are enabled, they add external js plugin as library dependency (e.g. https://cdn.ckeditor.com/ckeditor5/40.2.0/dll/font/font.js .) If a web runs offline, in private network with restricted access, or if the cdn has outage, the CKEditor 5 doesn't even start (shows the HTML.)

Steps to reproduce

* Run a Drupal installation locally while having Internet access and while the https://cdn.ckeditor.com isn't down.
* Install the ckeditor5_plugin_pack.
* Enable the "CKEditor 5 Font Plugins" module.
* Create or configure a text format which uses CKEditor 5: add Font Color and Font Background Color widgets (with default configuration.)
* Edit a node.
* Observe that CKEditor works, can edit the node and change color of the text.
* Disable access to the Internet.
* Clear Drupal caches.
* Clear your browser caches.
* Edit a node.
* Observe that CKEditor 5 didn't start: textarea with HTML is shown instead.

Proposed resolution

One of the following:
1. Provide needed js plugins with the module, just like the core CKEditor 5 module.
2. Allow to configure custom directory with provided js plugin files.

Remaining tasks

* Determine solution which fits the project conventions the best.
* Implement it.

For proposal #2, see the `getDllLocation()` function in the `SettingsConfigHandler.php` file. It contains the "//TODO: config for dll location?" comment which seems to suggest that this solution is already being considered.

User interface changes

Depending on proposed solutions:
1. None.
2. Admin configuration for path where js plugin files can be found.

API changes

Depending on proposed solutions:
1. None.
2. If it's desired to expose, the `SettingsConfigHandler` might provide getter and setter for js plugin files directory path. Not required to resolve this issue.

Data model changes

None.

πŸ› Bug report
Status

Fixed

Version

1.1

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Inaetaru
  • πŸ‡΅πŸ‡±Poland salmonek

    Hi @Inaetaru

    Out of your proposed solutions 2nd one is valid.

    Providing a plugin library with module itself unfortunately would bring other problems as in such case we could provide only one version of library per module vesion making it often incompatible with some core versions. With CDN approach we're ensured that plugins and main ckeditor script will be always in sync with their versions. It seems that with Drupal 10.3 update font modules stopped working which may be a result of incompatibilities between core CKE 5 version and plugin versions used in modules ( https://www.drupal.org/project/drupal/issues/3458029 πŸ’¬ Body content not visible in ckeditor5 after 10.3.0 update Active ).

    We'll notify you once we have an option to provide custom plugin directory.

  • @salmonek
    I see, that makes sense. I guess the Drupal core is the only module which can afford to provide plugin library.
    Thanks a lot in advance and thanks for this module itself, it's really lifesaving!

  • First commit to issue fork.
  • Status changed to Needs review 5 months ago
  • Hello, i've created MR to allow use libraries locally, you can download in patch form by clicking on "plain diff" link.

    To use it go to /admin/config/system/ckeditor5-plugin-pack and setup the path with the mask to you libraries folder in format: /libraries/ckeditor_plugins/PLUGIN_NAME/VERSION_TOKEN/dll and place your plugin files in libraries folder, then example directory for font plugin: /libraries/ckeditor_plugins/font/41.3.1/dll/font.js and translations folder(not required) /libraries/ckeditor_plugins/font/41.3.1/translations/

  • @sergeyshadrin

    Thanks a lot! The patch works perfectly for me, including translations (font plugin & Czech translation.)

    There's just one minor issue: generated path of a plugin file contains double slashes, "/libraries/ckeditor5/font/40.2.0/dll//font.js" in my case (using older CKE5 version because I'm holding Drupal update due to an unrelated bug.) It seems the issue is in the "src/Utility/LibraryDefinitionItem.php" file, addLocalJs() method: it generates the path as "{$this->baseDirectory}/{$name}.js" which seems to introduce the second slash.

  • Status changed to Fixed 5 months ago
  • πŸ‡΅πŸ‡±Poland dolszewski

    Hello @SergeyShadrin thank you for your contribution.
    In the latest release (1.2.0) we have added your changes. I made some improvements to keep the same convention that we have in premium features.

  • πŸ‡«πŸ‡·France ericdsd France

    I guess we should also mention this doc https://cdn.ckeditor.com/ to better explain how to get the needed assets locally (as it is not crystal clear IMHO).

    JavaScript URL Structure

    The JavaScript URL structure for CKEditor 5 is as follows:

    Open-source features: https://cdn.ckeditor.com/ckeditor5//ckeditor5.js
    Premium features: https://cdn.ckeditor.com/ckeditor5-premium-features//ckeditor5-premium-features.js

    CSS URL Structure

    The CSS URL structure for CKEditor 5 is as follows:

    Open-source features: https://cdn.ckeditor.com/ckeditor5//ckeditor5.css
    Premium features: https://cdn.ckeditor.com/ckeditor5-premium-features//ckeditor5-premium-features.css

    Translations URL Structure

    Open-source features: https://cdn.ckeditor.com/ckeditor5//translations/.js
    Premium features: https://cdn.ckeditor.com/ckeditor5-premium-features//translations/.js

    Don’t Know How To Start?

    Try the CKEditor 5 Builder

  • πŸ‡΅πŸ‡±Poland salmonek

    @ericdsd
    I'm working on extending the installation guide. I'll try to explain the structure there, which is in Drupal for now different to the one in citation. Right now drupal uses older installation method where there is a base ckeditor.js build which contains base plugins available in Drupal core, plus every plugin we're adding in plugin pack and premium features has it's own dll .js file and have to be downloaded separately (also translations are distributed separately for each plugin).

    Ultimately we're planning to extend description of the config field with information which files should be downloaded for current configuration of all CKeditor 5 text formats.

  • πŸ‡΅πŸ‡±Poland salmonek

    @ericdsd
    The configuration guide is updated:
    https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib... β†’
    We'd be very happy for a feedback if instructions are clear there.

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • πŸ‡©πŸ‡ͺGermany demonde

    I have 2 questions:

    1. "Specify the path to the local directory": Would /libraries/ckeditor5_plugins be a valid entry here? The help text does not clarify this in my point of view. It should be improved to clarify this.

    2. If there needs to be a local plugin according to the CKEditor version 41.3.1 does that mean you have to reinstall the plugins for each CKEditor version update?

Production build 0.71.5 2024