@themarioga/grid-editor 8.5.0 → 8.7.0

package/src/js/grideditor.js

@@ -437,6 +437,7 @@ function build(instance, baseElem, optionsOrMethod) {
         var closeOverflowMenu = function() {}; // Folds the toolbar's overflow menu away, when it has one
         var refitToolbar = function() {}; // Works out again what the toolbar's overflow menu holds, when it has one
         var addButtons = []; // The toolbar's add buttons, in toolbar order: { button, home, group }
+        var shownToolbar = {}; // Each feature plugin's toolbar items, as the toolbar was last built with them
         var toolbarGroup = null; // The category shown, with toolbar_groups. Kept when the toolbar is rebuilt
         var warnedHere = {}; // Some warnings are worth saying once per instance, not once per call
         var sortables = []; // Every list made sortable, so deinit destroys exactly those
@@ -628,30 +629,61 @@ function build(instance, baseElem, optionsOrMethod) {
                 return;
             }
 
+            confirmWith(message, { danger: true }, function(confirmed) {
+                if (confirmed) { whenConfirmed(); }
+            });
+        }
+
+        /**
+         * ge.confirm(): a question of a plugin's own, in the same modal.
+         * `answer` is called once: true for the ok button, false for cancel,
+         * the close button or Escape, and null when the question goes
+         * unanswered because the modal is taken away - setLocale, destroy, or
+         * another question asked over it.
+         */
+        function confirmWith(message, options, answer) {
+            options = options || {};
             var Modal = modalLibrary();
 
             if (!Modal) {
-                if (window.confirm(message)) { whenConfirmed(); }
+                answer(window.confirm(message));
                 return;
             }
 
             var modal = confirmModal();
             var confirmed = false;
+            var ok = dom.one(modal, '.ge-confirm-ok');
+
+            // The question before this one, if it is still up, goes unanswered
+            if (pendingAnswer) { pendingAnswer(null); }
+
+            var settle = function(value) {
+                if (pendingAnswer !== settle) { return; }
+                pendingAnswer = null;
+                answer(value);
+            };
+            pendingAnswer = settle;
+
+            dom.one(modal, '.modal-title').textContent = options.title || t('confirm.title');
+            dom.one(modal, '.ge-confirm-cancel').textContent = options.cancel || t('confirm.cancel');
+            ok.textContent = options.ok || t('confirm.ok');
+            dom.toggleClass(ok, 'btn-danger', !!options.danger);
+            dom.toggleClass(ok, 'btn-primary', !options.danger);
 
             dom.one(modal, '.ge-confirm-message').textContent = message;
-            dom.one(modal, '.ge-confirm-ok').onclick = function() {
+            ok.onclick = function() {
                 confirmed = true;
                 Modal.getInstance(modal).hide();
             };
 
             confirmHandlers.hidden = function() {
                 // After the modal is out of the way, so the backdrop is not
-                // sitting over the animation the delete runs
-                if (confirmed) { whenConfirmed(); }
+                // sitting over the animation a delete runs
+                settle(confirmed);
             };
 
             confirmHandlers.shown = function() {
-                dom.one(modal, '.ge-confirm-ok').focus();
+                ok.focus();
             };
 
             Modal.getOrCreateInstance(modal).show();
@@ -660,6 +692,7 @@ function build(instance, baseElem, optionsOrMethod) {
         // What the confirm modal does when Bootstrap says it is shown or
         // hidden: this question's answer, replaced by the next question's
         var confirmHandlers = { hidden: null, shown: null };
+        var pendingAnswer = null; // The open question's answer, until it is given
 
         /** Built once per instance, and taken away again by destroy(). */
         function confirmModal() {
@@ -690,11 +723,15 @@ function build(instance, baseElem, optionsOrMethod) {
             dom.one(confirmDialog, '.ge-confirm-ok').textContent = t('confirm.ok');
 
             trackModal(confirmDialog);
+            // Only while it is the modal asking: one being taken away -
+            // setLocale builds another - finishes hiding after the next
+            // question is up, and that answer is not its to give
+            var asking = confirmDialog;
             confirmDialog.addEventListener('hidden.bs.modal', function() {
-                if (confirmHandlers.hidden) { confirmHandlers.hidden(); }
+                if (asking === confirmDialog && confirmHandlers.hidden) { confirmHandlers.hidden(); }
             });
             confirmDialog.addEventListener('shown.bs.modal', function() {
-                if (confirmHandlers.shown) { confirmHandlers.shown(); }
+                if (asking === confirmDialog && confirmHandlers.shown) { confirmHandlers.shown(); }
             });
 
             return confirmDialog;
@@ -709,6 +746,9 @@ function build(instance, baseElem, optionsOrMethod) {
             confirmHandlers.shown = null;
             retireModal(confirmDialog);
             confirmDialog = null;
+
+            // A plugin's question goes unanswered, and the plugin is told so
+            if (pendingAnswer) { pendingAnswer(null); }
         }
 
         /**
@@ -1081,7 +1121,7 @@ function build(instance, baseElem, optionsOrMethod) {
             settings.new_row_layouts.forEach(function(layout) {
                 var grouped = !Array.isArray(layout);
                 var btn = dom.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('-') }),
@@ -1126,7 +1166,7 @@ function build(instance, baseElem, optionsOrMethod) {
             // buttons next to these ones do
             Object.keys(CONTAINERS).forEach(function(type) {
                 var definition = CONTAINERS[type];
-                var button = labelButton(dom.element('a', { 'class': 'btn btn-sm btn-primary ge-add-container' }),
+                var button = labelButton(dom.element('a', { 'class': 'btn btn-sm btn-light ge-add-container' }),
                     t(definition.labelKey), definition.iconClass);
 
                 dom.attr(button, { 'data-ge-toolbar': 'container', 'data-ge-container-type': type });
@@ -1150,8 +1190,10 @@ function build(instance, baseElem, optionsOrMethod) {
             // One with align 'end' goes on the right instead, as an icon,
             // beside the source and preview buttons.
             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') {
@@ -1274,7 +1316,7 @@ function build(instance, baseElem, optionsOrMethod) {
             names.forEach(function(name) {
                 var tab = tabs.appendChild(dom.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,6 +1358,34 @@ function build(instance, baseElem, optionsOrMethod) {
         }
 
         /** The toolbar off the page, with what keeps its overflow menu up to date. */
+        /** A feature plugin's toolbar items: its array, or what its function returns now. */
+        function toolbarOf(feature) {
+            var items = typeof feature.toolbar === 'function' ? feature.toolbar() : feature.toolbar;
+            return Array.isArray(items) ? items : [];
+        }
+
+        /**
+         * ge.refreshToolbar(): the toolbar built again, from what the plugins'
+         * toolbars hold now - a plugin whose buttons come and go calls it when
+         * they have. The category shown, the preview and the source view stay
+         * as they are; an open overflow menu folds away.
+         */
+        function refreshToolbar() {
+            // Not built yet - the first one reads the toolbars as they are
+            // then - or taken away for good
+            if (!mainControls || destroyed) { return; }
+
+            var previewing = !!dom.one(mainControls, '.gm-preview.active');
+
+            removeMainControls();
+            createMainControls();
+
+            if (previewing) {
+                dom.addClass(dom.one(mainControls, '.gm-preview'), 'active btn-danger');
+            }
+            onScroll();
+        }
+
         function removeMainControls() {
             if (toolbarLifetime) { toolbarLifetime.abort(); }
             toolbarLifetime = null;
@@ -1333,7 +1403,7 @@ function build(instance, baseElem, optionsOrMethod) {
          */
         function createOverflowMenu(start) {
             var more = dom.create('<div class="ge-toolbar-more">' +
-                '<button type="button" class="btn btn-sm btn-primary"><i class="bi bi-three-dots"></i></button>' +
+                '<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>' +
@@ -1442,7 +1512,10 @@ function build(instance, baseElem, optionsOrMethod) {
             // A label of its own, worked out when the toolbar is built - and
             // built again by setLocale - or the string its labelKey names
             var label = typeof item.label === 'function' ? item.label() : (item.label || t(item.labelKey));
-            var button = labelButton(dom.element('a', { 'class': 'btn btn-sm btn-primary ge-add-container ge-add-feature' }), label, iconClass);
+            // Grey with the add buttons on the left, blue with the source and
+            // preview buttons on the right
+            var colour = item.align === 'end' ? 'btn-primary' : 'btn-light';
+            var button = labelButton(dom.element('a', { 'class': 'btn btn-sm ' + colour + ' ge-add-container ge-add-feature' }), label, iconClass);
 
             dom.addClass(button, item.className || '');
             dom.attr(button, {
@@ -1613,7 +1686,10 @@ function build(instance, baseElem, optionsOrMethod) {
          * to the canvas, just after the top level block the pointer was in.
          */
         function insertFeatureFromToolbar(button, where, source) {
-            var item = FEATURES[button.getAttribute('data-ge-feature')].toolbar[parseInt(button.getAttribute('data-ge-item'), 10)];
+            // The item the button was built from, whatever the plugin's list
+            // says now: it may have changed since, and the toolbar not yet
+            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; }
             var placed = made;
@@ -2090,26 +2166,144 @@ function build(instance, baseElem, optionsOrMethod) {
             hideDropMarker();
             // In case a dialog was opened with no settings panel open
             closeDialog();
-            dom.all(canvas, '.ge-tools-drawer').forEach(function(drawer) { drawer.remove(); });
+            removeDrawers(canvas);
             pluginFields.clear();
-            unwrapTexts();
+            unwrapTexts(canvas);
             plugins('onDeinit');
             // After the rich text editors have let go of their content areas:
             // one that rebuilt its area's DOM brought the preview styles back
             // with it, and the attribute recording them came back too
             clearPreviews(canvas);
-            dom.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) {
+            dom.all(root, '.ge-tools-drawer').forEach(function(drawer) { drawer.remove(); });
+        }
+
+        function clearRowCols(root) {
+            dom.all(root, '[data-ge-row-cols]').forEach(function(row) { row.removeAttribute('data-ge-row-cols'); });
+        }
+
+        /**
+         * The plugins that cannot be read without the canvas leaving editing:
+         * the ones that put something on the canvas - an unmark, an onDeinit
+         * or an onBeforeDeinit takes it off - and say nothing of how to take
+         * it off a copy.
+         */
+        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;
+        }
+
+        /**
+         * A copy of the canvas, and the way from each of its elements back to
+         * the one it was copied from. The two trees are walked side by side,
+         * which works because a deep clone has the same shape.
+         */
+        function copyCanvas() {
+            var copy = canvas.cloneNode(true);
+            var toLive = new Map();
+            var toCopy = 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; },
+            };
+        }
+
+        /**
+         * getHtml without the canvas leaving editing: what deinit takes off,
+         * taken off a copy, so the text being typed into, the settings panel
+         * and the focus are where they were. The same markup getHtml gives,
+         * or getHtml itself - with a word, once - when a plugin can only take
+         * its marking off the canvas, or will not this time.
+         */
+        function snapshotHtml() {
+            // Nothing is being edited to keep: the canvas is out of editing
+            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(dom.all(root, '.ge-active-target, .ge-settings-target')).forEach(function(node) {
+                dom.removeClass(node, 'ge-active-target ge-settings-target');
+                dom.dropEmptyClass(node);
+            });
+            dom.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);
+            dom.all(root, '[data-ge-container]').forEach(unmarkContainerClasses);
+            sortables.forEach(function(sortableInstance) {
+                var list = copy.copyOf(sortableInstance.el);
+                if (list) { dom.all(list, '[draggable]').forEach(function(node) { node.removeAttribute('draggable'); }); }
+            });
+            removeResizeFurniture(root);
+            runFilter(false, root);
+            stripPixelWidths(root);
+
+            return root.innerHTML;
         }
 
         /**
          * The markup as a host would save it: no drawers, no editor, no
          * sortables. The canvas goes back to editing afterwards.
          */
-        function getHtml() {
+        function getHtml(options) {
+            if (options && options.keepEditing) { return snapshotHtml(); }
+
             deinit();
             stripPixelWidths(canvas);
             var html = canvas.innerHTML;
@@ -2130,8 +2324,31 @@ function build(instance, baseElem, optionsOrMethod) {
         }
 
         /** getHtml with grid-editor's own classes and attributes taken off. */
-        function getPlainHtml() {
-            return plainHtml(getHtml());
+        function getPlainHtml(options) {
+            return plainHtml(getHtml(options));
+        }
+
+        /**
+         * ge.setHtml(): the canvas made of other markup, and edited again. Not
+         * an add or a delete of anything, so no events: what was there is
+         * replaced as a whole. innerHTML, as the source view does, so a
+         * <script> in it is markup and does not run in the editor.
+         */
+        function setHtml(html) {
+            // What is in the textarea is not wanted - html replaces it - but
+            // the source view closes the one way it always does
+            if (sourceOpen) {
+                closeSource();
+                if (mainControls) {
+                    dom.all(mainControls, '.gm-edit-mode').forEach(function(button) {
+                        dom.removeClass(button, 'active btn-danger');
+                    });
+                }
+            }
+
+            deinit();
+            dom.setHtml(canvas, html);
+            init();
         }
 
         /**
@@ -2141,6 +2358,8 @@ function build(instance, baseElem, optionsOrMethod) {
          * as a framework tearing a component down does.
          */
         function destroy() {
+            // First, while the editor is whole: a plugin may still read it
+            plugins('onDestroy');
             // The html being edited is what the canvas is left with
             if (sourceOpen) { closeSource(); }
             deinit();
@@ -2268,6 +2487,11 @@ function build(instance, baseElem, optionsOrMethod) {
                 closeDialog: closeDialog,
                 rowFromLayout: rowFromLayoutValue,
                 nodeHtml: nodeHtml,
+                // The markup as getHtml gives it, with the canvas left editing
+                snapshotHtml: snapshotHtml,
+                setHtml: setHtml,
+                // 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: textReady,
@@ -2280,6 +2504,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: drawerOf,
+                // The toolbar built again, from the plugins' toolbars as they are now
+                refreshToolbar: refreshToolbar,
                 toolbarItems: function(name) {
                     return mainControls
                         ? dom.all(mainControls, '[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]')
@@ -2990,11 +3216,15 @@ function build(instance, baseElem, optionsOrMethod) {
 
                 if (definition) { definition.unmark(container); }
 
-                dom.removeClass(container, 'ge-container ge-container-' + containerTypeOf(container));
-                dom.dropEmptyClass(container);
+                unmarkContainerClasses(container);
             });
         }
 
+        function unmarkContainerClasses(container) {
+            dom.removeClass(container, 'ge-container ge-container-' + containerTypeOf(container));
+            dom.dropEmptyClass(container);
+        }
+
         /** A new drawer as the first child of `node`. */
         function prependDrawer(node, className) {
             var drawer = dom.element('div', { 'class': className });
@@ -4923,10 +5153,14 @@ function build(instance, baseElem, optionsOrMethod) {
         }
 
         function removeResizable() {
-            dom.all(canvas, '.ge-resize-handle').forEach(function(handle) { handle.remove(); });
+            removeResizeFurniture(canvas);
+        }
 
-            dom.all(canvas, '.ge-resize-size').forEach(function(readout) { readout.remove(); });
-            stripPixelWidths(canvas);
+        function removeResizeFurniture(root) {
+            dom.all(root, '.ge-resize-handle').forEach(function(handle) { handle.remove(); });
+
+            dom.all(root, '.ge-resize-size').forEach(function(readout) { readout.remove(); });
+            stripPixelWidths(root);
         }
 
         /**
@@ -5252,7 +5486,7 @@ function build(instance, baseElem, optionsOrMethod) {
          * function, or the name of one on window, and gets the canvas and
          * whether this is init.
          */
-        function runFilter(isInit) {
+        function runFilter(isInit, root) {
             if (!settings.custom_filter || !settings.custom_filter.length) { return; }
 
             var filters = typeof settings.custom_filter === 'string' || typeof settings.custom_filter === 'function'
@@ -5264,7 +5498,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     func = window[func];
                 }
 
-                func(canvas, isInit);
+                func(root || canvas, isInit);
             });
         }
 
@@ -5457,8 +5691,8 @@ function build(instance, baseElem, optionsOrMethod) {
         }
 
         /** After the drawers are gone, so a wrapper holds its content area and nothing else. */
-        function unwrapTexts() {
-            dom.all(canvas, '.ge-text-block').forEach(function(textBlock) {
+        function unwrapTexts(root) {
+            dom.all(root, '.ge-text-block').forEach(function(textBlock) {
                 dom.unwrap(textBlock);
             });
         }
@@ -5666,6 +5900,22 @@ function build(instance, baseElem, optionsOrMethod) {
         // Again, with what the plugins filled in: the text editors'
         // content_types when the host gave none
         instance.settings = settingsCopy();
+
+        // A feature plugin's methods that are not the editor's own documented
+        // ones - the autosave plugin's - are the instance's too, while the
+        // plugin is there
+        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();
 

package/src/js/inline-style/display.js

@@ -177,8 +177,8 @@ export function displayPart(ge, given) {
         });
     }
 
-    function unmark() {
-        dom.all(ge.canvas, '.ge-hidden-in-view, [data-ge-hidden-in], [' + SHOWN_ATTR + ']').forEach(function(node) {
+    function unmark(root) {
+        dom.all(root || ge.canvas, '.ge-hidden-in-view, [data-ge-hidden-in], [' + SHOWN_ATTR + ']').forEach(function(node) {
             dom.removeClass(node, 'ge-hidden-in-view');
             node.removeAttribute('data-ge-hidden-in');
             node.removeAttribute(SHOWN_ATTR);
@@ -224,6 +224,7 @@ export function displayPart(ge, given) {
         },
 
         onRefresh: mark,
-        onDeinit: unmark,
+        onDeinit: function() { unmark(); },
+        cleanMarkup: unmark,
     };
 }

package/src/js/inline-style/drawerflow.js

@@ -95,15 +95,19 @@ export function drawerflowPart(ge) {
         });
     }
 
-    function unmark() {
-        if (observer) { observer.disconnect(); }
-        observer = null;
-
-        dom.all(ge.canvas, '.' + OUT_CLASS).forEach(function(node) {
+    function unmarkNodes(root) {
+        dom.all(root, '.' + OUT_CLASS).forEach(function(node) {
             dom.removeClass(node, OUT_CLASS);
             node.removeAttribute(OUT_ATTR);
             dom.dropEmptyClass(node);
         });
+    }
+
+    function unmark() {
+        if (observer) { observer.disconnect(); }
+        observer = null;
+
+        unmarkNodes(ge.canvas);
 
         if (sheet) { sheet.remove(); }
         sheet = null;
@@ -114,5 +118,6 @@ export function drawerflowPart(ge) {
         families: [],
         onRefresh: mark,
         onDeinit: unmark,
+        cleanMarkup: unmarkNodes,
     };
 }

package/src/js/locales/grideditor.es.js

@@ -140,6 +140,10 @@ GridEditor.locales.es = {
     'tool.paste': 'Pegar',
     'clipboard.paste_row': 'Pegar fila',
     'clipboard.paste_section': 'Pegar sección',
+    'autosave.restore_title': '¿Recuperar el borrador?',
+    'autosave.restore_message': 'Hay un borrador de esta página guardado el {date}, con cambios que no se publicaron. ¿Quieres recuperarlo?',
+    'autosave.restore': 'Recuperar',
+    'autosave.discard': 'Descartar',
     'utility.col_from_row': 'De la fila: {count}',
     'utility.row_cols': 'Columnas por fila',
     'badge.row_cols': '{count} por fila',

package/src/js/plugins/grideditor.accordion.js

@@ -206,6 +206,12 @@ GridEditor.containers.accordion = function(ge) {
             ge.unwrapLabels(container);
         },
 
+        // The same, on a copy of the canvas: unmark only touches markup
+        cleanMarkup: function(root) {
+            var definition = this;
+            dom.all(root, '[data-ge-container="accordion"]').forEach(function(container) { definition.unmark(container); });
+        },
+
         afterPaneMove: function(container, item) {
             reparentAccordionItem(container, item);
         },