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

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

@@ -56,6 +56,7 @@ GridEditor.locales.es = {
     'panel.done': 'Hecho',
     'panel.id': 'Id',
     'panel.classes': 'Clases',
+    'panel.section_general': 'Id y clases',
     'panel.editor': 'Editor',
     'panel.kind_row': 'Fila',
     'panel.kind_column': 'Columna',
@@ -186,74 +187,75 @@ GridEditor.locales.es = {
     'utility.float_end': 'Fin',
     'utility.float_none': 'Ninguno',
     'utility.spacing_gutter': 'El relleno lateral de una columna es su espaciado: cambiarlo cambia el espacio entre columnas',
-    'style.section_title': 'Estilo',
-    'style.dialog_title': 'Estilo: {kind}',
-    'style.section_size': 'Tamaño',
-    'style.section_spacing': 'Espaciado',
-    'style.section_border': 'Borde',
-    'style.section_background': 'Fondo',
-    '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',
-    'style.overridden': 'La clase {class} tiene prioridad sobre este valor',
-    'style.invalid': 'Esta propiedad no acepta ese valor',
-    'style.catalog': 'Clases de Bootstrap',
-    'style.shadow_x': 'X',
-    'style.shadow_y': 'Y',
-    'style.shadow_blur': 'Desenfoque',
-    'style.shadow_spread': 'Extensión',
-    'style.shadow_color': 'Color',
-    'style.shadow_inset': 'Interior',
-    'style.shadow_text_mode': 'Editar como texto',
-    'style.prop_width': 'Ancho',
-    'style.prop_height': 'Alto',
-    'style.prop_min_width': 'Ancho mínimo',
-    'style.prop_min_height': 'Alto mínimo',
-    'style.prop_max_width': 'Ancho máximo',
-    'style.prop_max_height': 'Alto máximo',
-    'style.prop_margin_top': 'Margen superior',
-    'style.prop_margin_right': 'Margen derecho',
-    'style.prop_margin_bottom': 'Margen inferior',
-    'style.prop_margin_left': 'Margen izquierdo',
-    'style.prop_padding_top': 'Relleno superior',
-    'style.prop_padding_right': 'Relleno derecho',
-    'style.prop_padding_bottom': 'Relleno inferior',
-    'style.prop_padding_left': 'Relleno izquierdo',
-    'style.prop_border_width': 'Grosor del borde',
-    'style.prop_border_style': 'Estilo del borde',
-    'style.prop_border_color': 'Color del borde',
-    'style.prop_border_radius': 'Radio del borde',
-    'style.prop_box_shadow': 'Sombra',
-    'style.prop_background_color': 'Color de fondo',
-    'style.prop_background_image': 'Imagen de fondo',
-    'style.prop_background_size': 'Tamaño del fondo',
-    'style.prop_background_position': 'Posición del fondo',
-    'style.prop_background_repeat': 'Repetición del fondo',
-    'style.prop_color': 'Color',
-    'style.prop_font_size': 'Tamaño de letra',
-    'style.prop_text_align': 'Alineación',
-    'style.prop_text_shadow': 'Sombra del texto',
-    'style.prop_font_family': 'Fuente',
-    'style.prop_font_weight': 'Grosor de letra',
-    'style.prop_font_style': 'Estilo de letra',
-    'style.prop_line_height': 'Interlineado',
-    'style.prop_letter_spacing': 'Espaciado entre letras',
-    'style.prop_text_transform': 'Mayúsculas',
-    'style.prop_text_decoration': 'Decoración',
-    'style.prop_display': 'Display',
-    'style.prop_opacity': 'Opacidad',
-    'style.prop_overflow': 'Desbordamiento',
-    'style.prop_visibility': 'Visibilidad',
-    'style.prop_position': 'Posición',
-    'style.prop_top': 'Arriba',
-    'style.prop_right': 'Derecha',
-    'style.prop_bottom': 'Abajo',
-    'style.prop_left': 'Izquierda',
-    'style.prop_z_index': 'Z-index',
+    'inline_style.section_title': 'Estilo',
+    'inline_style.dialog_title': 'Estilo: {kind}',
+    'inline_style.section_size': 'Tamaño',
+    'inline_style.section_spacing': 'Espaciado',
+    'inline_style.section_border': 'Borde',
+    'inline_style.section_background': 'Fondo',
+    'inline_style.section_text': 'Texto',
+    'inline_style.section_typography': 'Tipografía',
+    'inline_style.section_display': 'Visualización',
+    'inline_style.section_flex': 'Flex',
+    'inline_style.section_position': 'Posición',
+    'inline_style.section_custom': 'CSS libre',
+    'inline_style.all_sizes': 'Se aplica a todos los tamaños',
+    'inline_style.overridden': 'La clase {class} tiene prioridad sobre este valor',
+    'inline_style.invalid': 'Esta propiedad no acepta ese valor',
+    'inline_style.catalog': 'Clases de Bootstrap',
+    'inline_style.shadow_x': 'X',
+    'inline_style.shadow_y': 'Y',
+    'inline_style.shadow_blur': 'Desenfoque',
+    'inline_style.shadow_spread': 'Extensión',
+    'inline_style.shadow_color': 'Color',
+    'inline_style.shadow_inset': 'Interior',
+    'inline_style.shadow_text_mode': 'Editar como texto',
+    'inline_style.shadow_builder_mode': 'Editar con el constructor',
+    'inline_style.prop_width': 'Ancho',
+    'inline_style.prop_height': 'Alto',
+    'inline_style.prop_min_width': 'Ancho mínimo',
+    'inline_style.prop_min_height': 'Alto mínimo',
+    'inline_style.prop_max_width': 'Ancho máximo',
+    'inline_style.prop_max_height': 'Alto máximo',
+    'inline_style.prop_margin_top': 'Margen superior',
+    'inline_style.prop_margin_right': 'Margen derecho',
+    'inline_style.prop_margin_bottom': 'Margen inferior',
+    'inline_style.prop_margin_left': 'Margen izquierdo',
+    'inline_style.prop_padding_top': 'Relleno superior',
+    'inline_style.prop_padding_right': 'Relleno derecho',
+    'inline_style.prop_padding_bottom': 'Relleno inferior',
+    'inline_style.prop_padding_left': 'Relleno izquierdo',
+    'inline_style.prop_border_width': 'Grosor del borde',
+    'inline_style.prop_border_style': 'Estilo del borde',
+    'inline_style.prop_border_color': 'Color del borde',
+    'inline_style.prop_border_radius': 'Radio del borde',
+    'inline_style.prop_box_shadow': 'Sombra',
+    'inline_style.prop_background_color': 'Color de fondo',
+    'inline_style.prop_background_image': 'Imagen de fondo',
+    'inline_style.prop_background_size': 'Tamaño del fondo',
+    'inline_style.prop_background_position': 'Posición del fondo',
+    'inline_style.prop_background_repeat': 'Repetición del fondo',
+    'inline_style.prop_color': 'Color',
+    'inline_style.prop_font_size': 'Tamaño de letra',
+    'inline_style.prop_text_align': 'Alineación',
+    'inline_style.prop_text_shadow': 'Sombra del texto',
+    'inline_style.prop_font_family': 'Fuente',
+    'inline_style.prop_font_weight': 'Grosor de letra',
+    'inline_style.prop_font_style': 'Estilo de letra',
+    'inline_style.prop_line_height': 'Interlineado',
+    'inline_style.prop_letter_spacing': 'Espaciado entre letras',
+    'inline_style.prop_text_transform': 'Mayúsculas',
+    'inline_style.prop_text_decoration': 'Decoración',
+    'inline_style.prop_display': 'Display',
+    'inline_style.prop_opacity': 'Opacidad',
+    'inline_style.prop_overflow': 'Desbordamiento',
+    'inline_style.prop_visibility': 'Visibilidad',
+    'inline_style.prop_position': 'Posición',
+    'inline_style.prop_top': 'Arriba',
+    'inline_style.prop_right': 'Derecha',
+    'inline_style.prop_bottom': 'Abajo',
+    'inline_style.prop_left': 'Izquierda',
+    'inline_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.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.',

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

@@ -10,7 +10,7 @@
  *   <script src="dist/plugins/grideditor.alignment.min.js"></script>
  *
  * 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
+ * align-items-* - is a flex container's, and the inline-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

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

@@ -0,0 +1,186 @@
+/**
+ * Inline style for grid-editor.
+ *
+ * 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, 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.
+ *
+ *   <script src="dist/grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.inline-style.min.js"></script>
+ *
+ * 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.
+ *
+ * inline_style.sections chooses the sections, and in each the properties and
+ * whether it has a catalog; inline_style.spacing is the options of spacing, whose
+ * scale the gaps share, and inline_style.visibility those of the eye.
+ */
+import { GridEditor } from '../grideditor.js';
+import { spacingPart } from '../inline-style/spacing.js';
+import { textalignPart } from '../inline-style/textalign.js';
+import { displayPart } from '../inline-style/display.js';
+import { flexPart } from '../inline-style/flex.js';
+import { floatPart } from '../inline-style/float.js';
+import { stickyPart } from '../inline-style/sticky.js';
+import { drawerflowPart } from '../inline-style/drawerflow.js';
+import { resolveOptions } from '../inline-style/options.js';
+import { createAccordion } from '../inline-style/accordion.js';
+
+Object.assign(GridEditor.locales.en, {
+    'inline_style.section_title': 'Style',
+    'inline_style.dialog_title': 'Style: {kind}',
+    'inline_style.section_size': 'Size',
+    'inline_style.section_spacing': 'Spacing',
+    'inline_style.section_border': 'Border',
+    'inline_style.section_background': 'Background',
+    'inline_style.section_text': 'Text',
+    'inline_style.section_typography': 'Typography',
+    'inline_style.section_display': 'Display',
+    'inline_style.section_flex': 'Flex',
+    'inline_style.section_position': 'Position',
+    'inline_style.section_custom': 'Custom css',
+    'inline_style.all_sizes': 'Applies to every size',
+    'inline_style.overridden': 'The class {class} takes priority over this value',
+    'inline_style.invalid': 'Not a value this property takes',
+    'inline_style.catalog': 'Bootstrap classes',
+    'inline_style.shadow_x': 'X',
+    'inline_style.shadow_y': 'Y',
+    'inline_style.shadow_blur': 'Blur',
+    'inline_style.shadow_spread': 'Spread',
+    'inline_style.shadow_color': 'Color',
+    'inline_style.shadow_inset': 'Inset',
+    'inline_style.shadow_text_mode': 'Edit as text',
+    'inline_style.shadow_builder_mode': 'Edit with the builder',
+    'inline_style.prop_width': 'Width',
+    'inline_style.prop_height': 'Height',
+    'inline_style.prop_min_width': 'Min width',
+    'inline_style.prop_min_height': 'Min height',
+    'inline_style.prop_max_width': 'Max width',
+    'inline_style.prop_max_height': 'Max height',
+    'inline_style.prop_margin_top': 'Margin top',
+    'inline_style.prop_margin_right': 'Margin right',
+    'inline_style.prop_margin_bottom': 'Margin bottom',
+    'inline_style.prop_margin_left': 'Margin left',
+    'inline_style.prop_padding_top': 'Padding top',
+    'inline_style.prop_padding_right': 'Padding right',
+    'inline_style.prop_padding_bottom': 'Padding bottom',
+    'inline_style.prop_padding_left': 'Padding left',
+    'inline_style.prop_border_width': 'Border width',
+    'inline_style.prop_border_style': 'Border style',
+    'inline_style.prop_border_color': 'Border color',
+    'inline_style.prop_border_radius': 'Border radius',
+    'inline_style.prop_box_shadow': 'Shadow',
+    'inline_style.prop_background_color': 'Background color',
+    'inline_style.prop_background_image': 'Background image',
+    'inline_style.prop_background_size': 'Background size',
+    'inline_style.prop_background_position': 'Background position',
+    'inline_style.prop_background_repeat': 'Background repeat',
+    'inline_style.prop_color': 'Color',
+    'inline_style.prop_font_size': 'Font size',
+    'inline_style.prop_text_align': 'Text align',
+    'inline_style.prop_text_shadow': 'Text shadow',
+    'inline_style.prop_font_family': 'Font family',
+    'inline_style.prop_font_weight': 'Font weight',
+    'inline_style.prop_font_style': 'Font style',
+    'inline_style.prop_line_height': 'Line height',
+    'inline_style.prop_letter_spacing': 'Letter spacing',
+    'inline_style.prop_text_transform': 'Text transform',
+    'inline_style.prop_text_decoration': 'Text decoration',
+    'inline_style.prop_display': 'Display',
+    'inline_style.prop_opacity': 'Opacity',
+    'inline_style.prop_overflow': 'Overflow',
+    'inline_style.prop_visibility': 'Visibility',
+    'inline_style.prop_position': 'Position',
+    'inline_style.prop_top': 'Top',
+    'inline_style.prop_right': 'Right',
+    'inline_style.prop_bottom': 'Bottom',
+    'inline_style.prop_left': 'Left',
+    'inline_style.prop_z_index': 'Z-index',
+});
+
+// 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['inline-style'] = function(ge) {
+
+    var options = resolveOptions(ge);
+    var parts = {
+        spacing: spacingPart(ge, options.spacing),
+        textalign: textalignPart(ge),
+        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 = {
+        sections: options.sections,
+        parts: parts,
+        state: { open: null },
+        opened: function(key) {
+            accordions.forEach(function(entry) { entry.accordion.open(key); });
+        },
+    };
+
+    /** Every part's hook, called in turn. */
+    function each(hook) {
+        return function() {
+            var args = arguments;
+            PARTS.forEach(function(name) {
+                if (parts[name][hook]) { parts[name][hook].apply(null, args); }
+            });
+        };
+    }
+
+    var partsRefresh = each('onRefresh');
+
+    return {
+        // The parts' families, edited in the sections rather than in Responsive
+        families: PARTS.reduce(function(all, name) {
+            return all.concat(parts[name].families.map(function(family) {
+                return Object.assign({}, family, { panel: false });
+            }));
+        }, []),
+
+        panelSection: function(node, kind) {
+            var accordion = createAccordion(ge, node, kind, context);
+            if (!accordion) { return null; }
+
+            accordions.push({ node: node, accordion: accordion });
+
+            return { labelKey: 'inline_style.section_title', titleKey: 'inline_style.dialog_title', body: accordion.element };
+        },
+
+        preview: function(node, kind, breakpoint) {
+            return parts.spacing.preview(node, kind, breakpoint);
+        },
+
+        // After a write, a change of classes or of view: the accordions of
+        // the nodes it touched follow
+        onRefresh: function(scope) {
+            partsRefresh(scope);
+
+            accordions = accordions.filter(function(entry) { return entry.accordion.element.isConnected; });
+            accordions.forEach(function(entry) {
+                if (entry.node === scope || scope.contains(entry.node)) { entry.accordion.render(); }
+            });
+        },
+
+        drawerTools: each('drawerTools'),
+
+        onDeinit: function() {
+            each('onDeinit')();
+            accordions = [];
+        },
+    };
+};

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;
             }
@@ -1143,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.
@@ -1186,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
@@ -1236,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,11 +53,11 @@ 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 };
 
 /**
  * A tabs container's variant: its strip's style, width and alignment, and
@@ -77,10 +77,10 @@ export interface CreateTabsOptions extends Placement, TabsOptions {
     labels?: string[];
 }
 
-/** The style plugin's settings. */
-export interface StyleOptions {
+/** 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. */
@@ -113,8 +113,8 @@ 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 };
@@ -124,7 +124,10 @@ export interface GridEditorOptions {
     add_column?: { size?: ColumnSize | null; picker?: boolean; delay?: number };
     layout_modes?: View[];
     default_view?: View;
-    resize?: { enabled?: boolean; handles?: string; balance?: 'next' | false };
+    /** enabled is the handle on the column's edge, tools the narrower and wider tools in its drawer. */
+    resize?: { enabled?: boolean; tools?: boolean; handles?: string; balance?: 'next' | false };
+    /** tools is the indent tools in a column's drawer. */
+    indent?: { tools?: boolean };
     /** A textarea whose html the canvas starts with. */
     source_textarea?: Target | '';
     edit_source?: boolean;