Load translations for CKEDITOR if language is not english

This fixes issue #1056

assets/ckeditor/plugins/PartDBLabel/PartDBLabelUI.js

@@ -20,11 +20,12 @@
 import {Plugin} from 'ckeditor5';
 
 require('./lang/de.js');
+require('./lang/en.js');
 
 import { addListToDropdown, createDropdown } from 'ckeditor5';
 
 import {Collection} from 'ckeditor5';
-import {Model} from 'ckeditor5';
+import {UIModel} from 'ckeditor5';
 
 export default class PartDBLabelUI extends Plugin {
     init() {
@@ -151,18 +152,28 @@ const PLACEHOLDERS = [
 function getDropdownItemsDefinitions(t) {
     const itemDefinitions = new Collection();
 
+    let first = true;
+
     for ( const group of PLACEHOLDERS) {
+
         //Add group header
-        itemDefinitions.add({
-            'type': 'separator',
-            model: new Model( {
-                withText: true,
-            })
-        });
+
+        //Skip separator for first group
+        if (!first) {
+
+            itemDefinitions.add({
+                'type': 'separator',
+                model: new UIModel( {
+                    withText: true,
+                })
+            });
+        } else {
+            first = false;
+        }
 
         itemDefinitions.add({
             type: 'button',
-            model: new Model( {
+            model: new UIModel( {
                 label: t(group.label),
                 withText: true,
                 isEnabled: false,
@@ -173,7 +184,7 @@ function getDropdownItemsDefinitions(t) {
         for ( const entry of group.entries) {
             const definition = {
                 type: 'button',
-                model: new Model( {
+                model: new UIModel( {
                     commandParam: entry[0],
                     label: t(entry[1]),
                     tooltip: entry[0],

assets/ckeditor/plugins/PartDBLabel/lang/de.js

@@ -17,15 +17,9 @@
  *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// Make sure that the global object is defined. If not, define it.
-window.CKEDITOR_TRANSLATIONS = window.CKEDITOR_TRANSLATIONS || {};
+import {add} from "ckeditor5";
 
-// Make sure that the dictionary for Polish translations exist.
-window.CKEDITOR_TRANSLATIONS[ 'de' ] = window.CKEDITOR_TRANSLATIONS[ 'de' ] || {};
-window.CKEDITOR_TRANSLATIONS[ 'de' ].dictionary =  window.CKEDITOR_TRANSLATIONS[ 'de' ].dictionary || {};
-
-// Extend the dictionary for Polish translations with your translations:
-Object.assign( window.CKEDITOR_TRANSLATIONS[ 'de' ].dictionary, {
+add( "de", {
     'Label Placeholder': 'Label Platzhalter',
     'Part': 'Bauteil',
 
@@ -88,5 +82,4 @@ Object.assign( window.CKEDITOR_TRANSLATIONS[ 'de' ].dictionary, {
     'Instance name': 'Instanzname',
     'Target type': 'Zieltyp',
     'URL of this Part-DB instance': 'URL dieser Part-DB Instanz',
-
-} );
+});

assets/ckeditor/plugins/PartDBLabel/lang/en.js

@@ -0,0 +1,84 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ *  Copyright (C) 2019 - 2025 Jan Böhmer (https://github.com/jbtronics)
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as published
+ *  by the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {add} from "ckeditor5";
+
+add( "en", {
+    'Label Placeholder': 'Label placeholder',
+    'Part': 'Part',
+
+    'Database ID': 'Database ID',
+    'Part name': 'Part name',
+    'Category': 'Category',
+    'Category (Full path)': 'Category (full path)',
+    'Manufacturer': 'Manufacturer',
+    'Manufacturer (Full path)': 'Manufacturer (full path)',
+    'Footprint': 'Footprint',
+    'Footprint (Full path)': 'Footprint (full path)',
+    'Mass': 'Mass',
+    'Manufacturer Product Number (MPN)': 'Manufacturer Product Number (MPN)',
+    'Internal Part Number (IPN)': 'Internal Part Number (IPN)',
+    'Tags': 'Tags',
+    'Manufacturing status': 'Manufacturing status',
+    'Description': 'Description',
+    'Description (plain text)': 'Description (plain text)',
+    'Comment': 'Comment',
+    'Comment (plain text)': 'Comment (plain text)',
+    'Last modified datetime': 'Last modified datetime',
+    'Creation datetime': 'Creation datetime',
+    'IPN as QR code': 'IPN as QR code',
+    'IPN as Code 128 barcode': 'IPN as Code 128 barcode',
+    'IPN as Code 39 barcode': 'IPN as Code 39 barcode',
+
+    'Lot ID': 'Lot ID',
+    'Lot name': 'Lot name',
+    'Lot comment': 'Lot comment',
+    'Lot expiration date': 'Lot expiration date',
+    'Lot amount': 'Lot amount',
+    'Storage location': 'Storage location',
+    'Storage location (Full path)': 'Storage location (full path)',
+    'Full name of the lot owner': 'Full name of the lot owner',
+    'Username of the lot owner': 'Username of the lot owner',
+
+    'Barcodes': 'Barcodes',
+    'Content of the 1D barcodes (like Code 39)': 'Content of the 1D barcodes (like Code 39)',
+    'Content of the 2D barcodes (QR codes)': 'Content of the 2D barcodes (QR codes)',
+    'QR code linking to this element': 'QR code linking to this element',
+    'Code 128 barcode linking to this element': 'Code 128 barcode linking to this element',
+    'Code 39 barcode linking to this element': 'Code 39 barcode linking to this element',
+    'Code 93 barcode linking to this element': 'Code 93 barcode linking to this element',
+    'Datamatrix code linking to this element': 'Datamatrix code linking to this element',
+
+    'Location ID': 'Location ID',
+    'Name': 'Name',
+    'Full path': 'Full path',
+    'Parent name': 'Parent name',
+    'Parent full path': 'Parent full path',
+    'Full name of the location owner': 'Full name of the location owner',
+    'Username of the location owner': 'Username of the location owner',
+
+    'Username': 'Username',
+    'Username (including name)': 'Username (including name)',
+    'Current datetime': 'Current datetime',
+    'Current date': 'Current date',
+    'Current time': 'Current time',
+    'Instance name': 'Instance name',
+    'Target type': 'Target type',
+    'URL of this Part-DB instance': 'URL of this Part-DB instance',
+} );

assets/controllers/elements/ckeditor_controller.js

@@ -28,6 +28,26 @@ import {EditorWatchdog} from 'ckeditor5';
 import "ckeditor5/ckeditor5.css";;
 import "../../css/components/ckeditor.css";
 
+const translationContext = require.context(
+    'ckeditor5/translations',
+    false,
+    /\.js$/
+);
+
+function loadTranslation(language) {
+    if (!language || language === 'en') {
+        return null;
+    }
+    const lang = language.slice(0, 2);
+    const path = `./${lang}.js`;
+    if (translationContext.keys().includes(path)) {
+        const module = translationContext(path);
+        return module.default;
+    } else {
+        return null;
+    }
+}
+
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
     connect() {
@@ -63,6 +83,12 @@ export default class extends Controller {
             }
         }
 
+        //Load translations if not english
+        let translations = loadTranslation(language);
+        if (translations) {
+            config.translations = [translations];
+        }
+
         const watchdog = new EditorWatchdog();
         watchdog.setCreator((elementOrData, editorConfig) => {
             return EDITOR_TYPE.create(elementOrData, editorConfig)

package.json

@@ -50,7 +50,7 @@
         "bootbox": "^6.0.0",
         "bootswatch": "^5.1.3",
         "bs-custom-file-input": "^1.3.4",
-        "ckeditor5": "^46.0.0",
+        "ckeditor5": "^47.0.0",
         "clipboard": "^2.0.4",
         "compression-webpack-plugin": "^11.1.0",
         "datatables.net": "^2.0.0",

templates/base.html.twig

@@ -66,12 +66,6 @@
     {% block javascripts %}
         {{ encore_entry_script_tags('app') }}
         {{ encore_entry_script_tags('webauthn_tfa') }}
-
-        {# load translation files for ckeditor #}
-        {% set two_chars_locale = app.request.locale|default("en")|slice(0,2) %}
-        {% if two_chars_locale != "en" %}
-            <script src="{{ asset("build/ckeditor_translations/" ~ two_chars_locale ~ ".js") }}"></script>
-        {% endif %}
     {% endblock %}
 </head>
 <body data-base-url="{{ path('homepage', {'_locale': app.request.locale}) }}" data-locale="{{ app.request.locale|default("en")|slice(0,2) }}">