@themarioga/grid-editor 8.0.0-beta.3 → 8.0.0

package/src/js/{style → inline-style}/fields.js

@@ -1,5 +1,5 @@
 /**
- * The style plugin's inline fields: one per css property, each writing the
+ * The inline-style plugin's inline fields: one per css property, each writing the
  * node's own style through ge.setHostStyle, never by hand, so the preview
  * of a breakpoint view neither shows in them nor eats what they write.
  *
@@ -40,7 +40,7 @@ function mark(input, ok, ge) {
     if (ok) {
         input.removeAttribute('title');
     } else {
-        input.setAttribute('title', ge.t('style.invalid'));
+        input.setAttribute('title', ge.t('inline_style.invalid'));
     }
 }
 
@@ -70,7 +70,7 @@ function pickable(value) {
 
 /** A picker and a text beside it, which takes what a picker cannot: rgba, var(), transparent. */
 function colorControl(onValue) {
-    var box = dom.element('div', { 'class': 'input-group input-group-sm ge-style-color' });
+    var box = dom.element('div', { 'class': 'input-group input-group-sm ge-inline-style-color' });
     var picker = box.appendChild(dom.element('input', { type: 'color', 'class': 'form-control form-control-color' }));
     var text = box.appendChild(textInput());
 
@@ -146,10 +146,10 @@ var LENGTH = /^-?(?:\d*\.)?\d+(?:[a-z%]+)?$/i;
 
 /** The lengths of a shadow, in the order css writes them; a text shadow has no spread. */
 var SHADOW_PARTS = [
-    { name: 'x', labelKey: 'style.shadow_x' },
-    { name: 'y', labelKey: 'style.shadow_y' },
-    { name: 'blur', labelKey: 'style.shadow_blur' },
-    { name: 'spread', labelKey: 'style.shadow_spread' },
+    { name: 'x', labelKey: 'inline_style.shadow_x' },
+    { name: 'y', labelKey: 'inline_style.shadow_y' },
+    { name: 'blur', labelKey: 'inline_style.shadow_blur' },
+    { name: 'spread', labelKey: 'inline_style.shadow_spread' },
 ];
 
 /**
@@ -206,7 +206,7 @@ function composeShadow(parts, box) {
  */
 function shadowControl(ge, node, property, changed) {
     var box = property === 'box-shadow';
-    var holder = dom.element('div', { 'class': 'ge-style-shadow' });
+    var holder = dom.element('div', { 'class': 'ge-inline-style-shadow' });
     var textMode = false;
 
     function writeValue(value, input) {
@@ -218,34 +218,34 @@ function shadowControl(ge, node, property, changed) {
 
     function builder(parts) {
         holder.innerHTML = '';
-        var grid = holder.appendChild(dom.element('div', { 'class': 'ge-style-shadow-builder' }));
+        var grid = holder.appendChild(dom.element('div', { 'class': 'ge-inline-style-shadow-builder' }));
         var names = box ? SHADOW_PARTS : SHADOW_PARTS.slice(0, 3);
         var inputs = names.map(function(part, i) {
-            var cell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part' }));
-            cell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t(part.labelKey)));
-            var input = cell.appendChild(textInput('ge-style-shadow-' + part.name));
+            var cell = grid.appendChild(dom.element('label', { 'class': 'ge-inline-style-shadow-part' }));
+            cell.appendChild(dom.element('span', { 'class': 'ge-inline-style-shadow-label' }, ge.t(part.labelKey)));
+            var input = cell.appendChild(textInput('ge-inline-style-shadow-' + part.name));
             input.value = parts.lengths[i] || '';
             return input;
         });
 
-        var colorCell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part ge-style-shadow-color' }));
-        colorCell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t('style.shadow_color')));
+        var colorCell = grid.appendChild(dom.element('label', { 'class': 'ge-inline-style-shadow-part ge-inline-style-shadow-color' }));
+        colorCell.appendChild(dom.element('span', { 'class': 'ge-inline-style-shadow-label' }, ge.t('inline_style.shadow_color')));
         var color = colorControl(function() { update(); });
         colorCell.appendChild(color.element);
         color.set(parts.color);
 
         var inset = null;
         if (box) {
-            var insetCell = grid.appendChild(dom.element('label', { 'class': 'form-check ge-style-shadow-inset' }));
+            var insetCell = grid.appendChild(dom.element('label', { 'class': 'form-check ge-inline-style-shadow-inset' }));
             inset = insetCell.appendChild(dom.element('input', { type: 'checkbox', 'class': 'form-check-input' }));
-            insetCell.appendChild(dom.element('span', { 'class': 'form-check-label' }, ge.t('style.shadow_inset')));
+            insetCell.appendChild(dom.element('span', { 'class': 'form-check-label' }, ge.t('inline_style.shadow_inset')));
             inset.checked = parts.inset;
             inset.addEventListener('change', function() { update(); });
         }
 
         inputs.forEach(function(input) { input.addEventListener('change', function() { update(); }); });
 
-        var toText = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-style-shadow-mode' }, ge.t('style.shadow_text_mode')));
+        var toText = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-inline-style-shadow-mode' }, ge.t('inline_style.shadow_text_mode')));
         toText.addEventListener('click', function(e) {
             e.preventDefault();
             textMode = true;
@@ -264,7 +264,7 @@ function shadowControl(ge, node, property, changed) {
 
     function text(value) {
         holder.innerHTML = '';
-        var input = holder.appendChild(textInput('ge-style-shadow-text'));
+        var input = holder.appendChild(textInput('ge-inline-style-shadow-text'));
         input.value = value;
         input.addEventListener('change', function() {
             if (input.value.trim() === '') {
@@ -288,7 +288,7 @@ function shadowControl(ge, node, property, changed) {
 
         // Built again only when the value changed under it: building takes
         // the focus from whichever of its inputs the user moved on to
-        if (value === shown && holder.firstChild && textMode === !!holder.querySelector('.ge-style-shadow-text')) { return; }
+        if (value === shown && holder.firstChild && textMode === !!holder.querySelector('.ge-inline-style-shadow-text')) { return; }
         shown = value;
 
         if (textMode || !parts) {
@@ -308,8 +308,8 @@ function shadowControl(ge, node, property, changed) {
  * sections up to date.
  */
 export function createStyleField(ge, node, property, changed) {
-    var field = dom.element('div', { 'class': 'ge-style-field', 'data-ge-style-property': property.name });
-    var label = field.appendChild(dom.element('label', { 'class': 'ge-style-label' }, ge.t(property.labelKey)));
+    var field = dom.element('div', { 'class': 'ge-inline-style-field', 'data-ge-inline-style-property': property.name });
+    var label = field.appendChild(dom.element('label', { 'class': 'ge-inline-style-label' }, ge.t(property.labelKey)));
     var render;
 
     function current() {
@@ -355,19 +355,19 @@ export function createStyleField(ge, node, property, changed) {
 
     var control = field.querySelector('input, select');
     if (control) {
-        control.id = 'ge-style-field-' + (++fieldCounter);
+        control.id = 'ge-inline-style-field-' + (++fieldCounter);
         label.setAttribute('for', control.id);
     }
 
-    field.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-overridden' }));
+    field.appendChild(dom.element('small', { 'class': 'ge-inline-style-note ge-inline-style-overridden' }));
 
     renderers.set(field, function() {
         render();
 
         // A Bootstrap utility on the node wins over the value: every one is !important
         var winner = current() ? overriding(property.name, classesOf(node)) : null;
-        var note = dom.child(field, '.ge-style-overridden');
-        note.textContent = winner ? ge.t('style.overridden', { 'class': winner }) : '';
+        var note = dom.child(field, '.ge-inline-style-overridden');
+        note.textContent = winner ? ge.t('inline_style.overridden', { 'class': winner }) : '';
         dom.toggle(note, !!winner);
     });
     renderStyleField(field);

package/src/js/{style → inline-style}/flex.js

@@ -1,12 +1,12 @@
 /**
- * Flex, a part of the style plugin: a flex container's direction, wrap,
+ * Flex, a part of the inline-style plugin: a flex container's direction, wrap,
  * alignment and gaps, and how its children grow, shrink and fill, per
  * breakpoint, with Bootstrap's flex-{breakpoint}-*, justify-content-*,
  * align-items-*, align-content-*, gap-* and row-/column-gap-* classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
  * handle and the spacing options, whose scale the gaps share:
- * grideditor.style.js puts them in its Flex section.
+ * grideditor.inline-style.js puts them in its Flex section.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/float.js

@@ -1,9 +1,9 @@
 /**
- * Float, a part of the style plugin: floating an element per breakpoint, with Bootstrap's
+ * Float, a part of the inline-style plugin: floating an element per breakpoint, with Bootstrap's
  * float-{breakpoint}-start, -end and -none classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/options.js

@@ -1,7 +1,7 @@
 /**
- * The style plugin's settings, `style` in the editor's options:
+ * The inline-style plugin's settings, `inline_style` in the editor's options:
  *
- *   style: {
+ *   inline_style: {
  *       sections: { border: { properties: [...], catalog: false }, position: false, … },
  *       spacing: { values, scale },   // the values offered, and what 0 to 5 come to
  *       visibility: { drawer },       // false leaves the eye out of the drawers
@@ -19,7 +19,7 @@ function resolveSections(ge, given) {
     var resolved = {};
 
     Object.keys(given || {}).forEach(function(key) {
-        if (!section(key)) { ge.warn('style.sections: there is no "' + key + '" section: ignored'); }
+        if (!section(key)) { ge.warn('inline_style.sections: there is no "' + key + '" section: ignored'); }
     });
 
     SECTIONS.forEach(function(each) {
@@ -34,7 +34,7 @@ function resolveSections(ge, given) {
             if (Array.isArray(option.properties)) {
                 option.properties.forEach(function(name) {
                     if (own.indexOf(name) === -1) {
-                        ge.warn('style.sections.' + each.key + ': "' + name + '" is not one of its properties: ignored');
+                        ge.warn('inline_style.sections.' + each.key + ': "' + name + '" is not one of its properties: ignored');
                     }
                 });
                 properties = option.properties.filter(function(name) { return own.indexOf(name) !== -1; })
@@ -50,7 +50,7 @@ function resolveSections(ge, given) {
 }
 
 export function resolveOptions(ge) {
-    var style = ge.settings.style || {};
+    var style = ge.settings.inline_style || {};
 
     return {
         sections: resolveSections(ge, style.sections),

package/src/js/{style → inline-style}/sections.js

@@ -1,5 +1,5 @@
 /**
- * What the style plugin's sections are made of: for each, its inline
+ * What the inline-style plugin's sections are made of: for each, its inline
  * properties and the field each one gets, the Bootstrap 5.3 classes its
  * catalog offers, and which of the merged utility parts it shows.
  *
@@ -48,14 +48,14 @@ var ONLY_ON_ELEMENT = ['element'];
 export var SECTIONS = [
     {
         key: 'size',
-        labelKey: 'style.section_size',
+        labelKey: 'inline_style.section_size',
         properties: [
-            prop('width', { labelKey: 'style.prop_width', notOn: NOT_ON_COLUMN }),
-            prop('height', { labelKey: 'style.prop_height', notOn: NOT_ON_COLUMN }),
-            prop('min-width', { labelKey: 'style.prop_min_width' }),
-            prop('min-height', { labelKey: 'style.prop_min_height' }),
-            prop('max-width', { labelKey: 'style.prop_max_width' }),
-            prop('max-height', { labelKey: 'style.prop_max_height' }),
+            prop('width', { labelKey: 'inline_style.prop_width', notOn: NOT_ON_COLUMN }),
+            prop('height', { labelKey: 'inline_style.prop_height', notOn: NOT_ON_COLUMN }),
+            prop('min-width', { labelKey: 'inline_style.prop_min_width' }),
+            prop('min-height', { labelKey: 'inline_style.prop_min_height' }),
+            prop('max-width', { labelKey: 'inline_style.prop_max_width' }),
+            prop('max-height', { labelKey: 'inline_style.prop_max_height' }),
         ],
         catalog: [
             group(each('w-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
@@ -68,23 +68,23 @@ export var SECTIONS = [
     },
     {
         key: 'spacing',
-        labelKey: 'style.section_spacing',
+        labelKey: 'inline_style.section_spacing',
         properties: [
-            prop('margin-top', { labelKey: 'style.prop_margin_top' }), prop('margin-right', { labelKey: 'style.prop_margin_right' }), prop('margin-bottom', { labelKey: 'style.prop_margin_bottom' }), prop('margin-left', { labelKey: 'style.prop_margin_left' }),
-            prop('padding-top', { labelKey: 'style.prop_padding_top' }), prop('padding-right', { labelKey: 'style.prop_padding_right' }), prop('padding-bottom', { labelKey: 'style.prop_padding_bottom' }), prop('padding-left', { labelKey: 'style.prop_padding_left' }),
+            prop('margin-top', { labelKey: 'inline_style.prop_margin_top' }), prop('margin-right', { labelKey: 'inline_style.prop_margin_right' }), prop('margin-bottom', { labelKey: 'inline_style.prop_margin_bottom' }), prop('margin-left', { labelKey: 'inline_style.prop_margin_left' }),
+            prop('padding-top', { labelKey: 'inline_style.prop_padding_top' }), prop('padding-right', { labelKey: 'inline_style.prop_padding_right' }), prop('padding-bottom', { labelKey: 'inline_style.prop_padding_bottom' }), prop('padding-left', { labelKey: 'inline_style.prop_padding_left' }),
         ],
         catalog: [],
         parts: ['spacing'],
     },
     {
         key: 'border',
-        labelKey: 'style.section_border',
+        labelKey: 'inline_style.section_border',
         properties: [
-            prop('border-width', { labelKey: 'style.prop_border_width' }),
-            prop('border-style', { labelKey: 'style.prop_border_style', type: 'select', values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'] }),
-            prop('border-color', { labelKey: 'style.prop_border_color', type: 'color' }),
-            prop('border-radius', { labelKey: 'style.prop_border_radius' }),
-            prop('box-shadow', { labelKey: 'style.prop_box_shadow', type: 'shadow' }),
+            prop('border-width', { labelKey: 'inline_style.prop_border_width' }),
+            prop('border-style', { labelKey: 'inline_style.prop_border_style', type: 'select', values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'] }),
+            prop('border-color', { labelKey: 'inline_style.prop_border_color', type: 'color' }),
+            prop('border-radius', { labelKey: 'inline_style.prop_border_radius' }),
+            prop('box-shadow', { labelKey: 'inline_style.prop_box_shadow', type: 'shadow' }),
         ],
         catalog: [
             group(['border', 'border-0'].concat(each('border-', SIDES), each('border-', SIDES, '-0')), false),
@@ -99,13 +99,13 @@ export var SECTIONS = [
     },
     {
         key: 'background',
-        labelKey: 'style.section_background',
+        labelKey: 'inline_style.section_background',
         properties: [
-            prop('background-color', { labelKey: 'style.prop_background_color', type: 'color' }),
-            prop('background-image', { labelKey: 'style.prop_background_image', type: 'url' }),
-            prop('background-size', { labelKey: 'style.prop_background_size' }),
-            prop('background-position', { labelKey: 'style.prop_background_position' }),
-            prop('background-repeat', { labelKey: 'style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
+            prop('background-color', { labelKey: 'inline_style.prop_background_color', type: 'color' }),
+            prop('background-image', { labelKey: 'inline_style.prop_background_image', type: 'url' }),
+            prop('background-size', { labelKey: 'inline_style.prop_background_size' }),
+            prop('background-position', { labelKey: 'inline_style.prop_background_position' }),
+            prop('background-repeat', { labelKey: 'inline_style.prop_background_repeat', type: 'select', values: ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round'] }),
         ],
         catalog: [
             group(each('bg-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black', 'transparent']))
@@ -117,12 +117,12 @@ export var SECTIONS = [
     },
     {
         key: 'text',
-        labelKey: 'style.section_text',
+        labelKey: 'inline_style.section_text',
         properties: [
-            prop('color', { labelKey: 'style.prop_color', type: 'color' }),
-            prop('font-size', { labelKey: 'style.prop_font_size' }),
-            prop('text-align', { labelKey: 'style.prop_text_align', type: 'select', values: ['start', 'center', 'end', 'left', 'right', 'justify'] }),
-            prop('text-shadow', { labelKey: 'style.prop_text_shadow', type: 'shadow' }),
+            prop('color', { labelKey: 'inline_style.prop_color', type: 'color' }),
+            prop('font-size', { labelKey: 'inline_style.prop_font_size' }),
+            prop('text-align', { labelKey: 'inline_style.prop_text_align', type: 'select', values: ['start', 'center', 'end', 'left', 'right', 'justify'] }),
+            prop('text-shadow', { labelKey: 'inline_style.prop_text_shadow', type: 'shadow' }),
         ],
         catalog: [
             group(each('text-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black']))
@@ -135,15 +135,15 @@ export var SECTIONS = [
     },
     {
         key: 'typography',
-        labelKey: 'style.section_typography',
+        labelKey: 'inline_style.section_typography',
         properties: [
-            prop('font-family', { labelKey: 'style.prop_font_family' }),
-            prop('font-weight', { labelKey: 'style.prop_font_weight', type: 'select', values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'] }),
-            prop('font-style', { labelKey: 'style.prop_font_style', type: 'select', values: ['normal', 'italic', 'oblique'] }),
-            prop('line-height', { labelKey: 'style.prop_line_height' }),
-            prop('letter-spacing', { labelKey: 'style.prop_letter_spacing' }),
-            prop('text-transform', { labelKey: 'style.prop_text_transform', type: 'select', values: ['none', 'uppercase', 'lowercase', 'capitalize'] }),
-            prop('text-decoration', { labelKey: 'style.prop_text_decoration', type: 'select', values: ['none', 'underline', 'line-through', 'overline'] }),
+            prop('font-family', { labelKey: 'inline_style.prop_font_family' }),
+            prop('font-weight', { labelKey: 'inline_style.prop_font_weight', type: 'select', values: ['100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold', 'lighter', 'bolder'] }),
+            prop('font-style', { labelKey: 'inline_style.prop_font_style', type: 'select', values: ['normal', 'italic', 'oblique'] }),
+            prop('line-height', { labelKey: 'inline_style.prop_line_height' }),
+            prop('letter-spacing', { labelKey: 'inline_style.prop_letter_spacing' }),
+            prop('text-transform', { labelKey: 'inline_style.prop_text_transform', type: 'select', values: ['none', 'uppercase', 'lowercase', 'capitalize'] }),
+            prop('text-decoration', { labelKey: 'inline_style.prop_text_decoration', type: 'select', values: ['none', 'underline', 'line-through', 'overline'] }),
         ],
         catalog: [
             group(each('fw-', ['lighter', 'light', 'normal', 'medium', 'semibold', 'bold', 'bolder'])),
@@ -158,12 +158,12 @@ export var SECTIONS = [
     },
     {
         key: 'display',
-        labelKey: 'style.section_display',
+        labelKey: 'inline_style.section_display',
         properties: [
-            prop('display', { labelKey: 'style.prop_display', type: 'select', values: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'] }),
-            prop('opacity', { labelKey: 'style.prop_opacity' }),
-            prop('overflow', { labelKey: 'style.prop_overflow', type: 'select', values: ['visible', 'hidden', 'auto', 'scroll', 'clip'] }),
-            prop('visibility', { labelKey: 'style.prop_visibility', type: 'select', values: ['visible', 'hidden'] }),
+            prop('display', { labelKey: 'inline_style.prop_display', type: 'select', values: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'] }),
+            prop('opacity', { labelKey: 'inline_style.prop_opacity' }),
+            prop('overflow', { labelKey: 'inline_style.prop_overflow', type: 'select', values: ['visible', 'hidden', 'auto', 'scroll', 'clip'] }),
+            prop('visibility', { labelKey: 'inline_style.prop_visibility', type: 'select', values: ['visible', 'hidden'] }),
         ],
         catalog: [
             group(each('opacity-', ['0', '25', '50', '75', '100'])),
@@ -174,7 +174,7 @@ export var SECTIONS = [
     },
     {
         key: 'flex',
-        labelKey: 'style.section_flex',
+        labelKey: 'inline_style.section_flex',
         properties: [],
         catalog: [
             group(['vstack', 'hstack'], true, ['row']),
@@ -183,14 +183,14 @@ export var SECTIONS = [
     },
     {
         key: 'position',
-        labelKey: 'style.section_position',
+        labelKey: 'inline_style.section_position',
         properties: [
-            prop('position', { labelKey: 'style.prop_position', type: 'select', values: ['static', 'relative', 'absolute', 'fixed', 'sticky'] }),
-            prop('top', { labelKey: 'style.prop_top', notOn: NOT_ON_COLUMN }),
-            prop('right', { labelKey: 'style.prop_right', notOn: NOT_ON_COLUMN }),
-            prop('bottom', { labelKey: 'style.prop_bottom', notOn: NOT_ON_COLUMN }),
-            prop('left', { labelKey: 'style.prop_left', notOn: NOT_ON_COLUMN }),
-            prop('z-index', { labelKey: 'style.prop_z_index' }),
+            prop('position', { labelKey: 'inline_style.prop_position', type: 'select', values: ['static', 'relative', 'absolute', 'fixed', 'sticky'] }),
+            prop('top', { labelKey: 'inline_style.prop_top', notOn: NOT_ON_COLUMN }),
+            prop('right', { labelKey: 'inline_style.prop_right', notOn: NOT_ON_COLUMN }),
+            prop('bottom', { labelKey: 'inline_style.prop_bottom', notOn: NOT_ON_COLUMN }),
+            prop('left', { labelKey: 'inline_style.prop_left', notOn: NOT_ON_COLUMN }),
+            prop('z-index', { labelKey: 'inline_style.prop_z_index' }),
         ],
         catalog: [
             group(each('position-', ['static', 'relative', 'absolute', 'fixed', 'sticky'])),
@@ -206,7 +206,7 @@ export var SECTIONS = [
     },
     {
         key: 'custom',
-        labelKey: 'style.section_custom',
+        labelKey: 'inline_style.section_custom',
         properties: [],
         catalog: [],
         parts: [],

package/src/js/{style → inline-style}/spacing.js

@@ -1,9 +1,9 @@
 /**
- * Spacing, a part of the style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
+ * Spacing, a part of the inline-style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
  * pt-, px- … and m-{breakpoint}-*, mt-, mx- … classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle and its options: grideditor.style.js puts them in its sections.
+ * handle and its options: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';

package/src/js/{style → inline-style}/sticky.js

@@ -1,10 +1,10 @@
 /**
- * Sticky, a part of the style plugin: sticking a node to the top or the
+ * Sticky, a part of the inline-style plugin: sticking a node to the top or the
  * bottom of the page as it scrolls, per breakpoint, with Bootstrap's
  * sticky-{breakpoint}-top and -bottom classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/textalign.js

@@ -1,9 +1,9 @@
 /**
- * Text alignment, a part of the style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
+ * Text alignment, a part of the inline-style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
  * -center and -end classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

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

@@ -56,6 +56,7 @@ GridEditor.locales.es = {
     'panel.done': 'Hecho',
     'panel.id': 'Id',
     'panel.classes': 'Clases',
+    'panel.section_general': 'Id y clases',
     'panel.editor': 'Editor',
     'panel.kind_row': 'Fila',
     'panel.kind_column': 'Columna',
@@ -186,74 +187,74 @@ GridEditor.locales.es = {
     'utility.float_end': 'Fin',
     'utility.float_none': 'Ninguno',
     'utility.spacing_gutter': 'El relleno lateral de una columna es su espaciado: cambiarlo cambia el espacio entre columnas',
-    'style.section_title': 'Estilo',
-    'style.dialog_title': 'Estilo: {kind}',
-    'style.section_size': 'Tamaño',
-    'style.section_spacing': 'Espaciado',
-    'style.section_border': 'Borde',
-    'style.section_background': 'Fondo',
-    'style.section_text': 'Texto',
-    'style.section_typography': 'Tipografía',
-    'style.section_display': 'Visualización',
-    'style.section_flex': 'Flex',
-    'style.section_position': 'Posición',
-    'style.section_custom': 'CSS libre',
-    'style.all_sizes': 'Se aplica a todos los tamaños',
-    'style.overridden': 'La clase {class} tiene prioridad sobre este valor',
-    'style.invalid': 'Esta propiedad no acepta ese valor',
-    'style.catalog': 'Clases de Bootstrap',
-    'style.shadow_x': 'X',
-    'style.shadow_y': 'Y',
-    'style.shadow_blur': 'Desenfoque',
-    'style.shadow_spread': 'Extensión',
-    'style.shadow_color': 'Color',
-    'style.shadow_inset': 'Interior',
-    'style.shadow_text_mode': 'Editar como texto',
-    'style.prop_width': 'Ancho',
-    'style.prop_height': 'Alto',
-    'style.prop_min_width': 'Ancho mínimo',
-    'style.prop_min_height': 'Alto mínimo',
-    'style.prop_max_width': 'Ancho máximo',
-    'style.prop_max_height': 'Alto máximo',
-    'style.prop_margin_top': 'Margen superior',
-    'style.prop_margin_right': 'Margen derecho',
-    'style.prop_margin_bottom': 'Margen inferior',
-    'style.prop_margin_left': 'Margen izquierdo',
-    'style.prop_padding_top': 'Relleno superior',
-    'style.prop_padding_right': 'Relleno derecho',
-    'style.prop_padding_bottom': 'Relleno inferior',
-    'style.prop_padding_left': 'Relleno izquierdo',
-    'style.prop_border_width': 'Grosor del borde',
-    'style.prop_border_style': 'Estilo del borde',
-    'style.prop_border_color': 'Color del borde',
-    'style.prop_border_radius': 'Radio del borde',
-    'style.prop_box_shadow': 'Sombra',
-    'style.prop_background_color': 'Color de fondo',
-    'style.prop_background_image': 'Imagen de fondo',
-    'style.prop_background_size': 'Tamaño del fondo',
-    'style.prop_background_position': 'Posición del fondo',
-    'style.prop_background_repeat': 'Repetición del fondo',
-    'style.prop_color': 'Color',
-    'style.prop_font_size': 'Tamaño de letra',
-    'style.prop_text_align': 'Alineación',
-    'style.prop_text_shadow': 'Sombra del texto',
-    'style.prop_font_family': 'Fuente',
-    'style.prop_font_weight': 'Grosor de letra',
-    'style.prop_font_style': 'Estilo de letra',
-    'style.prop_line_height': 'Interlineado',
-    'style.prop_letter_spacing': 'Espaciado entre letras',
-    'style.prop_text_transform': 'Mayúsculas',
-    'style.prop_text_decoration': 'Decoración',
-    'style.prop_display': 'Display',
-    'style.prop_opacity': 'Opacidad',
-    'style.prop_overflow': 'Desbordamiento',
-    'style.prop_visibility': 'Visibilidad',
-    'style.prop_position': 'Posición',
-    'style.prop_top': 'Arriba',
-    'style.prop_right': 'Derecha',
-    'style.prop_bottom': 'Abajo',
-    'style.prop_left': 'Izquierda',
-    'style.prop_z_index': 'Z-index',
+    'inline_style.section_title': 'Estilo',
+    'inline_style.dialog_title': 'Estilo: {kind}',
+    'inline_style.section_size': 'Tamaño',
+    'inline_style.section_spacing': 'Espaciado',
+    'inline_style.section_border': 'Borde',
+    'inline_style.section_background': 'Fondo',
+    'inline_style.section_text': 'Texto',
+    'inline_style.section_typography': 'Tipografía',
+    'inline_style.section_display': 'Visualización',
+    'inline_style.section_flex': 'Flex',
+    'inline_style.section_position': 'Posición',
+    'inline_style.section_custom': 'CSS libre',
+    'inline_style.all_sizes': 'Se aplica a todos los tamaños',
+    'inline_style.overridden': 'La clase {class} tiene prioridad sobre este valor',
+    'inline_style.invalid': 'Esta propiedad no acepta ese valor',
+    'inline_style.catalog': 'Clases de Bootstrap',
+    'inline_style.shadow_x': 'X',
+    'inline_style.shadow_y': 'Y',
+    'inline_style.shadow_blur': 'Desenfoque',
+    'inline_style.shadow_spread': 'Extensión',
+    'inline_style.shadow_color': 'Color',
+    'inline_style.shadow_inset': 'Interior',
+    'inline_style.shadow_text_mode': 'Editar como texto',
+    'inline_style.prop_width': 'Ancho',
+    'inline_style.prop_height': 'Alto',
+    'inline_style.prop_min_width': 'Ancho mínimo',
+    'inline_style.prop_min_height': 'Alto mínimo',
+    'inline_style.prop_max_width': 'Ancho máximo',
+    'inline_style.prop_max_height': 'Alto máximo',
+    'inline_style.prop_margin_top': 'Margen superior',
+    'inline_style.prop_margin_right': 'Margen derecho',
+    'inline_style.prop_margin_bottom': 'Margen inferior',
+    'inline_style.prop_margin_left': 'Margen izquierdo',
+    'inline_style.prop_padding_top': 'Relleno superior',
+    'inline_style.prop_padding_right': 'Relleno derecho',
+    'inline_style.prop_padding_bottom': 'Relleno inferior',
+    'inline_style.prop_padding_left': 'Relleno izquierdo',
+    'inline_style.prop_border_width': 'Grosor del borde',
+    'inline_style.prop_border_style': 'Estilo del borde',
+    'inline_style.prop_border_color': 'Color del borde',
+    'inline_style.prop_border_radius': 'Radio del borde',
+    'inline_style.prop_box_shadow': 'Sombra',
+    'inline_style.prop_background_color': 'Color de fondo',
+    'inline_style.prop_background_image': 'Imagen de fondo',
+    'inline_style.prop_background_size': 'Tamaño del fondo',
+    'inline_style.prop_background_position': 'Posición del fondo',
+    'inline_style.prop_background_repeat': 'Repetición del fondo',
+    'inline_style.prop_color': 'Color',
+    'inline_style.prop_font_size': 'Tamaño de letra',
+    'inline_style.prop_text_align': 'Alineación',
+    'inline_style.prop_text_shadow': 'Sombra del texto',
+    'inline_style.prop_font_family': 'Fuente',
+    'inline_style.prop_font_weight': 'Grosor de letra',
+    'inline_style.prop_font_style': 'Estilo de letra',
+    'inline_style.prop_line_height': 'Interlineado',
+    'inline_style.prop_letter_spacing': 'Espaciado entre letras',
+    'inline_style.prop_text_transform': 'Mayúsculas',
+    'inline_style.prop_text_decoration': 'Decoración',
+    'inline_style.prop_display': 'Display',
+    'inline_style.prop_opacity': 'Opacidad',
+    'inline_style.prop_overflow': 'Desbordamiento',
+    'inline_style.prop_visibility': 'Visibilidad',
+    'inline_style.prop_position': 'Posición',
+    'inline_style.prop_top': 'Arriba',
+    'inline_style.prop_right': 'Derecha',
+    'inline_style.prop_bottom': 'Abajo',
+    'inline_style.prop_left': 'Izquierda',
+    'inline_style.prop_z_index': 'Z-index',
     'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
     'warning.already_editing': 'Este elemento ya tiene un editor: se devuelve ese, con las opciones con las que se creó.',
     'warning.destroyed': 'Se ha llamado a {method}() en un editor destruido, y no hace nada.',

package/src/js/plugins/grideditor.alignment.js

@@ -10,7 +10,7 @@
  *   <script src="dist/plugins/grideditor.alignment.min.js"></script>
  *
  * How a row justifies and aligns its columns - justify-content-* and
- * align-items-* - is a flex container's, and the style plugin's Flex section
+ * align-items-* - is a flex container's, and the inline-style plugin's Flex section
  * edits it, on a row and on anything else made flex.
  *
  * A field only, in the settings panel: alignment is set now and then, not