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

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); }
             });

package/src/less/grideditor.less

@@ -248,6 +248,19 @@
         flex-direction: column;
         gap: 8px;
     }
+    /* Each section's heading: the general fields, and what plugins add */
+    .ge-section-title {
+        margin: 0 0 6px;
+        color: var(--bs-body-color, #333);
+        font-size: 0.8125rem;
+        font-weight: 600;
+    }
+    /* Every section after the first, set off from the one above */
+    .ge-panel-section,
+    .ge-utilities {
+        padding-top: 10px;
+        border-top: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.1));
+    }
     .ge-field {
         display: flex;
         flex-direction: column;
@@ -270,7 +283,7 @@
         > .ge-utilities-toggle {
             display: block;
             color: var(--bs-body-color, #333);
-            font-weight: 500;
+            font-weight: 600;
             cursor: pointer;
             text-decoration: none;
 
@@ -342,9 +355,9 @@
     margin-top: 10px;
 }
 
-/* The style plugin's accordion: in a panel, or in the dialog, which is
+/* The inline-style plugin's accordion: in a panel, or in the dialog, which is
    outside any panel, so it carries the look of the fields it shares. */
-.ge-style {
+.ge-inline-style {
     font-size: 0.8125rem;
 
     .accordion-button {
@@ -359,26 +372,26 @@
         padding: 8px 10px;
     }
 
-    .ge-style-label,
+    .ge-inline-style-label,
     .ge-utility-label,
-    .ge-style-shadow-label {
+    .ge-inline-style-shadow-label {
         color: var(--bs-secondary-color, #6c757d);
         font-size: 0.75rem;
     }
-    .ge-style-note,
+    .ge-inline-style-note,
     .ge-utility-note,
     .ge-spacing-gutter {
         color: var(--bs-secondary-color, #666);
         font-size: 0.6875rem;
     }
 
-    .ge-style-fields,
+    .ge-inline-style-fields,
     .ge-spacing {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
         gap: 8px 10px;
     }
-    .ge-style-field,
+    .ge-inline-style-field,
     .ge-utility,
     .ge-spacing-group {
         display: flex;
@@ -393,47 +406,47 @@
         grid-column: 1 / -1;
     }
 
-    .ge-style-color .form-control-color {
+    .ge-inline-style-color .form-control-color {
         flex: 0 0 2.25rem;
         padding: 2px;
     }
 
-    .ge-style-shadow,
-    .ge-style-field:has(.ge-style-shadow) {
+    .ge-inline-style-shadow,
+    .ge-inline-style-field:has(.ge-inline-style-shadow) {
         grid-column: 1 / -1;
     }
-    .ge-style-shadow-builder {
+    .ge-inline-style-shadow-builder {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
         gap: 4px 8px;
         align-items: end;
     }
-    .ge-style-shadow-part {
+    .ge-inline-style-shadow-part {
         display: flex;
         flex-direction: column;
         gap: 2px;
         margin: 0;
     }
-    .ge-style-shadow-color {
+    .ge-inline-style-shadow-color {
         grid-column: span 2;
     }
-    .ge-style-shadow-mode {
+    .ge-inline-style-shadow-mode {
         display: inline-block;
         margin-top: 2px;
         font-size: 0.6875rem;
     }
 
-    .ge-style-catalog {
+    .ge-inline-style-catalog {
         display: flex;
         flex-direction: column;
         gap: 4px;
     }
-    .ge-style-chips {
+    .ge-inline-style-chips {
         display: flex;
         flex-wrap: wrap;
         gap: 3px;
     }
-    .ge-style-chip {
+    .ge-inline-style-chip {
         --bs-btn-padding-y: 0;
         --bs-btn-padding-x: 6px;
         --bs-btn-font-size: 0.6875rem;
@@ -523,7 +536,6 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        background: blue;
         margin: 0 -@editGutter @editGutter;
         display: block;
         width: calc(~"100% +" 2 * @editGutter);
@@ -547,6 +559,10 @@
             text-align: left;
             cursor: auto;
 
+            /* The one line a drawer has room for needs no heading */
+            > .ge-section-title {
+                display: none;
+            }
             .ge-details-general {
                 flex-direction: row;
                 align-items: flex-end;
@@ -568,6 +584,12 @@
         margin-right: 0;
         
         > .ge-tools-drawer {
+            /* Bootstrap pads every child of a row by half its gutter, and
+               caps it at the row's width: the drawer is not a column */
+            padding-left: 0;
+            padding-right: 0;
+            max-width: none;
+
             > a {
                 color: #666;
             }
@@ -714,6 +736,34 @@
         }
     }
 
+    /* A tabs container laid out vertically from a breakpoint: Bootstrap's
+       classes answer to the window, and a breakpoint view narrows the canvas
+       instead, so the tabs plugin says which layout the view has and that is
+       what shows. The selectors outweigh Bootstrap's !important utilities.
+       Vertical, the container wraps, so its drawer is a line of its own
+       above the strip and the panes */
+    [data-ge-tabs-layout="vertical"] {
+        display: flex !important;
+        flex-wrap: wrap;
+        align-items: flex-start !important;
+
+        > .ge-container-drawer {
+            flex-shrink: 0;
+        }
+        > .nav {
+            flex-direction: column !important;
+            margin-right: 1rem !important;
+        }
+    }
+    [data-ge-tabs-layout="horizontal"] {
+        display: block !important;
+
+        > .nav {
+            flex-direction: row !important;
+            margin-right: 0 !important;
+        }
+    }
+
     /* The label is edited in place, so it needs to look like it can be */
     .ge-pane-label {
         &:hover {
@@ -1115,7 +1165,7 @@
 .ge-layout-modes();
 
 /*
- * The style plugin's display. A node Bootstrap would hide is kept on the
+ * The inline-style plugin's display. A node Bootstrap would hide is kept on the
  * canvas - there would be nothing left to click to show it again - and shown
  * as it would be if it were not hidden, which data-ge-display says. The
  * selectors outweigh Bootstrap's d-* classes, which are !important too.
@@ -1158,7 +1208,7 @@
 }
 
 /*
- * The style plugin's drawer on a flex or grid node: out of the flow, on top
+ * The inline-style plugin's drawer on a flex or grid node: out of the flow, on top
  * and as wide as the node, over a transparent top border as tall as it is.
  * The border's width comes with the node's data-ge-drawer-out, from a rule
  * per height the plugin writes. The selectors outweigh Bootstrap's border
@@ -1208,10 +1258,6 @@
     > .ge-tools-drawer {
         margin-top: 0;
         margin-bottom: calc(@editGutter - var(--bs-gutter-y));
-        /* Bootstrap pads every child of a row by half its gutter, the drawer
-           too; it keeps the padding a row with no gutter class gives it */
-        padding-left: .75rem;
-        padding-right: .75rem;
     }
 
     > .column {

package/types/grideditor.d.ts

@@ -53,16 +53,34 @@ export interface PresetClass {
 }
 
 /** A content filter: run on init and deinit with the canvas. A string names a function on window. */
-/** A section of the style plugin's accordion. */
-export type StyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'flex' | 'position' | 'custom';
+/** A section of the inline-style plugin's accordion. */
+export type InlineStyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'flex' | 'position' | 'custom';
 
 /** A section on or off, or on with some of its properties and without its catalog. */
-export type StyleSection = boolean | { properties?: string[]; catalog?: boolean };
+export type InlineStyleSection = boolean | { properties?: string[]; catalog?: boolean };
 
-/** The style plugin's settings. */
-export interface StyleOptions {
+/**
+ * A tabs container's variant: its strip's style, width and alignment, and
+ * whether it is laid out vertically - always, or from a breakpoint up.
+ */
+export interface TabsOptions {
+    variant?: 'tabs' | 'pills' | 'underline';
+    width?: 'natural' | 'fill' | 'justified';
+    /** Only with the natural width, and horizontal. */
+    align?: 'start' | 'center' | 'end';
+    vertical?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+
+/** createContainer('tabs', …): how many tabs, their labels, and the variant. */
+export interface CreateTabsOptions extends Placement, TabsOptions {
+    tabs?: number;
+    labels?: string[];
+}
+
+/** The inline-style plugin's settings. */
+export interface InlineStyleOptions {
     /** Every section is on unless it is turned off here. */
-    sections?: Partial<Record<StyleSectionKey, StyleSection>>;
+    sections?: Partial<Record<InlineStyleSectionKey, InlineStyleSection>>;
     /** The spacing section: the values offered, and what 0 to 5 come to - for the gaps too. */
     spacing?: { values?: string[]; scale?: string[] };
     /** The eye that hides and shows a node, the display family's: false leaves it out of the drawers. */
@@ -95,8 +113,10 @@ export interface GridEditorOptions {
     content_types?: string[];
     row_cols?: boolean;
     utilities?: Record<string, unknown>;
-    /** The style plugin's sections, and the options of the utilities it carries. */
-    style?: StyleOptions;
+    /** The inline-style plugin's sections, and the options of the utilities it carries. */
+    inline_style?: InlineStyleOptions;
+    /** The tabs plugin: the variant of the tabs containers made new. */
+    tabs?: TabsOptions;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];
@@ -328,6 +348,7 @@ export declare class GridEditor {
     createText(options: CreateTextOptions): HTMLElement | null;
     createElement(content: string | Node | ArrayLike<Node>, options?: CreateElementOptions): HTMLElement | null;
     createSection(options?: CreateSectionOptions): HTMLElement | null;
+    createContainer(type: 'tabs', options?: CreateTabsOptions): HTMLElement | null;
     createContainer(type: string, options?: Placement & Record<string, unknown>): HTMLElement | null;
     addTab(container: Target, options?: PaneOptions): HTMLElement | null;
     addAccordionItem(container: Target, options?: PaneOptions): HTMLElement | null;