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

package/CHANGELOG.md

@@ -5,6 +5,82 @@ 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).
 
 
+## [8.0.0-beta.3] - 2026-09-30
+
+### Added
+- Variants for the tabs container: style (`nav-tabs`, `nav-pills`,
+  `nav-underline`), width (`nav-fill`, `nav-justified`), alignment
+  (`justify-content-center`, `-end`) and a vertical layout, always or from a
+  breakpoint up (`d-{bp}-flex`, `flex-{bp}-column`). They are chosen in a
+  Tabs section of the container's settings panel, given to
+  `createContainer('tabs', { variant, width, align, vertical })`, or set for
+  the new ones with the `tabs` setting. While editing, each view shows the
+  layout its breakpoint has.
+
+### Fixed
+- A tab strip without `nav-tabs` - pills or underline written by hand - is
+  recognised as tabs.
+
+## [8.0.0-beta.2] - 2026-09-29
+
+### Added
+- The style plugin's catalog has Bootstrap 5.3's colors: `bg-*-subtle`,
+  `text-bg-*`, `text-*-emphasis`, `text-body-emphasis` and `border-*-subtle`,
+  the opacities `bg-opacity-*`, `text-opacity-*` and `border-opacity-*`,
+  `fixed-top` and `fixed-bottom`, and on an element `img-fluid`,
+  `img-thumbnail` and `object-fit-*`.
+- A Flex section in the style plugin: direction, wrap, `justify-content`,
+  `align-items`, `align-content`, and on anything but a row `gap`,
+  `row-gap`, `column-gap`, fill, grow and shrink, per breakpoint, with
+  `vstack` and `hstack` as chips. `style.sections.flex` turns it off.
+- `sticky-{bp}-top` and `sticky-{bp}-bottom`, per breakpoint, in the style
+  plugin's Position section.
+- On a node that is flex or grid in the view being edited, the drawer sits
+  on top out of the flow, and the canvas lays the content out as the page
+  will.
+
+### Changed
+- **BREAKING:** The style plugin's `visibility` utility is `display`, and
+  edits every `d-{bp}-*` value from `none` to `inline-flex`. The eye shows a
+  node again with the display it has below, so a flex column comes back
+  flex. `utility.visibility` and `utility.visibility_shown` are gone from the
+  locales, and `utility.display` is new.
+- **BREAKING:** `justify-content-*` and `align-items-*` are the style
+  plugin's, in its Flex section, on rows, columns, elements and containers.
+  The alignment plugin keeps `align-self-*` only.
+- A node Bootstrap hides in the view being edited is kept on the canvas with
+  the display it would have, not as a block.
+## [8.0.0-beta.1] - 2026-09-29
+
+Not published: what it holds shipped in 8.0.0-beta.2.
+
+### Removed
+- **BREAKING:** `grideditor.spacing.js`, `grideditor.textalign.js`,
+  `grideditor.visibility.js` and `grideditor.float.js`, deprecated in 7.3:
+  the style plugin carries them. Their names in the `plugins` setting are
+  plugins that are not loaded.
+- **BREAKING:** `utilities.spacing` and `utilities.visibility` are no longer
+  read; they are `style.spacing` and `style.visibility`.
+- **BREAKING:** `replaces` on a plugin's factory, added in 7.3 for those
+  plugins.
+- **BREAKING:** The numeric layout mode indexes of 2.x in `changeView`,
+  `getUtility` and `setUtility`: they are views that do not exist.
+- **BREAKING:** The warnings about `sortable_options` and
+  `resizable_options`, removed in 4.0, and about `tinymce.config.oninit`,
+  removed in 7.0: they are ignored, and `oninit` is passed to tinyMCE as it
+  is.
+- **BREAKING:** `ckeditor.config.on.instanceReady`, CKEditor 4's, which 7.x
+  called itself: it is not called, and `on` goes to CKEditor 5 as it is.
+- **BREAKING:** The adapter's `$.fn.gridEditor.containers`, `.features`,
+  `.utilities` and `.texts`, which kept a plugin written for 6.x from
+  throwing: one throws as it loads now.
+- The locale keys `warning.setting_removed`, `warning.oninit_removed` and
+  `warning.plugin_6x`, and the words on CKEditor 4 in
+  `error.ckeditor_missing`.
+- Notes on earlier versions in the README, the docs and the code;
+  UPGRADING.md keeps them. See [UPGRADING.md](UPGRADING.md).
+
+
 ## [7.3.0] - 2026-09-29
 
 ### Added

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/), in plain DOM: no jQuery needed. 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`), copy and paste 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. Bootstrap's responsive utilities — visibility, order, alignment, gutters, spacing, text alignment and float — are edited per breakpoint too, and any row, column, container or element can be given inline css, with Bootstrap's classes for it offered as chips. 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/), in plain DOM: no jQuery needed. 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`), copy and paste 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. Bootstrap's responsive utilities — display, flex, order, alignment, gutters, spacing, text alignment, sticky and float — are edited per breakpoint too, and any row, column, container or element can be given inline css, with Bootstrap's classes for it offered as chips. 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
@@ -45,11 +45,10 @@ package: an Angular CLI project, with a build step, unlike the pages above.
 Installation
 ------------
 
-* __Dependencies:__ Grid Editor depends on [SortableJS](https://sortablejs.github.io/Sortable/), Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. It does not need jQuery since 7.0.
+* __Dependencies:__ Grid Editor depends on [SortableJS](https://sortablejs.github.io/Sortable/), Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. It does not need jQuery.
     * If you want to use the tinyMCE integration, include tinyMCE 7 (7.9.3 or later) as well, and `dist/plugins/grideditor.tinymce.min.js` after the editor.
     * If you want to use the summernote integration, include summernote and `dist/plugins/grideditor.summernote.min.js`. Summernote needs jQuery itself, so that page loads jQuery too; nothing else does.
-    * If you want to use the CKEditor integration... you get the point: CKEditor 5's browser build (`ckeditor5.umd.js` and `ckeditor5.css`) and `dist/plugins/grideditor.ckeditor.min.js`. CKEditor 4 is no longer supported.
-    * Up to 5.x the main bundle carried a copy of the three; since 6.0 the plugin of the editor you use has to be loaded, as above. See [UPGRADING.md](UPGRADING.md).
+    * If you want to use the CKEditor integration... you get the point: CKEditor 5's browser build (`ckeditor5.umd.js` and `ckeditor5.css`) and `dist/plugins/grideditor.ckeditor.min.js`.
 * From npm:
 
 ```
@@ -111,7 +110,7 @@ Load the classic script *or* the module build on a page, never both.
 
 A page that uses the jQuery API of 6.x - `$(el).gridEditor(...)`, jQuery
 events, jQuery objects in the payloads - keeps it by loading jQuery 4 and the
-adapter after the editor, and the 7.x plugins after that:
+adapter after the editor, and the plugins after that:
 
 ```html
 <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
@@ -120,7 +119,8 @@ adapter after the editor, and the 7.x plugins after that:
 <script src="grid-editor/dist/plugins/grideditor.tabs.min.js"></script>
 ```
 
-Plugins written for 6.x are not kept working: see [UPGRADING.md](UPGRADING.md).
+Plugins written for 6.x do not work with it, and throw as they register on
+`$.fn.gridEditor`: [UPGRADING.md](UPGRADING.md) says how to port one.
 
 Usage
 -----
@@ -215,7 +215,7 @@ ge.settings.locale;   // 'en'
 A html string written into the canvas - through the source view,
 `source_textarea`, `createElement` or a paste - is parsed as `innerHTML`
 parses: a `<script>` in it is kept in the markup and does not run in the
-editor. Up to 6.x it did.
+editor.
 
 Events
 ------
@@ -306,7 +306,7 @@ 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.
+for every size.
 
 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
@@ -428,7 +428,7 @@ __`settings_panel`:__ Where the settings a gear opens are shown - a node's id, i
 | `'offcanvas'` | A Bootstrap offcanvas at the side of the window, from the bottom on a phone. It does not move the canvas, and has room for every field |
 | `'popover'` | A Bootstrap popover under the gear, or over it when there is more room there; a press anywhere else puts it away |
 | `'modal'` | A Bootstrap modal |
-| `'inline'` | Unfolded in the drawer itself, as up to 5.x |
+| `'inline'` | Unfolded in the drawer itself |
 
 Each is titled after its node ("Column settings"), the node is outlined while its settings are open, and Escape closes them. The editor opens and places them itself, with Bootstrap's markup and css: a page needs neither Popper nor Bootstrap's javascript, and the modal is Bootstrap's own when Bootstrap is there. [example/utilities.html](example/utilities.html) switches between the four.
 
@@ -454,7 +454,7 @@ new GridEditor('#myGrid', {
 
 ### Breakpoints and sizing
 
-__`layout_modes`:__ Which views the toolbar dropdown offers. Default `['all', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']`. Offer fewer to keep the feel of 2.x:
+__`layout_modes`:__ Which views the toolbar dropdown offers. Default `['all', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']`. Offer fewer for a simpler dropdown:
 
 ```javascript
 new GridEditor('#myGrid', {
@@ -482,7 +482,7 @@ new GridEditor('#myGrid', {
 A column's text is a *text block*: a content area, the text editor that edits
 it, and a drawer of its own - move, which editor, settings, the host's
 `text_tools`, delete - like any other block. It drags between columns, the
-clipboard copies it, and spacing, text alignment and visibility apply to it.
+clipboard copies it, and spacing, text alignment and display apply to it.
 The markup does not change: the drawer sits beside the content area in a
 wrapper that only exists while editing, because inside it the text editor would
 take it for text. It sits over the text's top right corner and takes no room,
@@ -581,8 +581,9 @@ time, and the one you opened last is open on the next node too.
 | Background | color, image, size, position, repeat | |
 | Text | color, size, alignment, and a text shadow builder | `text-{bp}-start`, `-center`, `-end` |
 | Typography | family, weight, style, line height, letter spacing, transform, decoration | |
-| Display | display, opacity, overflow, visibility | visibility, `d-{bp}-none` / `-block` / `-flex`, with the eye in the drawer |
-| Position | position, `top`, `right`, `bottom`, `left` (not on a column), `z-index` | float, `float-{bp}-*`, on an element |
+| Display | display, opacity, overflow, visibility | display, `d-{bp}-*` from `none` to `inline-flex`, with the eye in the drawer that hides and shows |
+| Flex | | direction, wrap, `justify-content-{bp}-*`, `align-items-{bp}-*`, `align-content-{bp}-*`; on anything but a row the gaps, `gap-{bp}-{0–5}`, `row-gap-*`, `column-gap-*`, and fill, grow and shrink |
+| Position | position, `top`, `right`, `bottom`, `left` (not on a column), `z-index` | sticky, `sticky-{bp}-top` / `-bottom`; float, `float-{bp}-*`, on an element |
 | Custom css | whatever no field stands for, as text | |
 
 What you type goes to the node's own `style`, through the browser: a value it
@@ -594,8 +595,9 @@ A text gets only Text and Display, with their per breakpoint fields: its
 editor owns what is inside it.
 
 Every section but Spacing and Custom css also offers Bootstrap's classes for
-what it styles - `rounded-3`, `shadow-sm`, `bg-primary`, `fs-4`, `fw-bold`,
-`opacity-50`, `position-relative`… - as chips. A chip puts its class in the
+what it styles - `rounded-3`, `shadow-sm`, `bg-primary`, `bg-primary-subtle`,
+`text-bg-dark`, `bg-opacity-50`, `fs-4`, `fw-bold`, `vstack`, `fixed-top`,
+and on an element `img-fluid` and `object-fit-cover`… - as chips. A chip puts its class in the
 classes field, and pressing it again takes it off; chips that are
 alternatives, like `rounded-2` and `rounded-pill`, take each other off.
 Bootstrap's utilities are `!important`, so a field whose property a class on
@@ -614,13 +616,13 @@ new GridEditor('#myGrid', {
             border: { properties: ['border-width', 'border-color'], catalog: false },  // two fields, no chips
         },
         spacing: { values: ['0', '2', '4'], scale: [/* if you changed $spacers */] },
-        visibility: { drawer: false },   // no eye in the drawers, the field only
+        visibility: { drawer: false },   // no eye in the drawers, the display field only
     },
 });
 ```
 
 The sections are `size`, `spacing`, `border`, `background`, `text`,
-`typography`, `display`, `position` and `custom`. `properties` chooses and
+`typography`, `display`, `flex`, `position` and `custom`. `properties` chooses and
 orders a section's inline fields; the per breakpoint ones stay while the
 section does. What a section you left out or narrowed would have shown is in
 Custom css.
@@ -628,6 +630,10 @@ Custom css.
 Sanitizing what `getHtml` returns is the page's business, style attributes
 included.
 
+A node that is flex or grid in the view you are in - a column with `d-flex`,
+a row with `flex-nowrap` - has its drawer on top, out of the flow, so the
+canvas lays out its content as the page will.
+
 See [example/style.html](example/style.html).
 
 ### Responsive utilities
@@ -645,9 +651,9 @@ plugins of their own; the ones that style a node are the style plugin's, above.
 | Plugin | Classes | On |
 | --- | --- | --- |
 | `order` | `order-{bp}-{first,0–5,last}` | columns |
-| `alignment` | `justify-content-{bp}-*`, `align-items-{bp}-*`; `align-self-{bp}-*` | rows; columns |
+| `alignment` | `align-self-{bp}-*` | columns |
 | `gutters` | `g-{bp}-{0–5}`, `gx-{bp}-*`, `gy-{bp}-*` | rows |
-| `style` | visibility, spacing, text alignment and float; see [Style](#style) | rows, columns, elements, containers, texts |
+| `style` | display, flex (a row's `justify-content-*` and `align-items-*` among it), spacing, text alignment, sticky and float; see [Style](#style) | rows, columns, elements, containers, texts |
 
 A plugin puts a field in the *Responsive* section of each drawer's settings
 panel - or, for the style plugin, in its section of the *Style* accordion -
@@ -658,8 +664,8 @@ replaces what the breakpoints said. While you edit, the canvas shows what the
 classes mean in the view you are in; `getHtml` returns only the classes.
 
 ```javascript
-ge.setUtility(column, 'visibility', 'none', 'md');   // d-md-none
-ge.getUtility(column, 'visibility', 'lg');           // 'none', inherited
+ge.setUtility(column, 'display', 'none', 'md');   // d-md-none
+ge.getUtility(column, 'display', 'lg');           // 'none', inherited
 ```
 
 __`utilities`:__ Options for each plugin, under its name.
@@ -673,12 +679,6 @@ new GridEditor('#myGrid', {
 });
 ```
 
-Up to 7.2 visibility, spacing, text alignment and float were plugins of
-their own, `grideditor.visibility.js`, `grideditor.spacing.js`,
-`grideditor.textalign.js` and `grideditor.float.js`, with their options in
-`utilities.visibility` and `utilities.spacing`. In 7.3 those files still work
-on their own, deprecated, and go in 8.0; see [UPGRADING.md](UPGRADING.md).
-
 See [example/utilities.html](example/utilities.html), and
 [docs/plugins.md](docs/plugins.md#utility-plugins) for writing one.
 
@@ -777,6 +777,13 @@ __`plugins`:__ Which of the loaded plugins to use, containers, features and util
 new GridEditor('#myGrid', { plugins: ['tabs', 'elements'] });
 ```
 
+__`tabs`:__ The variant of the tabs containers made new, from the toolbar or with `createContainer`: `variant` (`'tabs'`, `'pills'` or `'underline'`), `width` (`'natural'`, `'fill'` or `'justified'`), `align` (`'start'`, `'center'` or `'end'`, with the natural width only) and `vertical` (`false`, `true`, or a breakpoint to go vertical from, `'md'`). Every tabs container also has a *Tabs* section in its settings panel, which changes its own. It is all Bootstrap's classes on the strip and the container, so a page's markup says it too - pills written by hand are tabs.
+
+```javascript
+new GridEditor('#myGrid', { tabs: { variant: 'pills', vertical: 'md' } });   // a side menu from tablet up
+ge.createContainer('tabs', { variant: 'underline', width: 'fill' });          // an option given wins
+```
+
 __`container_tools`, `tab_tools`, `accordion_tools`:__ Extra tools on the container drawer and on each pane's drawer, same shape as `row_tools`.
 
 ```javascript
@@ -949,9 +956,6 @@ new GridEditor('#myGrid', {
 });
 ```
 
-`config.on.instanceReady`, CKEditor 4's, is still called once the editor is
-ready, with the editor as `this` and as `evt.editor`.
-
 __`summernote.config`:__ Specify summernote config, when using the `summernote` `content_types`.
 See the [summernote documentation](http://summernote.org/deep-dive/). 
 Also check out the [summernote example](example/summernote.html).

package/UPGRADING.md

@@ -1,3 +1,58 @@
+Upgrading from grid-editor `7.x` to `8.0`
+=========================================
+
+8.0 takes out what kept pages, plugins and options of earlier versions
+working. Nothing it removes warns: an option that is gone is ignored like any
+option the editor does not know. The jQuery adapter stays, and so does the
+conversion of markup 5.x saved. `8.0.0-beta.2` is the first beta published
+(`8.0.0-beta.1` never was); install it with
+`npm install @themarioga/grid-editor@next`.
+
+* __The spacing, textalign, visibility and float plugins are gone.__ Load
+  `grideditor.style.js`, which has carried them since 7.3, and name it in the
+  `plugins` setting: `'spacing'`, `'textalign'`, `'visibility'` and `'float'`
+  there are plugins that are not loaded now, and only get the usual warning.
+* __`utilities.spacing` and `utilities.visibility` are not read.__ They are
+  `style.spacing` and `style.visibility`.
+* __`replaces` on a plugin's factory does nothing.__ A plugin that stood in
+  for another is loaded beside it, like any two plugins.
+* __`changeView`, `getUtility` and `setUtility` take a view key only.__ The
+  numeric indexes of 2.x - `0`, `1`, `2` for desktop, tablet and phone - are
+  views that do not exist: `changeView(0)` warns that there is no such
+  layout mode and does nothing. Pass `'lg'`, `'sm'` or `'xs'`.
+* __`sortable_options` and `resizable_options` are ignored__, without the
+  warning 4.0 gave: use `drag` and `resize`.
+* __`tinymce.config.oninit` is passed to tinyMCE as it is__, without the
+  warning 7.0 gave: use `init_instance_callback`.
+* __`ckeditor.config.on.instanceReady` is not called.__ It was CKEditor 4's,
+  and 7.x called it itself; `on` goes to CKEditor 5 as it is, which does not
+  know it. A function in `config.extraPlugins` is CKEditor 5's way: it is
+  called with the editor as the editor starts.
+* __The adapter has no `$.fn.gridEditor.containers`, `.features`,
+  `.utilities` or `.texts`.__ A plugin written for 6.x that registers there
+  throws as it loads, where 7.x warned and left it out. Port it: see
+  "Port a plugin written for 6.x" below.
+* __Gone from the locales:__ `warning.setting_removed`,
+  `warning.oninit_removed` and `warning.plugin_6x`. A locale of your own
+  can drop them.
+
+What `8.0.0-beta.2` adds to that:
+
+* __The `visibility` utility is `display`.__ It edits every `d-{bp}-*`
+  value now, not only hidden and shown: `setUtility(node, 'display', 'none',
+  'md')`, and `before-utility` and `after-utility` say `family: 'display'`.
+  `'visibility'` is a family no plugin declares, and gets the usual warning.
+  The eye and `style.visibility.drawer` are as they were.
+* __A row's `justify-content-*` and `align-items-*` are the style plugin's.__
+  They are in its Flex section, on rows and on anything made flex, and the
+  alignment plugin keeps `align-self-*` only. A page that loads alignment
+  without style has no field for them: load `grideditor.style.js`.
+* __Locale keys:__ `utility.visibility` and `utility.visibility_shown` are
+  gone, and `utility.display` is new; `utility.justify_content` and
+  `utility.align_items` come with the style plugin now. The Flex section and
+  sticky bring keys of their own, listed in
+  [docs/locale-keys.md](docs/locale-keys.md).
+
 Upgrading from grid-editor `7.2` to `7.3`
 =========================================