@themarioga/grid-editor 4.1.0 → 5.0.0

package/CHANGELOG.md

@@ -5,6 +5,59 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [5.0.0] - 2026-09-23
+### Changed
+- **The all view writes one class.** A size or an offset set in the all view
+  is written as the class with no breakpoint (`col-4`, `offset-2`), and the
+  breakpoints' own sizes or offsets are taken off, as the utilities have done
+  since 4.1. Up to 4.x it wrote all six breakpoints. The resize and indent
+  payloads carry `cleared`, with what was taken off.
+- Resize payloads' `from` and `to` can be `'equal'` or `'auto'`, `from` is
+  `null` for a column its row sizes, and `source` can be `panel`.
+- `valid_col_sizes` defaults to `[1, … 12, 'equal', 'auto']`.
+- `ge.viewTiers()` returns the one breakpoint a view writes: `xs` in the all
+  view.
+
+See [UPGRADING.md](UPGRADING.md) for what these mean for a host.
+
+### Added
+- Equal and auto column sizes: Bootstrap's `col` and `col-auto`, at every
+  breakpoint. The editor recognises them, previews them in each view, offers
+  them in the add column picker and in `new_row_layouts`, `createRow` and
+  `createColumn`, and the width tools turn them into a number starting from
+  the width the column has. A column with only `col` used to be no column at
+  all, and a `col-auto` one was given a `col-12` that overrode it.
+- A *Width* field in each column's Responsive section, with every size.
+- Columns per row: a *Columns per row* field in each row's panel writes
+  `row-cols-{bp}-{1–6,auto}`. Columns with no size of their own share the
+  line out and are left without a `col-12`; the preview, the budget and the
+  tools settle row-cols against each column's own size as Bootstrap's css
+  does, and the row says in a corner how many it puts per line. Layouts,
+  `createRow` and `createColumn` take rows with row-cols, and `row_cols: false`
+  takes the field away.
+- The `sections` plugin: Bootstrap's `.container`, `.container-fluid` and
+  `.container-{bp}` as sections on the canvas, grouping rows. Each gets a
+  drawer with a width field, the toolbar a *Section* button, and the API
+  `createSection`. Rows drag in and out of sections, sections drag along the
+  canvas, and a breakpoint view gives each the max-width its container has
+  there.
+- Feature plugins can add blocks, regions and toolbar buttons (`blocks`,
+  `regions`, `accepts`, `toolbar`), and the handle gains `rowFromLayout`.
+- The `textalign` utility plugin: `text-{bp}-start`, `-center` and `-end` on
+  rows, columns, elements and containers. With no class applying in a view, the
+  preview shows what the node inherits from its parent or the host's css.
+- The `float` utility plugin: `float-{bp}-start`, `-end` and `-none` on
+  elements, with the text of the content area flowing round them.
+- `ge.bareStyle(node, family, property)` on the plugin handle: a property's
+  value with the family's classes out of the way, for previews whose "no
+  class" is not a constant.
+- `example/autocols.html`.
+
+### Fixed
+- The toolbar's layout icons nested each column inside the one before, since
+  jQuery 4 stopped expanding `<div/>`: the icon of `[6, 6]` drew one block.
+- A column's drawer no longer counts towards an auto column's width.
+
 ## [4.1.0] - 2026-09-22
 ### Added
 - Utility plugins, a third kind beside containers and features:

package/README.md

@@ -1,7 +1,7 @@
 Grid Editor
 ===========
 
-Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, indent them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
+Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns — sized in units, equal (`col`) or to their content (`col-auto`), or shared out by their row (`row-cols-*`) — indent them, group them in sections (`.container`), and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. Bootstrap's responsive utilities — visibility, order, alignment, gutters, spacing, text alignment and float — are edited per breakpoint too. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
 
 This is a fork of [Friendly-Pixel/grid-editor](https://github.com/Friendly-Pixel/grid-editor)
 by Simon Epskamp, carrying it on from 2.x. It is published as
@@ -30,6 +30,7 @@ from any web server, or from GitHub Pages, with no build step.
 | [example/plugins.html](example/plugins.html) | The plugin model, with one written in the page itself | [live](https://themarioga.github.io/grid-editor/example/plugins.html) |
 | [example/containers.html](example/containers.html) | Tabs, accordions, popups and cards, two levels deep | [live](https://themarioga.github.io/grid-editor/example/containers.html) |
 | [example/elements.html](example/elements.html) | Element level controls, including an element with no visual output | [live](https://themarioga.github.io/grid-editor/example/elements.html) |
+| [example/autocols.html](example/autocols.html) | Equal and auto columns, columns per row, and sections | [live](https://themarioga.github.io/grid-editor/example/autocols.html) |
 | [example/utilities.html](example/utilities.html) | Bootstrap's responsive utilities, edited per breakpoint | [live](https://themarioga.github.io/grid-editor/example/utilities.html) |
 | [example/locale.html](example/locale.html) | The interface in Spanish, with a language switcher | [live](https://themarioga.github.io/grid-editor/example/locale.html) |
 | [example/ckeditor.html](example/ckeditor.html) | CKEditor instead of tinyMCE | [live](https://themarioga.github.io/grid-editor/example/ckeditor.html) |
@@ -92,11 +93,12 @@ $('#myGrid').gridEditor('method', argument);
 | `reset` | — | `this` | `deinit()` then `init()` |
 | `destroy` | — | `this` | Deinit, drop the controls, unbind, forget the instance |
 | `remove` | — | `this` | Deprecated alias of `destroy` |
-| `changeView` | `breakpoint` | `this` | `'xs'`…`'xxl'`, or `'all'` to edit every breakpoint at once |
+| `changeView` | `breakpoint` | `this` | `'xs'`…`'xxl'`, or `'all'` to edit every breakpoint at once, with one class |
 | `getView` | — | `String` | The view the editor is in |
 | `setLocale` | `code` | `this` | Switch language and re-render the controls |
-| `createRow` | `layout?`, `options?` | `jQuery` | A row, optionally with columns: `createRow([8, 4])` |
-| `createColumn` | `size`, `options?` | `jQuery` | A column. `options`: `offset`, `content` |
+| `createRow` | `layout?`, `options?` | `jQuery` | A row, optionally with columns: `createRow([8, 4])`, `createRow(['auto', 'equal'])`, `createRow({ row_cols: { xs: 1, md: 3 }, columns: 6 })` |
+| `createColumn` | `size`, `options?` | `jQuery` | A column: units, `'equal'` or `'auto'`; no size into a row with row-cols takes the row's share. `options`: `offset`, `content` |
+| `createSection` | `options?` | `jQuery` | A section, with the sections plugin. `options`: `width` (`'fixed'`, `'fluid'` or a breakpoint), `rows` (layouts), and a placement |
 | `createElement` | `content`, `options?` | `jQuery` | Host markup wrapped as an element. `options`: `type`, `label` |
 | `createContainer` | `type`, `options?` | `jQuery` | `'tabs'`, `'accordion'` or `'popup'` |
 | `addTab` | `container`, `options?` | `jQuery` | Appends a tab, returns its pane |
@@ -184,14 +186,44 @@ Options
 
 ### General options
 
-__`new_row_layouts`:__ Set the column layouts that appear in the "new row" buttons at the top of the editor.
+__`new_row_layouts`:__ Set the column layouts that appear in the "new row" buttons at the top of the editor. A size is a number of units, `'equal'` (Bootstrap's `col`, sharing what the row has left) or `'auto'` (`col-auto`, as wide as its content).
 
 ```javascript
 $('#myGrid').gridEditor({
-    new_row_layouts: [[12], [6,6], [9,3]],
+    new_row_layouts: [[12], [6,6], [9,3], ['auto', 'equal'], { row_cols: { xs: 1, md: 3 }, columns: 6 }],
 });
 ```
 
+A layout can also be a row with columns per row: `{ row_cols: { xs: 1, md: 3 }, columns: 6 }` makes a `row-cols-1 row-cols-md-3` row of six columns with no size of their own.
+
+### Column sizes
+
+A column's size at each breakpoint is a number of units, equal or auto:
+
+| Size | Class | On the page |
+| --- | --- | --- |
+| `1`–`12` | `col-4`, `col-md-4` | That many twelfths of the row |
+| `'equal'` | `col`, `col-md` | An equal share of what the row has left |
+| `'auto'` | `col-auto`, `col-md-auto` | As wide as its content |
+
+The width tools and dragging a column's edge work in units, so they turn an
+equal or auto column into a number, starting from the width it has on the
+canvas. Every size is in the *Width* field of a column's settings panel, in its
+Responsive section, and a change made there is a resize like any other.
+
+**Columns per row.** A row's *Columns per row* field writes Bootstrap's
+`row-cols-{bp}-{1–6,auto}`, which gives each column with no size of its own an
+equal share of a line. A column added to such a row takes its share, and the
+width tools take a column out of the share with a size of its own. Which one
+sizes a column at a breakpoint is settled as in Bootstrap's css: the class from
+the wider breakpoint wins, and at one breakpoint `col` loses to `row-cols`,
+which loses to `col-auto` and `col-N`. `row_cols: false` takes the field away.
+
+In a breakpoint view a size or an offset is written for that breakpoint. In the
+all view it is written once, as the class with no breakpoint (`col-4`,
+`offset-2`), and the breakpoints' own sizes or offsets are taken off: one value
+for every size. Up to 4.x the all view wrote all six breakpoints instead.
+
 The settings button on a row, a column, a container, a tab, an accordion item
 or an element opens a panel with two fields: the node's `id`, and its css
 classes. The classes field shows what your markup put
@@ -272,7 +304,7 @@ $('#myGrid').gridEditor({
 });
 ```
 
-__`valid_col_sizes`:__ Specify the column widths that can be selected using the +/- buttons
+__`valid_col_sizes`:__ The column sizes the +/- buttons step through, and that the add column picker and the width field offer. Default `[1, 2, … 12, 'equal', 'auto']`; leave `'equal'` and `'auto'` out and they are not offered, though a column that has one still shows it.
 
 ```javascript
 $('#myGrid').gridEditor({
@@ -331,7 +363,7 @@ $('#myGrid').gridEditor({
 });
 ```
 
-__`default_view`:__ The view the editor starts in. Default `'all'`, which writes every breakpoint at once — what a layout that needs no per-device tuning wants.
+__`default_view`:__ The view the editor starts in. Default `'all'`, which writes one class for every breakpoint at once — what a layout that needs no per-device tuning wants.
 
 __`resize`:__ Resizing a column by dragging its edge. Defaults:
 
@@ -392,6 +424,8 @@ a plugin in a file of its own:
 <script src="grid-editor/dist/plugins/grideditor.alignment.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.gutters.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.spacing.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.textalign.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.float.min.js"></script>   <!-- after grideditor.elements -->
 ```
 
 | Plugin | Classes | On |
@@ -401,6 +435,8 @@ a plugin in a file of its own:
 | `alignment` | `justify-content-{bp}-*`, `align-items-{bp}-*`; `align-self-{bp}-*` | rows; columns |
 | `gutters` | `g-{bp}-{0–5}`, `gx-{bp}-*`, `gy-{bp}-*` | rows |
 | `spacing` | `{p,m}{,x,y,t,b,s,e}-{bp}-{0–5}`, and `auto` for margin | rows, columns, elements, containers |
+| `textalign` | `text-{bp}-start`, `-center`, `-end` | rows, columns, elements, containers |
+| `float` | `float-{bp}-start`, `-end`, `-none` | elements |
 
 A plugin puts a field in the *Responsive* section of each drawer's settings
 panel, and some add a tool to the drawer. In a breakpoint view a change is
@@ -430,6 +466,30 @@ $('#myGrid').gridEditor({
 See [example/utilities.html](example/utilities.html), and
 [docs/plugins.md](docs/plugins.md#utility-plugins) for writing one.
 
+### Sections
+
+Bootstrap's `.container`, `.container-fluid` and `.container-{bp}` on the
+canvas, each grouping rows at a width of its own. A plugin, since many pages
+put the whole canvas in a `.container` already:
+
+```html
+<script src="grid-editor/dist/plugins/grideditor.sections.min.js"></script>
+```
+
+A container that is a child of the canvas is a section, and gets a drawer:
+move, settings - with a *Width* field for the seven kinds of container - add
+row and delete. The toolbar gets a *Section* button. Rows drag in and out of
+sections, and sections drag along the canvas but not into a column. In a
+breakpoint view each section is as wide as its container would be at that
+breakpoint. They are called sections, not containers, because a container is
+what the tabs, accordion, popup and card plugins make.
+
+```javascript
+$('#myGrid').gridEditor('createSection', { width: 'md', rows: [[6, 6]], appendTo: '#myGrid' });
+```
+
+__`sections`:__ `{ widths: ['fixed', 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'] }`, the widths the field offers.
+
 ### Containers
 
 Tabs, accordions, popups and cards. A tabs, accordion or popup container holds

package/UPGRADING.md

@@ -1,3 +1,58 @@
+Upgrading from grid-editor `4.*` to `5.*`
+=========================================
+
+One change makes it a major: **the all view writes one class.** Everything
+else in 5.0 is new, and a page that uses none of it edits as it did.
+
+* __A size or an offset set in the all view is the class with no breakpoint.__
+  Up to 4.x the all view wrote all six breakpoints; 5.0 writes the base class
+  and takes the breakpoints' own sizes or offsets off, as the utilities have
+  done since 4.1. The markup means the same on the page and is shorter:
+
+  ```html
+  <!-- 4.x, after "narrower" on a col-lg-6 column in the all view -->
+  <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5 col-xxl-5">
+
+  <!-- 5.0, the same click -->
+  <div class="col-5">
+  ```
+
+  Reading has not changed: markup with the six classes written out is read as
+  before, and the first change made in the all view simplifies it. What to do:
+  nothing, unless you compare or post-process the html the editor saves and
+  expect six classes. A breakpoint view still writes its own breakpoint alone.
+
+* __Resize and indent payloads carry `cleared` in the all view__, with what the
+  write took off each breakpoint: `[{ breakpoint: 'lg', value: 6 }]`. A
+  listener that checks the payload's keys exactly will see one more.
+
+* __A resize's `from` and `to` can be `'equal'` or `'auto'`__ - Bootstrap's
+  `col` and `col-auto` - and `from` is `null` for a column its row sizes with
+  `row-cols`. `source` can be `panel`, for a width chosen in a column's
+  settings panel. A listener that does arithmetic on them should check
+  `typeof size === 'number'` first. These only happen on columns that use the
+  new sizes.
+
+* __`valid_col_sizes` has two more values by default__, `'equal'` and `'auto'`,
+  which the add column picker and the width field offer. A host that sets its
+  own list keeps it; one that wants the 4.x picker sets
+  `valid_col_sizes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]`.
+
+* __Every column's settings panel has a Width field, and every row's a Columns
+  per row field__, in the Responsive section, which is folded until the user
+  opens it. `row_cols: false` takes the row field away.
+
+* __Columns with `col`, `col-auto`, or in a row with `row-cols-*` are no longer
+  given a `col-12`.__ In 4.x a column with only `col` was not a column at all,
+  and one with `col-auto` got a `col-12` that overrode it; both now edit as
+  Bootstrap renders them. A page that relied on the `col-12` gets the layout
+  its classes describe instead.
+
+New and opt-in, so nothing to do: the `sections` plugin for Bootstrap's
+containers, and the feature hooks it is built on (`blocks`, `regions`,
+`accepts`, `toolbar`). See the [CHANGELOG](CHANGELOG.md) for the full list.
+
+
 Upgrading from grid-editor `3.*` to `4.*`
 =========================================