@themarioga/grid-editor 9.0.0-beta.2 → 9.0.0-beta.4

package/CHANGELOG.md

@@ -5,6 +5,40 @@ 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).
 
 
+## [9.0.0-beta.4] - 2026-10-20
+
+### Added
+- offcanvas: a container plugin for Bootstrap's offcanvas, with its trigger.
+  While editing the panel is unfolded in place and its body is a region, as a
+  popup's is. `createContainer('offcanvas', { title, trigger, trigger_label,
+  placement, backdrop, scroll, keyboard, responsive, dark })`, the `offcanvas`
+  setting for the ones made new, and an *Offcanvas* section in its settings
+  panel. With `responsive` the panel's own trigger gets `d-<breakpoint>-none`.
+  The event `offcanvas-orphan`, for a trigger whose offcanvas is missing.
+- A container plugin's definition can have `references`: the attributes of its
+  own that hold an id, which `freshNode` renames along with the id when a copy
+  is made.
+
+### Changed
+- The core no longer names the popup: its ids are followed through the popup
+  plugin's `references`, and the trigger handling the popup and the offcanvas
+  share moved out of the core with it. Nothing changes in the markup, the
+  events or the behaviour of a popup.
+
+## [9.0.0-beta.3] - 2026-10-20
+
+### Added
+- history: a plugin for undo and redo. Ctrl+Z goes back a step and Ctrl+Y or
+  Ctrl+Shift+Z comes forward (⌘ on a Mac), and two buttons on the right of the
+  toolbar do the same. A step is the canvas `delay` ms after the last change,
+  and the node selected and the target are chosen again by where they were.
+  `history: { shortcuts, buttons, max, delay }`; `undo()`, `redo()`,
+  `canUndo()`, `canRedo()` and `clearHistory()`; the events `after-undo`,
+  `after-redo` and `history-change`.
+- A feature plugin's `toolbar` item can have an `action` in place of `create`:
+  a button that does something instead of adding a block, and `disabled`.
+- The plugin handle has `setSelected(node)` and `setActiveTarget(node)`.
+
 ## [9.0.0-beta.2] - 2026-10-20
 
 ### 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 — 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, carousels 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, offcanvases, carousels 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
@@ -27,7 +27,7 @@ from any web server, or from GitHub Pages, with no build step.
 | [example/breakpoints.html](example/breakpoints.html) | The six breakpoints and the "all sizes" view | [live](https://themarioga.github.io/grid-editor/example/breakpoints.html) |
 | [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/attributes.html](example/attributes.html) | A plugin of your own: a drawer tool, a modal, and its settings saved as an attribute | [live](https://themarioga.github.io/grid-editor/example/attributes.html) |
-| [example/containers.html](example/containers.html) | Tabs, accordions, popups, carousels and cards, two levels deep | [live](https://themarioga.github.io/grid-editor/example/containers.html) |
+| [example/containers.html](example/containers.html) | Tabs, accordions, popups, offcanvases, carousels 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) |
@@ -36,6 +36,7 @@ from any web server, or from GitHub Pages, with no build step.
 | [example/summernote.html](example/summernote.html) | Summernote instead of tinyMCE | [live](https://themarioga.github.io/grid-editor/example/summernote.html) |
 | [example/clipboard.html](example/clipboard.html) | Copy and paste, within an editor, between two, and between tabs | [live](https://themarioga.github.io/grid-editor/example/clipboard.html) |
 | [example/wrap_content.html](example/wrap_content.html) | Non-bootstrap markup wrapped into the grid | [live](https://themarioga.github.io/grid-editor/example/wrap_content.html) |
+| [example/history.html](example/history.html) | The history plugin: undo and redo, with the keyboard and the toolbar | [live](https://themarioga.github.io/grid-editor/example/history.html) |
 | [example/autosave.html](example/autosave.html) | The autosave plugin: drafts kept as the user edits, offered back after a reload; import and export | [live](https://themarioga.github.io/grid-editor/example/autosave.html) |
 | [example/adapter.html](example/adapter.html) | A page written for 6.x, with jQuery, running unchanged through the adapter | [live](https://themarioga.github.io/grid-editor/example/adapter.html) |
 
@@ -192,7 +193,7 @@ has, with the options it was made with, and warns once.
 | `createSection` | `options?` | `Element` | A section, with the sections plugin. `options`: `width` (`'fixed'`, `'fluid'` or a breakpoint), `rows` (layouts), and a placement |
 | `createElement` | `content`, `options?` | `Element` | Host markup wrapped as an element. `options`: `type`, `label` |
 | `createText` | `type?`, `options?` | `Element` | A content area for a text editor, the first one offered by default. `options`: `content`, and a placement. `null` if the editor is not loaded, or no text editor is |
-| `createContainer` | `type`, `options?` | `Element` | `'tabs'`, `'accordion'`, `'popup'`, `'carousel'` or `'card'` |
+| `createContainer` | `type`, `options?` | `Element` | `'tabs'`, `'accordion'`, `'popup'`, `'offcanvas'`, `'carousel'` or `'card'` |
 | `addTab` | `container`, `options?` | `Element` | Appends a tab, returns its pane |
 | `addAccordionItem` | `container`, `options?` | `Element` | Appends an item, returns its body |
 | `addPane` | `container`, `options?` | `Element` | Appends a pane to a container of any type that has them - a tab, an item, a carousel slide, whose `options.interval` is its time in milliseconds - and returns it. `null`, and a warning, for a node that is not one |
@@ -792,7 +793,7 @@ 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.
+what the tabs, accordion, popup, offcanvas and card plugins make.
 
 ```javascript
 ge.createSection({ width: 'md', rows: [[6, 6]], appendTo: '#myGrid' });
@@ -817,7 +818,7 @@ nowhere else:
 | a row | a column, a section, or the canvas from the toolbar's paste button |
 | a column | a row |
 | a section | the canvas, from the toolbar's paste button |
-| a container (tabs, accordion, popup, card) | a column |
+| a container (tabs, accordion, popup, offcanvas, card) | a column |
 | a text | a column |
 | an element | a column |
 
@@ -837,7 +838,7 @@ The copy is what `getHtml` would give for that node. When it is pasted, any id
 it carries that the page already has is renamed - `ge-tab-…` ids get new
 generated ones, the host's own get a suffix, `hero` becoming `hero-2` - and
 whatever inside the copy pointed at the old id (`data-bs-target`,
-`data-bs-parent`, `href="#…"`, `aria-*`, a popup's trigger) points at the new
+`data-bs-parent`, `href="#…"`, `aria-*`, a popup's or an offcanvas's trigger) points at the new
 one. So the tabs of a copy open the copy's panes, not the original's.
 
 A paste is an add like any other: `before-add-*` and `after-add-*` with
@@ -928,10 +929,61 @@ version of grid-editor reads it*, so one saved before an upgrade that changes
 what `getHtml` gives is not offered after it. Drafts are a safety net, not a
 place to keep work.
 
+### Undo and redo
+
+A plugin:
+
+```html
+<script src="grid-editor/dist/plugins/grideditor.history.min.js"></script>
+```
+
+What is edited is kept, step by step, in memory. <kbd>Ctrl</kbd>+<kbd>Z</kbd>
+(<kbd>⌘</kbd>+<kbd>Z</kbd> on a Mac) goes back one step, and
+<kbd>Ctrl</kbd>+<kbd>Y</kbd> or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd>
+comes forward again; two buttons on the right of the toolbar do the same. A
+step is what the canvas is `delay` milliseconds after the last change, so a
+drag, a resize or a burst of typing is one. A change made after going back ends
+what could be redone. The steps go with the page: they are not kept in the
+storage, and a draft restored by the autosave plugin is one more step.
+
+```javascript
+new GridEditor('#myGrid', {
+    history: {
+        shortcuts: true,   // the keys; false leaves them to the browser
+        buttons: true,     // the toolbar's buttons
+        max: 50,           // the steps that can be undone
+        delay: 500,        // milliseconds after the last change that make a step
+    },
+});
+```
+
+The keys stay the browser's, or the text editor's, while a field or a text is
+edited, while a panel or a dialog is open, and while the canvas is in preview or
+showing its source; what was typed becomes a step when it is done. They go to
+the editor used last. Going to a step makes the canvas again, so an open text
+closes, and the node selected in the sidebar and the target are chosen again by
+where they were: nothing is selected if there is no node there any more.
+
+| Method | Returns | What it does |
+| --- | --- | --- |
+| `undo()` | `Boolean` | Goes back a step; `false` when there is none, or the canvas is not being edited or a drag is going on |
+| `redo()` | `Boolean` | Comes forward a step |
+| `canUndo()` | `Boolean` | Whether there is a step to go back to. A change not yet a step counts |
+| `canRedo()` | `Boolean` | Whether there is one to come forward to |
+| `clearHistory()` | `Boolean` | What there is now is the first step, with nothing before it or after it: for a page that loads another document |
+
+The methods are there only when the plugin is loaded.
+
+| Event | Payload | Fires |
+| --- | --- | --- |
+| `grideditor:after-undo` | `canvas`, `html`, `source` (`shortcut`, `tool` or `api`) | after the canvas went back a step |
+| `grideditor:after-redo` | `canvas`, `html`, `source` | after it came forward |
+| `grideditor:history-change` | `canvas`, `canUndo`, `canRedo` | when either changed: for a page with buttons of its own, which `buttons: false` leaves to it |
+
 ### Containers
 
-Tabs, accordions, popups, carousels and cards. A tabs, accordion, popup or
-carousel container holds panes; a card holds one region. Either way a region is an ordinary one: rows,
+Tabs, accordions, popups, offcanvases, carousels and cards. A tabs, accordion or
+carousel container holds panes; a popup, an offcanvas and a card hold one region. Either way a region is an ordinary one: rows,
 columns, content areas and elements nest inside it exactly as they do at the
 top level.
 
@@ -943,6 +995,7 @@ it available:
 <script src="grid-editor/dist/plugins/grideditor.tabs.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.accordion.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.popup.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.offcanvas.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.carousel.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.card.min.js"></script>
 ```
@@ -971,6 +1024,13 @@ ge.createContainer('carousel', { slides: 3, controls: false });   // an option g
 ge.addPane(carousel, { interval: 8000 });                         // a slide that stays for 8 seconds
 ```
 
+__`offcanvas`:__ The options of the offcanvases made new, from the toolbar or with `createContainer`, as Bootstrap has them: `placement` (`'start'`, `'end'`, `'top'` or `'bottom'`; `'start'`), `backdrop` (`true`, `false` or `'static'`; `true`), `scroll` (the page scrolls behind it; `false`), `keyboard` (Esc closes it; `true`), `responsive` (`null`, or the breakpoint - `'sm'` to `'xxl'` - from which it is content in the page and not a panel) and `dark` (`data-bs-theme="dark"`). A value a key does not take is warned about and its default used. Every offcanvas also has an *Offcanvas* section in its settings panel, which changes its own. It is all Bootstrap's classes and attributes, so a page's markup says it too.
+
+```javascript
+new GridEditor('#myGrid', { offcanvas: { placement: 'end', backdrop: 'static' } });
+ge.createContainer('offcanvas', { title: 'Menu', trigger_label: 'Menu', responsive: 'lg' });   // an option given wins
+```
+
 __`container_tools`, `tab_tools`, `accordion_tools`, `carousel_tools`:__ Extra tools on the container drawer and on each pane's drawer, same shape as `row_tools`.
 
 ```javascript
@@ -983,6 +1043,7 @@ ge.addTab(tabs, { label: 'Third', activate: true });
 
 ge.createContainer('accordion', { items: 3, stay_open: true });
 ge.createContainer('popup', { title: 'Terms', trigger_label: 'Read them', size: 'lg' });
+ge.createContainer('offcanvas', { title: 'Filters', placement: 'end', trigger: false });
 ```
 
 An accordion opens and closes from its headers while editing, and what you
@@ -997,6 +1058,13 @@ the trigger. Any node in the canvas carrying
 `data-ge-popup-target="<popup id>"` is a trigger too — grid-editor leaves your
 markup alone and writes Bootstrap's attributes onto it in the output.
 
+An offcanvas is the same with Bootstrap's offcanvas in place of its modal: it is
+rendered unfolded in place while editing, its body is a region, and the trigger
+is the button it makes, or any node carrying
+`data-ge-offcanvas-target="<offcanvas id>"`. With `responsive` the panel is
+content in the page from that breakpoint up, so its own trigger gets
+`d-<breakpoint>-none`; a trigger of yours elsewhere is not touched.
+
 A carousel shows one slide at a time while editing, as it does on the page.
 The container's drawer has the arrows and says which slide it is on, and
 Bootstrap's own arrows are kept in the markup but not drawn, so they never sit