@themarioga/grid-editor 5.1.2 → 5.3.0

package/dist/jquery.grideditor.js

@@ -29,6 +29,7 @@ var METHODS = {
     createRow:        { value: true },
     createColumn:     { value: true },
     createElement:    { value: true },
+    createText:       { value: true },
     createSection:    { value: true },
     createContainer:  { value: true },
     addTab:           { value: true },
@@ -338,6 +339,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             'toolbar_drag'      : 'auto', // Drag the toolbar's buttons onto the canvas. 'auto' follows drag_handle
             'element_tools'     : [], // Host tools on element drawers, same shape as row_tools
             'element_classes'   : [], // Preset class toggles on an element's settings panel
+            'text_tools'        : [], // Host tools on text block drawers
+            'text_classes'      : [], // Preset class toggles on a text block's settings panel
             'container_classes' : [], // The same, on a container's panel
             'pane_classes'      : [], // And on a tab's or an accordion item's
             'container_tools'   : [], // Host tools on container drawers
@@ -831,7 +834,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             if (node.hasClass('row')) { return 'row'; }
             if (node.hasClass('column')) { return 'column'; }
             if (node.hasClass('ge-element')) { return 'element'; }
-            if (node.hasClass('ge-content')) { return 'content'; }
+            if (node.hasClass('ge-content') || node.hasClass('ge-text-block')) { return 'text'; }
             return 'node';
         }
         
@@ -879,6 +882,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // which costs the element drawers inside it. The integrations say
             // when their editor is ready, and the drawers go back in.
             canvas.on('ge-rte-ready', '.ge-content', function() {
+                // The first time only: an undo says ready again, and by then
+                // the host may have changed the content area itself
+                if ($(this).data('ge-text-before') && !$(this).data('ge-text-ready')) {
+                    $(this).data('ge-text-ready', attributesOf(this));
+                }
+
                 plugins('onContentReady', $(this));
                 refreshPreviews($(this));
             });
@@ -936,6 +945,35 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             addContainerGroup.appendTo(wrapper);
 
+            // 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
+            var texts = offeredTexts();
+            texts.forEach(function(type) {
+                var label = texts.length > 1 ? t('text.add_type', { editor: textLabel(type) }) : t('text.add');
+
+                $('<a class="btn btn-sm btn-primary ge-add-container ge-add-text-button" />')
+                    .attr('title', label)
+                    .attr('data-ge-toolbar', 'text')
+                    .attr('data-ge-text', type)
+                    .append('<i class="bi bi-plus"></i>')
+                    .append($('<span />').text(label))
+                    .on('click', function() {
+                        var row = createRow();
+                        var block = makeText(type);
+                        createColumn(MAX_COL_SIZE).appendTo(row).find('> .ge-content').replaceWith(block);
+
+                        var added = addNode('text', block, function() {
+                            row.appendTo(canvas);
+                        }, { parent: canvas, source: 'tool' });
+
+                        if (added && row[0].scrollIntoView) {
+                            row[0].scrollIntoView({behavior: 'smooth'});
+                        }
+                    })
+                    .appendTo(addContainerGroup)
+                ;
+            });
+
             // A container starts in a row of its own, the way the add row
             // buttons next to these ones do
             $.each(CONTAINERS, function(type, definition) {
@@ -1226,6 +1264,28 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             }, { parent: where.region, source: item.source || 'dragdrop' });
         }
 
+        /**
+         * A text block dropped from the toolbar: where it lands in a column,
+         * or in a row and a column of its own anywhere else.
+         */
+        function insertTextFromToolbar(button, where) {
+            var made = makeText(button.attr('data-ge-text'));
+            var placed = made;
+
+            if (!where.region.is('.column')) {
+                placed = createRow();
+                createColumn(MAX_COL_SIZE).appendTo(placed).find('> .ge-content').replaceWith(made);
+            }
+
+            return addNode('text', made, function() {
+                if (where.before) {
+                    placed.insertBefore(where.before);
+                } else {
+                    placed.appendTo(where.region);
+                }
+            }, { parent: where.region, source: 'dragdrop' });
+        }
+
         /** A line where the block would go, following the pointer. */
         function showDropMarker(pageX, pageY) {
             var where = dropPlaceAt(pageX, pageY);
@@ -1255,6 +1315,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             if (button.attr('data-ge-toolbar') === 'feature') {
                 return insertFeatureFromToolbar(button, where);
             }
+            if (button.attr('data-ge-toolbar') === 'text') {
+                return insertTextFromToolbar(button, where);
+            }
 
             var container = button.attr('data-ge-toolbar') === 'container';
             var type = button.attr('data-ge-container-type');
@@ -1404,11 +1467,28 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // its toolbar out against, and nothing anyone can type into
             if (!$(this).is(':visible')) { return; }
             
-            var rte = getRTE($(this).data('ge-content-type'));
-            if (rte) {
-                $(this).addClass('ge-rte-active', true);
-                rte.init(settings, $(this));
+            // The attribute, not jQuery's cached copy of it: it is markup, and
+            // the drawer reads it the same way
+            var type = $(this).attr('data-ge-content-type');
+            var text = textFor(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(t(text.missingKey)); }
+                return;
+            }
+
+            if (text.bundled) {
+                warnOnceHere('text-bundled:' + type, 'the ' + type + ' text editor is the copy in the ' +
+                    'main bundle, which 6.0 will not include: load dist/plugins/grideditor.' + type +
+                    '.js after the editor');
             }
+
+            $(this).data('ge-text-before', attributesOf(this)).removeData('ge-text-ready');
+            $(this).addClass('ge-rte-active');
+            text.start($(this));
         }
 
         function reset() {
@@ -1422,6 +1502,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             canvas.toggleClass('ge-drag-drawer', settings.drag_handle === 'drawer');
             addAllColClasses();
             wrapContent();
+            wrapTexts();
             createRowControls();
             createColControls();
             markContainers();
@@ -1434,21 +1515,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
         function deinit() {
             canvas.removeClass('ge-editing ge-drag-drawer ge-dropping');
-            var contents = canvas.find('.ge-content').each(function() {
-                var content = $(this);
-                var rte = getRTE(content.data('ge-content-type'));
-                if (rte) {
-                    rte.deinit(settings, content);
-                }
-                // Cleared after rte.deinit, not before: an editor can restore the
-                // class attribute it snapshotted when it was created, which would
-                // leave ge-rte-active in place and make initRTE ignore every later
-                // click on this content area.
-                content.removeClass('ge-rte-active');
+            canvas.find('.ge-content').each(function() {
+                closeText($(this));
             });
             closeSizePicker();
             hideDropMarker();
             canvas.find('.ge-tools-drawer').remove();
+            unwrapTexts();
             plugins('onDeinit');
             // After the rich text editors have let go of their content areas:
             // one that rebuilt its area's DOM brought the preview styles back
@@ -1555,6 +1628,23 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 if (wanted(name)) { FEATURES[name] = factory(api); }
             });
 
+            // Text editors are chosen by content_types rather than by the
+            // plugins setting: a page that names its containers there has
+            // named no editor, and still wants the one it uses
+            $.each($.fn.gridEditor.texts, function(type, factory) {
+                TEXTS[type] = $.extend({ bundled: !!factory.bundled }, factory(api));
+            });
+
+            // 5.x's registry, for an integration a host wrote itself. One the
+            // plugins above already provide is theirs.
+            $.each($.fn.gridEditor.RTEs, function(type, rte) {
+                if (TEXTS[type]) { return; }
+
+                warnOnceHere('rtes:' + type, '$.fn.gridEditor.RTEs is deprecated and will be removed ' +
+                    'in 7.0: register "' + type + '" under $.fn.gridEditor.texts, see docs/plugins.md');
+                TEXTS[type] = legacyText(rte);
+            });
+
             $.each($.fn.gridEditor.utilities, function(name, factory) {
                 if (!wanted(name)) { return; }
 
@@ -1631,6 +1721,16 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 bareStyle: bareStyle,
                 rowFromLayout: rowFromLayoutValue,
                 nodeHtml: nodeHtml,
+                // A text editor has rewritten a content area, so whatever the
+                // editor and its plugins had put in there goes back in
+                textReady: function(block) { block.trigger('ge-rte-ready'); },
+                // A node's drawer: its first child, or for a content area the
+                // one beside it in its text block
+                drawerOf: function(node) {
+                    return node.hasClass('ge-content')
+                        ? node.parent('.ge-text-block').children('.ge-tools-drawer')
+                        : node.children('.ge-tools-drawer');
+                },
                 toolbarItems: function(name) {
                     return mainControls
                         ? mainControls.find('[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]')
@@ -1657,7 +1757,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * -------------------------------------------------------------- */
 
         var FAMILIES = {}; // Every family the utility plugins declare, by name
-        var UTILITY_NODES = '.row, .column, .ge-element, [data-ge-container]';
+        var UTILITY_NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
         var PREVIEW_ATTR = 'data-ge-preview';
         var utilitiesOpen = false; // Whether the panels show their Responsive section unfolded
 
@@ -2164,6 +2264,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * -------------------------------------------------------------- */
 
         var CONTAINERS = {}; // The container plugins in use, by the type each builds
+        var TEXTS = {}; // The text editor plugins, by the content type each edits
         var FEATURES = {}; // The feature plugins in use, by name
         var UTILITIES = {}; // The utility plugins in use, by name
         var featureMethods = {}; // The methods those features contribute
@@ -2444,6 +2545,14 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function attachSizePicker(tool, row) {
             if (!settings.add_column.picker) { return; }
 
+            attachPicker(tool, function() { openSizePicker(tool, row); });
+        }
+
+        /**
+         * Hold a tool - or rest the pointer on it - and `open` offers a
+         * choice under it. The add text tool offers its editors the same way.
+         */
+        function attachPicker(tool, open) {
             var timer = null;
 
             var cancel = function() {
@@ -2456,7 +2565,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
                 timer = window.setTimeout(function() {
                     timer = null;
-                    openSizePicker(tool, row);
+                    open();
                 }, settings.add_column.delay);
             });
 
@@ -2606,6 +2715,22 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     });
                 });
 
+                // A text block of the first editor offered; held, the tool
+                // offers each of them when there is more than one
+                var texts = offeredTexts();
+                if (texts.length) {
+                    createTool(drawer, t('tool.add_text'), 'ge-add-text', 'bi bi-type', function() {
+                        if (closeSizePicker()) { return; } // The picker was open: that was the answer
+
+                        addTextTo(col, texts[0]);
+                    });
+
+                    if (texts.length > 1) {
+                        var textTool = drawer.find('> .ge-add-text');
+                        attachPicker(textTool, function() { openTextPicker(textTool, col); });
+                    }
+                }
+
                 createTool(drawer, t('tool.add_row'), 'ge-add-row', 'bi bi-plus-circle', function() {
                     // An empty row: the columns in it are the next decision,
                     // and its drawer's add column tool is where that is made
@@ -2720,7 +2845,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         function createTool(drawer, title, className, iconClass, eventHandlers) {
-            var tool = $('<a title="' + title + '" class="' + className + '"><i class="' + iconClass + '"></i></a>')
+            // Through attr rather than spliced into markup: a title is text,
+            // and a quote in it - a type name, a host's own title - would
+            // end the attribute early
+            var tool = $('<a />')
+                .attr('title', title)
+                .attr('class', className)
+                .append($('<i />').attr('class', iconClass))
                 .appendTo(drawer)
             ;
             if (typeof eventHandlers == 'function') {
@@ -3154,11 +3285,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
         /**
          * What the canvas, the columns and the plugins' regions move: rows,
-         * content areas and containers, and whatever blocks a feature adds -
-         * the sections plugin's sections.
+         * text blocks and containers, and whatever blocks a feature adds -
+         * the sections plugin's sections. A content area is a block through
+         * the text block around it while editing, and on its own before.
          */
         function blockSelector() {
-            return ['.row', '.ge-content', '[data-ge-container]'].concat(pluginHooks('blocks')).join(', ');
+            return ['.row', '.ge-text-block', '.ge-content', '[data-ge-container]']
+                .concat(pluginHooks('blocks')).join(', ');
         }
 
         /** A selector every feature plugin may contribute to, under one name. */
@@ -3324,12 +3457,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function sortStart(e) {
             var node = $(e.item);
             var from = positionOf(node);
+            var subject = moveSubject(node);
 
             node.data('ge-move-from', from);
             node.removeData('ge-move-canceled');
 
             operate(function() {
-                var moving = emit('before-move', payloadFor(kindOf(node), node, {
+                var moving = emit('before-move', payloadFor(subject.kind, subject.node, {
                     parent: from.parent,
                     source: 'dragdrop',
                     from: from,
@@ -3339,6 +3473,19 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
         }
 
+        /**
+         * What a drag reports as moving. A text block is the editor's own
+         * wrapper, so what moved is the content area inside it, and until 6.0
+         * a content area moves as kind 'content', as it did in 5.x - adding
+         * and deleting one, which 5.x never announced, already say 'text'.
+         */
+        function moveSubject(item) {
+            var node = item.hasClass('ge-text-block') ? item.children('.ge-content') : item;
+            var kind = kindOf(node);
+
+            return { kind: kind === 'text' ? 'content' : kind, node: node };
+        }
+
         /** Put a node back where a refused drag found it. */
         function putBack(node, from) {
             var siblings = from.parent.children().not('.ge-tools-drawer').not(node);
@@ -3376,8 +3523,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // No init() here, unlike an add: the node brought its drawer
             // with it, and the drag is still being finished, so this is the
             // wrong moment to rebuild the lists it is using.
+            var subject = moveSubject(node);
+
             operate(function() {
-                emit('after-move', payloadFor(kindOf(node), node, {
+                emit('after-move', payloadFor(subject.kind, subject.node, {
                     parent: to.parent,
                     source: 'dragdrop',
                     from: from,
@@ -3770,9 +3919,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * the all view. `offset` indents it, within the same 12 unit budget.
          */
         function createColumn(size, offset) {
-            var rte = getRTE(settings.content_types[0]);
+            var text = textFor(settings.content_types[0]);
             var column = $('<div class="column"/>')
-                .append(createDefaultContentWrapper().html(rte ? rte.initialContent : ''))
+                .append(createDefaultContentWrapper().html(text ? text.initialContent : ''))
             ;
 
             // The tier being edited, or the base class in the all view
@@ -3820,7 +3969,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     // A container sits in the column beside the content
                     // areas, not inside one, so it ends a run of loose
                     // content rather than joining it
-                    if (child.is('.row, .ge-content, [data-ge-container]')) {
+                    if (child.is('.row, .ge-content, .ge-text-block, [data-ge-container]')) {
                         contents = doWrap(contents);
                     } else {
                         contents = contents.add(child);
@@ -3847,11 +3996,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * A content area for the first content type. With no content types
-         * it is a content area and nothing more: there is no type to name.
+         * A content area for a content type, the first one by default. With
+         * no content types it is a content area and nothing more: there is no
+         * type to name.
          */
-        function createDefaultContentWrapper() {
-            var type = settings.content_types[0];
+        function createDefaultContentWrapper(type) {
+            type = type || settings.content_types[0];
             var contentArea = $('<div class="ge-content"/>');
 
             if (type) {
@@ -3861,6 +4011,236 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return contentArea;
         }
 
+        /* --------------------------------------------------------------
+         * Text blocks: a content area as a block of its own, with a drawer.
+         *
+         * The drawer cannot go inside the content area, as every other
+         * block's does: what is inside is the text editor's, which would make
+         * the drawer editable text, copy it into its own document or take it
+         * away on an undo. So while editing, each content area in a column
+         * sits in a .ge-text-block beside its drawer, and that wrapper is the
+         * block the column moves. deinit takes it off again: it is never part
+         * of the markup.
+         * -------------------------------------------------------------- */
+
+        /** 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]; });
+        }
+
+        function wrapTexts() {
+            canvas.find('.column > .ge-content').each(function() {
+                $(this).wrap('<div class="ge-text-block" />');
+            });
+
+            canvas.find('.ge-text-block').each(function() {
+                var textBlock = $(this);
+                if (!textBlock.children('.ge-tools-drawer').length) { createTextControls(textBlock); }
+            });
+        }
+
+        /** After the drawers are gone, so a wrapper holds its content area and nothing else. */
+        function unwrapTexts() {
+            canvas.find('.ge-text-block').each(function() {
+                $(this).replaceWith($(this).contents());
+            });
+        }
+
+        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);
+
+            createMoveTool(drawer);
+
+            // Which editor edits it, or that none can: a type whose plugin is
+            // not loaded is still a block to move and delete, but not to edit
+            if (type && TEXTS[type]) {
+                createTool(drawer, t('tool.text_info', { editor: textLabel(type) }), 'ge-text-info', 'bi bi-fonts');
+            } else if (type) {
+                createTool(drawer, t('text.no_editor', { type: type }), 'ge-text-info ge-text-missing',
+                    'bi bi-exclamation-triangle');
+            }
+
+            addSettingsTool(drawer, block, settings.text_classes);
+
+            settings.text_tools.forEach(function(hostTool) {
+                createTool(drawer, hostTool.title || '', hostTool.className || '',
+                    hostTool.iconClass || 'bi bi-wrench', hostTool.on);
+            });
+
+            createTool(drawer, t('tool.delete_text'), 'ge-delete-text', 'bi bi-trash', function() {
+                deleteNode('text', block, 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();
+                    });
+                });
+            });
+        }
+
+        /**
+         * 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 = textFor(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');
+            }
+        }
+
+        /** 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); });
+        }
+
+        /** What a text editor is called: its plugin's label, or its type. */
+        function textLabel(type) {
+            var text = TEXTS[type];
+            return text && text.labelKey ? 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 createDefaultContentWrapper(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) {
+            var block = makeText(type);
+
+            return addNode('text', block, function() {
+                col.append(block);
+            }, { parent: 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]) {
+                warnOnceHere('createText:' + type, 'createText: no text editor "' + type + '" is loaded; ' +
+                    'load its plugin and name it in content_types');
+                return null;
+            }
+
+            return place(makeText(type, options.content), 'text', options);
+        }
+
+        /**
+         * The text editors offered, as a strip under the add text tool, when
+         * there is more than one to choose from.
+         */
+        function openTextPicker(tool, col) {
+            closeSizePicker();
+
+            tool.closest('.ge-tools-drawer').addClass('ge-picker-open');
+            sizePicker = $('<div class="ge-size-picker ge-text-picker" />').appendTo(tool);
+
+            offeredTexts().forEach(function(type) {
+                $('<a class="ge-size ge-size-flex" />')
+                    .attr('data-ge-content-type', type)
+                    .attr('title', t('tool.add_text_type', { editor: textLabel(type) }))
+                    .text(textLabel(type))
+                    .on('click', function(e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        closeSizePicker();
+                        addTextTo(col, type);
+                    })
+                    .appendTo(sizePicker)
+                ;
+            });
+
+            tool.one('mouseleave', function() {
+                window.setTimeout(function() {
+                    if (sizePicker && !sizePicker.is(':hover')) { closeSizePicker(); }
+                }, 400);
+            });
+        }
+
         /**
          * Constrain the canvas to the view's preview width and make that
          * tier's classes the effective ones. The all view constrains nothing:
@@ -3915,8 +4295,21 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return curView;
         }
         
-        function getRTE(type) {
-            return $.fn.gridEditor.RTEs[type];
+        /** The text editor plugin for a content type, or null. */
+        function textFor(type) {
+            return TEXTS[type] || null;
+        }
+
+        /**
+         * An integration written to 5.x's contract - init and deinit over a
+         * set of content areas - as a text editor plugin.
+         */
+        function legacyText(rte) {
+            return {
+                initialContent: rte.initialContent,
+                start: function(block) { rte.init(settings, block); },
+                stop: function(block) { rte.deinit(settings, block); },
+            };
         }
 
         /**
@@ -3938,6 +4331,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             getView: getView,
             createRow: apiCreateRow,
             createColumn: apiCreateColumn,
+            createText: apiCreateText,
             createElement: function(content, options) {
                 if (!featureMethods.createElement) {
                     warnOnceHere('plugin:elements', 'createElement needs the elements plugin: ' +
@@ -3991,6 +4385,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
 };
 
+/**
+ * Text editor plugins: tinyMCE, CKEditor, summernote, and whatever a host
+ * writes. A factory registered under the content type it edits, called once
+ * per editor with the handle described in docs/plugins.md, returning
+ * { labelKey, initialContent, available, missingKey, start, stop }.
+ */
+$.fn.gridEditor.texts = {};
+
+/** 5.x's registry of text editors, adapted with a warning. Removed in 7.0. */
 $.fn.gridEditor.RTEs = {};
 
 /**
@@ -4046,6 +4449,13 @@ $.fn.gridEditor.locales = {
         'tool.move': 'Move',
         'tool.settings': 'Settings',
         'tool.add_row': 'Add row',
+        'tool.add_text': 'Add text',
+        'tool.add_text_type': 'Add {editor} text',
+        'tool.text_info': 'Text: {editor}',
+        'tool.delete_text': 'Remove text',
+        'text.add': 'Text',
+        'text.add_type': 'Text ({editor})',
+        'text.no_editor': 'No text editor "{type}" is loaded: this text can be moved and deleted, not edited',
         'tool.add_column': 'Add column\n(hold to choose the width)',
         'tool.column_size': '{size} of 12',
         'tool.column_equal': 'Equal: shares what the row has left',
@@ -4073,6 +4483,7 @@ $.fn.gridEditor.locales = {
         'confirm.cancel': 'Cancel',
         'confirm.delete_row': 'Delete row?',
         'confirm.delete_column': 'Delete column?',
+        'confirm.delete_text': 'Delete this text?',
         'confirm.delete_container': 'Delete this container and everything in it?',
         'view.all': 'All sizes',
         'view.xs': 'Phone',
@@ -4101,30 +4512,235 @@ $.fn.gridEditor.locales = {
 };
 
 })( jQuery );
+/**
+ * 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($) {
-    $.fn.gridEditor.RTEs.ckeditor = {
 
-        init: function(settings, contentAreas) {
+    $.extend($.fn.gridEditor.locales.en, {
+        'text.tinymce': 'tinyMCE',
+    });
 
-            if (!window.CKEDITOR) {
-                console.error($.fn.gridEditor.t(settings, 'error.ckeditor_missing'));
-            }
+    // 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 : {};
 
-            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('&nbsp;'); 
+                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);
+
+/**
+ * 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 : {}), 
+                        (settings.ckeditor && settings.ckeditor.config ? settings.ckeditor.config : {}),
                         {
                             // Focus editor on creation
                             on: {
@@ -4143,56 +4759,86 @@ $.fn.gridEditor.locales = {
                                     // 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');
+                                    ge.textReady(contentArea);
 
                                     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();
+                    var instance = window.CKEDITOR.inline(contentArea.get(0), configuration);
+                    contentArea.data('ge-ckeditor', instance);
                 });
+            },
 
-                // Cleanup
-                contentArea
-                    .removeClass('active cke_focus')
-                    .removeAttr('id')
-                    .removeAttr('style')
-                    .removeAttr('spellcheck')
-                    .removeAttr('contenteditable')
-                ;
-            });
-        },
-
-        initialContent: '<p>Lorem initius... </p>',
+            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);
+
+/**
+ * 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($) {
 
-    $.fn.gridEditor.RTEs.summernote = {
+    $.extend($.fn.gridEditor.locales.en, {
+        'text.summernote': 'Summernote',
+    });
 
-        init: function(settings, contentAreas) {
-            
-            if (!jQuery().summernote) {
-                console.error($.fn.gridEditor.t(settings, 'error.summernote_missing'));
-            }
+    var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
 
-            var self = this;
-            contentAreas.each(function() {
-                var contentArea = $(this);
-                if (!contentArea.hasClass('active')) {
-                    if (contentArea.html() == self.initialContent) {
+    $.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');
@@ -4207,7 +4853,7 @@ $.fn.gridEditor.locales = {
                             // Focus editor on creation
                             callbacks: {
                                 onInit: function() {
-                                    
+
                                     // Call original oninit function, if one was passed in the config
                                     var callback;
                                     try {
@@ -4222,175 +4868,44 @@ $.fn.gridEditor.locales = {
                                     // 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');
-                                    
+                                    ge.textReady(contentArea);
+
                                     contentArea.summernote('focus');
                                 }
                             }
                         }
                     );
                     contentArea.summernote(configuration);
-                }
-            });
-        },
-
-        deinit: function(settings, contentAreas) {
-            contentAreas.filter('.active').each(function() {
-                var contentArea = $(this);
-                contentArea.summernote('destroy');
-                contentArea
-                    .removeClass('active')
-                    .removeAttr('id')
-                    .removeAttr('style')
-                    .removeAttr('spellcheck')
-                ;
-            });
-        },
+                });
+            },
 
-        initialContent: '<p>Lorem ipsum dolores</p>',
+            stop: function(contentAreas) {
+                contentAreas.filter('.active').each(function() {
+                    var contentArea = $(this);
+                    contentArea.summernote('destroy');
+                    contentArea
+                        .removeClass('active')
+                        .removeAttr('id')
+                        .removeAttr('style')
+                        .removeAttr('spellcheck')
+                    ;
+                });
+            },
+        };
     };
 })(jQuery);
 
+/**
+ * Up to 6.0 the main bundle carries a copy of each text editor plugin, so a
+ * page that loaded only the editor keeps the editor it had. This marks those
+ * copies, and the editor warns once when a content area is edited with one:
+ * 6.0 leaves them out. Loaded on its own, a plugin's file registers itself
+ * again, unmarked, and is the one used.
+ *
+ * Only ever concatenated after the plugins it marks, never built on its own.
+ */
 (function($) {
-
-    // 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')
-        ;
-    }
-
-    $.fn.gridEditor.RTEs.tinymce = {
-
-        init: function(settings, contentAreas) {
-
-            if (!window.tinymce) {
-                console.error($.fn.gridEditor.t(settings, 'error.tinymce_missing'));
-                return;
-            }
-
-            var self = this;
-            var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
-
-            contentAreas.each(function() {
-                var contentArea = $(this);
-                if (contentArea.hasClass('active')) { return; }
-
-                if (contentArea.html() == self.initialContent) {
-                    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 (see RTE_READY in the core).
-                        contentArea.trigger('ge-rte-ready');
-
-                        // 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() {
-                            contentArea.trigger('ge-rte-ready');
-                        });
-
-                        // 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);
-            });
-        },
-
-        deinit: function(settings, 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);
-            });
-        },
-
-        initialContent: '<p>Lorem ipsum dolores</p>',
-    };
+    ['tinymce', 'ckeditor', 'summernote'].forEach(function(type) {
+        if ($.fn.gridEditor.texts[type]) { $.fn.gridEditor.texts[type].bundled = true; }
+    });
 })(jQuery);