@themarioga/grid-editor 7.3.0 → 8.0.0-beta.2

package/src/js/dom.js

@@ -314,8 +314,7 @@ export function fire(node, type) {
 /* ------------------------------------------------------------------
  * Taking a node away, visibly.
  *
- * The durations are the ones 6.x had through jQuery: 400 ms unless the
- * caller says otherwise. `done` runs once the node is out of sight, which is
+ * The durations are jQuery's: 400 ms unless the caller says otherwise. `done` runs once the node is out of sight, which is
  * when the caller removes it; a node that is already out of sight is done at
  * once, on the next task, as jQuery had it.
  * ------------------------------------------------------------------ */

package/src/js/grideditor.jquery.js

@@ -1,20 +1,18 @@
 /**
- * The jQuery API of grid-editor 6, on top of the 7.0 editor.
+ * The jQuery API of grid-editor 6, on top of the plain DOM editor.
  *
- * grid-editor is plain DOM since 7.0. A page written for 6.x - one that
- * calls $(el).gridEditor(...), listens with $(el).on('grideditor:...') and
- * reads jQuery objects out of the payloads - loads jQuery 4 and this file
- * after grideditor.js, and runs unchanged:
+ * A page written for 6.x - one that calls $(el).gridEditor(...), listens
+ * with $(el).on('grideditor:...') and reads jQuery objects out of the
+ * payloads - loads jQuery 4 and this file after grideditor.js, and runs
+ * unchanged:
  *
  *   <script src="jquery.min.js"></script>
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/grideditor.jquery.min.js"></script>
  *   <script src="dist/plugins/grideditor.tabs.min.js"></script>
  *
- * What it keeps is the host's side of 6.x. Plugins are not: a plugin
- * written for 6.x registered on $.fn.gridEditor.containers, .features,
- * .utilities or .texts, and is warned about and left out, since the plugin
- * contract hands out elements now. UPGRADING.md says how to port one.
+ * What it keeps is the host's side of 6.x. Plugins are not: they register
+ * on GridEditor, and the plugin contract hands out elements.
  *
  * Every value 6.x gave host code as a jQuery object is one again: the event
  * payloads and the callbacks' arguments, what the create* methods return,
@@ -250,15 +248,6 @@ function install() {
         };
     });
 
-    /** Plugins registered the 6.x way: said once each, and never called. */
-    function warnAboutLegacyPlugins() {
-        ['containers', 'features', 'utilities', 'texts'].forEach(function(registry) {
-            Object.keys(legacy[registry]).forEach(function(name) {
-                warnOnce('plugin-6x:' + registry + ':' + name, english('warning.plugin_6x', { name: name }));
-            });
-        });
-    }
-
     function dispatchMethod(set, name, args) {
         var descriptor = METHODS[name];
 
@@ -300,8 +289,6 @@ function install() {
             return dispatchMethod(this, optionsOrMethod, Array.prototype.slice.call(arguments, 1));
         }
 
-        warnAboutLegacyPlugins();
-
         var options = adaptOptions(optionsOrMethod);
 
         this.each(function() {
@@ -311,14 +298,6 @@ function install() {
         return this;
     };
 
-    // Where a 6.x plugin registers. Kept, so one does not throw as it
-    // loads, and read only to say it is not used.
-    var legacy = { containers: {}, features: {}, utilities: {}, texts: {} };
-    $.fn.gridEditor.containers = legacy.containers;
-    $.fn.gridEditor.features = legacy.features;
-    $.fn.gridEditor.utilities = legacy.utilities;
-    $.fn.gridEditor.texts = legacy.texts;
-
     // Strings are the same thing in both: a 6.x locale file loads unchanged
     $.fn.gridEditor.locales = GridEditor.locales;
     $.fn.gridEditor.t = GridEditor.t;

package/src/js/grideditor.js

@@ -4,9 +4,8 @@
  * A fork of https://github.com/Friendly-Pixel/grid-editor by Simon Epskamp,
  * maintained at https://github.com/themarioga/grid-editor.
  *
- * Plain DOM since 7.0: nothing here needs jQuery. A page written for the 6.x
- * jQuery API loads grideditor.jquery.js beside this file and keeps working;
- * see UPGRADING.md.
+ * Plain DOM: nothing here needs jQuery. A page written against the jQuery
+ * API loads grideditor.jquery.js beside this file.
  */
 import * as dom from './dom.js';
 
@@ -73,8 +72,6 @@ var ALL_VIEW_LABEL_KEY = 'view.all';
 /** Every view key the dropdown can offer, in the order it offers them. */
 var VIEW_KEYS = [ALL_VIEW].concat(BREAKPOINTS.map(function(tier) { return tier.key; }));
 
-/** What the three layout mode indexes of 2.x meant. */
-var LEGACY_VIEW_INDEXES = ['lg', 'sm', 'xs'];
 
 var MAX_COL_SIZE = 12;
 var MAX_COL_OFFSET = 11;
@@ -158,12 +155,6 @@ var NESTED_SETTINGS = {
     },
 };
 
-/** Settings 4.0 took away, and what a host should reach for instead. */
-var REMOVED_SETTINGS = {
-    sortable_options: 'drag',
-    resizable_options: 'resize',
-};
-
 var warned = {};
 
 /** Editors on the page, counted so each one's sortable groups are its own. */
@@ -372,7 +363,7 @@ function build(instance, baseElem, optionsOrMethod) {
             'element_tools'     : [], // Host tools on element drawers, same shape as row_tools
             'element_classes'   : [], // Preset class toggles on an element's settings panel
             // content_types, text_tools and text_classes are the text editor
-            // plugins' settings since 6.0: see grideditor.text.js
+            // plugins' settings: see grideditor.text.js
             '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
@@ -405,18 +396,6 @@ function build(instance, baseElem, optionsOrMethod) {
             settings[name] = Object.assign({}, NESTED_SETTINGS[name], settings[name]);
         });
 
-        // Both handed out the drag toolkit's own options, which 4.0 stops
-        // promising: there is no widget underneath a host should be reaching
-        // for. What they were used for is a setting of the editor's now.
-        Object.keys(REMOVED_SETTINGS).forEach(function(name) {
-            if (optionsOrMethod && optionsOrMethod[name] !== undefined) {
-                warn(translate(settings, 'warning.setting_removed', {
-                    setting: name,
-                    replacement: REMOVED_SETTINGS[name],
-                }));
-            }
-        });
-
 
         // Elems
         var canvas,
@@ -432,7 +411,7 @@ function build(instance, baseElem, optionsOrMethod) {
         var sizePicker = null; // The open column size picker, if there is one
         var sourceOpen = false; // Whether the canvas is being edited as html
         var dropMarker = null; // The line showing where a dragged toolbar button would land
-        var warnedHere = {}; // Deprecations are worth saying once per instance, not once per call
+        var warnedHere = {}; // Some warnings are worth saying once per instance, not once per call
         var sortables = []; // Every list made sortable, so deinit destroys exactly those
         var instanceId = ++editorCounter; // Scopes the sortable groups to this editor
         var destroyed = false;
@@ -1866,35 +1845,8 @@ function build(instance, baseElem, optionsOrMethod) {
 
             registerFamily('grid', {}, widthFamily());
             if (settings.row_cols !== false) { registerFamily('grid', {}, rowColsFamily()); }
-            // A plugin whose factory says it `replaces` others has taken
-            // their place: an old name in the plugins setting asks for it,
-            // and the old plugin, loaded beside it, stands down
-            var replacedBy = {};
-            [GridEditor.containers, GridEditor.features, GridEditor.utilities].forEach(function(registry) {
-                Object.keys(registry).forEach(function(name) {
-                    (registry[name].replaces || []).forEach(function(old) {
-                        if (!replacedBy[old]) { replacedBy[old] = name; }
-                    });
-                });
-            });
-            var named = function(name) {
-                return !settings.plugins || settings.plugins.indexOf(name) !== -1;
-            };
-            var namedAsOld = function(name) {
-                return !!settings.plugins && settings.plugins.some(function(old) { return replacedBy[old] === name; });
-            };
-            var standsDown = function(name) {
-                return !!replacedBy[name] && wanted(replacedBy[name]);
-            };
             var wanted = function(name) {
-                return !standsDown(name) && (named(name) || namedAsOld(name));
-            };
-            var replaced = function(name) {
-                if (!standsDown(name) || !named(name)) { return false; }
-
-                warnOnceHere('replaced:' + name, 'the "' + name + '" plugin is part of "' + replacedBy[name] +
-                    '", which is loaded: ignoring it');
-                return true;
+                return !settings.plugins || settings.plugins.indexOf(name) !== -1;
             };
 
             // What the plugins setting does not choose: the text editors,
@@ -1905,16 +1857,16 @@ function build(instance, baseElem, optionsOrMethod) {
             };
 
             Object.keys(GridEditor.containers).forEach(function(type) {
-                if (!replaced(type) && wanted(type)) { CONTAINERS[type] = GridEditor.containers[type](api); }
+                if (wanted(type)) { CONTAINERS[type] = GridEditor.containers[type](api); }
             });
 
             Object.keys(GridEditor.features).forEach(function(name) {
                 var factory = GridEditor.features[name];
-                if (!replaced(name) && featureWanted(name, factory)) { FEATURES[name] = factory(api); }
+                if (featureWanted(name, factory)) { FEATURES[name] = factory(api); }
             });
 
             Object.keys(GridEditor.utilities).forEach(function(name) {
-                if (replaced(name) || !wanted(name)) { return; }
+                if (!wanted(name)) { return; }
 
                 UTILITIES[name] = GridEditor.utilities[name](api);
                 (UTILITIES[name].families || []).forEach(function(family) {
@@ -1932,12 +1884,6 @@ function build(instance, baseElem, optionsOrMethod) {
             (settings.plugins || []).forEach(function(name) {
                 if (CONTAINERS[name] || FEATURES[name] || UTILITIES[name]) { return; }
 
-                if (standsDown(name)) {
-                    warnOnceHere('renamed:' + name, 'the "' + name + '" plugin is part of "' + replacedBy[name] +
-                        '" now: name "' + replacedBy[name] + '" in the plugins setting instead');
-                    return;
-                }
-
                 warnOnceHere('plugin:' + name, 'the "' + name + '" plugin is not loaded: ' +
                     'include dist/plugins/grideditor.' + name + '.js after the editor');
             });
@@ -3295,8 +3241,7 @@ function build(instance, baseElem, optionsOrMethod) {
                 refreshUtilities(container);
             });
 
-            // Bootstrap 5's outline buttons, filled while their class is on;
-            // up to 5.x they carried Bootstrap 3's btn-default, which 5 lacks
+            // Bootstrap's outline buttons, filled while their class is on
             var classGroup = general.appendChild(dom.element('div', { 'class': 'btn-group btn-group-sm ge-presets', role: 'group' }));
             cssClasses.forEach(function(rowClass) {
                 var on = dom.hasClass(container, rowClass.cssClass);
@@ -3307,7 +3252,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     'aria-pressed': on ? 'true' : 'false',
                 });
 
-                // A preset's label is the host's markup, as it was in 6.x
+                // A preset's label is the host's markup
                 btn.innerHTML = rowClass.label;
                 dom.toggleClass(btn, 'active', on);
                 btn.addEventListener('click', function() {
@@ -5139,20 +5084,8 @@ function build(instance, baseElem, optionsOrMethod) {
             dom.one(layoutDropdown, 'button').textContent = t(labelKeyFor(view));
         }
 
-        /**
-         * The view key a caller asked for, or null. 2.x callers passed a
-         * layout mode index, which still works and says so once.
-         */
+        /** The view key a caller asked for, or null. */
         function viewKey(view) {
-            if (typeof view == 'number') {
-                warnOnceHere('changeView-index', 'changeView(' + view + '): layout modes are ' +
-                    'identified by breakpoint key now, so pass one of ' +
-                    JSON.stringify(VIEW_KEYS) + '. Numeric indexes still work, ' +
-                    'but they mean what they meant in 2.x (' +
-                    LEGACY_VIEW_INDEXES.join(', ') + ') and will be dropped.');
-                return LEGACY_VIEW_INDEXES[view] || null;
-            }
-
             return VIEW_KEYS.indexOf(view) === -1 ? null : view;
         }
 
@@ -5409,14 +5342,12 @@ GridEditor.locales = {
         'utility.inherit': 'Inherit: {value} (from {breakpoint})',
         'utility.varies': 'Changes at {breakpoints}; choosing here replaces that',
         'error.sortable_missing': 'SortableJS not available! Make sure you loaded the Sortable js file; dragging is off without it.',
-        'warning.setting_removed': 'The {setting} setting was removed in 4.0. Use {replacement} instead.',
         'warning.already_editing': 'This element already has an editor: that one is handed back, with the options it was made with.',
         'warning.destroyed': '{method}() was called on an editor that has been destroyed, and does nothing.',
         'warning.duplicate_build': 'grideditor.js was loaded twice: the first GridEditor is kept.',
-        'warning.plugin_6x': 'The "{name}" plugin is written for grid-editor 6 and is not loaded. Plugins register on GridEditor since 7.0: see UPGRADING.md.',
         'warning.adapter_no_jquery': 'grideditor.jquery.js needs jQuery 4, and there is no jQuery on the page: the jQuery API is not there.',
         'error.tinymce_missing': 'tinyMCE not available! Make sure you loaded the tinyMCE js file.',
-        'error.ckeditor_missing': 'CKEditor 5 not available! Make sure you loaded its ckeditor5.umd.js file: CKEditor 4 is no longer supported.',
+        'error.ckeditor_missing': 'CKEditor 5 not available! Make sure you loaded its ckeditor5.umd.js file.',
         'error.summernote_missing': 'Summernote not available! Make sure you loaded jQuery and the Summernote js file.',
     },
 };

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

@@ -124,9 +124,8 @@ GridEditor.locales.es = {
     'utility.default': 'Por defecto',
     'utility.inherit': 'Hereda: {value} (de {breakpoint})',
     'utility.varies': 'Cambia en {breakpoints}; elegir aquí lo sustituye',
-    'utility.visibility': 'Visibilidad',
+    'utility.display': 'Display',
     'utility.visibility_hidden': 'Oculto',
-    'utility.visibility_shown': 'Visible',
     'tool.hide_in_view': 'Ocultar en esta vista',
     'tool.show_in_view': 'Mostrar en esta vista',
     'badge.hidden_in': 'Oculto en {breakpoints}',
@@ -138,6 +137,16 @@ GridEditor.locales.es = {
     'badge.order': 'Orden: {value}',
     'utility.justify_content': 'Justificar columnas',
     'utility.align_items': 'Alinear columnas',
+    'utility.align_content': 'Alinear líneas',
+    'utility.flex_direction': 'Dirección',
+    'utility.flex_wrap': 'Salto de línea',
+    'utility.gap': 'Separación',
+    'utility.row_gap': 'Separación entre filas',
+    'utility.column_gap': 'Separación entre columnas',
+    'utility.flex_fill': 'Rellenar',
+    'utility.flex_grow': 'Crecer',
+    'utility.flex_shrink': 'Encoger',
+    'utility.sticky': 'Fijo al desplazar',
     'utility.align_self': 'Alinearse',
     'utility.gutters': 'Espaciado entre columnas',
     'utility.gutters_x': 'Espaciado horizontal',
@@ -169,6 +178,7 @@ GridEditor.locales.es = {
     'style.section_text': 'Texto',
     'style.section_typography': 'Tipografía',
     'style.section_display': 'Visualización',
+    'style.section_flex': 'Flex',
     'style.section_position': 'Posición',
     'style.section_custom': 'CSS libre',
     'style.all_sizes': 'Se aplica a todos los tamaños',
@@ -228,15 +238,12 @@ GridEditor.locales.es = {
     'style.prop_left': 'Izquierda',
     'style.prop_z_index': 'Z-index',
     'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
-    'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
     'warning.already_editing': 'Este elemento ya tiene un editor: se devuelve ese, con las opciones con las que se creó.',
     'warning.destroyed': 'Se ha llamado a {method}() en un editor destruido, y no hace nada.',
     'warning.duplicate_build': 'grideditor.js se ha cargado dos veces: se mantiene el primer GridEditor.',
-    'warning.plugin_6x': 'El plugin "{name}" está escrito para grid-editor 6 y no se carga. Desde la 7.0 los plugins se registran en GridEditor: consulta UPGRADING.md.',
     'warning.adapter_no_jquery': 'grideditor.jquery.js necesita jQuery 4 y la página no tiene jQuery: la API de jQuery no está disponible.',
-    'warning.oninit_removed': 'La opción oninit de tinyMCE se eliminó en la 7.0 y se ignora: usa init_instance_callback.',
     'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
-    'error.ckeditor_missing': '¡CKEditor 5 no está disponible! Asegúrate de haber cargado su archivo ckeditor5.umd.js: CKEditor 4 ya no está soportado.',
+    'error.ckeditor_missing': '¡CKEditor 5 no está disponible! Asegúrate de haber cargado su archivo ckeditor5.umd.js.',
     'error.ckeditor_start': 'CKEditor no ha podido arrancar: {message}',
     'warning.ckeditor_plugin': 'CKEditor no tiene ningún plugin llamado {name}, así que se deja fuera.',
     'error.codemirror_missing': '¡CodeMirror no está disponible! Asegúrate de haber cargado el archivo js de CodeMirror; sin él el código se edita en un textarea normal.',

package/src/js/plugins/grideditor.alignment.js

@@ -1,23 +1,24 @@
 /**
  * Alignment for grid-editor.
  *
- * A utility plugin: load this file after the editor and a row's columns can be
- * justified and aligned per breakpoint, and a column can align itself, with
- * Bootstrap's justify-content-{breakpoint}-*, align-items-{breakpoint}-* and
- * align-self-{breakpoint}-* classes. What it can ask the editor for is the
- * handle its factory is called with, described in docs/plugins.md.
+ * A utility plugin: load this file after the editor and a column can align
+ * itself in its row, per breakpoint, with Bootstrap's align-self-{breakpoint}-*
+ * classes. What it can ask the editor for is the handle its factory is called
+ * with, described in docs/plugins.md.
  *
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.alignment.min.js"></script>
  *
- * Fields only, in the settings panels: alignment is set now and then, not
+ * How a row justifies and aligns its columns - justify-content-* and
+ * align-items-* - is a flex container's, and the style plugin's Flex section
+ * edits it, on a row and on anything else made flex.
+ *
+ * A field only, in the settings panel: alignment is set now and then, not
  * clicked through, and a drawer is short of room.
  */
 import { GridEditor } from '../grideditor.js';
 
 Object.assign(GridEditor.locales.en, {
-    'utility.justify_content': 'Justify columns',
-    'utility.align_items': 'Align columns',
     'utility.align_self': 'Align self',
 });
 
@@ -26,54 +27,24 @@ var FLEX = {
     start: 'flex-start',
     end: 'flex-end',
     center: 'center',
-    between: 'space-between',
-    around: 'space-around',
-    evenly: 'space-evenly',
     baseline: 'baseline',
     stretch: 'stretch',
     auto: 'auto',
 };
 
-/**
- * A family whose preview is its one css property. `none` is what the
- * property is when no class says anything, which a view has to show over a
- * wider breakpoint's class that is live in a wide window.
- */
-function family(definition) {
-    return Object.assign({
-        prefix: definition.name,
-        preview: function(value) {
-            var styles = {};
-            styles[definition.name] = value === null ? definition.none : FLEX[value];
-            return styles;
-        },
-    }, definition);
-}
-
 GridEditor.utilities.alignment = function() {
     return {
-        families: [
-            family({
-                name: 'justify-content',
-                labelKey: 'utility.justify_content',
-                values: ['start', 'center', 'end', 'between', 'around', 'evenly'],
-                appliesTo: ['row'],
-                none: 'normal',
-            }),
-            family({
-                name: 'align-items',
-                labelKey: 'utility.align_items',
-                values: ['start', 'center', 'end', 'baseline', 'stretch'],
-                appliesTo: ['row'],
-                none: 'normal',
-            }),
-            family({
-                name: 'align-self',
-                labelKey: 'utility.align_self',
-                values: ['auto', 'start', 'center', 'end', 'baseline', 'stretch'],
-                appliesTo: ['column'],
-                none: 'auto',
-            }),
-        ],
+        families: [{
+            name: 'align-self',
+            prefix: 'align-self',
+            labelKey: 'utility.align_self',
+            values: ['auto', 'start', 'center', 'end', 'baseline', 'stretch'],
+            appliesTo: ['column'],
+
+            /** Without a class, auto: what the row's align-items says. */
+            preview: function(value) {
+                return { 'align-self': value === null ? 'auto' : FLEX[value] };
+            },
+        }],
     };
 };

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

@@ -11,15 +11,13 @@
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
  *
- * Up to 7.1 this was CKEditor 4, whose last open source release has known
- * vulnerabilities and no fixes to come. CKEditor 5 asks for a licenseKey:
- * 'GPL', or a commercial key, is the host's to pass in ckeditor.config.
+ * CKEditor 5 asks for a license key, GPL or a commercial one, which is the
+ * host's to pass in ckeditor.config.
  *
- * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
- * loaded on its own, like every plugin. It imports what every text editor
- * shares - text blocks, the Text button, createText, making the host's plain
- * content a text - from src/js/text/grideditor.text.js, which the build puts
- * in its classic script, installed once however many editors a page loads.
+ * It imports what every text editor shares - text blocks, the Text button,
+ * createText, making the host's plain content a text - from
+ * src/js/text/grideditor.text.js, which the build puts in its classic
+ * script, installed once however many editors a page loads.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';
@@ -34,8 +32,8 @@ Object.assign(GridEditor.locales.en, {
 var INITIAL_CONTENT = '<p>Lorem initius... </p>';
 
 // What CKEditor 5 is started with when the host's config does not say. It
-// has no plugins of its own, so these are what a text can do: much what the
-// CKEditor 4 build 7.1 used offered. Names, looked up on window.CKEDITOR.
+// has no plugins of its own, so these are what a text can do. Names, looked
+// up on window.CKEDITOR.
 var PLUGINS = [
     'Essentials', 'Autoformat', 'Paragraph', 'Heading', 'Bold', 'Italic', 'Underline', 'Strikethrough',
     'Link', 'AutoLink', 'List', 'BlockQuote', 'Indent', 'HorizontalLine', 'Table', 'TableToolbar',
@@ -122,9 +120,6 @@ GridEditor.texts.ckeditor = function(ge) {
 
                 var configuration = Object.assign({}, DEFAULTS, userConfig);
                 configuration.plugins = pluginsFor(ge, userConfig.plugins || PLUGINS);
-                // on.instanceReady is CKEditor 4's, and CKEditor 5 has no
-                // such option: this file calls it, as it did in 7.1
-                delete configuration.on;
 
                 var ticket = {};
                 starting.set(contentArea, ticket);
@@ -144,13 +139,6 @@ GridEditor.texts.ckeditor = function(ge) {
                     starting.delete(contentArea);
                     editors.set(contentArea, editor);
 
-                    // Call the original instanceReady function, if one was
-                    // passed in the config: 7.1's, with CKEditor 4's event
-                    var callback = userConfig.on && userConfig.on.instanceReady;
-                    if (callback) {
-                        callback.call(editor, { editor: editor });
-                    }
-
                     // The editor owns what is inside the content area now,
                     // so the grid editor is told to put its own furniture back
                     ge.textReady(contentArea);
@@ -173,9 +161,8 @@ GridEditor.texts.ckeditor = function(ge) {
             contentAreas.filter(function(contentArea) {
                 return dom.hasClass(contentArea, 'active');
             }).forEach(function(contentArea) {
-                // This content area's editor, and no other: up to 5.x
-                // closing one content area destroyed every CKEditor on
-                // the page, other editors' and the host's own included
+                // This content area's editor, and no other: the other
+                // CKEditors on the page, the host's own included, stay
                 var editor = editors.get(contentArea);
                 editors.delete(contentArea);
                 // One still starting sees this and goes as it is ready

package/src/js/plugins/grideditor.style.js

@@ -4,7 +4,7 @@
  * A utility plugin: load this file after the editor and every row, column,
  * container, pane, element and section gets a Style accordion in its
  * settings panel - size, spacing, border, background, text, typography,
- * display, position and free css - written to the node's own style
+ * display, flex, position and free css - written to the node's own style
  * attribute, with Bootstrap's classes for each section as chips that put
  * them in the classes field. What it can ask the editor for is the handle
  * its factory is called with, described in docs/plugins.md.
@@ -12,23 +12,26 @@
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.style.min.js"></script>
  *
- * It carries what the spacing, textalign, visibility and float plugins
- * were up to 7.2: their per breakpoint fields are in its sections rather
- * than in Responsive, and those four files are deprecated. Loaded beside
- * it they stand down, and their names in the plugins setting ask for it.
+ * It also edits spacing, text alignment, display, flex, sticky and float,
+ * Bootstrap's responsive classes, per breakpoint in its sections. On a node
+ * that is flex or grid, the drawer leaves the flow, so the canvas lays the
+ * content out as the page will.
  *
  * Where the settings panel has no room for it - a popover, inline in the
  * drawer - the accordion opens in a dialog, from a Style button.
  *
  * style.sections chooses the sections, and in each the properties and
- * whether it has a catalog; style.spacing and style.visibility are what
- * utilities.spacing and utilities.visibility were.
+ * whether it has a catalog; style.spacing is the options of spacing, whose
+ * scale the gaps share, and style.visibility those of the eye.
  */
 import { GridEditor } from '../grideditor.js';
 import { spacingPart } from '../style/spacing.js';
 import { textalignPart } from '../style/textalign.js';
-import { visibilityPart } from '../style/visibility.js';
+import { displayPart } from '../style/display.js';
+import { flexPart } from '../style/flex.js';
 import { floatPart } from '../style/float.js';
+import { stickyPart } from '../style/sticky.js';
+import { drawerflowPart } from '../style/drawerflow.js';
 import { resolveOptions } from '../style/options.js';
 import { createAccordion } from '../style/accordion.js';
 
@@ -42,6 +45,7 @@ Object.assign(GridEditor.locales.en, {
     'style.section_text': 'Text',
     'style.section_typography': 'Typography',
     'style.section_display': 'Display',
+    'style.section_flex': 'Flex',
     'style.section_position': 'Position',
     'style.section_custom': 'Custom css',
     'style.all_sizes': 'Applies to every size',
@@ -102,7 +106,8 @@ Object.assign(GridEditor.locales.en, {
     'style.prop_z_index': 'Z-index',
 });
 
-var PARTS = ['spacing', 'textalign', 'visibility', 'float'];
+// The drawer's part last: it asks the browser how the others left the node
+var PARTS = ['spacing', 'textalign', 'display', 'flex', 'float', 'sticky', 'drawerflow'];
 
 GridEditor.utilities.style = function(ge) {
 
@@ -110,8 +115,11 @@ GridEditor.utilities.style = function(ge) {
     var parts = {
         spacing: spacingPart(ge, options.spacing),
         textalign: textalignPart(ge),
-        visibility: visibilityPart(ge, options.visibility),
+        display: displayPart(ge, options.visibility),
+        flex: flexPart(ge, options.spacing),
         float: floatPart(ge),
+        sticky: stickyPart(ge),
+        drawerflow: drawerflowPart(ge),
     };
     var accordions = []; // { node, accordion } for every panel built since the last init
     var context = {
@@ -175,5 +183,3 @@ GridEditor.utilities.style = function(ge) {
         },
     };
 };
-
-GridEditor.utilities.style.replaces = PARTS;

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

@@ -16,11 +16,10 @@
  * nothing else. Towards the editor it is plain DOM, like every plugin, and
  * it needs no jQuery adapter.
  *
- * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
- * loaded on its own, like every plugin. It imports what every text editor
- * shares - text blocks, the Text button, createText, making the host's plain
- * content a text - from src/js/text/grideditor.text.js, which the build puts
- * in its classic script, installed once however many editors a page loads.
+ * It imports what every text editor shares - text blocks, the Text button,
+ * createText, making the host's plain content a text - from
+ * src/js/text/grideditor.text.js, which the build puts in its classic
+ * script, installed once however many editors a page loads.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';