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

package/dist/grideditor.css

@@ -626,6 +626,14 @@ html.ge-sidebar-open {
   /* A popup is rendered unfolded and in place: a plain block with its
        body as an ordinary region. Bootstrap's modal JS is never asked to
        open it, so there is no backdrop, no focus trap and no scroll lock */
+  /* An offcanvas is rendered unfolded and in place too: a plain block with
+       its body as an ordinary region, whichever edge it comes from on the
+       page. Bootstrap fixes it to the window, hides it and shifts it out
+       until its own JS adds .show, which the editor never asks for, so what
+       it sets is undone here. The responsive classes hide the header and
+       the body's padding from their breakpoint up, where the panel is
+       content: the title still has to be there to edit */
+  /* A trigger pointing at an offcanvas that is not there any more */
   /* A trigger pointing at a popup that is not there any more */
   /* Elements: the level below a column, inside a content area. Dashed
        rather than solid, so a page full of them still reads as content */
@@ -925,6 +933,185 @@ html.ge-sidebar-open {
 .ge-canvas.ge-editing .ge-container-popup.ge-popup-collapsed .modal {
   display: none;
 }
+.ge-canvas.ge-editing .ge-container-offcanvas {
+  /* d-*-none on the trigger is for the page: the editor needs it to select the container */
+  /* Folded away, for a page with several offcanvases on it */
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas {
+  position: static;
+  z-index: auto;
+  visibility: visible;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 5px 0;
+  transform: none;
+  transition: none;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bs-offcanvas-bg) !important;
+  border: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas .offcanvas-header {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas .offcanvas-body {
+  display: block;
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow: visible;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-sm {
+  position: static;
+  z-index: auto;
+  visibility: visible;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 5px 0;
+  transform: none;
+  transition: none;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bs-offcanvas-bg) !important;
+  border: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-sm .offcanvas-header {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-sm .offcanvas-body {
+  display: block;
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow: visible;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-md {
+  position: static;
+  z-index: auto;
+  visibility: visible;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 5px 0;
+  transform: none;
+  transition: none;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bs-offcanvas-bg) !important;
+  border: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-md .offcanvas-header {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-md .offcanvas-body {
+  display: block;
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow: visible;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-lg {
+  position: static;
+  z-index: auto;
+  visibility: visible;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 5px 0;
+  transform: none;
+  transition: none;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bs-offcanvas-bg) !important;
+  border: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-lg .offcanvas-header {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-lg .offcanvas-body {
+  display: block;
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow: visible;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-xl {
+  position: static;
+  z-index: auto;
+  visibility: visible;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 5px 0;
+  transform: none;
+  transition: none;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bs-offcanvas-bg) !important;
+  border: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-xl .offcanvas-header {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-xl .offcanvas-body {
+  display: block;
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow: visible;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-xxl {
+  position: static;
+  z-index: auto;
+  visibility: visible;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 5px 0;
+  transform: none;
+  transition: none;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bs-offcanvas-bg) !important;
+  border: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-xxl .offcanvas-header {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas .offcanvas-xxl .offcanvas-body {
+  display: block;
+  flex-grow: 1;
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
+  overflow: visible;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas > .ge-offcanvas-trigger {
+  display: inline-block !important;
+  margin-bottom: 5px;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas.ge-offcanvas-collapsed .offcanvas {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas.ge-offcanvas-collapsed .offcanvas-sm {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas.ge-offcanvas-collapsed .offcanvas-md {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas.ge-offcanvas-collapsed .offcanvas-lg {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas.ge-offcanvas-collapsed .offcanvas-xl {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-container-offcanvas.ge-offcanvas-collapsed .offcanvas-xxl {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-offcanvas-orphan {
+  outline: 2px dashed #d9534f;
+}
 .ge-canvas.ge-editing .ge-popup-orphan {
   outline: 2px dashed #d9534f;
 }

package/dist/grideditor.d.ts

@@ -111,6 +111,35 @@ export interface CarouselOptions {
 /** createContainer('carousel', …): the options, and how many slides. */
 export interface CreateCarouselOptions extends Placement, CarouselOptions {}
 
+/**
+ * The offcanvas plugin's options, the ones an offcanvas made new has, as the
+ * offcanvas setting gives them and createContainer overrides them: where it
+ * comes from, its backdrop, whether the page scrolls behind it, Esc, the
+ * breakpoint from which it is content and not a panel, and the dark theme.
+ */
+export interface OffcanvasOptions {
+    /** The edge it slides in from. Default `'start'`. */
+    placement?: 'start' | 'end' | 'top' | 'bottom';
+    /** A backdrop behind it: `true`, `false`, or `'static'`, which does not close it on a click. Default true. */
+    backdrop?: boolean | 'static';
+    /** The page can scroll while it is open. Default false. */
+    scroll?: boolean;
+    /** Esc closes it. Default true. */
+    keyboard?: boolean;
+    /** From this breakpoint up it is content in the page, and its trigger is hidden; null is a panel at every size. Default null. */
+    responsive?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | null;
+    /** `data-bs-theme="dark"`. Default false. */
+    dark?: boolean;
+}
+
+/** createContainer('offcanvas', …): the options, its title and its trigger. */
+export interface CreateOffcanvasOptions extends Placement, OffcanvasOptions {
+    title?: string;
+    /** false makes none, for a trigger the page writes itself. Default true. */
+    trigger?: boolean;
+    trigger_label?: string;
+}
+
 /** The inline-style plugin's settings. */
 export interface InlineStyleOptions {
     /** Every section is on unless it is turned off here. */
@@ -175,11 +204,15 @@ export interface GridEditorOptions {
     tabs?: TabsOptions;
     /** The carousel plugin: the options of the carousels made new. */
     carousel?: CarouselOptions;
+    /** The offcanvas plugin: the options of the offcanvases made new. */
+    offcanvas?: OffcanvasOptions;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean; types?: ElementType[] };
     /** The autosave plugin: what is edited, kept in the browser's storage as it changes. */
     autosave?: AutosaveOptions;
     /** The clipboard plugin. `shortcuts`: Ctrl+C and Ctrl+V on the node selected or the target; default active_target. */
     clipboard?: { shortcuts?: boolean };
+    /** The history plugin: undo and redo. */
+    history?: HistoryOptions;
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];
     valid_col_offsets?: number[];
@@ -222,6 +255,18 @@ export interface AutosaveOptions {
     maxAge?: number | null;
 }
 
+/** The history plugin's options. */
+export interface HistoryOptions {
+    /** Ctrl+Z, and Ctrl+Y or Ctrl+Shift+Z (⌘ on a Mac). Default true. */
+    shortcuts?: boolean;
+    /** The undo and redo buttons on the right of the toolbar. Default true. */
+    buttons?: boolean;
+    /** The steps that can be undone. Default 50. */
+    max?: number;
+    /** Milliseconds after the last change that make a step. Default 500. */
+    delay?: number;
+}
+
 /** A draft the autosave plugin kept. */
 export interface AutosaveDraft {
     html: string;
@@ -252,6 +297,19 @@ export interface AutosaveErrorPayload {
     error: unknown;
 }
 
+export interface HistoryPayload {
+    canvas: HTMLElement;
+    /** The markup the canvas went to. */
+    html: string;
+    source: 'shortcut' | 'tool' | 'api';
+}
+
+export interface HistoryChangePayload {
+    canvas: HTMLElement;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+
 /** Where a node was, or went: its parent and its index among the blocks there. */
 export interface Position {
     parent: HTMLElement;
@@ -320,6 +378,10 @@ export interface PopupOrphanPayload extends Payload {
     missing: string;
 }
 
+export interface OffcanvasOrphanPayload extends Payload {
+    missing: string;
+}
+
 export interface ViewChangePayload {
     canvas: HTMLElement;
     breakpoint: View;
@@ -379,12 +441,16 @@ export interface GridEditorEventMap {
     'grideditor:after-edit-html': EditHtmlPayload;
     'grideditor:after-copy': Payload;
     'grideditor:popup-orphan': PopupOrphanPayload;
+    'grideditor:offcanvas-orphan': OffcanvasOrphanPayload;
     'grideditor:view-change': ViewChangePayload;
     'grideditor:target-change': TargetChangePayload;
     'grideditor:selection-change': SelectionChangePayload;
     'grideditor:after-autosave': AutosavePayload;
     'grideditor:after-restore-draft': RestoreDraftPayload;
     'grideditor:autosave-error': AutosaveErrorPayload;
+    'grideditor:after-undo': HistoryPayload;
+    'grideditor:after-redo': HistoryPayload;
+    'grideditor:history-change': HistoryChangePayload;
 }
 
 /** An event the editor dispatches on its canvas: a CustomEvent whose detail is the payload. */
@@ -507,6 +573,7 @@ export declare class GridEditor {
     createSection(options?: CreateSectionOptions): HTMLElement | null;
     createContainer(type: 'tabs', options?: CreateTabsOptions): HTMLElement | null;
     createContainer(type: 'carousel', options?: CreateCarouselOptions): HTMLElement | null;
+    createContainer(type: 'offcanvas', options?: CreateOffcanvasOptions): HTMLElement | null;
     createContainer(type: string, options?: Placement & Record<string, unknown>): HTMLElement | null;
     addTab(container: Target, options?: PaneOptions): HTMLElement | null;
     addAccordionItem(container: Target, options?: PaneOptions): HTMLElement | null;
@@ -523,6 +590,14 @@ export declare class GridEditor {
     saveDraft?(): boolean;
     getDraft?(): AutosaveDraft | null;
     clearDraft?(): boolean;
+    /** The history plugin's, when it is loaded: true when it went to another step. */
+    undo?(): boolean;
+    redo?(): boolean;
+    /** Whether there is a step to go back to, a change not yet a step counting. */
+    canUndo?(): boolean;
+    canRedo?(): boolean;
+    /** What there is now becomes the first step, with nothing before or after it. */
+    clearHistory?(): boolean;
 }
 
 export default GridEditor;

package/dist/grideditor.esm.js

@@ -340,9 +340,7 @@ var REFERENCES = [
   "aria-controls",
   "aria-labelledby",
   "aria-describedby",
-  "for",
-  "data-ge-popup-id",
-  "data-ge-popup-target"
+  "for"
 ];
 var GENERATED_ID = /^ge-([a-z][a-z-]*?)-\d+-[a-z0-9]+$/;
 var BREAKPOINTS = [
@@ -1130,11 +1128,6 @@ function build(instance, baseElem, optionsOrMethod) {
     var signal = { signal: lifetime.signal };
     window.addEventListener("scroll", onScroll, signal);
     delegate(canvas, "click", ".ge-content", onContentClick, signal);
-    delegate(canvas, "click", ".ge-popup-trigger, [data-ge-popup-target]", function(e) {
-      if (hasClass(canvas, "ge-editing")) {
-        e.preventDefault();
-      }
-    }, signal);
     var sidebarMode = panelMode() === "sidebar";
     if (settings.active_target || sidebarMode) {
       var pressed = null;
@@ -1545,6 +1538,7 @@ function build(instance, baseElem, optionsOrMethod) {
     var label = typeof item.label === "function" ? item.label() : item.label || t(item.labelKey);
     var colour = item.align === "end" ? "btn-primary" : "btn-light";
     var button = labelButton(element("a", { "class": "btn btn-sm " + colour + " ge-add-container ge-add-feature" }), label, iconClass);
+    var acting = typeof item.action === "function";
     addClass(button, item.className || "");
     if (typeof item.hidden === "function" ? item.hidden() : item.hidden) {
       hide(button);
@@ -1554,7 +1548,20 @@ function build(instance, baseElem, optionsOrMethod) {
       "data-ge-feature": name,
       "data-ge-item": index
     });
+    if (acting) {
+      button.setAttribute("data-ge-action", "");
+      if (typeof item.disabled === "function" ? item.disabled() : item.disabled) {
+        addClass(button, "disabled");
+        button.setAttribute("aria-disabled", "true");
+      }
+    }
     button.addEventListener("click", function() {
+      if (acting) {
+        if (!hasClass(button, "disabled")) {
+          item.action(button);
+        }
+        return;
+      }
       if (activeTarget) {
         addToTarget(button, item.source || "tool");
         return;
@@ -1580,7 +1587,7 @@ function build(instance, baseElem, optionsOrMethod) {
     return !!settings.toolbar_drag;
   }
   function makeToolbarDraggable() {
-    var buttons = all(mainControls, "[data-ge-toolbar]");
+    var buttons = all(mainControls, "[data-ge-toolbar]:not([data-ge-action])");
     buttons.forEach(function(button) {
       removeClass(button, "ge-palette-button");
       button.removeEventListener("pointerdown", startToolbarDrag);
@@ -2356,6 +2363,23 @@ function build(instance, baseElem, optionsOrMethod) {
       getActiveTarget: function() {
         return settings.active_target ? activeTarget : null;
       },
+      // True when it took: a node that cannot be, or no setting
+      // for it, says nothing, since a plugin putting back what it
+      // remembers cannot know the node is still one
+      setSelected: function(node) {
+        var chosen = panelMode() === "sidebar" && !!node && node !== canvas && canvas.contains(node) && detailsFor.has(node);
+        if (chosen) {
+          changeSelection(node);
+        }
+        return chosen;
+      },
+      setActiveTarget: function(node) {
+        var chosen = !!settings.active_target && isTarget(node);
+        if (chosen) {
+          changeTarget(node);
+        }
+        return chosen;
+      },
       // What keeps Escape from the selection and the target, and an
       // inline panel unfolded in a drawer, which Escape leaves alone
       panelOpen: function() {
@@ -2895,8 +2919,11 @@ function build(instance, baseElem, optionsOrMethod) {
     if (!Object.keys(renamed).length) {
       return node;
     }
+    var references = Object.keys(CONTAINERS).reduce(function(names, type) {
+      return names.concat(CONTAINERS[type].references || []);
+    }, REFERENCES);
     selfAndAll(node, "*").forEach(function(element2) {
-      REFERENCES.forEach(function(name) {
+      references.forEach(function(name) {
         var value = element2.getAttribute(name);
         if (value === null) {
           return;
@@ -5148,7 +5175,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "9.0.0-beta.2";
+GridEditor.version = false ? "dev" : "9.0.0-beta.4";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",

package/dist/grideditor.js

@@ -341,9 +341,7 @@
     "aria-controls",
     "aria-labelledby",
     "aria-describedby",
-    "for",
-    "data-ge-popup-id",
-    "data-ge-popup-target"
+    "for"
   ];
   var GENERATED_ID = /^ge-([a-z][a-z-]*?)-\d+-[a-z0-9]+$/;
   var BREAKPOINTS = [
@@ -1131,11 +1129,6 @@
       var signal = { signal: lifetime.signal };
       window.addEventListener("scroll", onScroll, signal);
       delegate(canvas, "click", ".ge-content", onContentClick, signal);
-      delegate(canvas, "click", ".ge-popup-trigger, [data-ge-popup-target]", function(e) {
-        if (hasClass(canvas, "ge-editing")) {
-          e.preventDefault();
-        }
-      }, signal);
       var sidebarMode = panelMode() === "sidebar";
       if (settings.active_target || sidebarMode) {
         var pressed = null;
@@ -1546,6 +1539,7 @@
       var label = typeof item.label === "function" ? item.label() : item.label || t(item.labelKey);
       var colour = item.align === "end" ? "btn-primary" : "btn-light";
       var button = labelButton(element("a", { "class": "btn btn-sm " + colour + " ge-add-container ge-add-feature" }), label, iconClass);
+      var acting = typeof item.action === "function";
       addClass(button, item.className || "");
       if (typeof item.hidden === "function" ? item.hidden() : item.hidden) {
         hide(button);
@@ -1555,7 +1549,20 @@
         "data-ge-feature": name,
         "data-ge-item": index
       });
+      if (acting) {
+        button.setAttribute("data-ge-action", "");
+        if (typeof item.disabled === "function" ? item.disabled() : item.disabled) {
+          addClass(button, "disabled");
+          button.setAttribute("aria-disabled", "true");
+        }
+      }
       button.addEventListener("click", function() {
+        if (acting) {
+          if (!hasClass(button, "disabled")) {
+            item.action(button);
+          }
+          return;
+        }
         if (activeTarget) {
           addToTarget(button, item.source || "tool");
           return;
@@ -1581,7 +1588,7 @@
       return !!settings.toolbar_drag;
     }
     function makeToolbarDraggable() {
-      var buttons = all(mainControls, "[data-ge-toolbar]");
+      var buttons = all(mainControls, "[data-ge-toolbar]:not([data-ge-action])");
       buttons.forEach(function(button) {
         removeClass(button, "ge-palette-button");
         button.removeEventListener("pointerdown", startToolbarDrag);
@@ -2357,6 +2364,23 @@
         getActiveTarget: function() {
           return settings.active_target ? activeTarget : null;
         },
+        // True when it took: a node that cannot be, or no setting
+        // for it, says nothing, since a plugin putting back what it
+        // remembers cannot know the node is still one
+        setSelected: function(node) {
+          var chosen = panelMode() === "sidebar" && !!node && node !== canvas && canvas.contains(node) && detailsFor.has(node);
+          if (chosen) {
+            changeSelection(node);
+          }
+          return chosen;
+        },
+        setActiveTarget: function(node) {
+          var chosen = !!settings.active_target && isTarget(node);
+          if (chosen) {
+            changeTarget(node);
+          }
+          return chosen;
+        },
         // What keeps Escape from the selection and the target, and an
         // inline panel unfolded in a drawer, which Escape leaves alone
         panelOpen: function() {
@@ -2896,8 +2920,11 @@
       if (!Object.keys(renamed).length) {
         return node;
       }
+      var references = Object.keys(CONTAINERS).reduce(function(names, type) {
+        return names.concat(CONTAINERS[type].references || []);
+      }, REFERENCES);
       selfAndAll(node, "*").forEach(function(element2) {
-        REFERENCES.forEach(function(name) {
+        references.forEach(function(name) {
           var value = element2.getAttribute(name);
           if (value === null) {
             return;
@@ -5149,7 +5176,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "9.0.0-beta.2";
+  GridEditor.version = false ? "dev" : "9.0.0-beta.4";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",