@themarioga/grid-editor 5.0.0 → 5.1.0

package/example/wrap_content.html

@@ -2,37 +2,50 @@
 <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://code.jquery.com/jquery-4.0.0.min.js"></script>
     <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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></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/jquery.grideditor.min.js"></script>
-    
+
     <script>
         $(function() {
-            // Initialize grid editor
-            $('#myGrid').gridEditor({
+            var grid = $('#myGrid');
+
+            // 1. The markup as the page wrote it, captured before the editor
+            //    touches it
+            $('#before').text(grid.html().trim());
+
+            // 2. The editor finds no .row in there, so it wraps everything
+            //    into one row with a single full-width column
+            grid.gridEditor({
                 new_row_layouts: [[12], [6, 6], [9, 3], [3, 9]],
                 content_types: ['tinymce'],
             });
-            
-            // Get resulting html
-            var html = $('#myGrid').gridEditor('getHtml');
-            console.log(html);
+
+            // 3. What getHtml hands back: the same content, now a grid, with
+            //    the marking the editor needs to read it back
+            // 4. What getPlainHtml hands back: the same, without that marking
+            function showResult() {
+                $('#after').text(grid.gridEditor('getHtml').trim());
+                $('#plain').text(grid.gridEditor('getPlainHtml').trim());
+            }
+            showResult();
+            $('#refresh').on('click', showResult);
         });
     </script>
-    
-    <title>Grid Editor example</title>
+
+    <title>Grid Editor example - wrapped content</title>
 </head>
 <body>
     <!-- Back to the demo index -->
@@ -40,10 +53,47 @@
         <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
     </div>
 
-    <div id="myGrid">
-        <h1>Hello!</h1>
-        <p>Test</p>
+    <div class="container py-3">
+        <h2>Wrapped content</h2>
+        <p class="text-body-secondary">
+            The editor below was started on plain markup &mdash; a heading, a
+            paragraph and a list, with no <code>.row</code> or
+            <code>.col-*</code> anywhere. Grid editor does not refuse it: it
+            wraps all of it into one row with a single
+            <code>col-lg-12</code> column, and from there it is an ordinary
+            grid. Add rows, split the column, edit the text, then press
+            <em>Refresh</em> to see the html that comes out: as
+            <code>getHtml</code> returns it, to save and edit again, and as
+            <code>getPlainHtml</code> returns it, to publish.
+        </p>
+
+        <h5 class="mt-4">1. The markup in the page</h5>
+        <pre class="bg-body-tertiary border rounded p-3 small"><code id="before"></code></pre>
+
+        <h5 class="mt-4">2. The editor, started on that markup</h5>
+        <div id="myGrid">
+            <h1>Hello!</h1>
+            <p>This page was written as plain html, with no Bootstrap grid.</p>
+            <ul>
+                <li>No row</li>
+                <li>No column</li>
+            </ul>
+        </div>
+
+        <h5 class="mt-4 d-flex align-items-center gap-2">
+            3. The result of <code>getHtml</code>
+            <button id="refresh" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-clockwise"></i> Refresh</button>
+        </h5>
+        <pre class="bg-body-tertiary border rounded p-3 small"><code id="after"></code></pre>
+
+        <h5 class="mt-4">4. The result of <code>getPlainHtml</code></h5>
+        <p class="text-body-secondary small">
+            The same markup without the editor&rsquo;s <code>ge-*</code> classes,
+            <code>column</code> class and <code>data-ge-*</code> attributes.
+            For publishing: the editor cannot read it back as it was.
+        </p>
+        <pre class="bg-body-tertiary border rounded p-3 small"><code id="plain"></code></pre>
     </div>
 
 </body>
-</html>
+</html>

package/package.json

@@ -34,7 +34,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "5.0.0",
+  "version": "5.1.0",
   "main": "dist/jquery.grideditor.js",
   "files": [
     "dist",

package/src/js/jquery.grideditor.js

@@ -18,6 +18,7 @@
  */
 var METHODS = {
     getHtml:          { value: true, noInstance: function(element) { return element.html(); } },
+    getPlainHtml:     { value: true, noInstance: function(element) { return plainHtml(element.html()); } },
     init:             {},
     deinit:           {},
     reset:            {},
@@ -247,6 +248,56 @@ function dispatch(set, name, args) {
     return set;
 }
 
+/**
+ * Html with grid-editor's own marking taken off: the ge-* classes, the
+ * column class and the data-ge-* attributes. A div that was only there for
+ * the editor - a content area, a bare element or container wrapper - is left
+ * with nothing on it, and goes, its children taking its place.
+ *
+ * The marking is what lets the editor read its markup back, so this is for
+ * publishing, not for saving something to edit again.
+ */
+function plainHtml(html) {
+    // Parsed in a document of its own, which is inert: no script in the
+    // markup runs and no image starts loading while it is being cleaned
+    var root = $(document.implementation.createHTMLDocument('').body);
+    root[0].innerHTML = html;
+    var emptied = [];
+
+    root.find('*').each(function() {
+        var node = $(this);
+        var marked = false;
+
+        $.each($.makeArray(this.attributes), function(i, attribute) {
+            if (attribute.name.indexOf('data-ge-') === 0) {
+                node.removeAttr(attribute.name);
+                marked = true;
+            }
+        });
+
+        var classes = (node.attr('class') || '').split(/\s+/).filter(Boolean);
+        var kept = classes.filter(function(name) {
+            return name !== 'column' && name.indexOf('ge-') !== 0;
+        });
+        if (kept.length !== classes.length) { marked = true; }
+        if (kept.length) {
+            node.attr('class', kept.join(' '));
+        } else {
+            node.removeAttr('class');
+        }
+
+        if (marked && this.tagName === 'DIV' && !this.attributes.length) {
+            emptied.push(this);
+        }
+    });
+
+    emptied.forEach(function(div) {
+        $(div).replaceWith($(div).contents());
+    });
+
+    return root[0].innerHTML;
+}
+
 $.fn.gridEditor = function( optionsOrMethod ) {
 
     var self = this;
@@ -918,14 +969,14 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                         .attr('data-ge-toolbar', 'feature')
                         .attr('data-ge-feature', name)
                         .attr('data-ge-item', index)
-                        .append('<i class="bi bi-plus"></i>')
+                        .append($('<i />').addClass(item.iconClass || 'bi bi-plus'))
                         .append($('<span />').text(t(item.labelKey)))
                         .on('click', function() {
                             var made = item.create();
 
                             addNode(item.kind, made, function() {
                                 made.appendTo(canvas);
-                            }, { parent: canvas, source: 'tool' });
+                            }, { parent: canvas, source: item.source || 'tool' });
                         })
                         .appendTo(addContainerGroup)
                     ;
@@ -1145,7 +1196,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 } else {
                     made.appendTo(where.region);
                 }
-            }, { parent: where.region, source: 'dragdrop' });
+            }, { parent: where.region, source: item.source || 'dragdrop' });
         }
 
         /** A line where the block would go, following the pointer. */
@@ -1395,6 +1446,23 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return html;
         }
 
+        /**
+         * One node's markup, as getHtml would give it: the canvas goes out of
+         * editing to read it and comes back, as it does for getHtml.
+         */
+        function nodeHtml(node) {
+            deinit();
+            stripPixelWidths(node);
+            var html = node[0].outerHTML;
+            init();
+            return html;
+        }
+
+        /** getHtml with grid-editor's own classes and attributes taken off. */
+        function getPlainHtml() {
+            return plainHtml(getHtml());
+        }
+
         function destroy() {
             deinit();
             removeConfirmModal();
@@ -1535,6 +1603,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 utilityField: utilityField,
                 bareStyle: bareStyle,
                 rowFromLayout: rowFromLayoutValue,
+                nodeHtml: nodeHtml,
+                toolbarItems: function(name) {
+                    return mainControls
+                        ? mainControls.find('[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]')
+                        : $();
+                },
             };
         }
 
@@ -2128,17 +2202,6 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             createMoveTool(drawer);
             addSettingsTool(drawer, container, settings.container_classes);
-            if (definition.addPane) {
-                createTool(drawer, t(definition.addPaneKey), 'ge-add-pane', 'bi bi-plus-circle', function() {
-                    var pane = definition.addPane(container, {});
-
-                    addNode(definition.paneKind, pane, function() {}, {
-                        parent: container,
-                        source: 'tool',
-                        container: container,
-                    });
-                });
-            }
 
             settings.container_tools.forEach(function(hostTool) {
                 createTool(drawer, hostTool.title || '', hostTool.className || '',
@@ -2152,6 +2215,19 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     container.slideUp(removed);
                 });
             });
+
+            // Delete then add, the order rows and columns have
+            if (definition.addPane) {
+                createTool(drawer, t(definition.addPaneKey), 'ge-add-pane', 'bi bi-plus-circle', function() {
+                    var pane = definition.addPane(container, {});
+
+                    addNode(definition.paneKind, pane, function() {}, {
+                        parent: container,
+                        source: 'tool',
+                        container: container,
+                    });
+                });
+            }
         }
 
         /**
@@ -2673,11 +2749,16 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
 
             // Beside the gear, because every node that has one is a node a
-            // utility may apply to, whichever plugin built its drawer
+            // utility may apply to, whichever plugin built its drawer. A
+            // feature plugin's tools go there too, for the same reason: the
+            // gear is the one tool every drawer has.
             var kind = kindOf(node);
             $.each(UTILITIES, function(name, utility) {
                 if (utility.drawerTools) { utility.drawerTools(drawer, node, kind); }
             });
+            $.each(FEATURES, function(name, feature) {
+                if (feature.drawerTools) { feature.drawerTools(drawer, node, kind); }
+            });
 
             return details.appendTo(drawer);
         }
@@ -3544,7 +3625,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             var add = function() {
                 return addNode(kind, node, function() {
                     node[placement](options[placement]);
-                }, { parent: parent, source: 'api' });
+                }, { parent: parent, source: options.source || 'api' });
             };
 
             if (operationDepth > 0) {
@@ -3738,11 +3819,19 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return $();
         }
 
+        /**
+         * A content area for the first content type. With no content types
+         * it is a content area and nothing more: there is no type to name.
+         */
         function createDefaultContentWrapper() {
-            return $('<div/>')
-                .addClass('ge-content ge-content-type-' + settings.content_types[0])
-                .attr('data-ge-content-type', settings.content_types[0])
-            ;
+            var type = settings.content_types[0];
+            var contentArea = $('<div class="ge-content"/>');
+
+            if (type) {
+                contentArea.addClass('ge-content-type-' + type).attr('data-ge-content-type', type);
+            }
+
+            return contentArea;
         }
 
         /**
@@ -3810,6 +3899,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          */
         var handle = {
             getHtml: getHtml,
+            getPlainHtml: getPlainHtml,
             // init and reset are deferred when a handler calls them, so an
             // operation in flight finishes before the canvas is rebuilt
             init: function() { defer(init); },

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

@@ -84,6 +84,10 @@
         'tool.add_row_to_section': 'Añadir fila',
         'tool.delete_section': 'Quitar sección',
         'confirm.delete_section': '¿Seguro que quieres borrar esta sección y todo su contenido?',
+        'tool.copy': 'Copiar',
+        'tool.paste': 'Pegar',
+        'clipboard.paste_row': 'Pegar fila',
+        'clipboard.paste_section': 'Pegar sección',
         '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

@@ -0,0 +1,274 @@
+/**
+ * Copy and paste for grid-editor.
+ *
+ * A feature plugin: load this file after the editor and every row, column,
+ * section, container and element gets a copy tool, and every place one of
+ * them can go gets a paste tool while there is something copied that fits.
+ * What it can ask the editor for is the handle its factory is called with,
+ * described in docs/plugins.md.
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.clipboard.min.js"></script>
+ *
+ * What is copied is kept in localStorage, so it survives a reload and can be
+ * pasted in another tab or another editor of the same site. A browser that
+ * will not give the page its storage keeps it in memory, for this page only.
+ *
+ * A paste is an add like any other - before-add-* and after-add-*, with
+ * `source: 'paste'` - so a host can turn one away.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'tool.copy': 'Copy',
+    'tool.paste': 'Paste',
+    'clipboard.paste_row': 'Paste row',
+    'clipboard.paste_section': 'Paste section',
+});
+
+var STORAGE_ITEM = 'grideditor.clipboard';
+var CHANGE = 'grideditor-clipboard';
+var VERSION = 1;
+
+/** Where nothing can be stored, what was copied lives here, for this page. */
+var memory = null;
+var editors = 0;
+
+/**
+ * What each drawer takes when something is pasted into it, by the kind of the
+ * node the drawer belongs to. A category is what was copied: a row, a column,
+ * a section, a container of any type, an element.
+ */
+var TARGETS = {
+    column: ['row', 'container', 'element'],
+    row: ['column'],
+    section: ['row'],
+};
+
+/**
+ * The attributes that point at an id, as the id itself or as a #selector.
+ * A pasted copy that has to take new ids takes them here too, so its tabs,
+ * its accordion and its popups still point at their own panes.
+ */
+var REFERENCES = ['data-bs-target', 'data-bs-parent', 'href', 'aria-controls', 'aria-labelledby',
+    'aria-describedby', 'for', 'data-ge-popup-id', 'data-ge-popup-target'];
+
+/** An id grid-editor generated: ge-{type}-{counter}-{random}. */
+var GENERATED_ID = /^ge-([a-z][a-z-]*?)-\d+-[a-z0-9]+$/;
+
+function read() {
+    var raw;
+
+    try {
+        raw = window.localStorage.getItem(STORAGE_ITEM);
+    } catch (error) {
+        return memory;
+    }
+    if (raw === null) { return memory; }
+
+    try {
+        var clip = JSON.parse(raw);
+        return clip && clip.version === VERSION && clip.html ? clip : null;
+    } catch (error) {
+        return null;
+    }
+}
+
+function write(clip) {
+    try {
+        window.localStorage.setItem(STORAGE_ITEM, JSON.stringify(clip));
+        memory = null;
+    } catch (error) {
+        memory = clip;
+    }
+
+    $(document).trigger(CHANGE);
+}
+
+// Another tab copied something: every editor here looks again
+$(window).on('storage', function(e) {
+    if (e.originalEvent && e.originalEvent.key === STORAGE_ITEM) { $(document).trigger(CHANGE); }
+});
+
+$.fn.gridEditor.features.clipboard = function(ge) {
+
+    var namespace = '.ge-clipboard-' + (++editors);
+    var shown = null; // What the toolbar's paste buttons stand for
+
+    function used(name) {
+        return !ge.settings.plugins || ge.settings.plugins.indexOf(name) !== -1;
+    }
+
+    /** A category this editor can take: the plugin that makes it is here. */
+    function available(clip) {
+        if (clip.category === 'container') {
+            return !!$.fn.gridEditor.containers[clip.kind] && used(clip.kind);
+        }
+        if (clip.category === 'section') { return !!$.fn.gridEditor.features.sections && used('sections'); }
+        if (clip.category === 'element') { return !!$.fn.gridEditor.features.elements && used('elements'); }
+
+        return true;
+    }
+
+    function fits(clip, categories) {
+        return !!clip && categories.indexOf(clip.category) !== -1 && available(clip);
+    }
+
+    function categoryOf(kind) {
+        if ($.fn.gridEditor.containers[kind]) { return 'container'; }
+
+        return ['row', 'column', 'section', 'element'].indexOf(kind) !== -1 ? kind : null;
+    }
+
+    function copy(node, kind) {
+        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' }));
+
+        // The canvas came back with new drawers: the one to flash is the
+        // node's new copy tool
+        var tool = node.children('.ge-tools-drawer').find('> .ge-copy');
+        tool.addClass('ge-copied').find('i').attr('class', 'bi bi-check2');
+        setTimeout(function() {
+            tool.removeClass('ge-copied').find('i').attr('class', 'bi bi-copy');
+        }, 1200);
+    }
+
+    function paste(target, categories) {
+        var clip = read();
+        if (!fits(clip, categories)) { return; }
+
+        var node = fresh(clip.html);
+        var into = target;
+
+        // An element goes into the column's last content area. With none,
+        // the column's next init wraps it in one of its own
+        if (clip.category === 'element') {
+            var area = target.children('.ge-content').last();
+            if (area.length) { into = area; }
+        }
+
+        ge.place(node, clip.kind, { appendTo: into, source: 'paste' });
+    }
+
+    /**
+     * The copied markup as a node, with new ids where the page already has
+     * them: two copies of a tab strip pointing at one set of panes is a tab
+     * strip that opens the other copy's tabs. An id the page does not have
+     * is kept, so pasting into another page changes nothing.
+     */
+    function fresh(html) {
+        var node = $($.parseHTML(html.trim(), document, true)).first();
+        var renamed = {};
+        var taken = function(id) {
+            return !!document.getElementById(id) || Object.keys(renamed).some(function(old) {
+                return renamed[old] === id;
+            });
+        };
+
+        node.find('[id]').addBack('[id]').each(function() {
+            var id = this.id;
+            if (!document.getElementById(id)) { return; }
+
+            var generated = GENERATED_ID.exec(id);
+            var next;
+
+            if (generated) {
+                do { next = ge.containerId(generated[1]); } while (taken(next));
+            } else {
+                var n = 2;
+                while (taken(id + '-' + n)) { n++; }
+                next = id + '-' + n;
+            }
+
+            renamed[id] = next;
+            this.id = next;
+        });
+
+        if (!Object.keys(renamed).length) { return node; }
+
+        node.find('*').addBack().each(function() {
+            var element = this;
+
+            REFERENCES.forEach(function(name) {
+                var value = element.getAttribute(name);
+                if (value === null) { return; }
+                if (name === 'href' && value.charAt(0) !== '#') { return; }
+
+                var rewritten = value.split(/(\s+)/).map(function(token) {
+                    if (renamed[token]) { return renamed[token]; }
+                    if (token.charAt(0) === '#' && renamed[token.slice(1)]) { return '#' + renamed[token.slice(1)]; }
+
+                    return token;
+                }).join('');
+
+                if (rewritten !== value) { element.setAttribute(name, rewritten); }
+            });
+        });
+
+        return node;
+    }
+
+    /** Show the paste tools, and the toolbar's paste buttons, that fit what is copied. */
+    function refresh() {
+        var clip = read();
+
+        ge.canvas.find('.ge-paste').each(function() {
+            $(this).toggle(fits(clip, $(this).attr('data-ge-paste').split(' ')));
+        });
+
+        ge.toolbarItems('clipboard').each(function() {
+            var item = TOOLBAR[parseInt($(this).attr('data-ge-item'), 10)];
+            $(this).toggle(fits(clip, [item.kind]));
+        });
+
+        shown = clip;
+    }
+
+    var TOOLBAR = [
+        { kind: 'row', labelKey: 'clipboard.paste_row' },
+        { kind: 'section', labelKey: 'clipboard.paste_section' },
+    ].map(function(item) {
+        return $.extend(item, {
+            iconClass: 'bi bi-clipboard-plus',
+            source: 'paste',
+            // What the button showed, even if another tab has copied
+            // something else since
+            create: function() { return fresh(shown.html); },
+        });
+    });
+
+    return {
+        drawerTools: function(drawer, node, kind) {
+            if (categoryOf(kind)) {
+                ge.createTool(drawer, ge.t('tool.copy'), 'ge-copy', 'bi bi-copy', function() {
+                    copy(node, kind);
+                });
+            }
+
+            var categories = TARGETS[kind];
+            if (!categories) { return; }
+
+            ge.createTool(drawer, ge.t('tool.paste'), 'ge-paste', 'bi bi-clipboard-plus', function() {
+                paste(node, categories);
+            });
+            drawer.children('.ge-paste').last()
+                .attr('data-ge-paste', categories.join(' '))
+                .toggle(fits(read(), categories));
+        },
+
+        toolbar: TOOLBAR,
+
+        onInit: function() {
+            refresh();
+            $(document).off(CHANGE + namespace).on(CHANGE + namespace, refresh);
+        },
+
+        onDeinit: function() {
+            $(document).off(CHANGE + namespace);
+        },
+    };
+};
+
+})(jQuery);

package/src/js/plugins/grideditor.sections.js

@@ -124,15 +124,15 @@ $.fn.gridEditor.features.sections = function(ge) {
         ge.createMoveTool(drawer);
         ge.addSettingsTool(drawer, section, ge.settings.section_classes || []).append(widthField(section));
 
-        ge.createTool(drawer, ge.t('tool.add_row_to_section'), 'ge-add-row', 'bi bi-plus-circle', function() {
-            ge.place(ge.rowFromLayout([12]), 'row', { appendTo: section });
-        });
-
         ge.createTool(drawer, ge.t('tool.delete_section'), 'ge-delete-section', 'bi bi-trash', function() {
             ge.deleteNode('section', section, ge.t('confirm.delete_section'), function(removed) {
                 section.slideUp(removed);
             });
         });
+
+        ge.createTool(drawer, ge.t('tool.add_row_to_section'), 'ge-add-row', 'bi bi-plus-circle', function() {
+            ge.place(ge.rowFromLayout([12]), 'row', { appendTo: section });
+        });
     }
 
     function mark() {

package/src/less/grideditor.less

@@ -347,6 +347,12 @@
         position: relative;
     }
 
+    /* The copy tool says it copied, for a moment, with the clipboard
+       plugin */
+    .ge-tools-drawer > a.ge-copied {
+        color: #198754;
+    }
+
     .ge-size-picker {
         position: absolute;
         top: 100%;