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

package/example/history.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/grideditor.min.js"></script>
+    <!-- Undo and redo are a plugin of its own, loaded after the editor. The
+         others are here so there is a bit of everything to undo. -->
+    <script src="../dist/plugins/grideditor.history.min.js"></script>
+    <script src="../dist/plugins/grideditor.clipboard.min.js"></script>
+    <script src="../dist/plugins/grideditor.tabs.min.js"></script>
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var grid = document.getElementById('myGrid');
+            var log = document.getElementById('log');
+
+            new GridEditor(grid, {
+                new_row_layouts: [[12], [6, 6], [4, 4, 4]],
+                content_types: [],
+                // What was selected is selected again after an undo
+                settings_panel: 'sidebar',
+                history: {
+                    max: 50,       // the steps that can be undone
+                    delay: 500,    // a drag or a burst of changes is one step
+                },
+            });
+
+            // A step done says where it came from: 'shortcut', 'tool' or 'api'
+            ['undo', 'redo'].forEach(function(name) {
+                grid.addEventListener('grideditor:after-' + name, function(e) {
+                    log.textContent = name + ' (' + e.detail.source + ')';
+                });
+            });
+        });
+    </script>
+
+    <title>Grid Editor example - undo and redo</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+    <div class="container py-3">
+        <h2>Undo and redo</h2>
+        <p class="text-body-secondary">
+            Delete a row, drag a column to another size, paste something, change
+            an id in the panel: each is a step. <kbd>Ctrl</kbd>+<kbd>Z</kbd>
+            (<kbd>⌘</kbd>+<kbd>Z</kbd> on a Mac) goes back one, and
+            <kbd>Ctrl</kbd>+<kbd>Y</kbd> or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd>
+            comes forward again, as do the <i class="bi bi-arrow-counterclockwise"></i>
+            and <i class="bi bi-arrow-clockwise"></i> buttons on the right of
+            the toolbar. A change made after going back ends what could be redone.
+        </p>
+        <p class="text-body-secondary">
+            While you are writing in a text or a field, the keys undo what you
+            typed there, as usual; it becomes a step when you are done. The
+            column or row selected in the sidebar is selected again after a step.
+            <span id="log" class="fw-semibold"></span>
+        </p>
+
+        <div id="myGrid">
+            <div class="row">
+                <div class="col-lg-6">
+                    <h3>Change this page</h3>
+                    <p>Then undo it.</p>
+                </div>
+                <div class="col-lg-6">
+                    <p>Delete this column, or the whole row.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4"><p>One.</p></div>
+                <div class="col-lg-4"><p>Two.</p></div>
+                <div class="col-lg-4"><p>Three.</p></div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

package/example/index.html

@@ -178,6 +178,14 @@
                 <span class="text-body-secondary">Copying a row, a column or a container and pasting it somewhere else, in this editor or another</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="history.html">
+                <div class="d-flex justify-content-between">
+                    <strong>Undo and redo</strong>
+                    <code class="text-body-secondary">history.html</code>
+                </div>
+                <span class="text-body-secondary">The history plugin: Ctrl+Z and Ctrl+Y, and buttons on the toolbar, over what the editor changes</span>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="wrap_content.html">
                 <div class="d-flex justify-content-between">
                     <strong>Wrapped content</strong>

package/package.json

@@ -32,7 +32,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "9.0.0-beta.1",
+  "version": "9.0.0-beta.3",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/grideditor.js

@@ -1614,6 +1614,8 @@ function build(instance, baseElem, optionsOrMethod) {
             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);
 
+            var acting = typeof item.action === 'function';
+
             dom.addClass(button, item.className || '');
             // Hidden as it is now: a plugin that shows and hides its buttons
             // only hears of what changes, not of the toolbar being built again
@@ -1623,7 +1625,21 @@ function build(instance, baseElem, optionsOrMethod) {
                 'data-ge-feature': name,
                 'data-ge-item': index,
             });
+            if (acting) {
+                // Not a block to add: it is not carried onto the canvas, and
+                // the active target is none of its business
+                button.setAttribute('data-ge-action', '');
+                if (typeof item.disabled === 'function' ? item.disabled() : item.disabled) {
+                    dom.addClass(button, 'disabled');
+                    button.setAttribute('aria-disabled', 'true');
+                }
+            }
             button.addEventListener('click', function() {
+                if (acting) {
+                    if (!dom.hasClass(button, 'disabled')) { item.action(button); }
+                    return;
+                }
+
                 if (activeTarget) { addToTarget(button, item.source || 'tool'); return; }
 
                 var made = item.create();
@@ -1661,7 +1677,7 @@ function build(instance, baseElem, optionsOrMethod) {
         }
 
         function makeToolbarDraggable() {
-            var buttons = dom.all(mainControls, '[data-ge-toolbar]');
+            var buttons = dom.all(mainControls, '[data-ge-toolbar]:not([data-ge-action])');
 
             buttons.forEach(function(button) {
                 dom.removeClass(button, 'ge-palette-button');
@@ -2622,6 +2638,40 @@ function build(instance, baseElem, optionsOrMethod) {
                         ? dom.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 && dom.hasClass(confirmDialog, 'show')) { return true; }
+
+                    return panelMode() === 'inline' && dom.all(canvas, '.ge-tools-drawer > .ge-details').some(dom.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);
+                    });
+                },
             };
         }
 

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

@@ -175,6 +175,8 @@ GridEditor.locales.es = {
     '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',
+    'history.undo': 'Deshacer',
+    'history.redo': 'Rehacer',
     '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.clipboard.js

@@ -17,6 +17,11 @@
  *
  * A paste is an add like any other - before-add-* and after-add-*, with
  * `source: 'paste'` - so a host can turn one away.
+ *
+ * With active_target (which the sidebar turns on), Ctrl+C copies the node
+ * selected, or the target, and Ctrl+V pastes into the target, or the node
+ * selected. `clipboard: { shortcuts: false }` turns them off. They go through
+ * the same store as the tools, never the system clipboard.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';
@@ -85,10 +90,41 @@ window.addEventListener('storage', function(e) {
     if (e.key === STORAGE_ITEM) { announce(); }
 });
 
+/** The editors listening for the shortcuts, and the one used last, which a key press goes to. */
+var listeningEditors = [];
+var lastEditor = null;
+
+function track(e) {
+    lastEditor = listeningEditors.filter(function(ge) { return ge.contains(e.target); })[0] || null;
+}
+
+// Captured: a control that stops the event still counts as using its editor
+document.addEventListener('pointerdown', track, true);
+document.addEventListener('focusin', track, true);
+
+/** 'c', 'v' or null, from the letter typed or, on a layout without Latin letters, the key's place. */
+function shortcutKey(e) {
+    var key = (e.key || '').toLowerCase();
+    if (!/^[a-z]$/.test(key)) { key = { KeyC: 'c', KeyV: 'v' }[e.code] || ''; }
+
+    return key === 'c' || key === 'v' ? key : null;
+}
+
+function typing() {
+    var focus = document.activeElement;
+    return !!focus && (dom.is(focus, 'input, textarea, select') || focus.isContentEditable);
+}
+
+function textSelected() {
+    var selection = window.getSelection ? window.getSelection() : null;
+    return !!selection && !selection.isCollapsed && selection.toString() !== '';
+}
+
 GridEditor.features.clipboard = function(ge) {
 
     var shown = null; // What the toolbar's paste buttons stand for
     var listening = false; // Whether refresh is on the document's change event
+    var shortcuts = shortcutsSetting();
 
     function used(name) {
         return !ge.settings.plugins || ge.settings.plugins.indexOf(name) !== -1;
@@ -115,11 +151,29 @@ GridEditor.features.clipboard = function(ge) {
         return ['row', 'column', 'section', 'text', 'element'].indexOf(kind) !== -1 ? kind : null;
     }
 
-    function copy(node, kind) {
+    /** On, unless the host said otherwise: with no target there is nothing for a key to act on. */
+    function shortcutsSetting() {
+        var wanted = (ge.settings.clipboard || {}).shortcuts;
+        var target = !!ge.settings.active_target;
+
+        if (wanted !== undefined && typeof wanted !== 'boolean') {
+            ge.warn('clipboard.shortcuts is true or false: ' + (target ? 'on' : 'off') + ', as with active_target, is used');
+            wanted = undefined;
+        }
+        if (wanted === undefined) { return target; }
+        if (wanted && !target) {
+            ge.warn('clipboard.shortcuts needs active_target, or settings_panel "sidebar": without it, Ctrl+C and Ctrl+V do nothing');
+            return false;
+        }
+
+        return wanted;
+    }
+
+    function copy(node, kind, source) {
         var html = ge.nodeHtml(node);
 
         write({ version: VERSION, category: categoryOf(kind), kind: kind, html: html });
-        ge.emit('after-copy', ge.payloadFor(kind, node, { source: 'tool' }));
+        ge.emit('after-copy', ge.payloadFor(kind, node, { source: source || 'tool' }));
 
         // The canvas came back with new drawers: the one to flash is the
         // node's new copy tool
@@ -142,6 +196,67 @@ GridEditor.features.clipboard = function(ge) {
         ge.place(ge.freshNode(clip.html), clip.kind, { appendTo: target, source: 'paste' });
     }
 
+    /**
+     * Ctrl+V: into the target as the toolbar's paste button would - a
+     * section, which only the canvas takes, after the block the target is in
+     * - and what that button has none for as the target's paste tool would.
+     * With no target, as the selected node's paste tool. What does not fit
+     * is not pasted anywhere else.
+     */
+    function pasteByShortcut() {
+        var clip = read();
+        var target = ge.getActiveTarget();
+        var node = target || ge.getSelected();
+        if (!clip || !node) { return false; }
+
+        var placement = { appendTo: node, source: 'paste' };
+        if (target && clip.category === 'section') {
+            if (!available(clip)) { return false; }
+            var top = target;
+            while (top.parentElement && top.parentElement !== ge.canvas) { top = top.parentElement; }
+            placement = { insertAfter: top, source: 'paste' };
+        } else if (!fits(clip, TARGETS[ge.kindOf(node)] || [])) {
+            return false;
+        }
+
+        var made = ge.place(ge.freshNode(clip.html), clip.kind, placement);
+        if (made && made.scrollIntoView) { made.scrollIntoView({ behavior: 'smooth' }); }
+
+        return true;
+    }
+
+    function copyByShortcut() {
+        if (textSelected()) { return false; }
+
+        var node = ge.getSelected() || ge.getActiveTarget();
+        var kind = node && ge.kindOf(node);
+        if (!kind || !categoryOf(kind)) { return false; }
+
+        copy(node, kind, 'shortcut');
+        return true;
+    }
+
+    function onKeydown(e) {
+        if (lastEditor !== ge || e.repeat || e.shiftKey || e.altKey || !(e.ctrlKey || e.metaKey)) { return; }
+        var key = shortcutKey(e);
+        if (!key || !dom.hasClass(ge.canvas, 'ge-editing') || typing() || ge.panelOpen()) { return; }
+
+        // Left alone, it is the browser's: a copy of the text, a paste in a field
+        if (key === 'c' ? copyByShortcut() : pasteByShortcut()) { e.preventDefault(); }
+    }
+
+    function listenForShortcuts(on) {
+        var at = listeningEditors.indexOf(ge);
+
+        if (on && at === -1) {
+            listeningEditors.push(ge);
+            document.addEventListener('keydown', onKeydown);
+        } else if (!on && at !== -1) {
+            listeningEditors.splice(at, 1);
+            document.removeEventListener('keydown', onKeydown);
+        }
+    }
+
     /** Show the paste tools, and the toolbar's paste buttons, that fit what is copied. */
     function refresh() {
         var clip = read();
@@ -203,11 +318,19 @@ GridEditor.features.clipboard = function(ge) {
                 document.addEventListener(CHANGE, refresh);
                 listening = true;
             }
+            listenForShortcuts(shortcuts);
         },
 
         onDeinit: function() {
             document.removeEventListener(CHANGE, refresh);
             listening = false;
+            // A copy takes the canvas out of editing and back: the editor
+            // stays the one used last, as it is still
+            listenForShortcuts(false);
+        },
+
+        onDestroy: function() {
+            if (lastEditor === ge) { lastEditor = null; }
         },
 
         // Nothing of its own on the canvas: the tools are in the drawers