@themarioga/grid-editor 5.1.2 → 5.3.0

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

@@ -19,6 +19,16 @@
         'tool.move': 'Mover',
         'tool.settings': 'Configuración',
         'tool.add_row': 'Añadir fila',
+        'tool.add_text': 'Añadir texto',
+        'tool.add_text_type': 'Añadir texto con {editor}',
+        'tool.text_info': 'Texto: {editor}',
+        'tool.delete_text': 'Quitar texto',
+        'text.add': 'Texto',
+        'text.add_type': 'Texto ({editor})',
+        'text.no_editor': 'No hay cargado ningún editor de texto "{type}": este texto se puede mover y borrar, pero no editar',
+        'text.tinymce': 'tinyMCE',
+        'text.ckeditor': 'CKEditor',
+        'text.summernote': 'Summernote',
         'tool.add_column': 'Añadir columna\n(mantén pulsado para elegir el ancho)',
         'tool.column_size': '{size} de 12',
         'tool.column_equal': 'Igual: reparte lo que queda de la fila',
@@ -61,6 +71,7 @@
         'confirm.cancel': 'Cancelar',
         'confirm.delete_row': '¿Seguro que quieres borrar esta fila?',
         'confirm.delete_column': '¿Seguro que quieres borrar esta columna?',
+        'confirm.delete_text': '¿Seguro que quieres borrar este texto?',
         'confirm.delete_element': '¿Seguro que quieres borrar este elemento?',
         'confirm.delete_container': '¿Seguro que quieres borrar este contenedor y todo su contenido?',
         'confirm.delete_tab': '¿Seguro que quieres borrar esta pestaña y todo su contenido?',

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

@@ -0,0 +1,120 @@
+/**
+ * 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 content_types: ['ckeditor'] edits each content area
+ * 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>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
+ *
+ * Up to 6.0 the main bundle carries a copy of this file too.
+ */
+(function($) {
+
+    $.extend($.fn.gridEditor.locales.en, {
+        'text.ckeditor': 'CKEditor',
+    });
+
+    var INITIAL_CONTENT = '<p>Lorem initius... </p>';
+
+    $.fn.gridEditor.texts.ckeditor = function(ge) {
+
+        /**
+         * The instance editing this content area. Kept in jQuery data when it
+         * is made, and looked for among CKEditor's own as a fallback, since
+         * an instance made by another version of this file has no data.
+         */
+        function instanceOf(contentArea) {
+            var kept = contentArea.data('ge-ckeditor');
+            if (kept) { return kept; }
+
+            var found = null;
+            $.each(window.CKEDITOR.instances, function(name, instance) {
+                if (instance.element && instance.element.$ === contentArea[0]) { found = instance; }
+            });
+
+            return found;
+        }
+
+        return {
+            labelKey: 'text.ckeditor',
+            initialContent: INITIAL_CONTENT,
+            missingKey: 'error.ckeditor_missing',
+
+            available: function() { return !!window.CKEDITOR; },
+
+            start: function(contentAreas) {
+                var settings = ge.settings;
+
+                contentAreas.each(function() {
+                    var contentArea = $(this);
+                    if (contentArea.hasClass('active')) { return; }
+
+                    if (contentArea.html() == INITIAL_CONTENT) {
+                        // CKEditor kills this '&nbsp' creating a non usable box :/
+                        contentArea.html('&nbsp;');
+                    }
+
+                    // Add the .attr('contenteditable',''true') or CKEditor loads readonly
+                    contentArea.addClass('active').attr('contenteditable', 'true');
+
+                    var configuration = $.extend(
+                        {},
+                        (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 instance = window.CKEDITOR.inline(contentArea.get(0), configuration);
+                    contentArea.data('ge-ckeditor', instance);
+                });
+            },
+
+            stop: function(contentAreas) {
+                contentAreas.filter('.active').each(function() {
+                    var contentArea = $(this);
+
+                    // This content area's instance, 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(); }
+                    contentArea.removeData('ge-ckeditor');
+
+                    // Cleanup
+                    contentArea
+                        .removeClass('active cke_focus')
+                        .removeAttr('id')
+                        .removeAttr('style')
+                        .removeAttr('spellcheck')
+                        .removeAttr('contenteditable')
+                    ;
+                });
+            },
+        };
+    };
+})(jQuery);

package/src/js/plugins/grideditor.clipboard.js

@@ -2,8 +2,9 @@
  * Copy and paste for grid-editor.
  *
  * A feature plugin: load this file after the editor and every row, column,
- * section, container and element gets a copy tool, and every place one of
- * them can go gets a paste tool while there is something copied that fits.
+ * section, text block, container and element gets a copy tool, and every
+ * place one of them can go gets a paste tool while there is something copied
+ * that fits.
  * What it can ask the editor for is the handle its factory is called with,
  * described in docs/plugins.md.
  *
@@ -37,10 +38,10 @@ var editors = 0;
 /**
  * What each drawer takes when something is pasted into it, by the kind of the
  * node the drawer belongs to. A category is what was copied: a row, a column,
- * a section, a container of any type, an element.
+ * a section, a text block, a container of any type, an element.
  */
 var TARGETS = {
-    column: ['row', 'container', 'element'],
+    column: ['row', 'text', 'container', 'element'],
     row: ['column'],
     section: ['row'],
 };
@@ -117,7 +118,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     function categoryOf(kind) {
         if ($.fn.gridEditor.containers[kind]) { return 'container'; }
 
-        return ['row', 'column', 'section', 'element'].indexOf(kind) !== -1 ? kind : null;
+        return ['row', 'column', 'section', 'text', 'element'].indexOf(kind) !== -1 ? kind : null;
     }
 
     function copy(node, kind) {
@@ -128,7 +129,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
 
         // The canvas came back with new drawers: the one to flash is the
         // node's new copy tool
-        var tool = node.children('.ge-tools-drawer').find('> .ge-copy');
+        var tool = ge.drawerOf(node).find('> .ge-copy');
         tool.addClass('ge-copied').find('i').attr('class', 'bi bi-check2');
         setTimeout(function() {
             tool.removeClass('ge-copied').find('i').attr('class', 'bi bi-copy');
@@ -145,7 +146,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
         // An element goes into the column's last content area. With none,
         // the column's next init wraps it in one of its own
         if (clip.category === 'element') {
-            var area = target.children('.ge-content').last();
+            var area = target.find('> .ge-text-block > .ge-content, > .ge-content').last();
             if (area.length) { into = area; }
         }
 

package/src/js/plugins/grideditor.spacing.js

@@ -252,7 +252,7 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
                 name: key + side,
                 prefix: key + side,
                 values: values,
-                appliesTo: ['row', 'column', 'element', 'container'],
+                appliesTo: ['row', 'column', 'text', 'element', 'container'],
                 labelKey: labelKey,
                 panel: false,
                 choices: function() {

package/src/js/plugins/grideditor.summernote.js

@@ -0,0 +1,98 @@
+/**
+ * Summernote for grid-editor's content areas.
+ *
+ * A text editor plugin: load this file after the editor, and summernote
+ * after or before it, and content_types: ['summernote'] edits each content
+ * area with summernote in air mode. What it can ask the editor for is the
+ * handle its factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="summernote/summernote-bs5.min.js"></script>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.summernote.min.js"></script>
+ *
+ * Up to 6.0 the main bundle carries a copy of this file too.
+ */
+(function($) {
+
+    $.extend($.fn.gridEditor.locales.en, {
+        'text.summernote': 'Summernote',
+    });
+
+    var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
+
+    $.fn.gridEditor.texts.summernote = function(ge) {
+        return {
+            labelKey: 'text.summernote',
+            initialContent: INITIAL_CONTENT,
+            missingKey: 'error.summernote_missing',
+
+            available: function() { return !!$.fn.summernote; },
+
+            start: function(contentAreas) {
+                var settings = ge.settings;
+
+                // Summernote 0.9.1 calls $.now(), which jQuery 4 removed, and
+                // cannot open without it. Given back only where it is missing,
+                // and only once summernote is actually used.
+                if (!$.now) { $.now = Date.now; }
+
+                contentAreas.each(function() {
+                    var contentArea = $(this);
+                    if (contentArea.hasClass('active')) { return; }
+
+                    if (contentArea.html() == INITIAL_CONTENT) {
+                        contentArea.html('');
+                    }
+                    contentArea.addClass('active');
+
+                    var configuration = $.extend(
+                        true, // deep copy
+                        {},
+                        (settings.summernote && settings.summernote.config ? settings.summernote.config : {}),
+                        {
+                            tabsize: 2,
+                            airMode: true,
+                            // Focus editor on creation
+                            callbacks: {
+                                onInit: function() {
+
+                                    // Call original oninit function, if one was passed in the config
+                                    var callback;
+                                    try {
+                                        callback = settings.summernote.config.callbacks.onInit;
+                                    } catch (err) {
+                                        // No callback passed
+                                    }
+                                    if (callback) {
+                                        callback.call(this);
+                                    }
+
+                                    // 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);
+
+                                    contentArea.summernote('focus');
+                                }
+                            }
+                        }
+                    );
+                    contentArea.summernote(configuration);
+                });
+            },
+
+            stop: function(contentAreas) {
+                contentAreas.filter('.active').each(function() {
+                    var contentArea = $(this);
+                    contentArea.summernote('destroy');
+                    contentArea
+                        .removeClass('active')
+                        .removeAttr('id')
+                        .removeAttr('style')
+                        .removeAttr('spellcheck')
+                    ;
+                });
+            },
+        };
+    };
+})(jQuery);

package/src/js/plugins/grideditor.textalign.js

@@ -39,7 +39,7 @@ $.fn.gridEditor.utilities.textalign = function(ge) {
             name: 'text-align',
             prefix: 'text',
             values: ['start', 'center', 'end'],
-            appliesTo: ['row', 'column', 'element', 'container'],
+            appliesTo: ['row', 'column', 'text', 'element', 'container'],
             labelKey: 'utility.text_align',
             label: label,
 

package/src/js/plugins/grideditor.tinymce.js

@@ -0,0 +1,162 @@
+/**
+ * tinyMCE for grid-editor's content areas.
+ *
+ * A text editor plugin: load this file after the editor, and tinyMCE 6
+ * after or before it, and content_types: ['tinymce'] edits each content area
+ * with an inline tinyMCE. What it can ask the editor for is the handle its
+ * factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="tinymce/tinymce.min.js"></script>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
+ *
+ * Up to 6.0 the main bundle carries a copy of this file too.
+ */
+(function($) {
+
+    $.extend($.fn.gridEditor.locales.en, {
+        'text.tinymce': 'tinyMCE',
+    });
+
+    // tinyMCE snapshots the target element's attributes when an inline editor is
+    // created and restores them on remove(), so this has to run *after* remove()
+    // to keep the grid editor's own class and tinyMCE's leftovers off the element.
+    function cleanUp(contentArea) {
+        contentArea
+            .removeClass('active')
+            .removeClass('ge-rte-active')
+            .removeAttr('id')
+            .removeAttr('style')
+            .removeAttr('spellcheck')
+            .removeAttr('contenteditable')
+            .removeAttr('data-mce-style')
+        ;
+    }
+
+    var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
+
+    $.fn.gridEditor.texts.tinymce = function(ge) {
+        return {
+            labelKey: 'text.tinymce',
+            initialContent: INITIAL_CONTENT,
+            missingKey: 'error.tinymce_missing',
+
+            available: function() { return !!window.tinymce; },
+
+            start: function(contentAreas) {
+                var settings = ge.settings;
+                var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
+
+                contentAreas.each(function() {
+                    var contentArea = $(this);
+                    if (contentArea.hasClass('active')) { return; }
+
+                    if (contentArea.html() == INITIAL_CONTENT) {
+                        contentArea.html('');
+                    }
+                    contentArea.addClass('active');
+
+                    var configuration = $.extend({
+                        // tinyMCE's own "Upgrade" badge in the menubar. Off by
+                        // default because an inline editor here is a column of
+                        // someone's page, not tinyMCE's own interface; a host that
+                        // wants it back passes promotion: true.
+                        promotion: false,
+                    }, userConfig, {
+                        target: this,
+                        inline: true,
+                        init_instance_callback: function(editor) {
+                            // deinit ran before this init finished, so tear it down again
+                            if (contentArea.data('ge-tinymce-pending-remove')) {
+                                contentArea.removeData('ge-tinymce-pending-remove');
+                                editor.remove();
+                                // deinit already ran and cannot clean up after this
+                                // late remove(), so do it here instead
+                                cleanUp(contentArea);
+                                return;
+                            }
+
+                            contentArea.data('ge-tinymce', editor);
+
+                            // The editor rewrote what is inside this content area
+                            // while it took it over, so whatever the grid editor
+                            // had in there is gone. Saying so lets it put its own
+                            // furniture back.
+                            ge.textReady(contentArea);
+
+                            // Undo and redo rewrite it too, from snapshots that
+                            // leave out whatever is marked data-mce-bogus - an
+                            // element's drawer among them - so it goes back in
+                            // after each of those as well
+                            editor.on('Undo Redo', function() {
+                                ge.textReady(contentArea);
+                            });
+
+                            // The inline toolbar is laid out against the element's
+                            // geometry at the moment tinyMCE draws it, and an
+                            // element that has just appeared - a tab pane, an
+                            // accordion body, a column whose width is still
+                            // settling - may not have its own width yet. Asking
+                            // for the ui again once the browser has laid the frame
+                            // out measures it as it now is, instead of leaving a
+                            // toolbar wrapped into a narrow column.
+                            window.requestAnimationFrame(function() {
+                                if (editor.removed || !editor.ui || !editor.ui.show) { return; }
+
+                                editor.ui.show();
+                            });
+
+                            // And again whenever the user comes back to this
+                            // editor: by then the element may have been resized,
+                            // hidden and shown again - a tab switched away from
+                            // and back, a column made narrower - and the toolbar
+                            // is only ever as right as its last measurement.
+                            editor.on('focus', function() {
+                                window.requestAnimationFrame(function() {
+                                    if (editor.removed || !editor.ui || !editor.ui.show) { return; }
+
+                                    editor.ui.show();
+                                });
+                            });
+
+                            // Bring focus to text field
+                            editor.focus();
+
+                            // Call the original callbacks, if any were passed in the config
+                            if (userConfig.init_instance_callback) {
+                                userConfig.init_instance_callback.call(this, editor);
+                            }
+                            // 'oninit' is the pre-6 name, honoured so existing configs keep working
+                            if (userConfig.oninit) {
+                                userConfig.oninit.call(this, editor);
+                            }
+                        }
+                    });
+                    // We always edit the element we were handed, so a selector in the
+                    // user config would only fight with target
+                    delete configuration.selector;
+
+                    window.tinymce.init(configuration);
+                });
+            },
+
+            stop: function(contentAreas) {
+                contentAreas.filter('.active').each(function() {
+                    var contentArea = $(this);
+                    var editor = contentArea.data('ge-tinymce');
+
+                    if (editor) {
+                        contentArea.removeData('ge-tinymce');
+                        editor.remove();
+                    } else {
+                        // tinymce.init() is asynchronous, so the editor may not exist
+                        // yet. Leave a note for init_instance_callback to remove it.
+                        contentArea.data('ge-tinymce-pending-remove', true);
+                    }
+
+                    cleanUp(contentArea);
+                });
+            },
+        };
+    };
+})(jQuery);

package/src/js/plugins/grideditor.visibility.js

@@ -32,7 +32,7 @@ $.extend($.fn.gridEditor.locales.en, {
 /** A node that carries any class of the family, at any breakpoint. */
 var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
 
-var NODES = '.row, .column, .ge-element, [data-ge-container]';
+var NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
 
 $.fn.gridEditor.utilities.visibility = function(ge) {
 
@@ -44,7 +44,7 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
     }
 
     function applies(node, kind) {
-        return kind === 'row' || kind === 'column' || kind === 'element' ||
+        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' ||
             node.is('[data-ge-container]');
     }
 
@@ -143,7 +143,7 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
             name: 'visibility',
             prefix: 'd',
             values: ['none', 'block', 'flex'],
-            appliesTo: ['row', 'column', 'element', 'container'],
+            appliesTo: ['row', 'column', 'text', 'element', 'container'],
             labelKey: 'utility.visibility',
 
             /** Hidden, or shown the way this kind of node is shown. */

package/src/less/grideditor.less

@@ -5,6 +5,8 @@
 @colTextColor: darken(@colColor, 10%);
 @elementColor: #7B5EA7;
 @elementTextColor: darken(@elementColor, 5%);
+@textColor: #5A6F8A;
+@textTextColor: darken(@textColor, 5%);
 @containerColor: #1D8A5E;
 @containerTextColor: darken(@containerColor, 5%);
 
@@ -549,6 +551,38 @@
         }
     }
     
+    /* A text block: a content area and, beside it rather than inside,
+       where the text editor would take it, its drawer */
+    .ge-text-block {
+        position: relative;
+        outline: 1px dashed fadeout(@textColor, 40%);
+        margin-bottom: @editGutter;
+
+        > .ge-text-drawer {
+            background: fadeout(@textColor, 88%);
+
+            > a {
+                color: @textTextColor;
+                padding: 2px 5px;
+            }
+            > a.ge-text-info {
+                cursor: default;
+            }
+            > a.ge-text-missing {
+                color: #b02a37;
+            }
+        }
+    }
+
+    /* A column with nothing in it but its drawer still has room to drop a
+       block into */
+    .column:not(:has(> :not(.ge-tools-drawer, .ge-resize-handle)))::after {
+        content: '';
+        display: block;
+        min-height: 40px;
+        border: 1px dashed fadeout(@colColor, 50%);
+    }
+
     /* Sorting. The dragged node stays in the list and shows where it would
        land - that is the placeholder - while a copy of it follows the
        pointer. */

package/src/js/jquery.grideditor.ckeditor.js

@@ -1,77 +0,0 @@
-(function($) {
-    $.fn.gridEditor.RTEs.ckeditor = {
-
-        init: function(settings, contentAreas) {
-
-            if (!window.CKEDITOR) {
-                console.error($.fn.gridEditor.t(settings, 'error.ckeditor_missing'));
-            }
-
-            var self = this;
-            contentAreas.each(function() {
-                var contentArea = $(this);
-                if (!contentArea.hasClass('active')) {
-                    if (contentArea.html() == self.initialContent) {
-                        // CKEditor kills this '&nbsp' creating a non usable box :/ 
-                        contentArea.html(' '); 
-                    }
-                    
-                    // Add the .attr('contenteditable',''true') or CKEditor loads readonly
-                    contentArea.addClass('active').attr('contenteditable', 'true');
-                    
-                    var configuration = $.extend(
-                        {},
-                        (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
-                                    contentArea.trigger('ge-rte-ready');
-
-                                    instance.focus();
-                                }
-                            }
-                        }
-                    );
-                    var instance = CKEDITOR.inline(contentArea.get(0), configuration);
-                }
-            });
-        },
-
-        deinit: function(settings, contentAreas) {
-            contentAreas.filter('.active').each(function() {
-                var contentArea = $(this);
-                
-                // Destroy all CKEditor instances
-                $.each(CKEDITOR.instances, function(_, instance) {
-                    instance.destroy();
-                });
-
-                // Cleanup
-                contentArea
-                    .removeClass('active cke_focus')
-                    .removeAttr('id')
-                    .removeAttr('style')
-                    .removeAttr('spellcheck')
-                    .removeAttr('contenteditable')
-                ;
-            });
-        },
-
-        initialContent: '<p>Lorem initius... </p>',
-    };
-})(jQuery);