@themarioga/grid-editor 8.3.0 → 8.5.0

package/CHANGELOG.md

@@ -5,6 +5,46 @@ 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.5.0] - 2026-10-01
+
+### Added
+- `elements.types`: the elements the toolbar offers, a button each. A type
+  has its `type`, its `html` - a string, or a function called for each one
+  made - a `label` or `labelKey`, an `iconClass` and a `group`. A button
+  makes the html's root, marked with `data-ge-element` and `data-ge-label`
+  the way a host marks its own elements, or a `div` around html with no
+  single root. Declaring a type turns `enabled: 'auto'` on.
+- `toolbar_groups`: a third core category, *Elements*, after *Content*. The
+  element buttons go there unless they name another `group`.
+- A feature plugin's `toolbar` item whose `create()` returns `null` adds
+  nothing, rather than failing.
+
+### Changed
+- `toolbar_groups`: the *Text* buttons are in *Elements* now, not in
+  *Content*, which keeps the containers and the sections.
+
+## [8.4.0] - 2026-10-01
+
+### Added
+- `drawer_overflow`: the drawers of rows, columns, containers, elements and
+  sections keep their tools to one line. The tools that don't fit are hidden
+  from the end, behind a `⋯` tool that unfolds the drawer to show them all,
+  and come back when there is room. `'wrap'` keeps the old behaviour.
+- `toolbar_groups`: with `true`, the toolbar's add buttons are sorted into
+  categories, with tabs at the start of the toolbar choosing which one shows:
+  *Rows* and *Content* from the core, and a plugin's own. A `toolbar` item or
+  a container names its category with `group`; one that names none has its
+  plugin's. The label is the `group.<name>` locale string. Off by default.
+
+### Changed
+- `active_target`: a click again on the target's own background or on its
+  drawer, away from its tools, clears it. A click on what it holds - a text,
+  a tool, a nested column - works as before.
+
+### Fixed
+- `toolbar_overflow`: squeezed, the toolbar's buttons wrapped their labels
+  onto a second line instead of going behind the more button.
+
 ## [8.3.0] - 2026-10-01
 
 ### Added

package/README.md

@@ -371,7 +371,23 @@ new GridEditor('#myGrid', {
 });
 ```
 
-__`active_target`:__ Whether a click in a column or a section makes it where the toolbar's buttons add. Default `false`, and the toolbar adds at the end of the canvas. With `true`, the column or section clicked last - marked with a dashed outline - gets what a button makes at its end, as if the button had been dropped there: a text or a container goes into a column as it is, and into a section in a row of its own; a row goes into a column as a nested row; a section, which only the canvas takes, goes to the canvas just after the block the target is in. The toolbar's paste button pastes there too. Escape, a click in the canvas on no column or section, or deleting the target clears it, and the toolbar adds at the end of the canvas again; dragging a button still drops it where it is let go.
+__`drawer_overflow`:__ The same for the drawers of rows, columns, containers, elements and sections. `'menu'`, the default, keeps a drawer's tools to one line: the ones that don't fit are hidden from the end, behind a `⋯` tool that unfolds the drawer to show them all, and they come back when there is room. They stay in their drawer, so whatever finds a tool there still does. A text's drawer and a pane's are left alone. `'wrap'` lets the drawers wrap onto more lines, as they did before 8.4.
+
+```javascript
+new GridEditor('#myGrid', {
+    drawer_overflow: 'wrap',
+});
+```
+
+__`toolbar_groups`:__ Whether the toolbar's add buttons are sorted into categories, with tabs at the start of the toolbar choosing which one shows. Default `false`. With `true` the core's categories are *Rows*, the add row buttons, *Content*, the containers and the sections, and *Elements*, the texts and the elements of `elements.types`; a plugin's buttons go in the category they name with `group` (see [docs/plugins.md](docs/plugins.md)), or in one of their own. The tab chosen is kept while the editor lives, through `setLocale` too. With a single category there is nothing to choose and no tabs. The buttons on the right - the view, source and preview, paste - are never grouped. The more button of `toolbar_overflow` holds what doesn't fit of the category shown; the tabs themselves never go behind it, so with a great many categories they can run out of room.
+
+```javascript
+new GridEditor('#myGrid', {
+    toolbar_groups: true,
+});
+```
+
+__`active_target`:__ Whether a click in a column or a section makes it where the toolbar's buttons add. Default `false`, and the toolbar adds at the end of the canvas. With `true`, the column or section clicked last - marked with a dashed outline - gets what a button makes at its end, as if the button had been dropped there: a text or a container goes into a column as it is, and into a section in a row of its own; a row goes into a column as a nested row; a section, which only the canvas takes, goes to the canvas just after the block the target is in. The toolbar's paste button pastes there too. Escape, a click in the canvas on no column or section, a click again on the target's own background or drawer (not on a tool or on what it holds), or deleting the target clears it, and the toolbar adds at the end of the canvas again; dragging a button still drops it where it is let go.
 
 ```javascript
 const ge = new GridEditor('#myGrid', { active_target: true });
@@ -576,6 +592,32 @@ new GridEditor('#myGrid', {
         enabled: 'auto',                 // on when the page has any; true or false to decide yourself
         selector: '[data-ge-element]',   // what counts as an element
         auto: false,                     // true treats every loose node of a column as one
+        types: [],                       // the elements the toolbar offers, see below
+    },
+});
+```
+
+__`elements.types`:__ The elements the toolbar offers, a button each, in this order. A click makes one in a row and column of its own at the end of the canvas - or at the end of the active target, with `active_target` - and a drag drops it in the column it lands in, as a text or a container. Declaring a type turns `enabled: 'auto'` on, so the buttons are there on a page with no elements yet; `enabled: false` takes them away too.
+
+| Field | | |
+| --- | --- | --- |
+| `type` | required | what it is: its `data-ge-element` |
+| `html` | required | its markup: html, or a function called for each one made, which returns html or a node |
+| `label` / `labelKey` | | the button's label, as it is or as a locale key, which wins and follows `setLocale`. Without either, the `type` |
+| `iconClass` | | the button shows the icon alone, with the label as its title |
+| `group` | | its `toolbar_groups` category. Default `elements` |
+
+What a button makes is the html's root, marked the way you mark your own elements - `data-ge-element`, and `data-ge-label` with the label unless the html has one - so `getHtml` gives it back as you would have written it. Html with more than one root, or none, is wrapped in a `div`. A `<script>` in html given as a string does not run. A type with no `type` or no `html` is left off the toolbar, and one whose function throws or gives nothing adds nothing; both with a warning in the console, as is a type whose markup does not match your `elements.selector`.
+
+```javascript
+new GridEditor('#myGrid', {
+    elements: {
+        types: [
+            { type: 'quote', label: 'Pull quote', iconClass: 'bi bi-quote',
+              html: '<blockquote class="my-quote"><p>Quote</p></blockquote>' },
+            { type: 'figure', labelKey: 'element.figure', group: 'media',
+              html: function() { return '<figure id="fig-' + Date.now() + '"><img src="…"></figure>'; } },
+        ],
     },
 });
 ```