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

package/src/js/style/sections.js

@@ -0,0 +1,298 @@
+/**
+ * What the style plugin's sections are made of: for each, its inline
+ * properties and the field each one gets, the Bootstrap 5.3 classes its
+ * catalog offers, and which of the merged utility parts it shows.
+ *
+ * Data, and the few questions asked of it: which classes set a property,
+ * which properties a kind of node is offered.
+ */
+
+var COLORS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+var SIDES = ['top', 'end', 'bottom', 'start'];
+var OPACITIES = ['10', '25', '50', '75', '100'];
+
+function each(prefix, values, suffix) {
+    return values.map(function(value) { return prefix + value + (suffix || ''); });
+}
+
+/**
+ * A catalog group: the classes it offers and whether they exclude each
+ * other, so choosing one takes the others off. `notOn` names the kinds of
+ * node it is never offered on, `onlyOn` the only ones it is.
+ */
+function group(classes, exclusive, notOn, onlyOn) {
+    return { classes: classes, exclusive: exclusive !== false, notOn: notOn || [], onlyOn: onlyOn || null };
+}
+
+/**
+ * A property's field. `type` is the widget: text for any css value, select
+ * for a fixed list, color, url for background-image, shadow for
+ * box-shadow and text-shadow. `notOn` names the kinds of node it is never
+ * offered on.
+ */
+function prop(name, options) {
+    return {
+        name: name,
+        labelKey: options.labelKey,
+        type: options.type || 'text',
+        values: options.values || null,
+        notOn: options.notOn || [],
+    };
+}
+
+var NOT_ON_COLUMN = ['column'];
+
+/** The image classes are for the markup an element holds. */
+var ONLY_ON_ELEMENT = ['element'];
+
+export var SECTIONS = [
+    {
+        key: 'size',
+        labelKey: 'style.section_size',
+        properties: [
+            prop('width', { labelKey: 'style.prop_width', notOn: NOT_ON_COLUMN }),
+            prop('height', { labelKey: 'style.prop_height', notOn: NOT_ON_COLUMN }),
+            prop('min-width', { labelKey: 'style.prop_min_width' }),
+            prop('min-height', { labelKey: 'style.prop_min_height' }),
+            prop('max-width', { labelKey: 'style.prop_max_width' }),
+            prop('max-height', { labelKey: 'style.prop_max_height' }),
+        ],
+        catalog: [
+            group(each('w-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
+            group(each('h-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
+            group(['mw-100', 'mh-100', 'vw-100', 'vh-100', 'min-vw-100', 'min-vh-100'], false, NOT_ON_COLUMN),
+            group(['img-fluid', 'img-thumbnail'], false, [], ONLY_ON_ELEMENT),
+            group(each('object-fit-', ['contain', 'cover', 'fill', 'scale', 'none']), true, [], ONLY_ON_ELEMENT),
+        ],
+        parts: [],
+    },
+    {
+        key: 'spacing',
+        labelKey: 'style.section_spacing',
+        properties: [
+            prop('margin-top', { labelKey: 'style.prop_margin_top' }), prop('margin-right', { labelKey: 'style.prop_margin_right' }), prop('margin-bottom', { labelKey: 'style.prop_margin_bottom' }), prop('margin-left', { labelKey: 'style.prop_margin_left' }),
+            prop('padding-top', { labelKey: 'style.prop_padding_top' }), prop('padding-right', { labelKey: 'style.prop_padding_right' }), prop('padding-bottom', { labelKey: 'style.prop_padding_bottom' }), prop('padding-left', { labelKey: 'style.prop_padding_left' }),
+        ],
+        catalog: [],
+        parts: ['spacing'],
+    },
+    {
+        key: 'border',
+        labelKey: 'style.section_border',
+        properties: [
+            prop('border-width', { labelKey: 'style.prop_border_width' }),
+            prop('border-style', { labelKey: 'style.prop_border_style', type: 'select', values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'] }),
+            prop('border-color', { labelKey: 'style.prop_border_color', type: 'color' }),
+            prop('border-radius', { labelKey: 'style.prop_border_radius' }),
+            prop('box-shadow', { labelKey: 'style.prop_box_shadow', type: 'shadow' }),
+        ],
+        catalog: [
+            group(['border', 'border-0'].concat(each('border-', SIDES), each('border-', SIDES, '-0')), false),
+            group(each('border-', ['1', '2', '3', '4', '5'])),
+            group(each('border-', COLORS.concat(['black', 'white'])).concat(each('border-', COLORS, '-subtle'))),
+            group(each('border-opacity-', OPACITIES)),
+            group(['rounded'].concat(each('rounded-', ['0', '1', '2', '3', '4', '5', 'circle', 'pill']))),
+            group(each('rounded-', SIDES), false),
+            group(['shadow-none', 'shadow-sm', 'shadow', 'shadow-lg']),
+        ],
+        parts: [],
+    },
+    {
+        key: 'background',
+        labelKey: 'style.section_background',
+        properties: [
+            prop('background-color', { labelKey: 'style.prop_background_color', type: 'color' }),
+            prop('background-image', { labelKey: 'style.prop_background_image', type: 'url' }),
+            prop('background-size', { labelKey: 'style.prop_background_size' }),
+            prop('background-position', { labelKey: 'style.prop_background_position' }),
+            prop('background-repeat', { labelKey: 'style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
+        ],
+        catalog: [
+            group(each('bg-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black', 'transparent']))
+                .concat(each('bg-', COLORS, '-subtle'), each('text-bg-', COLORS))),
+            group(['bg-gradient'], false),
+            group(each('bg-opacity-', OPACITIES)),
+        ],
+        parts: [],
+    },
+    {
+        key: 'text',
+        labelKey: 'style.section_text',
+        properties: [
+            prop('color', { labelKey: 'style.prop_color', type: 'color' }),
+            prop('font-size', { labelKey: 'style.prop_font_size' }),
+            prop('text-align', { labelKey: 'style.prop_text_align', type: 'select', values: ['start', 'center', 'end', 'left', 'right', 'justify'] }),
+            prop('text-shadow', { labelKey: 'style.prop_text_shadow', type: 'shadow' }),
+        ],
+        catalog: [
+            group(each('text-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black']))
+                .concat(each('text-', COLORS, '-emphasis'), ['text-body-emphasis'])),
+            group(each('text-opacity-', ['25', '50', '75', '100'])),
+            group(each('fs-', ['1', '2', '3', '4', '5', '6'])),
+            group(each('text-decoration-', ['none', 'underline', 'line-through'])),
+        ],
+        parts: ['textalign'],
+    },
+    {
+        key: 'typography',
+        labelKey: 'style.section_typography',
+        properties: [
+            prop('font-family', { labelKey: 'style.prop_font_family' }),
+            prop('font-weight', { labelKey: 'style.prop_font_weight', type: 'select', values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'] }),
+            prop('font-style', { labelKey: 'style.prop_font_style', type: 'select', values: ['normal', 'italic', 'oblique'] }),
+            prop('line-height', { labelKey: 'style.prop_line_height' }),
+            prop('letter-spacing', { labelKey: 'style.prop_letter_spacing' }),
+            prop('text-transform', { labelKey: 'style.prop_text_transform', type: 'select', values: ['none', 'uppercase', 'lowercase', 'capitalize'] }),
+            prop('text-decoration', { labelKey: 'style.prop_text_decoration', type: 'select', values: ['none', 'underline', 'line-through', 'overline'] }),
+        ],
+        catalog: [
+            group(each('fw-', ['lighter', 'light', 'normal', 'medium', 'semibold', 'bold', 'bolder'])),
+            group(each('fst-', ['italic', 'normal'])),
+            group(each('lh-', ['1', 'sm', 'base', 'lg'])),
+            group(each('text-', ['lowercase', 'uppercase', 'capitalize'])),
+            group(['font-monospace'], false),
+            group(['text-wrap', 'text-nowrap']),
+            group(['text-break'], false),
+        ],
+        parts: [],
+    },
+    {
+        key: 'display',
+        labelKey: 'style.section_display',
+        properties: [
+            prop('display', { labelKey: 'style.prop_display', type: 'select', values: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'] }),
+            prop('opacity', { labelKey: 'style.prop_opacity' }),
+            prop('overflow', { labelKey: 'style.prop_overflow', type: 'select', values: ['visible', 'hidden', 'auto', 'scroll', 'clip'] }),
+            prop('visibility', { labelKey: 'style.prop_visibility', type: 'select', values: ['visible', 'hidden'] }),
+        ],
+        catalog: [
+            group(each('opacity-', ['0', '25', '50', '75', '100'])),
+            group(each('overflow-', ['auto', 'hidden', 'visible', 'scroll'])),
+            group(['visible', 'invisible']),
+        ],
+        parts: ['display'],
+    },
+    {
+        key: 'flex',
+        labelKey: 'style.section_flex',
+        properties: [],
+        catalog: [
+            group(['vstack', 'hstack'], true, ['row']),
+        ],
+        parts: ['flex'],
+    },
+    {
+        key: 'position',
+        labelKey: 'style.section_position',
+        properties: [
+            prop('position', { labelKey: 'style.prop_position', type: 'select', values: ['static', 'relative', 'absolute', 'fixed', 'sticky'] }),
+            prop('top', { labelKey: 'style.prop_top', notOn: NOT_ON_COLUMN }),
+            prop('right', { labelKey: 'style.prop_right', notOn: NOT_ON_COLUMN }),
+            prop('bottom', { labelKey: 'style.prop_bottom', notOn: NOT_ON_COLUMN }),
+            prop('left', { labelKey: 'style.prop_left', notOn: NOT_ON_COLUMN }),
+            prop('z-index', { labelKey: 'style.prop_z_index' }),
+        ],
+        catalog: [
+            group(each('position-', ['static', 'relative', 'absolute', 'fixed', 'sticky'])),
+            group(each('top-', ['0', '50', '100'])),
+            group(each('bottom-', ['0', '50', '100'])),
+            group(each('start-', ['0', '50', '100'])),
+            group(each('end-', ['0', '50', '100'])),
+            group(['translate-middle', 'translate-middle-x', 'translate-middle-y']),
+            group(['z-n1', 'z-0', 'z-1', 'z-2', 'z-3']),
+            group(['fixed-top', 'fixed-bottom']),
+        ],
+        parts: ['float', 'sticky'],
+    },
+    {
+        key: 'custom',
+        labelKey: 'style.section_custom',
+        properties: [],
+        catalog: [],
+        parts: [],
+        custom: true,
+    },
+];
+
+export function section(key) {
+    return SECTIONS.filter(function(each_) { return each_.key === key; })[0] || null;
+}
+
+/** Whether a property or a catalog group is offered on this kind of node. */
+export function offeredOn(item, kind) {
+    if (item.onlyOn && item.onlyOn.indexOf(kind) === -1) { return false; }
+
+    return item.notOn.indexOf(kind) === -1;
+}
+
+var BREAKPOINT = '(?:(?:sm|md|lg|xl|xxl)-)?';
+var SPACER = '(?:[0-5]|auto)';
+var COLOR = '(?:' + COLORS.join('|') + '|black|white)';
+var BG = '(?:' + COLORS.join('|') + '|body|body-secondary|body-tertiary|white|black|transparent)';
+var TEXT_COLOR = '(?:' + COLORS.join('|') + '|body|body-secondary|body-tertiary|white|black|muted|black-50|white-50)';
+var BORDER = 'border(?:-(?:top|end|bottom|start))?(?:-0)?';
+var SUBTLE = '(?:' + COLORS.join('|') + ')-subtle';
+var EMPHASIS = '(?:' + COLORS.join('|') + '|body)-emphasis';
+var TEXT_BG = 'text-bg-(?:' + COLORS.join('|') + ')';
+var STICKY = 'sticky-' + BREAKPOINT;
+
+function spacing(key, side) {
+    var sides = { top: '[ty]?', bottom: '[by]?', left: '[sx]?', right: '[ex]?' }[side];
+    return new RegExp('^' + key + sides + '-' + BREAKPOINT + SPACER + '$');
+}
+
+/**
+ * The Bootstrap classes that set each property. Every one of Bootstrap's
+ * utilities is !important, so a node that carries one of them for a
+ * property shows the class, whatever its inline style says.
+ */
+var SETS = {
+    'width': /^(?:w-(?:25|50|75|100|auto)|vw-100)$/,
+    'height': /^(?:h-(?:25|50|75|100|auto)|vh-100)$/,
+    'max-width': /^mw-100$/,
+    'max-height': /^mh-100$/,
+    'min-width': /^min-vw-100$/,
+    'min-height': /^min-vh-100$/,
+    'margin-top': spacing('m', 'top'),
+    'margin-right': spacing('m', 'right'),
+    'margin-bottom': spacing('m', 'bottom'),
+    'margin-left': spacing('m', 'left'),
+    'padding-top': spacing('p', 'top'),
+    'padding-right': spacing('p', 'right'),
+    'padding-bottom': spacing('p', 'bottom'),
+    'padding-left': spacing('p', 'left'),
+    'border-width': new RegExp('^(?:' + BORDER + '|border-[1-5])$'),
+    'border-style': new RegExp('^' + BORDER + '$'),
+    'border-color': new RegExp('^(?:' + BORDER + '|border-' + COLOR + '|border-' + SUBTLE + ')$'),
+    'border-radius': /^rounded(?:-(?:[0-5]|circle|pill|top|end|bottom|start))?$/,
+    'box-shadow': /^shadow(?:-(?:none|sm|lg))?$/,
+    'background-color': new RegExp('^(?:bg-' + BG + '|bg-' + SUBTLE + '|' + TEXT_BG + ')$'),
+    'background-image': /^bg-gradient$/,
+    'color': new RegExp('^(?:text-' + TEXT_COLOR + '|text-' + EMPHASIS + '|' + TEXT_BG + ')$'),
+    'font-size': /^fs-[1-6]$/,
+    'text-align': new RegExp('^text-' + BREAKPOINT + '(?:start|center|end)$'),
+    'text-decoration': /^text-decoration-(?:none|underline|line-through)$/,
+    'font-family': /^font-monospace$/,
+    'font-weight': /^fw-(?:lighter|light|normal|medium|semibold|bold|bolder)$/,
+    'font-style': /^fst-(?:italic|normal)$/,
+    'line-height': /^lh-(?:1|sm|base|lg)$/,
+    'text-transform': /^text-(?:lowercase|uppercase|capitalize)$/,
+    'display': new RegExp('^(?:d-' + BREAKPOINT + '(?:none|inline|inline-block|block|grid|inline-grid|table|table-row|table-cell|flex|inline-flex)|vstack|hstack)$'),
+    'opacity': /^opacity-(?:0|25|50|75|100)$/,
+    'overflow': /^overflow-(?:auto|hidden|visible|scroll)$/,
+    'visibility': /^(?:visible|invisible)$/,
+    'position': new RegExp('^(?:position-(?:static|relative|absolute|fixed|sticky)|fixed-(?:top|bottom)|' + STICKY + '(?:top|bottom))$'),
+    'top': new RegExp('^(?:top-(?:0|50|100)|fixed-top|' + STICKY + 'top)$'),
+    'bottom': new RegExp('^(?:bottom-(?:0|50|100)|fixed-bottom|' + STICKY + 'bottom)$'),
+    'left': /^start-(?:0|50|100)$/,
+    'right': /^end-(?:0|50|100)$/,
+    'z-index': /^z-(?:n1|[0-3])$/,
+};
+
+/** The first of these classes that sets the property, or null. */
+export function overriding(property, classes) {
+    var pattern = SETS[property];
+    if (!pattern) { return null; }
+
+    return classes.filter(function(name) { return pattern.test(name); })[0] || null;
+}

package/src/js/{plugins/grideditor.spacing.js → style/spacing.js}

@@ -1,21 +1,9 @@
 /**
- * Spacing for grid-editor.
+ * Spacing, a part of the style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
+ * pt-, px- … and m-{breakpoint}-*, mt-, mx- … classes.
  *
- * A utility plugin: load this file after the editor and every row, column,
- * element and container can have its padding and margin set per breakpoint,
- * with Bootstrap's p-{breakpoint}-*, pt-, px- … and m-{breakpoint}-*, mt-, mx-
- * … 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.spacing.min.js"></script>
- *
- * Fourteen families would be fourteen fields, so the panel has two, padding
- * and margin, each a choice of side and a value for that side.
- *
- * utilities.spacing.values narrows the values offered, and
- * utilities.spacing.scale is what 0 to 5 come to, for a page that changed
- * Bootstrap's $spacers.
+ * Its families, and whatever it does on the canvas, as a function of the
+ * handle and its options: grideditor.style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';
@@ -64,9 +52,9 @@ function pattern(key) {
     return new RegExp('^' + key + '[xytbse]?-(?:(?:sm|md|lg|xl|xxl)-)?(?:[0-5]|auto)$');
 }
 
-GridEditor.utilities.spacing = function(ge) {
+export function spacingPart(ge, given) {
 
-    var options = Object.assign({ values: VALUES, scale: SCALE }, ge.settings.utilities.spacing);
+    var options = Object.assign({ values: VALUES, scale: SCALE }, given);
     var patterns = { p: pattern('p'), m: pattern('m') };
 
     function applies(node, kind) {
@@ -293,4 +281,4 @@ GridEditor.utilities.spacing = function(ge) {
 
         onRefresh: mark,
     };
-};
+}

package/src/js/style/sticky.js

@@ -0,0 +1,39 @@
+/**
+ * Sticky, a part of the style plugin: sticking a node to the top or the
+ * bottom of the page as it scrolls, per breakpoint, with Bootstrap's
+ * sticky-{breakpoint}-top and -bottom classes.
+ *
+ * Its families, and whatever it does on the canvas, as a function of the
+ * handle: grideditor.style.js puts them in its sections.
+ */
+import { GridEditor } from '../grideditor.js';
+
+Object.assign(GridEditor.locales.en, {
+    'utility.sticky': 'Sticky',
+});
+
+/** What Bootstrap's sticky-top and sticky-bottom are. */
+var STUCK = {
+    top: { position: 'sticky', top: '0', 'z-index': '1020' },
+    bottom: { position: 'sticky', bottom: '0', 'z-index': '1020' },
+};
+
+export function stickyPart(ge) {
+    return {
+        families: [{
+            name: 'sticky',
+            prefix: 'sticky',
+            values: ['top', 'bottom'],
+            appliesTo: ['row', 'column', 'element', 'container'],
+            labelKey: 'utility.sticky',
+            panel: false,
+
+            /** With no class applying here, where the node is without one. */
+            preview: function(value, node) {
+                if (value !== null) { return STUCK[value]; }
+
+                return { position: ge.bareStyle(node, 'sticky', 'position') };
+            },
+        }],
+    };
+}

package/src/js/{plugins/grideditor.textalign.js → style/textalign.js}

@@ -1,17 +1,9 @@
 /**
- * Text alignment for grid-editor.
+ * Text alignment, a part of the style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
+ * -center and -end classes.
  *
- * A utility plugin: load this file after the editor and a row, column,
- * element or container can align its text per breakpoint, with Bootstrap's
- * text-{breakpoint}-start, -center and -end 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.textalign.min.js"></script>
- *
- * The class aligns everything inside the node that does not align itself: a
- * paragraph the rich text editor gave its own text-align keeps it.
+ * Its families, and whatever it does on the canvas, as a function of the
+ * handle: grideditor.style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 
@@ -25,7 +17,7 @@ Object.assign(GridEditor.locales.en, {
 /** Start and end are left and right: Bootstrap's css is left to right. */
 var CSS = { start: 'left', center: 'center', end: 'right' };
 
-GridEditor.utilities.textalign = function(ge) {
+export function textalignPart(ge) {
 
     function label(value) {
         if (value === 'start') { return ge.t('utility.text_start'); }
@@ -55,4 +47,4 @@ GridEditor.utilities.textalign = function(ge) {
             },
         }],
     };
-};
+}

package/src/js/text/grideditor.text.js

@@ -210,7 +210,7 @@ if (!GridEditor.features.text) {
             var before = readBefore.get(block);
             var open = before ? attributesOf(block) : null;
 
-            // Every content area is told, as in 5.x: one whose editor never
+            // Every content area is told: one whose editor never
             // started is the plugin's to ignore
             if (text) { text.stop([block]); }
 

package/src/less/grideditor.less

@@ -330,6 +330,117 @@
     }
 }
 
+/* A settings panel the dialog was opened from waits under its backdrop:
+   Bootstrap's popover would sit over the modal */
+.ge-settings-panel.ge-under-dialog {
+    z-index: 1040;
+}
+
+/* What plugins add to a panel, between its general fields and Responsive.
+   In a popover or inline, a button that opens it in the dialog. */
+.ge-details .ge-panel-section {
+    margin-top: 10px;
+}
+
+/* The 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 {
+    font-size: 0.8125rem;
+
+    .accordion-button {
+        padding: 6px 10px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+    }
+    .accordion-body {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 8px 10px;
+    }
+
+    .ge-style-label,
+    .ge-utility-label,
+    .ge-style-shadow-label {
+        color: var(--bs-secondary-color, #6c757d);
+        font-size: 0.75rem;
+    }
+    .ge-style-note,
+    .ge-utility-note,
+    .ge-spacing-gutter {
+        color: var(--bs-secondary-color, #666);
+        font-size: 0.6875rem;
+    }
+
+    .ge-style-fields,
+    .ge-spacing {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 8px 10px;
+    }
+    .ge-style-field,
+    .ge-utility,
+    .ge-spacing-group {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 0;
+    }
+    .ge-spacing-group .ge-utility > .ge-utility-label {
+        display: none;
+    }
+    .ge-spacing-gutter {
+        grid-column: 1 / -1;
+    }
+
+    .ge-style-color .form-control-color {
+        flex: 0 0 2.25rem;
+        padding: 2px;
+    }
+
+    .ge-style-shadow,
+    .ge-style-field:has(.ge-style-shadow) {
+        grid-column: 1 / -1;
+    }
+    .ge-style-shadow-builder {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+        gap: 4px 8px;
+        align-items: end;
+    }
+    .ge-style-shadow-part {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 0;
+    }
+    .ge-style-shadow-color {
+        grid-column: span 2;
+    }
+    .ge-style-shadow-mode {
+        display: inline-block;
+        margin-top: 2px;
+        font-size: 0.6875rem;
+    }
+
+    .ge-style-catalog {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+    .ge-style-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 3px;
+    }
+    .ge-style-chip {
+        --bs-btn-padding-y: 0;
+        --bs-btn-padding-x: 6px;
+        --bs-btn-font-size: 0.6875rem;
+        font-family: var(--bs-font-monospace, monospace);
+    }
+}
+
 /* In a drawer it is part of the drawer, compact */
 .ge-tools-drawer > .ge-details {
     font-size: 11px;
@@ -363,6 +474,14 @@
     width: 360px;
     max-width: calc(100vw - 16px);
 
+    /* Bootstrap's css leaves the arrow's position to Popper, which puts it on
+       as an inline style. Without it the arrow stays in the flow, a strip as
+       tall as the arrow above the header; out of it, the top or bottom of
+       .bs-popover-bottom and .bs-popover-top hang it outside the edge */
+    > .popover-arrow {
+        position: absolute;
+    }
+
     > .popover-header {
         display: flex;
         align-items: center;
@@ -996,18 +1115,19 @@
 .ge-layout-modes();
 
 /*
- * The visibility plugin. A node Bootstrap would hide is kept on the canvas -
- * there would be nothing left to click to show it again - and shown the way
- * the view sees it instead. The selectors outweigh Bootstrap's d-* classes,
- * which are !important too.
+ * The 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.
  */
+@ge-displays: inline, inline-block, block, grid, inline-grid, flex, inline-flex;
+
 .ge-canvas.ge-editing {
-    .ge-visibility {
-        display: block !important;
-    }
-    .row.ge-visibility {
-        display: flex !important;
-    }
+    each(@ge-displays, {
+        [data-ge-display="@{value}"] {
+            display: @value !important;
+        }
+    });
 
     .ge-hidden-in-view {
         opacity: .45;
@@ -1037,6 +1157,27 @@
     }
 }
 
+/*
+ * The 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
+ * classes and the drawer's own margins, which the spacing part sets inline.
+ */
+.ge-canvas.ge-editing .ge-drawer-out {
+    position: relative;
+    border-top-style: solid !important;
+    border-top-color: transparent !important;
+
+    > .ge-tools-drawer {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: auto !important;
+        margin: 0 !important;
+    }
+}
+
 /* The order plugin: a column ordered by class in this view says where */
 .ge-canvas.ge-editing .column[data-ge-order]::before {
     content: attr(data-ge-order);

package/types/grideditor.d.ts

@@ -53,6 +53,22 @@ 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 on or off, or on with some of its properties and without its catalog. */
+export type StyleSection = boolean | { properties?: string[]; catalog?: boolean };
+
+/** The style plugin's settings. */
+export interface StyleOptions {
+    /** Every section is on unless it is turned off here. */
+    sections?: Partial<Record<StyleSectionKey, StyleSection>>;
+    /** 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. */
+    visibility?: { drawer?: boolean };
+}
+
 export type CustomFilter = ((canvas: HTMLElement, isInit: boolean) => void) | string;
 
 /** The settings. Every one is optional. */
@@ -79,6 +95,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;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];