@themarioga/grid-editor 5.2.0 → 5.3.1

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

@@ -2,8 +2,9 @@
  * 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.
+ * section, text block, 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.
  *
@@ -37,10 +38,10 @@ 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.
+ * a section, a text block, a container of any type, an element.
  */
 var TARGETS = {
-    column: ['row', 'container', 'element'],
+    column: ['row', 'text', 'container', 'element'],
     row: ['column'],
     section: ['row'],
 };
@@ -117,7 +118,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     function categoryOf(kind) {
         if ($.fn.gridEditor.containers[kind]) { return 'container'; }
 
-        return ['row', 'column', 'section', 'element'].indexOf(kind) !== -1 ? kind : null;
+        return ['row', 'column', 'section', 'text', 'element'].indexOf(kind) !== -1 ? kind : null;
     }
 
     function copy(node, kind) {
@@ -128,7 +129,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
 
         // 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');
+        var tool = ge.drawerOf(node).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');
@@ -145,7 +146,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
         // 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();
+            var area = target.find('> .ge-text-block > .ge-content, > .ge-content').last();
             if (area.length) { into = area; }
         }
 

package/src/js/plugins/grideditor.spacing.js

@@ -252,7 +252,7 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
                 name: key + side,
                 prefix: key + side,
                 values: values,
-                appliesTo: ['row', 'column', 'element', 'container'],
+                appliesTo: ['row', 'column', 'text', 'element', 'container'],
                 labelKey: labelKey,
                 panel: false,
                 choices: function() {

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

@@ -14,10 +14,15 @@
  */
 (function($) {
 
+    $.extend($.fn.gridEditor.locales.en, {
+        'text.summernote': 'Summernote',
+    });
+
     var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
 
     $.fn.gridEditor.texts.summernote = function(ge) {
         return {
+            labelKey: 'text.summernote',
             initialContent: INITIAL_CONTENT,
             missingKey: 'error.summernote_missing',
 

package/src/js/plugins/grideditor.textalign.js

@@ -39,7 +39,7 @@ $.fn.gridEditor.utilities.textalign = function(ge) {
             name: 'text-align',
             prefix: 'text',
             values: ['start', 'center', 'end'],
-            appliesTo: ['row', 'column', 'element', 'container'],
+            appliesTo: ['row', 'column', 'text', 'element', 'container'],
             labelKey: 'utility.text_align',
             label: label,
 

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

@@ -14,6 +14,10 @@
  */
 (function($) {
 
+    $.extend($.fn.gridEditor.locales.en, {
+        'text.tinymce': 'tinyMCE',
+    });
+
     // tinyMCE snapshots the target element's attributes when an inline editor is
     // created and restores them on remove(), so this has to run *after* remove()
     // to keep the grid editor's own class and tinyMCE's leftovers off the element.
@@ -33,6 +37,7 @@
 
     $.fn.gridEditor.texts.tinymce = function(ge) {
         return {
+            labelKey: 'text.tinymce',
             initialContent: INITIAL_CONTENT,
             missingKey: 'error.tinymce_missing',
 

package/src/js/plugins/grideditor.visibility.js

@@ -32,7 +32,7 @@ $.extend($.fn.gridEditor.locales.en, {
 /** A node that carries any class of the family, at any breakpoint. */
 var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
 
-var NODES = '.row, .column, .ge-element, [data-ge-container]';
+var NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
 
 $.fn.gridEditor.utilities.visibility = function(ge) {
 
@@ -44,7 +44,7 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
     }
 
     function applies(node, kind) {
-        return kind === 'row' || kind === 'column' || kind === 'element' ||
+        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' ||
             node.is('[data-ge-container]');
     }
 
@@ -143,7 +143,7 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
             name: 'visibility',
             prefix: 'd',
             values: ['none', 'block', 'flex'],
-            appliesTo: ['row', 'column', 'element', 'container'],
+            appliesTo: ['row', 'column', 'text', 'element', 'container'],
             labelKey: 'utility.visibility',
 
             /** Hidden, or shown the way this kind of node is shown. */

package/src/less/grideditor.less

@@ -5,6 +5,8 @@
 @colTextColor: darken(@colColor, 10%);
 @elementColor: #7B5EA7;
 @elementTextColor: darken(@elementColor, 5%);
+@textColor: #5A6F8A;
+@textTextColor: darken(@textColor, 5%);
 @containerColor: #1D8A5E;
 @containerTextColor: darken(@containerColor, 5%);
 
@@ -549,6 +551,74 @@
         }
     }
     
+    /* A text block: a content area and, beside it rather than inside,
+       where the text editor would take it, its drawer */
+    .ge-text-block {
+        position: relative;
+        outline: 1px dashed fadeout(@textColor, 40%);
+        margin-bottom: @editGutter;
+
+        /* Over the text rather than above it: nearly every column has a
+           text, and a bar for each would make every column taller. It shows
+           while it is wanted - the pointer over the text, the text being
+           edited or holding the focus, its settings open, a drag under way -
+           and takes no room either way. */
+        > .ge-text-drawer {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 5;
+            width: auto;
+            margin: 0;
+            border-radius: 0 0 0 4px;
+            background: mix(@textColor, #fff, 18%);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+            opacity: 0;
+            visibility: hidden;
+            /* Hidden only once it has faded, shown at once */
+            transition: opacity 120ms ease, visibility 0s linear 120ms;
+
+            > a {
+                color: @textTextColor;
+                padding: 2px 5px;
+            }
+            > a.ge-text-info {
+                cursor: default;
+            }
+            > a.ge-text-missing {
+                color: #b02a37;
+            }
+        }
+
+        &:hover,
+        &:focus-within,
+        &.ge-drag-chosen,
+        &:has(> .ge-rte-active),
+        &:has(> .ge-text-drawer.ge-picker-open),
+        &:has(> .ge-text-drawer > .ge-details[style*="block"]) {
+            > .ge-text-drawer {
+                opacity: 1;
+                visibility: visible;
+                transition-delay: 0s;
+            }
+        }
+
+        /* 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;
+            border-radius: 0;
+        }
+    }
+
+    /* A column with nothing in it but its drawer still has room to drop a
+       block into */
+    .column:not(:has(> :not(.ge-tools-drawer, .ge-resize-handle)))::after {
+        content: '';
+        display: block;
+        min-height: 40px;
+        border: 1px dashed fadeout(@colColor, 50%);
+    }
+
     /* Sorting. The dragged node stays in the list and shows where it would
        land - that is the placeholder - while a copy of it follows the
        pointer. */