@themarioga/grid-editor 7.1.0 → 7.2.0

package/example/ckeditor.html

@@ -10,8 +10,9 @@
     <!-- Javascript dependencies -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
     
-    <!-- Ckeditor js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.22.1/ckeditor.js"></script>
+    <!-- CKEditor 5: its browser build, and its stylesheet -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.css">
+    <script src="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.umd.js"></script>
     
     <!-- Grid editor CSS -->
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
@@ -28,11 +29,15 @@
                 new_row_layouts: [[12], [6, 6], [9, 3]],
                 content_types: ['ckeditor'],
                 ckeditor: {
+                    // Anything InlineEditor.create takes, over the plugin's
+                    // own defaults: its plugins, toolbar and headings
                     config: {
+                        // CKEditor 5 is GPL-2.0-or-later: 'GPL' accepts that
+                        // licence. A commercial licence passes its own key.
+                        licenseKey: 'GPL',
                         on: {
                             instanceReady: function(evt) {
-                                var instance = this;
-                                console.log('instance ready', evt, instance);
+                                console.log('instance ready', evt.editor);
                             }
                         }
                     }

package/example/index.html

@@ -144,7 +144,7 @@
                     <strong>CKEditor</strong>
                     <code class="text-body-secondary">ckeditor.html</code>
                 </div>
-                <span class="text-body-secondary">CKEditor in the content areas instead of tinyMCE</span>
+                <span class="text-body-secondary">CKEditor 5 in the content areas instead of tinyMCE</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="summernote.html">

package/package.json

@@ -33,7 +33,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "7.1.0",
+  "version": "7.2.0",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/grideditor.js

@@ -5078,7 +5078,7 @@ GridEditor.locales = {
         'warning.plugin_6x': 'The "{name}" plugin is written for grid-editor 6 and is not loaded. Plugins register on GridEditor since 7.0: see UPGRADING.md.',
         'warning.adapter_no_jquery': 'grideditor.jquery.js needs jQuery 4, and there is no jQuery on the page: the jQuery API is not there.',
         'error.tinymce_missing': 'tinyMCE not available! Make sure you loaded the tinyMCE js file.',
-        'error.ckeditor_missing': 'CKEditor not available! Make sure you loaded the CKEditor js file.',
+        'error.ckeditor_missing': 'CKEditor 5 not available! Make sure you loaded its ckeditor5.umd.js file: CKEditor 4 is no longer supported.',
         'error.summernote_missing': 'Summernote not available! Make sure you loaded jQuery and the Summernote js file.',
     },
 };

package/src/js/locales/grideditor.es.js

@@ -169,7 +169,9 @@ GridEditor.locales.es = {
     'warning.adapter_no_jquery': 'grideditor.jquery.js necesita jQuery 4 y la página no tiene jQuery: la API de jQuery no está disponible.',
     'warning.oninit_removed': 'La opción oninit de tinyMCE se eliminó en la 7.0 y se ignora: usa init_instance_callback.',
     'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
-    'error.ckeditor_missing': '¡CKEditor no está disponible! Asegúrate de haber cargado el archivo js de CKEditor.',
+    'error.ckeditor_missing': '¡CKEditor 5 no está disponible! Asegúrate de haber cargado su archivo ckeditor5.umd.js: CKEditor 4 ya no está soportado.',
+    'error.ckeditor_start': 'CKEditor no ha podido arrancar: {message}',
+    'warning.ckeditor_plugin': 'CKEditor no tiene ningún plugin llamado {name}, así que se deja fuera.',
     'error.codemirror_missing': '¡CodeMirror no está disponible! Asegúrate de haber cargado el archivo js de CodeMirror; sin él el código se edita en un textarea normal.',
     'error.summernote_missing': '¡Summernote no está disponible! Asegúrate de haber cargado jQuery y el archivo js de Summernote.',
 };

package/src/js/plugins/grideditor.ckeditor.js

@@ -1,15 +1,20 @@
 /**
  * CKEditor for grid-editor's content areas.
  *
- * A text editor plugin: load this file after the editor, and CKEditor 4
- * after or before it, and a text of the ckeditor type is edited with an
- * inline CKEditor. What it can ask the editor for is the handle its
- * factory is called with, described in docs/plugins.md.
+ * A text editor plugin: load this file after the editor, and CKEditor 5's
+ * browser build after or before it, and a text of the ckeditor type is
+ * edited with an inline CKEditor. What it can ask the editor for is the
+ * handle its factory is called with, described in docs/plugins.md.
  *
- *   <script src="ckeditor/ckeditor.js"></script>
+ *   <link rel="stylesheet" href="ckeditor5/ckeditor5.css">
+ *   <script src="ckeditor5/ckeditor5.umd.js"></script>
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
  *
+ * Up to 7.1 this was CKEditor 4, whose last open source release has known
+ * vulnerabilities and no fixes to come. CKEditor 5 asks for a licenseKey:
+ * 'GPL', or a commercial key, is the host's to pass in ckeditor.config.
+ *
  * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
  * loaded on its own, like every plugin. It imports what every text editor
  * shares - text blocks, the Text button, createText, making the host's plain
@@ -22,31 +27,77 @@ import '../text/grideditor.text.js';
 
 Object.assign(GridEditor.locales.en, {
     'text.ckeditor': 'CKEditor',
+    'error.ckeditor_start': 'CKEditor could not start: {message}',
+    'warning.ckeditor_plugin': 'CKEditor has no plugin called {name}, so it is left out.',
 });
 
 var INITIAL_CONTENT = '<p>Lorem initius... </p>';
 
-// The instance each content area is edited with, as this file made it
-var instances = new WeakMap();
+// What CKEditor 5 is started with when the host's config does not say. It
+// has no plugins of its own, so these are what a text can do: much what the
+// CKEditor 4 build 7.1 used offered. Names, looked up on window.CKEDITOR.
+var PLUGINS = [
+    'Essentials', 'Autoformat', 'Paragraph', 'Heading', 'Bold', 'Italic', 'Underline', 'Strikethrough',
+    'Link', 'AutoLink', 'List', 'BlockQuote', 'Indent', 'HorizontalLine', 'Table', 'TableToolbar',
+    'PasteFromOffice',
+];
+
+var DEFAULTS = {
+    toolbar: [
+        'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'underline', 'strikethrough', '|',
+        'link', 'bulletedList', 'numberedList', 'blockQuote', '|', 'insertTable', 'horizontalLine',
+    ],
+    // CKEditor's own headings start at h2, and make every h1 in the content
+    // an h2: a column's text keeps the headings it has
+    heading: {
+        options: [
+            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+        ].concat([1, 2, 3, 4, 5, 6].map(function(level) {
+            return {
+                model: 'heading' + level, view: 'h' + level,
+                title: 'Heading ' + level, class: 'ck-heading_heading' + level,
+            };
+        })),
+    },
+    table: { contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'] },
+};
+
+// What this file keeps about a content area: its editor once it is ready,
+// the start that is still to have one, and a promise of the content area
+// being free again, with no editor starting or being destroyed on it:
+// CKEditor does both asynchronously, and two at once on one element clash
+var editors = new WeakMap();
+var starting = new WeakMap();
+var busy = new WeakMap();
+
+/** The plugins the config names, as CKEditor wants them: constructors. */
+function pluginsFor(ge, names) {
+    return names.map(function(plugin) {
+        if (typeof plugin !== 'string') { return plugin; }
+        if (!window.CKEDITOR[plugin]) { ge.warn(ge.t('warning.ckeditor_plugin', { name: plugin })); }
+        return window.CKEDITOR[plugin];
+    }).filter(Boolean);
+}
 
 GridEditor.texts.ckeditor = function(ge) {
 
     /**
-     * The instance editing this content area. Kept when it is made, and
-     * looked for among CKEditor's own as a fallback, since an instance made
-     * by another copy of this file is not in this one's record.
+     * Take the editor off a content area and leave its content behind, now:
+     * getHtml reads the content area the moment its editor is stopped.
+     *
+     * CKEditor puts the attributes back as destroy() is called, but its
+     * content only as it finishes, and then as nothing: it empties the
+     * element unless told otherwise. So the content goes back in twice, now
+     * and once CKEditor is done. The promise is of that.
      */
-    function instanceOf(contentArea) {
-        var kept = instances.get(contentArea);
-        if (kept) { return kept; }
-
-        var found = null;
-        Object.keys(window.CKEDITOR.instances).forEach(function(name) {
-            var instance = window.CKEDITOR.instances[name];
-            if (instance.element && instance.element.$ === contentArea) { found = instance; }
+    function destroy(contentArea, editor) {
+        var data = editor.getData();
+        var done = editor.destroy().catch(function() {}).then(function() {
+            contentArea.innerHTML = data;
         });
 
-        return found;
+        contentArea.innerHTML = data;
+        return done;
     }
 
     return {
@@ -54,53 +105,67 @@ GridEditor.texts.ckeditor = function(ge) {
         initialContent: INITIAL_CONTENT,
         missingKey: 'error.ckeditor_missing',
 
-        available: function() { return !!window.CKEDITOR; },
+        // CKEditor 4 is window.CKEDITOR too, without an InlineEditor
+        available: function() { return !!(window.CKEDITOR && window.CKEDITOR.InlineEditor); },
 
         start: function(contentAreas) {
             var settings = ge.settings;
+            var userConfig = (settings.ckeditor && settings.ckeditor.config) ? settings.ckeditor.config : {};
 
             contentAreas.forEach(function(contentArea) {
                 if (dom.hasClass(contentArea, 'active')) { return; }
 
                 if (contentArea.innerHTML == INITIAL_CONTENT) {
-                    // CKEditor kills this '&nbsp' creating a non usable box :/
-                    contentArea.innerHTML = '&nbsp;';
+                    contentArea.innerHTML = '';
                 }
-
-                // contenteditable="true", or CKEditor loads readonly
                 dom.addClass(contentArea, 'active');
-                contentArea.setAttribute('contenteditable', 'true');
-
-                var configuration = Object.assign(
-                    {},
-                    (settings.ckeditor && settings.ckeditor.config ? settings.ckeditor.config : {}),
-                    {
-                        // Focus editor on creation
-                        on: {
-                            instanceReady: function( evt ) {
-                                // Call original instanceReady function, if one was passed in the config
-                                var callback;
-                                try {
-                                    callback = settings.ckeditor.config.on.instanceReady;
-                                } catch (err) {
-                                    // No callback passed
-                                }
-                                if (callback) {
-                                    callback.call(this, evt);
-                                }
-
-                                // The editor owns what is inside the
-                                // content area now, so the grid editor is
-                                // told to put its own furniture back
-                                ge.textReady(contentArea);
-
-                                instance.focus();
-                            }
-                        }
+
+                var configuration = Object.assign({}, DEFAULTS, userConfig);
+                configuration.plugins = pluginsFor(ge, userConfig.plugins || PLUGINS);
+                // on.instanceReady is CKEditor 4's, and CKEditor 5 has no
+                // such option: this file calls it, as it did in 7.1
+                delete configuration.on;
+
+                var ticket = {};
+                starting.set(contentArea, ticket);
+
+                var run = (busy.get(contentArea) || Promise.resolve()).then(function() {
+                    // Stopped again while it waited for the last editor to go
+                    if (starting.get(contentArea) !== ticket) { return null; }
+
+                    return window.CKEDITOR.InlineEditor.create(contentArea, configuration);
+                }).then(function(editor) {
+                    if (!editor) { return null; }
+
+                    // Stopped while it started, so it goes again
+                    if (starting.get(contentArea) !== ticket) {
+                        return destroy(contentArea, editor);
+                    }
+                    starting.delete(contentArea);
+                    editors.set(contentArea, editor);
+
+                    // Call the original instanceReady function, if one was
+                    // passed in the config: 7.1's, with CKEditor 4's event
+                    var callback = userConfig.on && userConfig.on.instanceReady;
+                    if (callback) {
+                        callback.call(editor, { editor: editor });
+                    }
+
+                    // The editor owns what is inside the content area now,
+                    // so the grid editor is told to put its own furniture back
+                    ge.textReady(contentArea);
+
+                    editor.editing.view.focus();
+                    return null;
+                }).catch(function(error) {
+                    // A licenseKey missing is the likely one
+                    if (starting.get(contentArea) === ticket) {
+                        starting.delete(contentArea);
+                        dom.removeClass(contentArea, 'active');
                     }
-                );
-                var instance = window.CKEDITOR.inline(contentArea, configuration);
-                instances.set(contentArea, instance);
+                    console.error(ge.t('error.ckeditor_start', { message: (error && error.message) || error }));
+                });
+                busy.set(contentArea, run);
             });
         },
 
@@ -108,18 +173,17 @@ GridEditor.texts.ckeditor = function(ge) {
             contentAreas.filter(function(contentArea) {
                 return dom.hasClass(contentArea, 'active');
             }).forEach(function(contentArea) {
-                // This content area's instance, and no other: up to 5.x
+                // This content area's editor, and no other: up to 5.x
                 // closing one content area destroyed every CKEditor on
                 // the page, other editors' and the host's own included
-                var instance = window.CKEDITOR ? instanceOf(contentArea) : null;
-                if (instance) { instance.destroy(); }
-                instances.delete(contentArea);
-
-                // Cleanup
-                dom.removeClass(contentArea, 'active cke_focus');
-                ['id', 'style', 'spellcheck', 'contenteditable'].forEach(function(name) {
-                    contentArea.removeAttribute(name);
-                });
+                var editor = editors.get(contentArea);
+                editors.delete(contentArea);
+                // One still starting sees this and goes as it is ready
+                starting.delete(contentArea);
+
+                if (editor) { busy.set(contentArea, destroy(contentArea, editor)); }
+
+                dom.removeClass(contentArea, 'active');
             });
         },
     };

package/src/js/text/grideditor.text.js

@@ -40,7 +40,7 @@ if (!GridEditor.features.text) {
     var readReady = new WeakMap();
 
     /** What a text editor puts on a content area while it is open, whenever it likes. */
-    var EDITOR_CLASS = /^(mce-|cke|note-)|^(active|ge-rte-active)$/;
+    var EDITOR_CLASS = /^(mce-|cke|ck-|note-)|^(ck|active|ge-rte-active)$/;
     var EDITOR_ATTRIBUTE = /^(data-mce-|contenteditable$|spellcheck$)/;
 
     function attributesOf(element) {