@themarioga/grid-editor 7.1.0 → 7.3.0

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

@@ -160,6 +160,73 @@ GridEditor.locales.es = {
     'utility.float_end': 'Fin',
     'utility.float_none': 'Ninguno',
     'utility.spacing_gutter': 'El relleno lateral de una columna es su espaciado: cambiarlo cambia el espacio entre columnas',
+    'style.section_title': 'Estilo',
+    'style.dialog_title': 'Estilo: {kind}',
+    'style.section_size': 'Tamaño',
+    'style.section_spacing': 'Espaciado',
+    'style.section_border': 'Borde',
+    'style.section_background': 'Fondo',
+    'style.section_text': 'Texto',
+    'style.section_typography': 'Tipografía',
+    'style.section_display': 'Visualización',
+    'style.section_position': 'Posición',
+    'style.section_custom': 'CSS libre',
+    'style.all_sizes': 'Se aplica a todos los tamaños',
+    'style.overridden': 'La clase {class} tiene prioridad sobre este valor',
+    'style.invalid': 'Esta propiedad no acepta ese valor',
+    'style.catalog': 'Clases de Bootstrap',
+    'style.shadow_x': 'X',
+    'style.shadow_y': 'Y',
+    'style.shadow_blur': 'Desenfoque',
+    'style.shadow_spread': 'Extensión',
+    'style.shadow_color': 'Color',
+    'style.shadow_inset': 'Interior',
+    'style.shadow_text_mode': 'Editar como texto',
+    'style.prop_width': 'Ancho',
+    'style.prop_height': 'Alto',
+    'style.prop_min_width': 'Ancho mínimo',
+    'style.prop_min_height': 'Alto mínimo',
+    'style.prop_max_width': 'Ancho máximo',
+    'style.prop_max_height': 'Alto máximo',
+    'style.prop_margin_top': 'Margen superior',
+    'style.prop_margin_right': 'Margen derecho',
+    'style.prop_margin_bottom': 'Margen inferior',
+    'style.prop_margin_left': 'Margen izquierdo',
+    'style.prop_padding_top': 'Relleno superior',
+    'style.prop_padding_right': 'Relleno derecho',
+    'style.prop_padding_bottom': 'Relleno inferior',
+    'style.prop_padding_left': 'Relleno izquierdo',
+    'style.prop_border_width': 'Grosor del borde',
+    'style.prop_border_style': 'Estilo del borde',
+    'style.prop_border_color': 'Color del borde',
+    'style.prop_border_radius': 'Radio del borde',
+    'style.prop_box_shadow': 'Sombra',
+    'style.prop_background_color': 'Color de fondo',
+    'style.prop_background_image': 'Imagen de fondo',
+    'style.prop_background_size': 'Tamaño del fondo',
+    'style.prop_background_position': 'Posición del fondo',
+    'style.prop_background_repeat': 'Repetición del fondo',
+    'style.prop_color': 'Color',
+    'style.prop_font_size': 'Tamaño de letra',
+    'style.prop_text_align': 'Alineación',
+    'style.prop_text_shadow': 'Sombra del texto',
+    'style.prop_font_family': 'Fuente',
+    'style.prop_font_weight': 'Grosor de letra',
+    'style.prop_font_style': 'Estilo de letra',
+    'style.prop_line_height': 'Interlineado',
+    'style.prop_letter_spacing': 'Espaciado entre letras',
+    'style.prop_text_transform': 'Mayúsculas',
+    'style.prop_text_decoration': 'Decoración',
+    'style.prop_display': 'Display',
+    'style.prop_opacity': 'Opacidad',
+    'style.prop_overflow': 'Desbordamiento',
+    'style.prop_visibility': 'Visibilidad',
+    'style.prop_position': 'Posición',
+    'style.prop_top': 'Arriba',
+    'style.prop_right': 'Derecha',
+    'style.prop_bottom': 'Abajo',
+    'style.prop_left': 'Izquierda',
+    'style.prop_z_index': 'Z-index',
     'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
     'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
     'warning.already_editing': 'Este elemento ya tiene un editor: se devuelve ese, con las opciones con las que se creó.',
@@ -169,7 +236,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/plugins/grideditor.float.js

@@ -14,41 +14,16 @@
  *
  * Elements only. A floated row or column stops being part of the grid, and a
  * container sits beside the content areas rather than in their text.
+ *
+ * Deprecated since 7.3, and gone in 8.0: grideditor.style.js carries this
+ * plugin's families, and edits them in its own sections. This file is that
+ * part on its own, as it was, and says so once per editor. Loaded beside
+ * the style plugin, it stands down.
  */
 import { GridEditor } from '../grideditor.js';
-
-Object.assign(GridEditor.locales.en, {
-    'utility.float': 'Float',
-    'utility.float_start': 'Start',
-    'utility.float_end': 'End',
-    'utility.float_none': 'None',
-});
-
-/** Start and end are left and right: Bootstrap's css is left to right. */
-var CSS = { start: 'left', end: 'right', none: 'none' };
+import { floatPart } from '../style/float.js';
 
 GridEditor.utilities.float = function(ge) {
-
-    function label(value) {
-        if (value === 'start') { return ge.t('utility.float_start'); }
-        if (value === 'end') { return ge.t('utility.float_end'); }
-
-        return ge.t('utility.float_none');
-    }
-
-    return {
-        families: [{
-            name: 'float',
-            prefix: 'float',
-            values: ['start', 'end', 'none'],
-            appliesTo: ['element'],
-            labelKey: 'utility.float',
-            label: label,
-
-            /** With no class applying here, whatever the host's css floats it as. */
-            preview: function(value, node) {
-                return { float: value === null ? ge.bareStyle(node, 'float', 'float') : CSS[value] };
-            },
-        }],
-    };
+    ge.warn('the "float" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
+    return floatPart(ge);
 };