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

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';

package/src/js/plugins/grideditor.tabs.js

@@ -7,6 +7,12 @@
  *
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.tabs.min.js"></script>
+ *
+ * A container's variant - its style, width, alignment and whether it is laid
+ * out vertically, from a breakpoint up - is Bootstrap's classes on its strip
+ * and on itself, and nothing else: it is read from the markup, chosen in the
+ * container's settings panel, or given to createContainer and the tabs
+ * setting for the ones made new.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';
@@ -16,14 +22,287 @@ Object.assign(GridEditor.locales.en, {
     'container.add_tab': 'Add tab',
     'container.tab_label': 'Tab {number}',
     'confirm.delete_tab': 'Delete this tab and everything in it?',
+    'container.tabs_section': 'Tabs',
+    'container.tabs_style': 'Style',
+    'container.tabs_style_tabs': 'Tabs',
+    'container.tabs_style_pills': 'Pills',
+    'container.tabs_style_underline': 'Underline',
+    'container.tabs_width': 'Width',
+    'container.tabs_width_natural': 'Natural',
+    'container.tabs_width_fill': 'Fill',
+    'container.tabs_width_justified': 'Justified',
+    'container.tabs_align': 'Alignment',
+    'container.tabs_align_start': 'Start',
+    'container.tabs_align_center': 'Center',
+    'container.tabs_align_end': 'End',
+    'container.tabs_layout': 'Layout',
+    'container.tabs_layout_horizontal': 'Horizontal',
+    'container.tabs_layout_vertical': 'Vertical',
+    'container.tabs_layout_vertical_from': 'Vertical from {breakpoint}',
 });
 
+/** Each variant's values, the first its default, and the class each puts on the strip. */
+var STYLES = { tabs: 'nav-tabs', pills: 'nav-pills', underline: 'nav-underline' };
+var WIDTHS = { natural: null, fill: 'nav-fill', justified: 'nav-justified' };
+var ALIGNS = { start: null, center: 'justify-content-center', end: 'justify-content-end' };
+var DEFAULTS = { variant: 'tabs', width: 'natural', align: 'start', vertical: false };
+
+/** Each variant's select in the panel: its label, and its choices'. */
+var FIELDS = {
+    variant: { labelKey: 'container.tabs_style', choices: [
+        { value: 'tabs', labelKey: 'container.tabs_style_tabs' },
+        { value: 'pills', labelKey: 'container.tabs_style_pills' },
+        { value: 'underline', labelKey: 'container.tabs_style_underline' },
+    ] },
+    width: { labelKey: 'container.tabs_width', choices: [
+        { value: 'natural', labelKey: 'container.tabs_width_natural' },
+        { value: 'fill', labelKey: 'container.tabs_width_fill' },
+        { value: 'justified', labelKey: 'container.tabs_width_justified' },
+    ] },
+    align: { labelKey: 'container.tabs_align', choices: [
+        { value: 'start', labelKey: 'container.tabs_align_start' },
+        { value: 'center', labelKey: 'container.tabs_align_center' },
+        { value: 'end', labelKey: 'container.tabs_align_end' },
+    ] },
+    vertical: { labelKey: 'container.tabs_layout' },
+};
+
+var fieldCounter = 0;
+
+/** Where the layout marks what the view being edited lays the tabs out as. */
+var LAYOUT_ATTR = 'data-ge-tabs-layout';
+
+function classValues(map) {
+    return Object.keys(map).map(function(key) { return map[key]; }).filter(Boolean);
+}
+
 GridEditor.containers.tabs = function(ge) {
 
+    var sections = []; // { container, render } for every panel section built
+
+    /** The strip: the container's first .nav, whatever its style. */
+    function stripOf(container) {
+        return dom.child(container, '.nav');
+    }
+
+    /** The breakpoints a layout can go vertical from; xs is always. */
+    function fromBreakpoints() {
+        return ge.breakpoints.slice(1);
+    }
+
+    /** The infix of a vertical layout's classes: none for always. */
+    function infix(vertical) {
+        return vertical === true ? '' : '-' + vertical;
+    }
+
+    function verticalClasses(vertical) {
+        var at = infix(vertical);
+
+        return {
+            container: ['d' + at + '-flex', 'align-items' + at + '-start'],
+            strip: ['flex' + at + '-column', 'me' + at + '-3'],
+        };
+    }
+
+    /** Every vertical value: always, and from each breakpoint. */
+    function verticals() {
+        return [true].concat(fromBreakpoints());
+    }
+
+    /**
+     * What a container's classes say it is. Vertical is read only when the
+     * container's flex and the strip's column are of the same breakpoint;
+     * anything else is horizontal, and is left as it is.
+     */
+    function read(container) {
+        var strip = stripOf(container);
+        var has = function(node, name) { return !!node && dom.hasClass(node, name); };
+        var found = function(map, fallback) {
+            return Object.keys(map).filter(function(key) { return map[key] && has(strip, map[key]); })[0] || fallback;
+        };
+
+        var vertical = verticals().filter(function(each) {
+            var classes = verticalClasses(each);
+            return has(container, classes.container[0]) && has(strip, classes.strip[0]);
+        })[0];
+
+        return {
+            variant: found(STYLES, 'tabs'),
+            width: found(WIDTHS, 'natural'),
+            align: found(ALIGNS, 'start'),
+            vertical: vertical === undefined ? false : vertical,
+        };
+    }
+
+    /**
+     * Write one variant, and take off what it makes meaningless: a vertical
+     * layout has no width or alignment, and a full width no alignment.
+     * Choosing a layout clears every layout class, at any breakpoint, the
+     * user's own included.
+     */
+    function write(container, key, value) {
+        var strip = stripOf(container);
+        if (!strip) { return; }
+
+        if (key === 'variant') {
+            dom.removeClass(strip, classValues(STYLES).join(' '));
+            dom.addClass(strip, STYLES[value]);
+        }
+
+        if (key === 'width' || key === 'vertical') {
+            dom.removeClass(strip, classValues(WIDTHS).join(' '));
+            if (key === 'width' && WIDTHS[value]) { dom.addClass(strip, WIDTHS[value]); }
+        }
+
+        if (key === 'align' || key === 'vertical' || (key === 'width' && value !== 'natural')) {
+            dom.removeClass(strip, classValues(ALIGNS).join(' '));
+            if (key === 'align' && ALIGNS[value]) { dom.addClass(strip, ALIGNS[value]); }
+        }
+
+        if (key === 'vertical') {
+            verticals().forEach(function(each) {
+                var classes = verticalClasses(each);
+                dom.removeClass(container, classes.container.join(' '));
+                dom.removeClass(strip, classes.strip.join(' '));
+            });
+            strip.removeAttribute('aria-orientation');
+
+            if (value !== false) {
+                var layout = verticalClasses(value);
+                dom.addClass(container, layout.container.join(' '));
+                dom.addClass(strip, layout.strip.join(' '));
+                strip.setAttribute('aria-orientation', 'vertical');
+            }
+        }
+
+        dom.dropEmptyClass(container);
+    }
+
+    /** The values a variant takes, as the warning lists them. */
+    function valuesOf(key) {
+        if (key === 'variant') { return Object.keys(STYLES); }
+        if (key === 'width') { return Object.keys(WIDTHS); }
+        if (key === 'align') { return Object.keys(ALIGNS); }
+
+        return [false].concat(verticals());
+    }
+
+    /**
+     * A variant for a new container: the option, or the tabs setting, or the
+     * default. A value it does not take is warned about and the default used.
+     */
+    function chosen(options, key) {
+        var setting = ge.settings.tabs || {};
+        var value = options[key] !== undefined ? options[key] : setting[key];
+
+        if (value === undefined) { return DEFAULTS[key]; }
+        if (valuesOf(key).indexOf(value) !== -1) { return value; }
+
+        ge.warn('tabs: ' + JSON.stringify(value) + ' is not a ' + key + ', which takes ' +
+            JSON.stringify(valuesOf(key)) + ': ' + JSON.stringify(DEFAULTS[key]) + ' is used');
+        return DEFAULTS[key];
+    }
+
+    /**
+     * What the view being edited lays a container out as. A breakpoint view
+     * narrows the canvas, not the window, and Bootstrap's classes answer to
+     * the window: so the view says it, from the breakpoint the container
+     * goes vertical at. The all view shows what the window gives.
+     */
+    function layoutHere(container) {
+        var vertical = read(container).vertical;
+        if (vertical === false) { return null; }
+
+        if (ge.view() === 'all') {
+            container.removeAttribute(LAYOUT_ATTR);
+            return /flex$/.test(getComputedStyle(container).display) ? 'vertical' : 'horizontal';
+        }
+        if (vertical === true) { return 'vertical'; }
+
+        return ge.breakpoints.indexOf(ge.view()) >= ge.breakpoints.indexOf(vertical) ? 'vertical' : 'horizontal';
+    }
+
+    function markLayout(container) {
+        var layout = layoutHere(container);
+
+        if (layout) {
+            container.setAttribute(LAYOUT_ATTR, layout);
+        } else {
+            container.removeAttribute(LAYOUT_ATTR);
+        }
+    }
+
+    function select(labelKey, options, onChange) {
+        var box = dom.element('div', { 'class': 'ge-tabs-variant' });
+        var id = 'ge-tabs-variant-' + (++fieldCounter);
+
+        box.appendChild(dom.element('label', { 'class': 'form-label', 'for': id }, ge.t(labelKey)));
+        var field = box.appendChild(dom.element('select', { 'class': 'form-select form-select-sm', id: id }));
+
+        options.forEach(function(option) {
+            field.appendChild(dom.element('option', { value: option.value }, option.label));
+        });
+        field.addEventListener('change', function() { onChange(field.value); });
+
+        return { box: box, field: field };
+    }
+
+    /** The Tabs section of a tabs container's settings panel: a select per variant. */
+    function createSection(container) {
+        var body = dom.element('div', { 'class': 'ge-tabs-variants' });
+        var fields = {};
+
+        function change(key, value) {
+            write(container, key, value);
+            markLayout(container);
+            render();
+        }
+
+        function options(key) {
+            return FIELDS[key].choices.map(function(choice) {
+                return { value: choice.value, label: ge.t(choice.labelKey) };
+            });
+        }
+
+        ['variant', 'width', 'align'].forEach(function(key) {
+            fields[key] = select(FIELDS[key].labelKey, options(key), function(value) { change(key, value); });
+        });
+        fields.vertical = select(FIELDS.vertical.labelKey, [
+            { value: 'false', label: ge.t('container.tabs_layout_horizontal') },
+            { value: 'true', label: ge.t('container.tabs_layout_vertical') },
+        ].concat(fromBreakpoints().map(function(key) {
+            return { value: key, label: ge.t('container.tabs_layout_vertical_from', { breakpoint: key }) };
+        })), function(value) {
+            change('vertical', value === 'true' ? true : value === 'false' ? false : value);
+        });
+
+        ['variant', 'width', 'align', 'vertical'].forEach(function(key) {
+            fields[key].box.setAttribute('data-ge-tabs-variant', key);
+            body.appendChild(fields[key].box);
+        });
+
+        /** Fill the selects from the classes, and turn off what does not apply. */
+        function render() {
+            var values = read(container);
+
+            fields.variant.field.value = values.variant;
+            fields.width.field.value = values.width;
+            fields.align.field.value = values.align;
+            fields.vertical.field.value = String(values.vertical);
+            fields.width.field.disabled = values.vertical !== false;
+            fields.align.field.disabled = values.vertical !== false || values.width !== 'natural';
+        }
+
+        render();
+        sections.push({ container: container, element: body, render: render });
+
+        return body;
+    }
+
     function addTabTo(container, options) {
         options = options || {};
 
-        var strip = dom.one(container, ':scope > .nav-tabs');
+        var strip = stripOf(container);
         var content = dom.one(container, ':scope > .tab-content');
         var id = ge.containerId('tab');
         var number = dom.children(strip, '.nav-item').length + 1;
@@ -61,7 +340,7 @@ GridEditor.containers.tabs = function(ge) {
         });
         dom.addClass(pane, 'show active');
 
-        dom.all(container, ':scope > .nav-tabs .nav-link').forEach(function(button) {
+        dom.all(stripOf(container) || container, '.nav-link').forEach(function(button) {
             var active = button.getAttribute('data-bs-target') === '#' + id;
 
             dom.toggleClass(button, 'active', active);
@@ -82,7 +361,7 @@ GridEditor.containers.tabs = function(ge) {
         // A tab strip sorts its own tabs, and the panes follow them. No
         // group: a tab belongs to the strip it was made in.
         onSortable: function(sortable) {
-            sortable(dom.all(ge.canvas, '.ge-container-tabs > .nav-tabs'), {
+            sortable(dom.all(ge.canvas, '.ge-container-tabs').map(stripOf).filter(Boolean), {
                 draggable: '.ge-tab',
             });
         },
@@ -97,6 +376,11 @@ GridEditor.containers.tabs = function(ge) {
             container.appendChild(dom.element('ul', { 'class': 'nav nav-tabs', role: 'tablist' }));
             container.appendChild(dom.element('div', { 'class': 'tab-content' }));
 
+            // The layout last: it takes off what a vertical strip has no use for
+            ['variant', 'width', 'align', 'vertical'].forEach(function(key) {
+                write(container, key, chosen(options, key));
+            });
+
             for (var i = 0; i < count; i++) {
                 addTabTo(container, { label: labels[i] });
             }
@@ -111,7 +395,7 @@ GridEditor.containers.tabs = function(ge) {
                 dom.addClass(pane, 'ge-tab-pane');
             });
 
-            dom.all(container, ':scope > .nav-tabs > .nav-item').forEach(function(tab) {
+            dom.children(stripOf(container) || container, '.nav-item').forEach(function(tab) {
                 dom.addClass(tab, 'ge-tab');
 
                 var link = dom.one(tab, '.nav-link');
@@ -137,17 +421,39 @@ GridEditor.containers.tabs = function(ge) {
 
         unmark: function(container) {
             ge.resumeToggles(container);
+            container.removeAttribute(LAYOUT_ATTR);
             dom.all(container, '.ge-tab-pane').forEach(function(pane) {
                 dom.removeClass(pane, 'ge-tab-pane');
             });
             ge.unwrapLabels(container);
         },
 
+        panelSection: function(node, kind) {
+            if (kind !== 'tabs' || !stripOf(node)) { return null; }
+
+            return { labelKey: 'container.tabs_section', body: createSection(node) };
+        },
+
+        // After a view change or a change of classes: the layout marks and the
+        // sections follow
+        onRefresh: function(scope) {
+            dom.selfAndAll(scope, '[data-ge-container="tabs"]').forEach(markLayout);
+
+            sections = sections.filter(function(entry) { return entry.element.isConnected; });
+            sections.forEach(function(entry) {
+                if (entry.container === scope || scope.contains(entry.container)) { entry.render(); }
+            });
+        },
+
+        onDeinit: function() {
+            sections = [];
+        },
+
         /** Panes read in tab order, whatever order they were dropped in. */
         afterPaneMove: function(container) {
             var content = dom.one(container, ':scope > .tab-content');
 
-            dom.all(container, ':scope > .nav-tabs > .nav-item').forEach(function(tab) {
+            dom.children(stripOf(container) || container, '.nav-item').forEach(function(tab) {
                 var pane = paneOf(container, tab);
                 if (pane) { content.appendChild(pane); }
             });