@themarioga/grid-editor 9.0.0-beta.1 → 9.0.0-beta.3

package/dist/grideditor.d.ts

@@ -178,6 +178,10 @@ export interface GridEditorOptions {
     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[];
@@ -220,6 +224,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;
@@ -250,6 +266,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;
@@ -271,7 +300,7 @@ export interface Payload {
     parent: HTMLElement | null;
     canvas: HTMLElement;
     breakpoint: View;
-    source: 'api' | 'tool' | 'dragdrop' | 'paste' | 'panel' | string;
+    source: 'api' | 'tool' | 'dragdrop' | 'paste' | 'panel' | 'shortcut' | string;
     /** A pane inside a container. */
     container?: HTMLElement;
 }
@@ -383,6 +412,9 @@ export interface GridEditorEventMap {
     '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. */
@@ -521,6 +553,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

@@ -1545,6 +1545,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 +1555,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 +1594,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);
@@ -2349,6 +2363,58 @@ function build(instance, baseElem, optionsOrMethod) {
       refreshToolbar,
       toolbarItems: function(name) {
         return mainControls ? all(mainControls, '[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]') : [];
+      },
+      getSelected: function() {
+        return panelMode() === "sidebar" ? selected : null;
+      },
+      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() {
+        if (openSettingsState || dialogState) {
+          return true;
+        }
+        if (confirmDialog && hasClass(confirmDialog, "show")) {
+          return true;
+        }
+        return panelMode() === "inline" && all(canvas, ".ge-tools-drawer > .ge-details").some(visible);
+      },
+      // The toolbar and the settings panels are outside the canvas
+      contains: function(node) {
+        if (!node || node.nodeType !== 1) {
+          return false;
+        }
+        if (canvas.contains(node) || mainControls && mainControls.contains(node)) {
+          return true;
+        }
+        if (dialogPanel && dialogPanel.contains(node)) {
+          return true;
+        }
+        if (confirmDialog && confirmDialog.contains(node)) {
+          return true;
+        }
+        return Object.keys(settingsPanels).some(function(mode) {
+          return settingsPanels[mode].contains(node);
+        });
       }
     };
   }
@@ -5113,7 +5179,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "9.0.0-beta.1";
+GridEditor.version = false ? "dev" : "9.0.0-beta.3";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",

package/dist/grideditor.js

@@ -1546,6 +1546,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 +1556,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 +1595,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);
@@ -2350,6 +2364,58 @@
         refreshToolbar,
         toolbarItems: function(name) {
           return mainControls ? all(mainControls, '[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]') : [];
+        },
+        getSelected: function() {
+          return panelMode() === "sidebar" ? selected : null;
+        },
+        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() {
+          if (openSettingsState || dialogState) {
+            return true;
+          }
+          if (confirmDialog && hasClass(confirmDialog, "show")) {
+            return true;
+          }
+          return panelMode() === "inline" && all(canvas, ".ge-tools-drawer > .ge-details").some(visible);
+        },
+        // The toolbar and the settings panels are outside the canvas
+        contains: function(node) {
+          if (!node || node.nodeType !== 1) {
+            return false;
+          }
+          if (canvas.contains(node) || mainControls && mainControls.contains(node)) {
+            return true;
+          }
+          if (dialogPanel && dialogPanel.contains(node)) {
+            return true;
+          }
+          if (confirmDialog && confirmDialog.contains(node)) {
+            return true;
+          }
+          return Object.keys(settingsPanels).some(function(mode) {
+            return settingsPanels[mode].contains(node);
+          });
         }
       };
     }
@@ -5114,7 +5180,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "9.0.0-beta.1";
+  GridEditor.version = false ? "dev" : "9.0.0-beta.3";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",