@themarioga/grid-editor 6.0.0-beta.3 → 6.0.0-beta.4

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

@@ -22,6 +22,8 @@
         'tool.add_text': 'Añadir texto',
         'tool.add_text_type': 'Añadir texto con {editor}',
         'tool.delete_text': 'Quitar texto',
+        'tool.delete_plain': 'Quitar contenido',
+        'tool.convert_type': 'Editar como texto de {editor}',
         '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',
@@ -84,6 +86,7 @@
         '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_plain': '¿Seguro que quieres borrar este contenido?',
         '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

@@ -2,8 +2,8 @@
  * 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
+ * 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>
@@ -11,7 +11,11 @@
  *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
  *
  * 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.
+ * loaded on its own, like every plugin. The built file starts with what
+ * every text editor shares - text blocks, the Text button and the Add text
+ * tool, createText, making the host's plain content a text - from
+ * src/js/text/grideditor.text.js, installed once however many editors a
+ * page loads.
  */
 (function($) {
 

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

@@ -2,8 +2,8 @@
  * 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
+ * after or before it, and a text of the summernote type is edited 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>
@@ -11,7 +11,11 @@
  *   <script src="dist/plugins/grideditor.summernote.min.js"></script>
  *
  * 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.
+ * loaded on its own, like every plugin. The built file starts with what
+ * every text editor shares - text blocks, the Text button and the Add text
+ * tool, createText, making the host's plain content a text - from
+ * src/js/text/grideditor.text.js, installed once however many editors a
+ * page loads.
  */
 (function($) {
 

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

@@ -2,8 +2,8 @@
  * 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
+ * after or before it, and a text of the tinymce type is edited 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>
@@ -11,7 +11,11 @@
  *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
  *
  * 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.
+ * loaded on its own, like every plugin. The built file starts with what
+ * every text editor shares - text blocks, the Text button and the Add text
+ * tool, createText, making the host's plain content a text - from
+ * src/js/text/grideditor.text.js, installed once however many editors a
+ * page loads.
  */
 (function($) {
 

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

@@ -44,7 +44,7 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
     }
 
     function applies(node, kind) {
-        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' ||
+        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||
             node.is('[data-ge-container]');
     }
 

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

@@ -0,0 +1,389 @@
+/**
+ * Text for grid-editor: what the text editor plugins share.
+ *
+ * Not a file a page loads. The build puts it at the top of each text editor
+ * plugin - grideditor.tinymce.js, grideditor.ckeditor.js,
+ * grideditor.summernote.js - and whichever of them loads first installs it:
+ * a page with two editors has one of these.
+ *
+ * It is a feature plugin, `text`, that the `plugins` setting does not choose
+ * (content_types does), and it is everything a text is to the editor: the
+ * text block's drawer, the Text buttons in the toolbar and the Add text tool
+ * in each column, createText, opening an editor on a click and closing it
+ * again with the host's attributes put back, and making the host's plain
+ * content a text through the core's `textTypes` hook.
+ *
+ * Each editor registers under $.fn.gridEditor.texts, which is this file's own
+ * registry and not a contract: an editor of a host's own is a feature plugin
+ * of its own, as example/custom_editor.html shows.
+ */
+(function($) {
+
+    if ($.fn.gridEditor.features.text) { return; }
+
+    $.extend($.fn.gridEditor.locales.en, {
+        'tool.add_text': 'Add text',
+        'tool.add_text_type': 'Add {editor} text',
+        'text.add': 'Text',
+        'text.add_type': 'Text ({editor})',
+        'panel.editor': 'Editor',
+        'panel.kind_text': 'Text',
+    });
+
+    /** The text editors, by the content type each edits. */
+    $.fn.gridEditor.texts = $.fn.gridEditor.texts || {};
+
+    /** 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_ATTRIBUTE = /^(data-mce-|contenteditable$|spellcheck$)/;
+
+    function attributesOf(element) {
+        var found = {};
+        $.each($.makeArray(element.attributes), function(i, attribute) {
+            found[attribute.name] = attribute.value;
+        });
+        return found;
+    }
+
+    function classesIn(value) {
+        return (value || '').split(/\s+/).filter(function(name) {
+            return name !== '' && !EDITOR_CLASS.test(name);
+        });
+    }
+
+    /** The host's markup, with what changed from `ready` to `open` played back onto it. */
+    function restoreAttributes(block, before, ready, open) {
+        var result = $.extend({}, before);
+
+        $.each($.extend({}, ready, open), function(name) {
+            if (name === 'class' || EDITOR_ATTRIBUTE.test(name) || ready[name] === open[name]) { return; }
+
+            if (open[name] === undefined) {
+                delete result[name];
+            } else {
+                result[name] = open[name];
+            }
+        });
+
+        var readyClasses = classesIn(ready['class']);
+        var openClasses = classesIn(open['class']);
+        var classes = classesIn(before['class']).filter(function(name) {
+            return openClasses.indexOf(name) !== -1 || readyClasses.indexOf(name) === -1;
+        });
+        openClasses.forEach(function(name) {
+            if (readyClasses.indexOf(name) === -1 && classes.indexOf(name) === -1) { classes.push(name); }
+        });
+
+        // In the host's order, class where it was: getHtml should not
+        // shuffle a node's attributes because it was edited
+        if (classes.length) { result['class'] = classes.join(' '); } else { delete result['class']; }
+
+        $.each(attributesOf(block[0]), function(name) { block.removeAttr(name); });
+        $.each(result, function(name, value) { block.attr(name, value); });
+    }
+
+    function textFeature(ge) {
+
+        var settings = ge.settings;
+        var TEXTS = {};
+        var warned = {};
+
+        $.each($.fn.gridEditor.texts, function(type, factory) {
+            TEXTS[type] = factory(ge);
+        });
+
+        // Every editor loaded, in the order the page loaded them, unless the
+        // host names the ones it wants
+        if (!Array.isArray(settings.content_types)) { settings.content_types = Object.keys(TEXTS); }
+        if (!Array.isArray(settings.text_tools)) { settings.text_tools = []; }
+        if (!Array.isArray(settings.text_classes)) { settings.text_classes = []; }
+
+        /** The text editors this editor offers, in content_types order: the ones loaded. */
+        function offeredTexts() {
+            return settings.content_types.filter(function(type) { return !!TEXTS[type]; });
+        }
+
+        /** What a text editor is called: its plugin's label, or its type. */
+        function textLabel(type) {
+            var text = TEXTS[type];
+            return text && text.labelKey ? ge.t(text.labelKey) : type;
+        }
+
+        /** A detached content area of `type`, holding `content` or the editor's initial content. */
+        function makeText(type, content) {
+            var text = TEXTS[type];
+
+            return $('<div class="ge-content" />')
+                .addClass('ge-content-type-' + type)
+                .attr('data-ge-content-type', type)
+                .html(content !== undefined ? content : (text && text.initialContent) || '');
+        }
+
+        /** A text block at the end of a column, through the add events. */
+        function addTextTo(col, type) {
+            return ge.place(makeText(type), 'text', { appendTo: col, source: 'tool' });
+        }
+
+        /**
+         * createText(type?, options?): a content area of a text editor's,
+         * detached unless a placement is given. The type is the first one
+         * offered by default. `options.content` is its html.
+         */
+        function apiCreateText(type, options) {
+            if (type && typeof type === 'object') {
+                options = type;
+                type = undefined;
+            }
+            options = options || {};
+            type = type || offeredTexts()[0];
+
+            if (!type || !TEXTS[type]) {
+                if (!warned['createText:' + type]) {
+                    warned['createText:' + type] = true;
+                    ge.warn('createText: no text editor "' + type + '" is loaded; ' +
+                        'load its plugin and name it in content_types');
+                }
+                return null;
+            }
+
+            return ge.place(makeText(type, options.content), 'text', options);
+        }
+
+        /** Whether a content area is a text of one of the editors loaded here. */
+        function isOurs(block) {
+            return !!TEXTS[block.attr('data-ge-content-type')];
+        }
+
+        /** Open the editor on a text, once: until it is closed again. */
+        function startText(block) {
+            if (block.hasClass('ge-rte-active')) { return; }
+
+            // A content area nobody can see - a tab that is not the open one,
+            // a closed accordion item - has no geometry for an editor to lay
+            // its toolbar out against, and nothing anyone can type into
+            if (!block.is(':visible')) { return; }
+
+            // The attribute, not jQuery's cached copy of it: it is markup, and
+            // the drawer reads it the same way
+            var text = TEXTS[block.attr('data-ge-content-type')];
+            if (!text) { return; }
+
+            // Not marked active, so the next click tries again: the library
+            // may be loaded by then
+            if (text.available && !text.available()) {
+                if (text.missingKey) { console.error(ge.t(text.missingKey)); }
+                return;
+            }
+
+            block.data('ge-text-before', attributesOf(block[0])).removeData('ge-text-ready');
+            block.addClass('ge-rte-active');
+            text.start(block);
+        }
+
+        function onClick() {
+            startText($(this));
+        }
+
+        /**
+         * Close the text editor on one content area, and leave the content
+         * area's own attributes as the host left them.
+         *
+         * An editor adds attributes of its own while it is open, and takes
+         * them off again, more or less: CKEditor leaves aria-readonly behind.
+         * tinyMCE does worse, and puts back every attribute as it was when it
+         * opened, so an id, a class or a plugin's attribute given while it was
+         * open is lost. So the attributes are read three times - before the
+         * editor opens, once it has opened, and before it closes - and what
+         * changed between the second and the third, the host's doing, is
+         * played back onto the first, the host's markup. What the editor did
+         * is left out either way.
+         */
+        function closeText(block) {
+            var text = TEXTS[block.attr('data-ge-content-type')];
+            var before = block.data('ge-text-before');
+            var open = before ? attributesOf(block[0]) : null;
+
+            // Every content area is told, as in 5.x: one whose editor never
+            // started is the plugin's to ignore
+            if (text) { text.stop(block); }
+
+            // After stop, not before: an editor that restores the class
+            // attribute it snapshotted would put ge-rte-active back
+            block.removeClass('ge-rte-active');
+
+            if (before) {
+                restoreAttributes(block, before, block.data('ge-text-ready') || before, open);
+                block.removeData('ge-text-before').removeData('ge-text-ready');
+            }
+        }
+
+        function createTextControls(textBlock) {
+            var block = textBlock.children('.ge-content');
+            var type = block.attr('data-ge-content-type');
+            var drawer = $('<div class="ge-tools-drawer ge-text-drawer" />').prependTo(textBlock);
+
+            ge.createMoveTool(drawer);
+
+            var details = ge.addSettingsTool(drawer, block, settings.text_classes);
+
+            // Which editor edits it, first in its settings: something to
+            // know about it, not something to do with it
+            $('<div class="ge-field ge-text-editor" />')
+                .append($('<span class="ge-field-label" />').text(ge.t('panel.editor')))
+                .append($('<span class="ge-field-value" />').text(textLabel(type)))
+                .prependTo(details.children('.ge-details-general'));
+
+            settings.text_tools.forEach(function(hostTool) {
+                ge.createTool(drawer, hostTool.title || '', hostTool.className || '',
+                    hostTool.iconClass || 'bi bi-wrench', hostTool.on);
+            });
+
+            ge.createTool(drawer, ge.t('tool.delete_text'), 'ge-delete-text', 'bi bi-trash', function() {
+                ge.deleteNode('text', block, ge.t('confirm.delete_text'), function(removed) {
+                    // Its editor lets go first: removed while open, it would
+                    // be left behind, attached to nothing
+                    closeText(block);
+                    textBlock.slideUp(function() {
+                        textBlock.remove();
+                        removed();
+                    });
+                });
+            });
+        }
+
+        /** A drawer for each text of ours in a text block that has none yet. */
+        function markTexts() {
+            ge.canvas.find('.ge-text-block').each(function() {
+                var textBlock = $(this);
+                if (textBlock.children('.ge-tools-drawer').length) { return; }
+                if (!isOurs(textBlock.children('.ge-content'))) { return; }
+
+                createTextControls(textBlock);
+            });
+        }
+
+        /**
+         * The add text tool, in each column's drawer before its add row tool:
+         * a text of the first editor offered, or, held, of the one chosen.
+         */
+        function addTextTools() {
+            var texts = offeredTexts();
+            if (!texts.length) { return; }
+
+            ge.canvas.find('.column').each(function() {
+                var col = $(this);
+                var drawer = col.children('.ge-tools-drawer');
+                if (!drawer.length || drawer.children('.ge-add-text').length) { return; }
+
+                ge.createTool(drawer, ge.t('tool.add_text'), 'ge-add-text', 'bi bi-type', function() {
+                    if (ge.closePicker()) { return; } // The picker was open: that was the answer
+
+                    addTextTo(col, texts[0]);
+                });
+
+                var tool = drawer.children('.ge-add-text');
+                var addRow = drawer.children('.ge-add-row');
+                if (addRow.length) { tool.insertBefore(addRow); }
+
+                if (texts.length > 1) {
+                    ge.attachPicker(tool, function() {
+                        ge.openPicker(tool, texts.map(function(type) {
+                            return {
+                                label: textLabel(type),
+                                title: ge.t('tool.add_text_type', { editor: textLabel(type) }),
+                                attributes: { 'data-ge-content-type': type },
+                                choose: function() { addTextTo(col, type); },
+                            };
+                        }), 'ge-text-picker');
+                    });
+                }
+            });
+        }
+
+        var texts = offeredTexts();
+
+        return {
+            methods: {
+                createText: apiCreateText,
+            },
+
+            /**
+             * The types this plugin edits, for the core: every editor loaded
+             * is the owner of its texts, and the ones offered are what the
+             * host's plain content can be made.
+             */
+            textTypes: function() {
+                var offered = offeredTexts();
+                var others = Object.keys(TEXTS).filter(function(type) { return offered.indexOf(type) === -1; });
+
+                return offered.concat(others).map(function(type) {
+                    var text = TEXTS[type];
+
+                    return {
+                        type: type,
+                        label: textLabel(type),
+                        offered: offered.indexOf(type) !== -1,
+                        available: text.available ? function() { return text.available(); } : null,
+                        missingKey: text.missingKey,
+                        edit: function(block) {
+                            var textBlock = block.parent('.ge-text-block');
+                            if (textBlock.length && !textBlock.children('.ge-tools-drawer').length) {
+                                createTextControls(textBlock);
+                            }
+
+                            startText(block);
+                        },
+                    };
+                });
+            },
+
+            // A text block of each editor offered. Like a container, it goes
+            // into a row of its own when clicked, or where it is dropped
+            toolbar: texts.map(function(type) {
+                return {
+                    label: function() {
+                        return texts.length > 1 ? ge.t('text.add_type', { editor: textLabel(type) }) : ge.t('text.add');
+                    },
+                    iconClass: TEXTS[type].iconClass,
+                    className: 'ge-add-text-button',
+                    kind: 'text',
+                    inColumn: true,
+                    create: function() { return makeText(type); },
+                };
+            }),
+
+            onInit: function() {
+                markTexts();
+                addTextTools();
+
+                ge.canvas.off('click.ge-text').on('click.ge-text', '.ge-content', onClick);
+            },
+
+            // While the drawers and the text blocks are still there, as the
+            // editors left them
+            onBeforeDeinit: function() {
+                ge.canvas.find('.ge-content').each(function() {
+                    if (isOurs($(this))) { closeText($(this)); }
+                });
+            },
+
+            onDeinit: function() {
+                ge.canvas.off('click.ge-text');
+            },
+
+            // The first time only: an undo says ready again, and by then the
+            // host may have changed the content area itself
+            onContentReady: function(area) {
+                if (area.data('ge-text-before') && !area.data('ge-text-ready')) {
+                    area.data('ge-text-ready', attributesOf(area[0]));
+                }
+            },
+        };
+    }
+
+    // Whatever the plugins setting says: content_types chooses the editors
+    textFeature.always = true;
+
+    $.fn.gridEditor.features.text = textFeature;
+
+})(jQuery);

package/src/less/grideditor.less

@@ -707,6 +707,23 @@
             left: 0;
             border-radius: 0;
         }
+
+        /* The choice of editor a click on plain content offers hangs off
+           the drawer, which sits at the right: so it opens leftwards */
+        > .ge-text-drawer > .ge-convert-picker {
+            left: auto;
+            right: 0;
+        }
+    }
+
+    /* The host's plain content: a block to move and delete, edited in the
+       source - greyer than a text, which an editor edits in place */
+    .ge-text-block.ge-plain-block {
+        outline-color: rgba(0, 0, 0, 0.25);
+
+        > .ge-text-drawer {
+            background: #e9ecef;
+        }
     }
 
     /* A column with nothing in it but its drawer still has room to drop a