@themarioga/grid-editor 8.4.0 → 8.6.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

@@ -125,7 +125,9 @@ export interface GridEditorOptions {
     inline_style?: InlineStyleOptions;
     /** The tabs plugin: the variant of the tabs containers made new. */
     tabs?: TabsOptions;
-    elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
+    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. */
@@ -286,6 +335,22 @@ export type GridEditorCallbacks = {
 };
 
 /** A plugin's factory: called once per editor with the handle in docs/plugins.md. */
+/** An element the toolbar offers, from elements.types. */
+export interface ElementType {
+    /** What it is: its data-ge-element. */
+    type: string;
+    /** Its markup: html, or a function called for each one made that returns html or a node. */
+    html: string | (() => string | Node);
+    /** Its button's label, as it is. */
+    label?: string;
+    /** Its button's label, a locale key: wins over label, and follows setLocale. */
+    labelKey?: string;
+    /** The button shows this icon alone, with the label as its title. */
+    iconClass?: string;
+    /** Its toolbar_groups category. Default 'elements'. */
+    group?: string;
+}
+
 export type PluginFactory = ((ge: any) => Record<string, unknown>) & { always?: boolean };
 
 export interface CreateColumnOptions extends Placement {
@@ -346,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. */
@@ -379,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

@@ -392,8 +392,10 @@ var NESTED_SETTINGS = {
     // 'auto' turns them on when the page has any
     selector: "[data-ge-element]",
     // What the host marks an element with
-    auto: false
+    auto: false,
     // Treat every child of a content area as an element
+    types: []
+    // The elements the toolbar offers: { type, html, label | labelKey, iconClass, group }
   },
   resize: {
     enabled: true,
@@ -760,31 +762,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;
@@ -798,13 +822,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();
       }
     });
@@ -818,6 +843,9 @@ function build(instance, baseElem, optionsOrMethod) {
     confirmHandlers.shown = null;
     retireModal(confirmDialog);
     confirmDialog = null;
+    if (pendingAnswer) {
+      pendingAnswer(null);
+    }
   }
   function retireModal(panel) {
     var Modal = modalLibrary();
@@ -1112,7 +1140,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
@@ -1147,7 +1175,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
       );
@@ -1239,7 +1267,8 @@ function build(instance, baseElem, optionsOrMethod) {
   }
   var CORE_GROUPS = [
     { name: "rows", labelKey: "group.rows" },
-    { name: "content", labelKey: "group.content" }
+    { name: "content", labelKey: "group.content" },
+    { name: "elements", labelKey: "group.elements" }
   ];
   function toolbarGroupOf(value) {
     return typeof value === "string" && value.trim() !== "" ? value : null;
@@ -1267,7 +1296,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)));
@@ -1316,7 +1345,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");
@@ -1407,7 +1436,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",
@@ -1420,6 +1450,9 @@ function build(instance, baseElem, optionsOrMethod) {
         return;
       }
       var made = item.create();
+      if (!made) {
+        return;
+      }
       var placed = item.inColumn ? inRowOfItsOwn(made) : made;
       var added = addNode(item.kind, made, function() {
         canvas.appendChild(placed);
@@ -1528,6 +1561,9 @@ function build(instance, baseElem, optionsOrMethod) {
   function insertFeatureFromToolbar(button, where, source) {
     var item = FEATURES[button.getAttribute("data-ge-feature")].toolbar[parseInt(button.getAttribute("data-ge-item"), 10)];
     var made = item.create();
+    if (!made) {
+      return null;
+    }
     var placed = made;
     if (item.inColumn) {
       if (!is(where.region, ".column")) {
@@ -1909,22 +1945,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 getHtml() {
+  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(options) {
+    if (options && options.keepEditing) {
+      return snapshotHtml();
+    }
     deinit();
     stripPixelWidths(canvas);
     var html = canvas.innerHTML;
@@ -1938,10 +2074,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();
     }
@@ -2054,6 +2204,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,
@@ -2576,10 +2731,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);
@@ -3980,13 +4138,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);
@@ -4194,7 +4355,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;
     }
@@ -4203,7 +4364,7 @@ function build(instance, baseElem, optionsOrMethod) {
       if (typeof func == "string") {
         func = window[func];
       }
-      func(canvas, isInit);
+      func(root || canvas, isInit);
     });
   }
   function textCutter() {
@@ -4323,8 +4484,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);
     });
   }
@@ -4497,6 +4658,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) {
@@ -4512,7 +4685,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.4.0";
+GridEditor.version = false ? "dev" : "8.6.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",
@@ -4540,6 +4713,7 @@ GridEditor.locales = {
     "tool.more": "More",
     "group.rows": "Rows",
     "group.content": "Content",
+    "group.elements": "Elements",
     "group.select": "Add",
     "panel.title": "{kind} settings",
     "panel.close": "Close",