@themarioga/grid-editor 8.5.0 → 8.7.0

package/dist/grideditor.css

@@ -2,6 +2,8 @@
   position: relative;
   min-height: 22px;
   margin-bottom: 10px;
+  /* The add buttons on the left are grey, so the blue is left to the
+       source, preview and layout buttons on the right */
   /* toolbar_groups: the tabs choosing which category of add buttons
        shows, at the start of the line. Never squeezed, and never behind the
        more button */
@@ -23,16 +25,25 @@
   z-index: 20;
   top: 0;
 }
-.ge-mainControls .ge-addRowGroup .btn.btn-primary {
+.ge-mainControls .ge-addRowGroup .btn.btn-light,
+.ge-mainControls .ge-addContainerGroup .btn.btn-light,
+.ge-mainControls .ge-toolbar-more > .btn.btn-light {
   background: #f4f4f4;
   color: #666;
   border-color: #999;
-  display: flex;
-  align-items: center;
 }
-.ge-mainControls .ge-addRowGroup .btn.btn-primary:hover {
+.ge-mainControls .ge-addRowGroup .btn.btn-light:hover,
+.ge-mainControls .ge-addContainerGroup .btn.btn-light:hover,
+.ge-mainControls .ge-toolbar-more > .btn.btn-light:hover,
+.ge-mainControls .ge-addRowGroup .btn.btn-light:active,
+.ge-mainControls .ge-addContainerGroup .btn.btn-light:active,
+.ge-mainControls .ge-toolbar-more > .btn.btn-light:active {
   background: #E3E3E3;
 }
+.ge-mainControls .ge-addRowGroup .btn.btn-light {
+  display: flex;
+  align-items: center;
+}
 .ge-mainControls .ge-addRowGroup .ge-row-icon {
   width: 48px;
   /* A button shrinks to its content, and an equal column has none */

package/dist/grideditor.d.ts

@@ -126,6 +126,8 @@ export interface GridEditorOptions {
     /** The tabs plugin: the variant of the tabs containers made new. */
     tabs?: TabsOptions;
     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;
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];
     valid_col_offsets?: number[];
@@ -151,6 +153,50 @@ export interface GridEditorOptions {
     [plugin: string]: unknown;
 }
 
+/** The autosave plugin's options. */
+export interface AutosaveOptions {
+    /** Saving from the start; the methods turn it on and off. Default true. */
+    enabled?: boolean;
+    /** localStorage or sessionStorage. Default 'local'. */
+    storage?: 'local' | 'session';
+    /** Where the draft is kept. Default 'grideditor.autosave:' + the page's path + '#' + the canvas's id. One per document on a page that loads several. */
+    key?: string | null;
+    /** Milliseconds after the last change. Default 1000. */
+    delay?: number;
+    /** Milliseconds a draft is offered for; null, the default, for ever. */
+    maxAge?: number | null;
+}
+
+/** A draft the autosave plugin kept. */
+export interface AutosaveDraft {
+    html: string;
+    /** When, as an ISO 8601 date. */
+    savedAt: string;
+}
+
+export interface GetHtmlOptions {
+    /** Read the canvas without it leaving editing: open texts and settings panels stay open. */
+    keepEditing?: boolean;
+}
+
+export interface AutosavePayload {
+    canvas: HTMLElement;
+    html: string;
+    savedAt: string;
+    source: 'change' | 'pagehide' | 'api' | 'destroy';
+}
+
+export interface RestoreDraftPayload {
+    canvas: HTMLElement;
+    html: string;
+    savedAt: string;
+}
+
+export interface AutosaveErrorPayload {
+    canvas: HTMLElement;
+    error: unknown;
+}
+
 /** Where a node was, or went: its parent and its index among the blocks there. */
 export interface Position {
     parent: HTMLElement;
@@ -271,6 +317,9 @@ export interface GridEditorEventMap {
     'grideditor:popup-orphan': PopupOrphanPayload;
     'grideditor:view-change': ViewChangePayload;
     'grideditor:target-change': TargetChangePayload;
+    'grideditor:after-autosave': AutosavePayload;
+    'grideditor:after-restore-draft': RestoreDraftPayload;
+    'grideditor:autosave-error': AutosaveErrorPayload;
 }
 
 /** An event the editor dispatches on its canvas: a CustomEvent whose detail is the payload. */
@@ -362,10 +411,10 @@ export declare class GridEditor {
     /** A read-only copy of the settings the editor runs with. */
     readonly settings: Readonly<GridEditorOptions>;
 
-    /** The html to save: no drawers, no editor classes, no inline styles. */
-    getHtml(): string;
+    /** The html to save: no drawers, no editor classes, no inline styles. keepEditing reads it without the canvas leaving editing. */
+    getHtml(options?: GetHtmlOptions): string;
     /** getHtml without grid-editor's marking, for publishing. It cannot be edited again as it was. */
-    getPlainHtml(): string;
+    getPlainHtml(options?: GetHtmlOptions): string;
     /** Run the editing pass over the canvas again, after markup was put in. */
     init(): this;
     /** Take the editing furniture off, leaving the markup. */
@@ -395,6 +444,13 @@ export declare class GridEditor {
     getUtility(node: Target, family: string, view?: View): string | null;
     /** Write one through the events; null is inherit. False when canceled or nothing changed. */
     setUtility(node: Target, family: string, value: string | number | null, view?: View): boolean;
+    /** The autosave plugin's, when it is loaded: false when the browser gives it no storage. */
+    enableAutosave?(): boolean;
+    disableAutosave?(): boolean;
+    /** Save now, if it changed: true when it was written. */
+    saveDraft?(): boolean;
+    getDraft?(): AutosaveDraft | null;
+    clearDraft?(): boolean;
 }
 
 export default GridEditor;

package/dist/grideditor.esm.js

@@ -652,6 +652,7 @@ function build(instance, baseElem, optionsOrMethod) {
   var refitToolbar = function() {
   };
   var addButtons = [];
+  var shownToolbar = {};
   var toolbarGroup = null;
   var warnedHere = {};
   var sortables = [];
@@ -762,31 +763,53 @@ function build(instance, baseElem, optionsOrMethod) {
       whenConfirmed();
       return;
     }
-    var Modal = modalLibrary();
-    if (!Modal) {
-      if (window.confirm(message)) {
+    confirmWith(message, { danger: true }, function(confirmed) {
+      if (confirmed) {
         whenConfirmed();
       }
+    });
+  }
+  function confirmWith(message, options, answer) {
+    options = options || {};
+    var Modal = modalLibrary();
+    if (!Modal) {
+      answer(window.confirm(message));
       return;
     }
     var modal = confirmModal();
     var confirmed = false;
+    var ok = one(modal, ".ge-confirm-ok");
+    if (pendingAnswer) {
+      pendingAnswer(null);
+    }
+    var settle = function(value) {
+      if (pendingAnswer !== settle) {
+        return;
+      }
+      pendingAnswer = null;
+      answer(value);
+    };
+    pendingAnswer = settle;
+    one(modal, ".modal-title").textContent = options.title || t("confirm.title");
+    one(modal, ".ge-confirm-cancel").textContent = options.cancel || t("confirm.cancel");
+    ok.textContent = options.ok || t("confirm.ok");
+    toggleClass(ok, "btn-danger", !!options.danger);
+    toggleClass(ok, "btn-primary", !options.danger);
     one(modal, ".ge-confirm-message").textContent = message;
-    one(modal, ".ge-confirm-ok").onclick = function() {
+    ok.onclick = function() {
       confirmed = true;
       Modal.getInstance(modal).hide();
     };
     confirmHandlers.hidden = function() {
-      if (confirmed) {
-        whenConfirmed();
-      }
+      settle(confirmed);
     };
     confirmHandlers.shown = function() {
-      one(modal, ".ge-confirm-ok").focus();
+      ok.focus();
     };
     Modal.getOrCreateInstance(modal).show();
   }
   var confirmHandlers = { hidden: null, shown: null };
+  var pendingAnswer = null;
   function confirmModal() {
     if (confirmDialog) {
       return confirmDialog;
@@ -800,13 +823,14 @@ function build(instance, baseElem, optionsOrMethod) {
     one(confirmDialog, ".ge-confirm-cancel").textContent = t("confirm.cancel");
     one(confirmDialog, ".ge-confirm-ok").textContent = t("confirm.ok");
     trackModal(confirmDialog);
+    var asking = confirmDialog;
     confirmDialog.addEventListener("hidden.bs.modal", function() {
-      if (confirmHandlers.hidden) {
+      if (asking === confirmDialog && confirmHandlers.hidden) {
         confirmHandlers.hidden();
       }
     });
     confirmDialog.addEventListener("shown.bs.modal", function() {
-      if (confirmHandlers.shown) {
+      if (asking === confirmDialog && confirmHandlers.shown) {
         confirmHandlers.shown();
       }
     });
@@ -820,6 +844,9 @@ function build(instance, baseElem, optionsOrMethod) {
     confirmHandlers.shown = null;
     retireModal(confirmDialog);
     confirmDialog = null;
+    if (pendingAnswer) {
+      pendingAnswer(null);
+    }
   }
   function retireModal(panel) {
     var Modal = modalLibrary();
@@ -1114,7 +1141,7 @@ function build(instance, baseElem, optionsOrMethod) {
     settings.new_row_layouts.forEach(function(layout) {
       var grouped = !Array.isArray(layout);
       var btn = element("a", {
-        "class": "btn btn-sm btn-primary",
+        "class": "btn btn-sm btn-light",
         title: grouped ? t("row.add_row_cols", { columns: layout.columns, counts: rowColsText(layout.row_cols) }) : t("row.add", { layout: layout.join("-") }),
         // What this button makes, in the markup rather than in
         // memory: a drag works on a clone of it
@@ -1149,7 +1176,7 @@ function build(instance, baseElem, optionsOrMethod) {
     Object.keys(CONTAINERS).forEach(function(type) {
       var definition = CONTAINERS[type];
       var button = labelButton(
-        element("a", { "class": "btn btn-sm btn-primary ge-add-container" }),
+        element("a", { "class": "btn btn-sm btn-light ge-add-container" }),
         t(definition.labelKey),
         definition.iconClass
       );
@@ -1170,8 +1197,10 @@ function build(instance, baseElem, optionsOrMethod) {
       addButtons.push({ button, home: addContainerGroup, group: toolbarGroupOf(definition.group) || "content" });
     });
     var endItems = [];
+    shownToolbar = {};
     Object.keys(FEATURES).forEach(function(name) {
-      (FEATURES[name].toolbar || []).forEach(function(item, index) {
+      shownToolbar[name] = toolbarOf(FEATURES[name]);
+      shownToolbar[name].forEach(function(item, index) {
         var button = featureButton(name, item, index);
         if (item.align === "end") {
           endItems.push(button);
@@ -1270,7 +1299,7 @@ function build(instance, baseElem, optionsOrMethod) {
     names.forEach(function(name) {
       var tab = tabs.appendChild(element("button", {
         type: "button",
-        "class": "btn btn-sm btn-outline-primary",
+        "class": "btn btn-sm btn-outline-secondary",
         role: "tab",
         "data-ge-group": name
       }, groupLabel(name)));
@@ -1307,6 +1336,22 @@ function build(instance, baseElem, optionsOrMethod) {
       return !closest(entry.button, ".ge-toolbar-stash");
     });
   }
+  function toolbarOf(feature) {
+    var items = typeof feature.toolbar === "function" ? feature.toolbar() : feature.toolbar;
+    return Array.isArray(items) ? items : [];
+  }
+  function refreshToolbar() {
+    if (!mainControls || destroyed) {
+      return;
+    }
+    var previewing = !!one(mainControls, ".gm-preview.active");
+    removeMainControls();
+    createMainControls();
+    if (previewing) {
+      addClass(one(mainControls, ".gm-preview"), "active btn-danger");
+    }
+    onScroll();
+  }
   function removeMainControls() {
     if (toolbarLifetime) {
       toolbarLifetime.abort();
@@ -1319,7 +1364,7 @@ function build(instance, baseElem, optionsOrMethod) {
     mainControls.remove();
   }
   function createOverflowMenu(start) {
-    var more = create('<div class="ge-toolbar-more"><button type="button" class="btn btn-sm btn-primary"><i class="bi bi-three-dots"></i></button><div class="ge-toolbar-overflow"><div class="ge-addRowGroup btn-group"></div><div class="ge-addContainerGroup btn-group"></div></div></div>');
+    var more = create('<div class="ge-toolbar-more"><button type="button" class="btn btn-sm btn-light"><i class="bi bi-three-dots"></i></button><div class="ge-toolbar-overflow"><div class="ge-addRowGroup btn-group"></div><div class="ge-addContainerGroup btn-group"></div></div></div>');
     start.parentNode.insertBefore(more, start.nextSibling);
     var toggle2 = one(more, "button");
     var panel = one(more, ".ge-toolbar-overflow");
@@ -1410,7 +1455,8 @@ function build(instance, baseElem, optionsOrMethod) {
   function featureButton(name, item, index) {
     var iconClass = item.iconClass || (item.align === "end" ? "bi bi-plus" : null);
     var label = typeof item.label === "function" ? item.label() : item.label || t(item.labelKey);
-    var button = labelButton(element("a", { "class": "btn btn-sm btn-primary ge-add-container ge-add-feature" }), label, iconClass);
+    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);
     addClass(button, item.className || "");
     attr(button, {
       "data-ge-toolbar": "feature",
@@ -1532,7 +1578,10 @@ function build(instance, baseElem, optionsOrMethod) {
     return { region, before };
   }
   function insertFeatureFromToolbar(button, where, source) {
-    var item = FEATURES[button.getAttribute("data-ge-feature")].toolbar[parseInt(button.getAttribute("data-ge-item"), 10)];
+    var item = (shownToolbar[button.getAttribute("data-ge-feature")] || [])[parseInt(button.getAttribute("data-ge-item"), 10)];
+    if (!item) {
+      return null;
+    }
     var made = item.create();
     if (!made) {
       return null;
@@ -1918,22 +1967,122 @@ function build(instance, baseElem, optionsOrMethod) {
     closeSizePicker();
     hideDropMarker();
     closeDialog();
-    all(canvas, ".ge-tools-drawer").forEach(function(drawer) {
-      drawer.remove();
-    });
+    removeDrawers(canvas);
     pluginFields.clear();
-    unwrapTexts();
+    unwrapTexts(canvas);
     plugins("onDeinit");
     clearPreviews(canvas);
-    all(canvas, "[data-ge-row-cols]").forEach(function(row) {
-      row.removeAttribute("data-ge-row-cols");
-    });
+    clearRowCols(canvas);
     unmarkContainers();
     removeSortable();
     removeResizable();
-    runFilter(false);
+    runFilter(false, canvas);
+  }
+  function removeDrawers(root) {
+    all(root, ".ge-tools-drawer").forEach(function(drawer) {
+      drawer.remove();
+    });
+  }
+  function clearRowCols(root) {
+    all(root, "[data-ge-row-cols]").forEach(function(row) {
+      row.removeAttribute("data-ge-row-cols");
+    });
+  }
+  function pluginsWithoutCleanMarkup() {
+    var names = [];
+    [CONTAINERS, FEATURES, UTILITIES].forEach(function(registry) {
+      Object.keys(registry).forEach(function(name) {
+        var plugin = registry[name];
+        var marks = plugin.unmark || plugin.onDeinit || plugin.onBeforeDeinit;
+        if (marks && !plugin.cleanMarkup) {
+          names.push(name);
+        }
+      });
+    });
+    return names;
+  }
+  function copyCanvas() {
+    var copy = canvas.cloneNode(true);
+    var toLive = /* @__PURE__ */ new Map();
+    var toCopy = /* @__PURE__ */ new Map();
+    var live = document.createTreeWalker(canvas, NodeFilter.SHOW_ELEMENT);
+    var copied = document.createTreeWalker(copy, NodeFilter.SHOW_ELEMENT);
+    var a = live.currentNode;
+    var b = copied.currentNode;
+    while (a && b) {
+      toLive.set(b, a);
+      toCopy.set(a, b);
+      a = live.nextNode();
+      b = copied.nextNode();
+    }
+    return {
+      root: copy,
+      liveOf: function(node) {
+        return toLive.get(node) || null;
+      },
+      copyOf: function(node) {
+        return toCopy.get(node) || null;
+      }
+    };
+  }
+  function snapshotHtml() {
+    if (sourceOpen) {
+      return getHtml();
+    }
+    var missing = pluginsWithoutCleanMarkup();
+    if (missing.length) {
+      missing.forEach(function(name) {
+        warnOnceHere("snapshot:" + name, 'the "' + name + '" plugin has no cleanMarkup, so the canvas leaves editing to be read: open texts and settings panels close');
+      });
+      return getHtml();
+    }
+    var copy = copyCanvas();
+    var root = copy.root;
+    [root].concat(all(root, ".ge-active-target, .ge-settings-target")).forEach(function(node) {
+      removeClass(node, "ge-active-target ge-settings-target");
+      dropEmptyClass(node);
+    });
+    all(root, ".ge-drop-marker").forEach(function(marker) {
+      marker.remove();
+    });
+    removeDrawers(root);
+    unwrapTexts(root);
+    var refused = null;
+    [CONTAINERS, FEATURES, UTILITIES].forEach(function(registry) {
+      Object.keys(registry).forEach(function(name) {
+        var plugin = registry[name];
+        if (refused || !plugin.cleanMarkup) {
+          return;
+        }
+        if (plugin.cleanMarkup(root, copy.liveOf) === false) {
+          refused = name;
+        }
+      });
+    });
+    if (refused) {
+      warnOnceHere("snapshot-refused:" + refused, 'the "' + refused + '" plugin cannot take its marking off a copy right now, so the canvas leaves editing to be read');
+      return getHtml();
+    }
+    clearPreviews(root);
+    clearRowCols(root);
+    all(root, "[data-ge-container]").forEach(unmarkContainerClasses);
+    sortables.forEach(function(sortableInstance) {
+      var list = copy.copyOf(sortableInstance.el);
+      if (list) {
+        all(list, "[draggable]").forEach(function(node) {
+          node.removeAttribute("draggable");
+        });
+      }
+    });
+    removeResizeFurniture(root);
+    runFilter(false, root);
+    stripPixelWidths(root);
+    return root.innerHTML;
   }
-  function getHtml() {
+  function getHtml(options) {
+    if (options && options.keepEditing) {
+      return snapshotHtml();
+    }
     deinit();
     stripPixelWidths(canvas);
     var html = canvas.innerHTML;
@@ -1947,10 +2096,24 @@ function build(instance, baseElem, optionsOrMethod) {
     init();
     return html;
   }
-  function getPlainHtml() {
-    return plainHtml(getHtml());
+  function getPlainHtml(options) {
+    return plainHtml(getHtml(options));
+  }
+  function setHtml2(html) {
+    if (sourceOpen) {
+      closeSource();
+      if (mainControls) {
+        all(mainControls, ".gm-edit-mode").forEach(function(button) {
+          removeClass(button, "active btn-danger");
+        });
+      }
+    }
+    deinit();
+    setHtml(canvas, html);
+    init();
   }
   function destroy() {
+    plugins("onDestroy");
     if (sourceOpen) {
       closeSource();
     }
@@ -2063,6 +2226,11 @@ function build(instance, baseElem, optionsOrMethod) {
       closeDialog,
       rowFromLayout: rowFromLayoutValue,
       nodeHtml,
+      // The markup as getHtml gives it, with the canvas left editing
+      snapshotHtml,
+      setHtml: setHtml2,
+      // A question in the editor's confirm modal
+      confirm: confirmWith,
       // A text editor has rewritten a content area, so whatever the
       // editor and its plugins had put in there goes back in
       textReady,
@@ -2075,6 +2243,8 @@ function build(instance, baseElem, optionsOrMethod) {
       // A node's drawer: its first child, or for a content area the
       // one beside it in its text block
       drawerOf,
+      // The toolbar built again, from the plugins' toolbars as they are now
+      refreshToolbar,
       toolbarItems: function(name) {
         return mainControls ? all(mainControls, '[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]') : [];
       }
@@ -2585,10 +2755,13 @@ function build(instance, baseElem, optionsOrMethod) {
       if (definition) {
         definition.unmark(container);
       }
-      removeClass(container, "ge-container ge-container-" + containerTypeOf(container));
-      dropEmptyClass(container);
+      unmarkContainerClasses(container);
     });
   }
+  function unmarkContainerClasses(container) {
+    removeClass(container, "ge-container ge-container-" + containerTypeOf(container));
+    dropEmptyClass(container);
+  }
   function prependDrawer(node, className) {
     var drawer = element("div", { "class": className });
     node.insertBefore(drawer, node.firstChild);
@@ -3989,13 +4162,16 @@ function build(instance, baseElem, optionsOrMethod) {
     on(handle, "pointerup pointercancel", onUp);
   }
   function removeResizable() {
-    all(canvas, ".ge-resize-handle").forEach(function(handle) {
+    removeResizeFurniture(canvas);
+  }
+  function removeResizeFurniture(root) {
+    all(root, ".ge-resize-handle").forEach(function(handle) {
       handle.remove();
     });
-    all(canvas, ".ge-resize-size").forEach(function(readout) {
+    all(root, ".ge-resize-size").forEach(function(readout) {
       readout.remove();
     });
-    stripPixelWidths(canvas);
+    stripPixelWidths(root);
   }
   function snapUnits(col, pixels) {
     var units = Math.round(pixels / rowContentWidth(col.parentElement) * MAX_COL_SIZE);
@@ -4203,7 +4379,7 @@ function build(instance, baseElem, optionsOrMethod) {
     setOffset(column, tier, wanted.offset);
     return column;
   }
-  function runFilter(isInit) {
+  function runFilter(isInit, root) {
     if (!settings.custom_filter || !settings.custom_filter.length) {
       return;
     }
@@ -4212,7 +4388,7 @@ function build(instance, baseElem, optionsOrMethod) {
       if (typeof func == "string") {
         func = window[func];
       }
-      func(canvas, isInit);
+      func(root || canvas, isInit);
     });
   }
   function textCutter() {
@@ -4332,8 +4508,8 @@ function build(instance, baseElem, optionsOrMethod) {
       }
     });
   }
-  function unwrapTexts() {
-    all(canvas, ".ge-text-block").forEach(function(textBlock) {
+  function unwrapTexts(root) {
+    all(root, ".ge-text-block").forEach(function(textBlock) {
       unwrap(textBlock);
     });
   }
@@ -4506,6 +4682,18 @@ function build(instance, baseElem, optionsOrMethod) {
   instances.set(canvas, instance);
   loadPlugins();
   instance.settings = settingsCopy();
+  Object.keys(featureMethods).forEach(function(name) {
+    if (Object.prototype.hasOwnProperty.call(own, name) || name in instance) {
+      return;
+    }
+    instance[name] = function() {
+      if (destroyed) {
+        warnOnceHere("destroyed:" + name, t("warning.destroyed", { method: name }));
+        return null;
+      }
+      return featureMethods[name].apply(null, arguments);
+    };
+  });
   setup();
   init();
   GridEditor._created.forEach(function(hook) {
@@ -4521,7 +4709,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.5.0";
+GridEditor.version = false ? "dev" : "8.7.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",