@themarioga/grid-editor 7.1.0 → 7.3.0

package/docs/locale-keys.md

@@ -221,8 +221,11 @@ key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
 utility.*
 ---------
 
-The Responsive section of a settings panel, which the utility plugins fill.
-The labels of each utility and its values are the plugins' own keys.
+The Responsive section of a settings panel, which the utility plugins fill,
+and the per breakpoint fields of the style plugin's sections. The labels of
+each utility and its values are the plugins' own keys. The spacing,
+textalign, visibility and float fields were plugins of their own up to 7.2,
+and are the style plugin's now.
 
 | Key | English | Where |
 | --- | --- | --- |
@@ -235,10 +238,10 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.default` | Default | The empty choice of a field when nothing below the view sets the utility, and always in the all view |
 | `utility.inherit` | Inherit: {value} (from {breakpoint}) | The empty choice in a breakpoint view when a smaller breakpoint sets the utility. `{breakpoint}` is its key, `sm` |
 | `utility.varies` | Changes at {breakpoints}; choosing here replaces that | Note under a field in the all view when breakpoints set their own value. `{breakpoints}` is a list of keys |
-| `utility.visibility` | Visibility | Label of the visibility plugin's field |
+| `utility.visibility` | Visibility | Label of the visibility field, in the style plugin's Display section |
 | `utility.visibility_hidden` | Hidden | Its choice for `d-*-none` |
 | `utility.visibility_shown` | Shown | Its choice for `d-*-block`, or `d-*-flex` on a row |
-| `tool.hide_in_view` | Hide in this view | The visibility plugin's eye, on a node shown in the view being edited |
+| `tool.hide_in_view` | Hide in this view | The style plugin's visibility eye, on a node shown in the view being edited |
 | `tool.show_in_view` | Show in this view | The same eye, on a node hidden there |
 | `utility.order` | Order | Label of the order plugin's field |
 | `utility.order_first` | First | Its choice for `order-*-first` |
@@ -251,7 +254,7 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.gutters` | Gutters | The gutters plugin's `g-*` field, on a row |
 | `utility.gutters_x` | Horizontal gutters | Its `gx-*` field |
 | `utility.gutters_y` | Vertical gutters | Its `gy-*` field |
-| `utility.padding` | Padding | The spacing plugin's padding group |
+| `utility.padding` | Padding | The padding group, in the style plugin's Spacing section |
 | `utility.margin` | Margin | Its margin group |
 | `utility.side_all` | All sides | The side of `p-*` and `m-*` in a group's side choice |
 | `utility.side_x` | Left and right | The side of `px-*` and `mx-*` |
@@ -260,17 +263,93 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.side_b` | Bottom | The side of `pb-*` and `mb-*` |
 | `utility.side_s` | Start | The side of `ps-*` and `ms-*` |
 | `utility.side_e` | End | The side of `pe-*` and `me-*` |
-| `utility.text_align` | Text alignment | Label of the textalign plugin's field |
+| `utility.text_align` | Text alignment | Label of the text alignment field, in the style plugin's Text section |
 | `utility.text_start` | Start | Its choice for `text-*-start` |
 | `utility.text_center` | Center | Its choice for `text-*-center` |
 | `utility.text_end` | End | Its choice for `text-*-end` |
-| `utility.float` | Float | Label of the float plugin's field, on an element |
+| `utility.float` | Float | Label of the float field, in the style plugin's Position section, on an element |
 | `utility.float_start` | Start | Its choice for `float-*-start` |
 | `utility.float_end` | End | Its choice for `float-*-end` |
 | `utility.float_none` | None | Its choice for `float-*-none` |
 | `utility.spacing_gutter` | A column's side padding is its gutter: changing it changes the gutter | Note in a column's spacing group while it carries side padding |
 
 
+style.*
+-------
+
+The style plugin's accordion, in a node's settings panel or in the dialog.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `style.section_title` | Style | The style plugin's accordion, and the button that opens it in the dialog when `settings_panel` is `popover` or `inline` |
+| `style.dialog_title` | Style: {kind} | Title of that dialog. `{kind}` is what the panel's title calls the node |
+| `style.section_size` | Size | The accordion's section header |
+| `style.section_spacing` | Spacing | The accordion's section header |
+| `style.section_border` | Border | The accordion's section header |
+| `style.section_background` | Background | The accordion's section header |
+| `style.section_text` | Text | The accordion's section header |
+| `style.section_typography` | Typography | The accordion's section header |
+| `style.section_display` | Display | The accordion's section header |
+| `style.section_position` | Position | The accordion's section header |
+| `style.section_custom` | Custom css | The accordion's section header |
+| `style.all_sizes` | Applies to every size | Note over a section's inline fields in a breakpoint view: the style attribute is not responsive |
+| `style.overridden` | The class {class} takes priority over this value | Note under an inline field whose property a Bootstrap utility on the node also sets. `{class}` is that class |
+| `style.invalid` | Not a value this property takes | Tooltip of an inline field holding a value the browser refused |
+| `style.catalog` | Bootstrap classes | Heading of a section's Bootstrap class chips |
+| `style.shadow_x` | X | A part of the shadow builder |
+| `style.shadow_y` | Y | A part of the shadow builder |
+| `style.shadow_blur` | Blur | A part of the shadow builder |
+| `style.shadow_spread` | Spread | A part of the shadow builder |
+| `style.shadow_color` | Color | A part of the shadow builder |
+| `style.shadow_inset` | Inset | The shadow builder's inset checkbox |
+| `style.shadow_text_mode` | Edit as text | Link under the shadow builder that edits the value as text |
+| `style.prop_width` | Width | Label of the `width` field |
+| `style.prop_height` | Height | Label of the `height` field |
+| `style.prop_min_width` | Min width | Label of the `min-width` field |
+| `style.prop_min_height` | Min height | Label of the `min-height` field |
+| `style.prop_max_width` | Max width | Label of the `max-width` field |
+| `style.prop_max_height` | Max height | Label of the `max-height` field |
+| `style.prop_margin_top` | Margin top | Label of the `margin-top` field |
+| `style.prop_margin_right` | Margin right | Label of the `margin-right` field |
+| `style.prop_margin_bottom` | Margin bottom | Label of the `margin-bottom` field |
+| `style.prop_margin_left` | Margin left | Label of the `margin-left` field |
+| `style.prop_padding_top` | Padding top | Label of the `padding-top` field |
+| `style.prop_padding_right` | Padding right | Label of the `padding-right` field |
+| `style.prop_padding_bottom` | Padding bottom | Label of the `padding-bottom` field |
+| `style.prop_padding_left` | Padding left | Label of the `padding-left` field |
+| `style.prop_border_width` | Border width | Label of the `border-width` field |
+| `style.prop_border_style` | Border style | Label of the `border-style` field |
+| `style.prop_border_color` | Border color | Label of the `border-color` field |
+| `style.prop_border_radius` | Border radius | Label of the `border-radius` field |
+| `style.prop_box_shadow` | Shadow | Label of the `box-shadow` field |
+| `style.prop_background_color` | Background color | Label of the `background-color` field |
+| `style.prop_background_image` | Background image | Label of the `background-image` field |
+| `style.prop_background_size` | Background size | Label of the `background-size` field |
+| `style.prop_background_position` | Background position | Label of the `background-position` field |
+| `style.prop_background_repeat` | Background repeat | Label of the `background-repeat` field |
+| `style.prop_color` | Color | Label of the `color` field |
+| `style.prop_font_size` | Font size | Label of the `font-size` field |
+| `style.prop_text_align` | Text align | Label of the `text-align` field |
+| `style.prop_text_shadow` | Text shadow | Label of the `text-shadow` field |
+| `style.prop_font_family` | Font family | Label of the `font-family` field |
+| `style.prop_font_weight` | Font weight | Label of the `font-weight` field |
+| `style.prop_font_style` | Font style | Label of the `font-style` field |
+| `style.prop_line_height` | Line height | Label of the `line-height` field |
+| `style.prop_letter_spacing` | Letter spacing | Label of the `letter-spacing` field |
+| `style.prop_text_transform` | Text transform | Label of the `text-transform` field |
+| `style.prop_text_decoration` | Text decoration | Label of the `text-decoration` field |
+| `style.prop_display` | Display | Label of the `display` field |
+| `style.prop_opacity` | Opacity | Label of the `opacity` field |
+| `style.prop_overflow` | Overflow | Label of the `overflow` field |
+| `style.prop_visibility` | Visibility | Label of the `visibility` field |
+| `style.prop_position` | Position | Label of the `position` field |
+| `style.prop_top` | Top | Label of the `top` field |
+| `style.prop_right` | Right | Label of the `right` field |
+| `style.prop_bottom` | Bottom | Label of the `bottom` field |
+| `style.prop_left` | Left | Label of the `left` field |
+| `style.prop_z_index` | Z-index | Label of the `z-index` field |
+
+
 badge.*
 -------
 
@@ -302,7 +381,9 @@ all the same: the developer reading them is the one who chose the locale.
 | `warning.adapter_no_jquery` | grideditor.jquery.js needs jQuery 4, … | `grideditor.jquery.js` loaded on a page with no jQuery |
 | `warning.oninit_removed` | tinyMCE's oninit option was removed in 7.0 … | A `tinymce.config` that still has `oninit`; `init_instance_callback` is called |
 | `error.tinymce_missing` | tinyMCE not available! … | `content_types: ['tinymce']` with no tinyMCE loaded |
-| `error.ckeditor_missing` | CKEditor not available! … | `content_types: ['ckeditor']` with no CKEditor loaded |
+| `error.ckeditor_missing` | CKEditor 5 not available! … | `content_types: ['ckeditor']` with no CKEditor 5 loaded, CKEditor 4 included |
+| `error.ckeditor_start` | CKEditor could not start: {message} | `InlineEditor.create` failed: most likely no `licenseKey` in `ckeditor.config` |
+| `warning.ckeditor_plugin` | CKEditor has no plugin called {name}, … | A plugin name in `ckeditor.config.plugins` that is not on `window.CKEDITOR` |
 | `error.summernote_missing` | Summernote not available! … | `content_types: ['summernote']` with no Summernote loaded |
 | `error.codemirror_missing` | CodeMirror not available! … | The codemirror plugin's source view with no CodeMirror loaded: the textarea is used |
 

package/docs/plugins.md

@@ -160,6 +160,9 @@ array.
 | `ge.nodeHtml(node)` | One node's markup as `getHtml` would give it. The canvas leaves editing to read it and comes back, as it does for `getHtml` |
 | `ge.toolbarItems(name)` | An array of the toolbar buttons the feature plugin `name` declared, for showing and hiding them |
 | `ge.bareStyle(node, family, property)` | A css property's value on the node with none of the family's classes: what a preview shows when no class applies and that is not a constant |
+| `ge.hostStyle(node, property?)` | `{ value, priority }` of one property of the node's own style, as the host wrote it: never a breakpoint preview's. With no property, the whole of it as css text |
+| `ge.setHostStyle(node, property, value, priority?)` | Write one property of the node's own style, or take it off with `''`. Under a breakpoint preview it is the host's value that changes, and the preview goes back on top. False, and nothing written, for a value the browser refuses. A priority left out keeps the one the property had; no `style=""` is left behind |
+| `ge.openDialog(title, body, opener?)` / `ge.closeDialog()` | A modal of the editor's own, over whatever settings panel is open, which stays open under it. `body` is moved in, and back where it was when the dialog closes; `opener` has the focus back. Bootstrap's modal when Bootstrap's javascript is there, one of the editor's own when it is not. Escape closes the dialog and nothing else; `deinit`, `getHtml`, `setLocale`, `destroy` and closing the panel close it |
 
 The add, delete and move events for a container and its panes are fired by the
 editor, not by the plugin: `createPaneControls` handles a pane's delete, and
@@ -192,6 +195,7 @@ GridEditor.features.elements = function(ge) {
         accepts: function(region, node) { … },  // false turns a block away from a region
         toolbar: [{ labelKey: …, kind: …, create: function() { … } }],  // buttons beside the containers'
         drawerTools: function(drawer, node, kind) { … },  // tools beside the gear, in every drawer
+        panelSection: function(node, kind) { … },  // a section of the node's settings panel, see below
     };
 };
 ```
@@ -224,6 +228,43 @@ needs to put a new kind of block on the canvas:
   child: it sits beside it, in a wrapper that only exists while editing, so
   `ge.drawerOf(node)` is how to find it.
 
+### A section of the settings panel
+
+**`panelSection(node, kind)`**, which any kind of plugin can have, returns a
+section for the node's settings panel - `{ labelKey, titleKey, body }` - or
+null where it has none. The editor puts the sections between the panel's
+general fields and *Responsive*, in the order the plugins were registered.
+Where the panel has room for it, in the offcanvas and the modal, `body` is in
+the panel. A popover, or a panel inline in the drawer, gets a button with the
+label instead, and `body` opens in the dialog, titled `titleKey` - with the
+node's kind as `{kind}` - or the label. `body` stays the panel's either way,
+so `ge.detailsOf(node)` finds what is in it.
+
+A field made with `ge.utilityField` in a section follows the view and the
+classes field as the Responsive section's do, wherever the section is at the
+time. The style plugin's accordion is a section, and what the spacing,
+textalign, visibility and float fields are in: its families are
+`panel: false`, and it makes their fields itself.
+
+A section that writes css should write it with `ge.setHostStyle` and read it
+with `ge.hostStyle`: in a breakpoint view the node's `style` holds the
+preview's `!important` values too, and they come off on `deinit` with
+whatever was written under them.
+
+### A plugin that takes the place of others
+
+A factory with **`replaces: ['old', …]`** on it - the function, not what it
+returns, since it is read before any factory is called - stands in for those
+plugins. Loaded beside it, they stand down, with a warning, and none of their
+families is declared twice; an old name in the `plugins` setting asks for it,
+with a warning that the name is deprecated. This is how the style plugin
+takes the spacing, textalign, visibility and float plugins' place:
+
+```javascript
+GridEditor.utilities.style = function(ge) { … };
+GridEditor.utilities.style.replaces = ['spacing', 'textalign', 'visibility', 'float'];
+```
+
 ### Settings of your own, saved on the node
 
 A tool that opens a dialog and saves what the user chose on the node is a
@@ -477,19 +518,20 @@ tool does not belong. A tool writes with `ge.setUtility(node, family, value,
 `onRefresh(scope)` runs whenever the preview is redrawn — on `init`, on a view
 change, after a write, after the user types in a classes field — with the node
 whose utilities changed, or the canvas. It is for what a plugin marks the canvas
-with beyond inline styles: the visibility plugin keeps hidden nodes on the
+with beyond inline styles: the style plugin's visibility keeps hidden nodes on the
 canvas and fades them there. Whatever it adds, `onDeinit` takes away.
 
 ### A panel of your own
 
 A field per family is the right panel for most plugins and the wrong one for
-some: spacing has fourteen families, and fourteen fields. Such a plugin marks
+some: spacing, part of the style plugin, has fourteen families, and fourteen
+fields. Such a plugin marks
 its families `panel: false` and returns its own element from
 `panel(node, kind)` — or null where it does not apply — and the editor puts it
 in the Responsive section. Inside it, `ge.utilityField(node, family)` makes the
 same field the editor would, and the editor keeps every such field up to date
 with the view and the classes; swapping one field for another is the plugin's
-business. The spacing plugin's panel is a side and one field, and choosing a
+business. The spacing panel is a side and one field, and choosing a
 side swaps the field for that side's family.
 
 The same plugins tend to need the node as a whole for the preview, because
@@ -509,6 +551,8 @@ Two plugins cannot declare the same family name: the second one is ignored,
 with a warning.
 
 Plugin options live in the `utilities` setting, under the plugin's name:
-`utilities: { spacing: { values: ['0', '2', '4'] } }`. The editor passes the
-setting through as it is; each plugin fills in its own defaults.
+`utilities: { gutters: { scale: [...] } }`. The editor passes the
+setting through as it is; each plugin fills in its own defaults. The style
+plugin's are the `style` setting, since most of them are about its inline
+css; `utilities.spacing` and `utilities.visibility` are read there until 8.0.
 

package/example/ckeditor.html

@@ -10,8 +10,9 @@
     <!-- Javascript dependencies -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
     
-    <!-- Ckeditor js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.22.1/ckeditor.js"></script>
+    <!-- CKEditor 5: its browser build, and its stylesheet -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.css">
+    <script src="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.umd.js"></script>
     
     <!-- Grid editor CSS -->
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
@@ -28,11 +29,15 @@
                 new_row_layouts: [[12], [6, 6], [9, 3]],
                 content_types: ['ckeditor'],
                 ckeditor: {
+                    // Anything InlineEditor.create takes, over the plugin's
+                    // own defaults: its plugins, toolbar and headings
                     config: {
+                        // CKEditor 5 is GPL-2.0-or-later: 'GPL' accepts that
+                        // licence. A commercial licence passes its own key.
+                        licenseKey: 'GPL',
                         on: {
                             instanceReady: function(evt) {
-                                var instance = this;
-                                console.log('instance ready', evt, instance);
+                                console.log('instance ready', evt.editor);
                             }
                         }
                     }

package/example/index.html

@@ -48,6 +48,12 @@
             gutters and spacing — per breakpoint. See
             <a href="utilities.html">Responsive utilities</a>.
         </p>
+        <p class="text-body-secondary">
+            New in 7.3: the style plugin, inline css by section with
+            Bootstrap's classes as chips, which also carries visibility,
+            spacing, text alignment and float. See
+            <a href="style.html">Style</a>.
+        </p>
 
         <div class="list-group my-4">
 
@@ -131,6 +137,14 @@
                 <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters, spacing, text alignment and float</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="style.html">
+                <div class="d-flex justify-content-between">
+                    <strong>Style</strong>
+                    <code class="text-body-secondary">style.html</code>
+                </div>
+                <span class="text-body-secondary">The style plugin: inline css for rows, columns, containers and elements, by section, with Bootstrap's classes for each as chips</span>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="locale.html">
                 <div class="d-flex justify-content-between">
                     <strong>Languages</strong>
@@ -144,7 +158,7 @@
                     <strong>CKEditor</strong>
                     <code class="text-body-secondary">ckeditor.html</code>
                 </div>
-                <span class="text-body-secondary">CKEditor in the content areas instead of tinyMCE</span>
+                <span class="text-body-secondary">CKEditor 5 in the content areas instead of tinyMCE</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="summernote.html">

package/example/style.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+
+    <!-- The editor, the elements and tabs plugins so there is one of each
+         kind of node, and the style plugin. -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/grideditor.min.js"></script>
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+    <script src="../dist/plugins/grideditor.tabs.min.js"></script>
+    <script src="../dist/plugins/grideditor.style.min.js"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var grid = document.getElementById('myGrid');
+            var panel = document.getElementById('panel');
+            var narrow = document.getElementById('narrow');
+            var editor;
+
+            function start() {
+                editor = new GridEditor(grid, {
+                    new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
+                    content_types: [],
+
+                    // Where a node's settings open. In a popover, or inline
+                    // in the drawer, the Style accordion opens in a dialog
+                    settings_panel: panel.value,
+
+                    // Every section, unless the host says otherwise: this
+                    // leaves out position and keeps the border section to
+                    // three fields with no chips
+                    style: narrow.checked ? {
+                        sections: {
+                            position: false,
+                            border: { properties: ['border-width', 'border-style', 'border-color'], catalog: false },
+                        },
+                    } : {},
+                });
+            }
+            start();
+
+            // The same canvas, started again with the other settings
+            function restart() {
+                var html = editor.getHtml();
+                editor.destroy();
+                grid.innerHTML = html;
+                start();
+            }
+            panel.addEventListener('change', restart);
+            narrow.addEventListener('change', restart);
+
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
+            });
+        });
+    </script>
+
+    <title>Grid Editor style example</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+    <div class="container">
+
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Style</h1>
+                <p class="form-text">
+                    The gear of a row, a column, a container, a tab, an element
+                    or a section has a <strong>Style</strong> accordion: size,
+                    spacing, border, background, text, typography, display,
+                    position and free css. What you type is written to the
+                    node's own <code>style</code>; a value the browser does
+                    not take is marked and not written.
+                </p>
+                <p class="form-text">
+                    Each section also offers Bootstrap's classes for what it
+                    styles, as chips: one puts its class in the classes field,
+                    and pressing it again takes it off. Bootstrap's utilities
+                    are <code>!important</code>, so a field whose property a
+                    class on the node also sets says the class wins.
+                </p>
+                <p class="form-text">
+                    The inline style is the same at every size. Padding and
+                    margin, text alignment, visibility and float are
+                    Bootstrap's responsive classes, edited per breakpoint in
+                    their sections: pick a breakpoint in the dropdown.
+                </p>
+                <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
+                    <div class="d-flex align-items-center gap-2">
+                        <label class="form-label mb-0" for="panel">A gear opens its settings in</label>
+                        <select class="form-select form-select-sm w-auto" id="panel">
+                            <option value="offcanvas">a side panel (offcanvas)</option>
+                            <option value="popover">a popover</option>
+                            <option value="modal">a modal</option>
+                            <option value="inline">the drawer itself (inline)</option>
+                        </select>
+                    </div>
+                    <div class="form-check mb-0">
+                        <input class="form-check-input" type="checkbox" id="narrow">
+                        <label class="form-check-label" for="narrow">Fewer sections: no position, a shorter border</label>
+                    </div>
+                </div>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="row" style="background-color: #f0f4ff; border-radius: 12px;">
+                <div class="col-12 col-md-8" style="padding-top: 1rem; padding-bottom: 1rem;">
+                    <h2 class="h5">Styled inline</h2>
+                    <p>This row has a background and a radius in its <code>style</code>; open its gear and look in Background and Border.</p>
+                </div>
+                <div class="col-12 col-md-4 shadow-sm rounded-3" style="box-shadow: 0 4px 12px rgba(0, 0, 0, .15)">
+                    <h2 class="h5">A class and a style</h2>
+                    <p>It has <code>shadow-sm</code> and an inline shadow: the class wins, and the Border section says so.</p>
+                </div>
+            </div>
+
+            <div class="row my-3">
+                <div class="col-6">
+                    <div data-ge-element="callout" data-ge-label="Callout" class="p-3 border-start border-4 bg-body-tertiary" style="font-style: italic; letter-spacing: .02em">
+                        An element, with a few classes from the catalog and some typography of its own.
+                    </div>
+                </div>
+                <div class="col-6">
+                    <p>Try Size on this column: it offers only the min- and max- widths and heights, since its width is the grid's.</p>
+                </div>
+            </div>
+
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+
+</body>
+</html>

package/example/utilities.html

@@ -14,18 +14,19 @@
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
 
     <!-- The editor, and the utility plugins. Each is a file of its own, and
-         loading it is what puts its field in the settings panels. -->
+         loading it is what puts its fields in the settings panels. The style
+         plugin carries visibility, spacing, text alignment and float, which
+         were plugins of their own up to 7.2, and edits them in its Style
+         accordion; order, alignment and gutters are the grid's, and stay in
+         the Responsive section. -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/grideditor.min.js"></script>
-    <script src="../dist/plugins/grideditor.visibility.min.js"></script>
     <script src="../dist/plugins/grideditor.order.min.js"></script>
     <script src="../dist/plugins/grideditor.alignment.min.js"></script>
     <script src="../dist/plugins/grideditor.gutters.min.js"></script>
-    <script src="../dist/plugins/grideditor.spacing.min.js"></script>
-    <script src="../dist/plugins/grideditor.textalign.min.js"></script>
     <!-- Float works on elements, so the elements plugin comes first -->
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
-    <script src="../dist/plugins/grideditor.float.min.js"></script>
+    <script src="../dist/plugins/grideditor.style.min.js"></script>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -89,9 +90,11 @@
                     breakpoint. Pick a breakpoint in the dropdown and every
                     change is written for that breakpoint alone; in
                     <strong>All sizes</strong> it is written once, for every
-                    size. Each drawer's gear has a <strong>Responsive</strong>
-                    section with a field per utility, which says what the
-                    breakpoint inherits and from where.
+                    size. Each drawer's gear has a <strong>Style</strong>
+                    accordion, whose sections hold visibility, spacing, text
+                    alignment and float, and a <strong>Responsive</strong>
+                    section for the grid's utilities. Every field says what
+                    the breakpoint inherits and from where.
                 </p>
                 <div class="d-flex align-items-center gap-2 mb-3">
                     <label class="form-label mb-0" for="panel">A gear opens its settings in</label>
@@ -129,13 +132,14 @@
                 </p>
                 <p class="form-text">
                     <strong>Spacing:</strong> a padding and a margin group in
-                    every panel, each a side and a value. The centred column
+                    the Style accordion's Spacing section, each a side and a
+                    value. The centred column
                     below gets more padding from small desktop up.
                 </p>
                 <p class="form-text">
-                    <strong>Text alignment:</strong> a field in every panel.
+                    <strong>Text alignment:</strong> a field in the Text section.
                     The centred column's text is centred from small desktop
-                    up. <strong>Float:</strong> a field in an element's panel;
+                    up. <strong>Float:</strong> a field in an element's Position section;
                     the quote in the last row floats to the end from tablet up,
                     with the text flowing round it.
                 </p>

package/package.json

@@ -33,7 +33,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "7.1.0",
+  "version": "7.3.0",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",