@themarioga/grid-editor 5.3.1 → 6.0.0-beta.1

package/src/js/jquery.grideditor.js

@@ -1480,12 +1480,6 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 return;
             }
 
-            if (text.bundled) {
-                warnOnceHere('text-bundled:' + type, 'the ' + type + ' text editor is the copy in the ' +
-                    'main bundle, which 6.0 will not include: load dist/plugins/grideditor.' + type +
-                    '.js after the editor');
-            }
-
             $(this).data('ge-text-before', attributesOf(this)).removeData('ge-text-ready');
             $(this).addClass('ge-rte-active');
             text.start($(this));
@@ -1501,7 +1495,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             canvas.addClass('ge-editing');
             canvas.toggleClass('ge-drag-drawer', settings.drag_handle === 'drawer');
             addAllColClasses();
-            wrapContent();
+            var cutter = textCutter();
+            splitTexts(cutter);
+            wrapContent(cutter);
             wrapTexts();
             createRowControls();
             createColControls();
@@ -1632,7 +1628,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // plugins setting: a page that names its containers there has
             // named no editor, and still wants the one it uses
             $.each($.fn.gridEditor.texts, function(type, factory) {
-                TEXTS[type] = $.extend({ bundled: !!factory.bundled }, factory(api));
+                TEXTS[type] = factory(api);
             });
 
             // 5.x's registry, for an integration a host wrote itself. One the
@@ -3475,15 +3471,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
         /**
          * What a drag reports as moving. A text block is the editor's own
-         * wrapper, so what moved is the content area inside it, and until 6.0
-         * a content area moves as kind 'content', as it did in 5.x - adding
-         * and deleting one, which 5.x never announced, already say 'text'.
+         * wrapper, so what moved is the content area inside it.
          */
         function moveSubject(item) {
             var node = item.hasClass('ge-text-block') ? item.children('.ge-content') : item;
-            var kind = kindOf(node);
 
-            return { kind: kind === 'text' ? 'content' : kind, node: node };
+            return { kind: kindOf(node), node: node };
         }
 
         /** Put a node back where a refused drag found it. */
@@ -3949,10 +3942,102 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             }
         }
 
+        /**
+         * What a text is never made of: rows, containers, and whatever a
+         * feature plugin says - the elements plugin's elements. Each is a
+         * block of the column's, beside the texts.
+         */
+        function textCutter() {
+            var cuts = ['.row', '[data-ge-container]'];
+
+            $.each(FEATURES, function(name, feature) {
+                var cut = typeof feature.cuts === 'function' ? feature.cuts() : feature.cuts;
+                if (cut) { cuts.push(cut); }
+            });
+
+            return cuts.join(', ');
+        }
+
+        /**
+         * Take the blocks out of the text.
+         *
+         * Up to 5.x an element lived inside a content area, among the text
+         * a rich text editor edited. From 6.0 it is a block of its own, so a
+         * content area with one inside - markup 5.x saved - is cut there: the
+         * text before stays in the content area, the element goes into the
+         * column after it, and the text after goes into a new content area of
+         * the same type. Only a content area's own children cut it, which is
+         * where 5.x recognized elements; one inside a paragraph is text, as
+         * it was. A part with nothing but whitespace is dropped, and the first
+         * part that has something keeps the content area, id and classes and
+         * all.
+         *
+         * On every init, and a no-op on markup 6.0 made: nothing to cut. A
+         * content area its editor is open on is left for the next init.
+         */
+        function splitTexts(cutter) {
+            canvas.find('.column > .ge-content, .column > .ge-text-block > .ge-content').each(function() {
+                var area = $(this);
+                if (area.hasClass('ge-rte-active') || !area.children().filter(cutter).length) { return; }
+
+                var type = area.attr('data-ge-content-type');
+                var anchor = area.parent('.ge-text-block').length ? area.parent() : area;
+                var pieces = [];
+                var run = [];
+
+                $.each($.makeArray(area[0].childNodes), function(i, node) {
+                    if (node.nodeType === 1 && $(node).is(cutter)) {
+                        pieces.push({ text: run }, { block: node });
+                        run = [];
+                    } else {
+                        run.push(node);
+                    }
+                });
+                pieces.push({ text: run });
+
+                $(area[0].childNodes).detach();
+
+                var kept = false;
+                var last = anchor;
+
+                pieces.forEach(function(piece) {
+                    var placed;
+
+                    if (piece.block) {
+                        placed = $(piece.block);
+                    } else if (!hasContent(piece.text)) {
+                        return;
+                    } else if (kept) {
+                        // Of the same type, or of none if it had none
+                        placed = (type ? createDefaultContentWrapper(type) : $('<div class="ge-content" />'))
+                            .append(piece.text);
+                    } else {
+                        // The content area itself, moved along if an
+                        // element came before the first text
+                        area.append(piece.text);
+                        placed = anchor;
+                        kept = true;
+                    }
+
+                    if (placed[0] !== last[0]) { placed.insertAfter(last); }
+                    last = placed;
+                });
+
+                if (!kept) { anchor.remove(); }
+            });
+        }
+
+        /** Whether a run of nodes has anything in it but whitespace. */
+        function hasContent(nodes) {
+            return nodes.some(function(node) {
+                return node.nodeType === 1 || (node.nodeType === 3 && /\S/.test(node.nodeValue));
+            });
+        }
+
         /**
          * Wrap column content in <div class="ge-content"> where neccesary
          */
-        function wrapContent() {
+        function wrapContent(cutter) {
             canvas.find('.column').each(function() {
                 var col = $(this);
                 var contents = $();
@@ -3966,10 +4051,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     // the next init.
                     if (child.is('.ge-tools-drawer, .ge-resize-handle')) { return; }
 
-                    // A container sits in the column beside the content
-                    // areas, not inside one, so it ends a run of loose
-                    // content rather than joining it
-                    if (child.is('.row, .ge-content, .ge-text-block, [data-ge-container]')) {
+                    // A container, or an element, sits in the column beside
+                    // the content areas, not inside one, so it ends a run of
+                    // loose content rather than joining it
+                    if (child.is('.ge-content, .ge-text-block') || child.is(cutter)) {
                         contents = doWrap(contents);
                     } else {
                         contents = contents.add(child);

package/src/js/plugins/grideditor.ckeditor.js

@@ -10,7 +10,8 @@
  *   <script src="dist/jquery.grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
  *
- * Up to 6.0 the main bundle carries a copy of this file too.
+ * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
+ * loaded on its own, like every plugin.
  */
 (function($) {
 

package/src/js/plugins/grideditor.clipboard.js

@@ -140,17 +140,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
         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.find('> .ge-text-block > .ge-content, > .ge-content').last();
-            if (area.length) { into = area; }
-        }
-
-        ge.place(node, clip.kind, { appendTo: into, source: 'paste' });
+        ge.place(fresh(clip.html), clip.kind, { appendTo: target, source: 'paste' });
     }
 
     /**

package/src/js/plugins/grideditor.elements.js

@@ -2,12 +2,16 @@
  * Element level controls for grid-editor.
  *
  * A feature plugin: load this file after the editor and the nodes a host
- * marked inside a content area become elements - one movable, deletable thing
- * each, instead of rich text. What it can ask the editor for is the handle its
- * factory is called with, described in docs/plugins.md.
+ * marked become elements - one movable, deletable block each, in the column
+ * beside the texts, instead of rich text. 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.elements.min.js"></script>
+ *
+ * Up to 5.x an element lived inside a content area, among the text. Markup
+ * saved that way still loads: the editor takes each element out of the text
+ * it sits in, which is what `cuts` is for.
  */
 (function($) {
 
@@ -17,37 +21,41 @@ $.extend($.fn.gridEditor.locales.en, {
     'confirm.delete_element': 'Delete element?',
 });
 
+/** A column's children that are something else than an element, whatever elements.auto says. */
+var NOT_ELEMENTS = '.row, .ge-content, .ge-text-block, [data-ge-container], .ge-tools-drawer, .ge-resize-handle';
+
 $.fn.gridEditor.features.elements = function(ge) {
 
+    var warnedIntoText = false;
+
     function elementsEnabled() {
         if (ge.settings.elements.enabled !== 'auto') { return !!ge.settings.elements.enabled; }
 
         return ge.settings.elements.auto || ge.canvas.find(ge.settings.elements.selector).length > 0;
     }
 
-    function elementsIn(contentArea) {
+    /** Whether a child of a column is an element. */
+    function isElement(node) {
         return ge.settings.elements.auto
-            ? contentArea.children()
-            : contentArea.children(ge.settings.elements.selector);
+            ? !node.is(NOT_ELEMENTS)
+            : node.is(ge.settings.elements.selector);
     }
 
     function markElements() {
         if (!elementsEnabled()) { return; }
 
-        ge.canvas.find('.ge-content').each(function() {
-            elementsIn($(this)).each(function() {
-                var element = $(this).addClass('ge-element').attr('contenteditable', 'false');
+        ge.canvas.find('.column').children().each(function() {
+            var element = $(this);
+            if (!element.hasClass('ge-element') && !isElement(element)) { return; }
 
-                if (element.find('> .ge-tools-drawer').length) { return; }
-
-                createElementControls(element);
-            });
+            element.addClass('ge-element');
+            if (!element.find('> .ge-tools-drawer').length) { createElementControls(element); }
         });
     }
 
     function unmarkElements() {
         ge.canvas.find('.ge-element').each(function() {
-            var element = $(this).removeClass('ge-element').removeAttr('contenteditable');
+            var element = $(this).removeClass('ge-element');
 
             // A host element that had no class of its own should not come
             // back from getHtml carrying an empty one
@@ -56,16 +64,7 @@ $.fn.gridEditor.features.elements = function(ge) {
     }
 
     function createElementControls(element) {
-        // data-mce-bogus="all" is how tinyMCE is told that a node is the
-        // editor's furniture rather than content: it leaves the subtree
-        // alone and keeps it out of what it serializes. Without it the
-        // drawer's tools are inline elements with no text, which is
-        // exactly what its cleanup removes, so an element inside an open
-        // editor would lose its move and delete tools.
-        var drawer = $('<div class="ge-tools-drawer ge-element-drawer" />')
-            .attr('data-mce-bogus', 'all')
-            .prependTo(element)
-        ;
+        var drawer = $('<div class="ge-tools-drawer ge-element-drawer" />').prependTo(element);
 
         ge.createMoveTool(drawer);
         ge.createTool(drawer, ge.t('tool.element_info', { name: elementName(element) }),
@@ -93,6 +92,32 @@ $.fn.gridEditor.features.elements = function(ge) {
         return label || type || element[0].tagName.toLowerCase();
     }
 
+    /**
+     * Placed into a content area, as 5.x did, an element would be text
+     * again, and the next init would cut it out. So it goes beside that
+     * content area instead - after it for appendTo, before it for
+     * prependTo - with a word to the host.
+     */
+    function placementBesideText(options) {
+        var placed = $.extend({}, options);
+
+        [['appendTo', 'insertAfter'], ['prependTo', 'insertBefore']].forEach(function(pair) {
+            var target = options[pair[0]] !== undefined ? $(options[pair[0]]) : null;
+            if (!target || !target.is('.ge-content')) { return; }
+
+            if (!warnedIntoText) {
+                warnedIntoText = true;
+                ge.warn('createElement: an element is a block of the column since 6.0, not part of a ' +
+                    'content area\'s text; it goes beside the content area. Place it in a column instead.');
+            }
+
+            delete placed[pair[0]];
+            placed[pair[1]] = target.parent('.ge-text-block').length ? target.parent() : target;
+        });
+
+        return placed;
+    }
+
     function apiCreateElement(content, options) {
         options = options || {};
 
@@ -104,7 +129,7 @@ $.fn.gridEditor.features.elements = function(ge) {
             element.attr('data-ge-label', options.label);
         }
 
-        return ge.place(element, 'element', options);
+        return ge.place(element, 'element', placementBesideText(options));
     }
 
     return {
@@ -117,24 +142,27 @@ $.fn.gridEditor.features.elements = function(ge) {
             return node.hasClass('ge-element') ? 'element' : null;
         },
 
-        onInit: markElements,
-        onDeinit: unmarkElements,
-
         /**
-         * An editor rewrites the content area as it takes it over, drawers
-         * included, so they go back in when it says it is ready.
+         * An element cuts the text it sits in: 5.x's markup, or markup a host
+         * wrote the same way, has it inside a content area, and it comes out.
          */
-        onContentReady: markElements,
+        cuts: function() {
+            if (!elementsEnabled()) { return null; }
 
-        /** Elements move within a content area and between them. */
-        onSortable: function(sortable) {
-            if (!elementsEnabled()) { return; }
+            return ge.settings.elements.auto ? '*' : ge.settings.elements.selector;
+        },
 
-            sortable(ge.canvas.find('.ge-content'), {
-                draggable: '.ge-element',
-                group: 'element',
-            });
+        // A block the columns move, beside the texts, the rows and the
+        // containers - and only the columns
+        blocks: '.ge-element',
+        accepts: function(region, node) {
+            if (node.hasClass('ge-element')) { return region.is('.column'); }
+
+            return true;
         },
+
+        onInit: markElements,
+        onDeinit: unmarkElements,
     };
 };
 

package/src/js/plugins/grideditor.summernote.js

@@ -10,7 +10,8 @@
  *   <script src="dist/jquery.grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.summernote.min.js"></script>
  *
- * Up to 6.0 the main bundle carries a copy of this file too.
+ * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
+ * loaded on its own, like every plugin.
  */
 (function($) {
 

package/src/js/plugins/grideditor.tinymce.js

@@ -10,7 +10,8 @@
  *   <script src="dist/jquery.grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
  *
- * Up to 6.0 the main bundle carries a copy of this file too.
+ * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
+ * loaded on its own, like every plugin.
  */
 (function($) {
 

package/src/less/grideditor.less

@@ -603,6 +603,23 @@
             }
         }
 
+        /* While the text is being edited it would sit over the end of its
+           first line, so it stands back - faint, still there to click - until
+           the pointer is on the drawer itself */
+        &:has(> .ge-rte-active) > .ge-text-drawer:not(:hover) {
+            opacity: 0.35;
+        }
+
+        /* Except when something in it is in use: its settings, a choice it
+           offers, a drag */
+        &.ge-drag-chosen,
+        &:has(> .ge-text-drawer.ge-picker-open),
+        &:has(> .ge-text-drawer > .ge-details[style*="block"]) {
+            > .ge-text-drawer:not(:hover) {
+                opacity: 1;
+            }
+        }
+
         /* With its settings open it spans the text, so the panel has room */
         &:has(> .ge-text-drawer > .ge-details[style*="block"]) > .ge-text-drawer {
             left: 0;

package/src/js/compat/bundled-texts.js

@@ -1,14 +0,0 @@
-/**
- * Up to 6.0 the main bundle carries a copy of each text editor plugin, so a
- * page that loaded only the editor keeps the editor it had. This marks those
- * copies, and the editor warns once when a content area is edited with one:
- * 6.0 leaves them out. Loaded on its own, a plugin's file registers itself
- * again, unmarked, and is the one used.
- *
- * Only ever concatenated after the plugins it marks, never built on its own.
- */
-(function($) {
-    ['tinymce', 'ckeditor', 'summernote'].forEach(function(type) {
-        if ($.fn.gridEditor.texts[type]) { $.fn.gridEditor.texts[type].bundled = true; }
-    });
-})(jQuery);