@themarioga/grid-editor 7.2.0 → 7.3.0

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

@@ -160,6 +160,73 @@ 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_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',
     'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
     'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
     'warning.already_editing': 'Este elemento ya tiene un editor: se devuelve ese, con las opciones con las que se creó.',

package/src/js/plugins/grideditor.float.js

@@ -14,41 +14,16 @@
  *
  * Elements only. A floated row or column stops being part of the grid, and a
  * container sits beside the content areas rather than in their text.
+ *
+ * Deprecated since 7.3, and gone in 8.0: grideditor.style.js carries this
+ * plugin's families, and edits them in its own sections. This file is that
+ * part on its own, as it was, and says so once per editor. Loaded beside
+ * the style plugin, it stands down.
  */
 import { GridEditor } from '../grideditor.js';
-
-Object.assign(GridEditor.locales.en, {
-    'utility.float': 'Float',
-    'utility.float_start': 'Start',
-    'utility.float_end': 'End',
-    'utility.float_none': 'None',
-});
-
-/** Start and end are left and right: Bootstrap's css is left to right. */
-var CSS = { start: 'left', end: 'right', none: 'none' };
+import { floatPart } from '../style/float.js';
 
 GridEditor.utilities.float = function(ge) {
-
-    function label(value) {
-        if (value === 'start') { return ge.t('utility.float_start'); }
-        if (value === 'end') { return ge.t('utility.float_end'); }
-
-        return ge.t('utility.float_none');
-    }
-
-    return {
-        families: [{
-            name: 'float',
-            prefix: 'float',
-            values: ['start', 'end', 'none'],
-            appliesTo: ['element'],
-            labelKey: 'utility.float',
-            label: label,
-
-            /** With no class applying here, whatever the host's css floats it as. */
-            preview: function(value, node) {
-                return { float: value === null ? ge.bareStyle(node, 'float', 'float') : CSS[value] };
-            },
-        }],
-    };
+    ge.warn('the "float" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
+    return floatPart(ge);
 };

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

@@ -16,281 +16,16 @@
  * utilities.spacing.values narrows the values offered, and
  * utilities.spacing.scale is what 0 to 5 come to, for a page that changed
  * Bootstrap's $spacers.
+ *
+ * Deprecated since 7.3, and gone in 8.0: grideditor.style.js carries this
+ * plugin's families, and edits them in its own sections. This file is that
+ * part on its own, as it was, and says so once per editor. Loaded beside
+ * the style plugin, it stands down.
  */
 import { GridEditor } from '../grideditor.js';
-import * as dom from '../dom.js';
-
-Object.assign(GridEditor.locales.en, {
-    'utility.padding': 'Padding',
-    'utility.margin': 'Margin',
-    'utility.side_all': 'All sides',
-    'utility.side_x': 'Left and right',
-    'utility.side_y': 'Top and bottom',
-    'utility.side_t': 'Top',
-    'utility.side_b': 'Bottom',
-    'utility.side_s': 'Start',
-    'utility.side_e': 'End',
-    'utility.spacing_gutter': 'A column\'s side padding is its gutter: changing it changes the gutter',
-});
-
-var VALUES = ['0', '1', '2', '3', '4', '5'];
-
-/** Bootstrap's $spacers. */
-var SCALE = ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'];
-
-/**
- * The sides, in the order Bootstrap's css writes their rules: within one
- * breakpoint a later rule wins, so p-3 pt-1 has a top of .25rem.
- */
-var SIDES = ['', 'x', 'y', 't', 'e', 'b', 's'];
-
-/** What each side sets. Start and end are left and right: Bootstrap's css is left to right. */
-var SET = {
-    '': ['top', 'right', 'bottom', 'left'],
-    x: ['left', 'right'],
-    y: ['top', 'bottom'],
-    t: ['top'],
-    e: ['right'],
-    b: ['bottom'],
-    s: ['left'],
-};
-
-var INFIXES = ['', 'sm', 'md', 'lg', 'xl', 'xxl'];
-
-var PROPERTIES = { p: 'padding', m: 'margin' };
-
-/** Every class of the plugin's, padding or margin. */
-function pattern(key) {
-    return new RegExp('^' + key + '[xytbse]?-(?:(?:sm|md|lg|xl|xxl)-)?(?:[0-5]|auto)$');
-}
+import { spacingPart } from '../style/spacing.js';
 
 GridEditor.utilities.spacing = function(ge) {
-
-    var options = Object.assign({ values: VALUES, scale: SCALE }, ge.settings.utilities.spacing);
-    var patterns = { p: pattern('p'), m: pattern('m') };
-
-    function applies(node, kind) {
-        return kind === 'row' || kind === 'column' || kind === 'element' ||
-            dom.is(node, '[data-ge-container]');
-    }
-
-    function classes(node) {
-        return (node.getAttribute('class') || '').split(/\s+/);
-    }
-
-    function carries(node, key) {
-        return classes(node).some(function(name) { return patterns[key].test(name); });
-    }
-
-    /**
-     * The class of one family that decides a side at a breakpoint: the
-     * widest breakpoint up to it that has one, as { tier, value }.
-     */
-    function source(node, family, tier) {
-        var names = classes(node);
-        var values = family.charAt(0) === 'm' ? VALUES.concat(['auto']) : VALUES;
-
-        for (var i = tier; i >= 0; i--) {
-            for (var v = 0; v < values.length; v++) {
-                var name = family + (INFIXES[i] ? '-' + INFIXES[i] : '') + '-' + values[v];
-                if (names.indexOf(name) !== -1) { return { tier: i, value: values[v] }; }
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * What padding or margin is on each side with none of the plugin's
-     * classes: the editor's frame for a row or a column, the host's css
-     * for anything else. Read by taking the classes off for a moment,
-     * since that is the only way to ask the browser.
-     */
-    function without(node, key) {
-        var original = node.getAttribute('class');
-        var style;
-        var bare = {};
-
-        node.setAttribute('class', classes(node).filter(function(name) { return !patterns[key].test(name); }).join(' '));
-        style = getComputedStyle(node);
-        ['top', 'right', 'bottom', 'left'].forEach(function(side) {
-            bare[side] = style.getPropertyValue(PROPERTIES[key] + '-' + side);
-        });
-        if (original === null) { node.removeAttribute('class'); } else { node.setAttribute('class', original); }
-
-        return bare;
-    }
-
-    /**
-     * Each side the way Bootstrap's css settles it: the class from the
-     * widest breakpoint wins, and within one breakpoint the side written
-     * later in the css. A side no class reaches shows what it is without
-     * any, over a wider breakpoint's class that is live in a wide window.
-     */
-    function sides(node, key, breakpoint) {
-        var tier = ge.breakpoints.indexOf(breakpoint);
-        var winners = {};
-        var styles = {};
-        var neutral = null;
-
-        SIDES.forEach(function(side, order) {
-            var found = source(node, key + side, tier);
-            if (!found) { return; }
-
-            SET[side].forEach(function(set) {
-                var current = winners[set];
-                if (!current || found.tier > current.tier || (found.tier === current.tier && order > current.order)) {
-                    winners[set] = { tier: found.tier, order: order, value: found.value };
-                }
-            });
-        });
-
-        ['top', 'right', 'bottom', 'left'].forEach(function(set) {
-            var winner = winners[set];
-
-            if (!winner) {
-                neutral = neutral || without(node, key);
-                styles[PROPERTIES[key] + '-' + set] = neutral[set];
-            } else {
-                styles[PROPERTIES[key] + '-' + set] = winner.value === 'auto' ? 'auto' : options.scale[winner.value];
-            }
-        });
-
-        return styles;
-    }
-
-    /** The side a group's select starts on: the first that has a class, or all. */
-    function startingSide(node, key) {
-        var names = classes(node).filter(function(name) { return patterns[key].test(name); });
-        var found = SIDES.filter(function(side) {
-            return names.some(function(name) { return name.indexOf(key + side + '-') === 0; });
-        });
-
-        return found.length ? found[0] : '';
-    }
-
-    function sideLabel(side) {
-        switch (side) {
-            case 'x': return ge.t('utility.side_x');
-            case 'y': return ge.t('utility.side_y');
-            case 't': return ge.t('utility.side_t');
-            case 'b': return ge.t('utility.side_b');
-            case 's': return ge.t('utility.side_s');
-            case 'e': return ge.t('utility.side_e');
-            default: return ge.t('utility.side_all');
-        }
-    }
-
-    /** A padding or margin group: its name, the side, and the field of that side's family. */
-    function group(node, key, labelText) {
-        var box = dom.element('div', { 'class': 'ge-spacing-group', 'data-ge-spacing': key });
-        var side = dom.element('select', { 'class': 'ge-spacing-side form-select form-select-sm' });
-
-        box.appendChild(dom.element('span', { 'class': 'ge-utility-label' }, labelText));
-
-        SIDES.forEach(function(value) {
-            side.appendChild(dom.element('option', { value: value }, sideLabel(value)));
-        });
-
-        var field = ge.utilityField(node, key + startingSide(node, key));
-
-        side.value = field.getAttribute('data-ge-family').slice(1);
-        side.addEventListener('change', function() {
-            var next = ge.utilityField(node, key + this.value);
-            field.replaceWith(next);
-            field = next;
-        });
-        box.appendChild(side);
-        box.appendChild(field);
-
-        return box;
-    }
-
-    var NODES = '.row, .column, .ge-element, [data-ge-container]';
-
-    /**
-     * Keep each drawer on its node's edges. A drawer is pulled out over the
-     * editor's frame by as much as the frame pads the node, and a padding
-     * class replaces the frame, so a padded node's drawer is pulled out by
-     * its real padding instead. And a column padded at the sides gets a word
-     * about what that does to its gutter.
-     */
-    function mark(scope) {
-        dom.selfAndAll(scope, NODES).forEach(function(node) {
-            var drawer = dom.child(node, '.ge-tools-drawer');
-
-            if (!drawer || !applies(node, ge.kindOf(node))) { return; }
-
-            if (carries(node, 'p')) {
-                var style = getComputedStyle(node);
-
-                dom.css(drawer, {
-                    'margin-top': '-' + style.paddingTop,
-                    'margin-left': '-' + style.paddingLeft,
-                    'margin-right': '-' + style.paddingRight,
-                    width: 'calc(100% + ' + style.paddingLeft + ' + ' + style.paddingRight + ')',
-                });
-            } else {
-                dom.css(drawer, { 'margin-top': '', 'margin-left': '', 'margin-right': '', width: '' });
-            }
-
-            if (dom.hasClass(node, 'column')) {
-                var padded = classes(node).some(function(name) {
-                    return /^p[xse]?-/.test(name) && patterns.p.test(name);
-                });
-                dom.all(drawer, '.ge-spacing-gutter').forEach(function(note) { dom.toggle(note, padded); });
-            }
-        });
-    }
-
-    function families(key, labelKey) {
-        var values = key === 'm' ? VALUES.concat(['auto']) : VALUES;
-        var offered = options.values.concat(key === 'm' ? ['auto'] : []);
-
-        return SIDES.map(function(side) {
-            return {
-                name: key + side,
-                prefix: key + side,
-                values: values,
-                appliesTo: ['row', 'column', 'text', 'element', 'container'],
-                labelKey: labelKey,
-                panel: false,
-                choices: function() {
-                    return values.filter(function(value) { return offered.indexOf(value) !== -1; });
-                },
-            };
-        });
-    }
-
-    return {
-        families: families('p', 'utility.padding').concat(families('m', 'utility.margin')),
-
-        panel: function(node, kind) {
-            if (!applies(node, kind)) { return null; }
-
-            var box = dom.element('div', { 'class': 'ge-spacing' });
-            box.appendChild(group(node, 'p', ge.t('utility.padding')));
-            box.appendChild(group(node, 'm', ge.t('utility.margin')));
-
-            if (kind === 'column') {
-                box.appendChild(dom.element('small', { 'class': 'ge-spacing-gutter' }, ge.t('utility.spacing_gutter')));
-            }
-
-            return box;
-        },
-
-        preview: function(node, kind, breakpoint) {
-            if (!applies(node, kind)) { return {}; }
-
-            var styles = {};
-
-            ['p', 'm'].forEach(function(key) {
-                if (carries(node, key)) { Object.assign(styles, sides(node, key, breakpoint)); }
-            });
-
-            return styles;
-        },
-
-        onRefresh: mark,
-    };
+    ge.warn('the "spacing" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
+    return spacingPart(ge, ge.settings.utilities.spacing);
 };

package/src/js/plugins/grideditor.style.js

@@ -0,0 +1,179 @@
+/**
+ * Style for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and every row, column,
+ * container, pane, element and section gets a Style accordion in its
+ * settings panel - size, spacing, border, background, text, typography,
+ * display, position and free css - written to the node's own style
+ * attribute, with Bootstrap's classes for each section as chips that put
+ * them in the classes field. What it can ask the editor for is the handle
+ * its factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="dist/grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.style.min.js"></script>
+ *
+ * It carries what the spacing, textalign, visibility and float plugins
+ * were up to 7.2: their per breakpoint fields are in its sections rather
+ * than in Responsive, and those four files are deprecated. Loaded beside
+ * it they stand down, and their names in the plugins setting ask for it.
+ *
+ * Where the settings panel has no room for it - a popover, inline in the
+ * drawer - the accordion opens in a dialog, from a Style button.
+ *
+ * style.sections chooses the sections, and in each the properties and
+ * whether it has a catalog; style.spacing and style.visibility are what
+ * utilities.spacing and utilities.visibility were.
+ */
+import { GridEditor } from '../grideditor.js';
+import { spacingPart } from '../style/spacing.js';
+import { textalignPart } from '../style/textalign.js';
+import { visibilityPart } from '../style/visibility.js';
+import { floatPart } from '../style/float.js';
+import { resolveOptions } from '../style/options.js';
+import { createAccordion } from '../style/accordion.js';
+
+Object.assign(GridEditor.locales.en, {
+    'style.section_title': 'Style',
+    'style.dialog_title': 'Style: {kind}',
+    'style.section_size': 'Size',
+    'style.section_spacing': 'Spacing',
+    'style.section_border': 'Border',
+    'style.section_background': 'Background',
+    'style.section_text': 'Text',
+    'style.section_typography': 'Typography',
+    'style.section_display': 'Display',
+    'style.section_position': 'Position',
+    'style.section_custom': 'Custom css',
+    'style.all_sizes': 'Applies to every size',
+    'style.overridden': 'The class {class} takes priority over this value',
+    'style.invalid': 'Not a value this property takes',
+    'style.catalog': 'Bootstrap classes',
+    'style.shadow_x': 'X',
+    'style.shadow_y': 'Y',
+    'style.shadow_blur': 'Blur',
+    'style.shadow_spread': 'Spread',
+    'style.shadow_color': 'Color',
+    'style.shadow_inset': 'Inset',
+    'style.shadow_text_mode': 'Edit as text',
+    'style.prop_width': 'Width',
+    'style.prop_height': 'Height',
+    'style.prop_min_width': 'Min width',
+    'style.prop_min_height': 'Min height',
+    'style.prop_max_width': 'Max width',
+    'style.prop_max_height': 'Max height',
+    'style.prop_margin_top': 'Margin top',
+    'style.prop_margin_right': 'Margin right',
+    'style.prop_margin_bottom': 'Margin bottom',
+    'style.prop_margin_left': 'Margin left',
+    'style.prop_padding_top': 'Padding top',
+    'style.prop_padding_right': 'Padding right',
+    'style.prop_padding_bottom': 'Padding bottom',
+    'style.prop_padding_left': 'Padding left',
+    'style.prop_border_width': 'Border width',
+    'style.prop_border_style': 'Border style',
+    'style.prop_border_color': 'Border color',
+    'style.prop_border_radius': 'Border radius',
+    'style.prop_box_shadow': 'Shadow',
+    'style.prop_background_color': 'Background color',
+    'style.prop_background_image': 'Background image',
+    'style.prop_background_size': 'Background size',
+    'style.prop_background_position': 'Background position',
+    'style.prop_background_repeat': 'Background repeat',
+    'style.prop_color': 'Color',
+    'style.prop_font_size': 'Font size',
+    'style.prop_text_align': 'Text align',
+    'style.prop_text_shadow': 'Text shadow',
+    'style.prop_font_family': 'Font family',
+    'style.prop_font_weight': 'Font weight',
+    'style.prop_font_style': 'Font style',
+    'style.prop_line_height': 'Line height',
+    'style.prop_letter_spacing': 'Letter spacing',
+    'style.prop_text_transform': 'Text transform',
+    'style.prop_text_decoration': 'Text decoration',
+    'style.prop_display': 'Display',
+    'style.prop_opacity': 'Opacity',
+    'style.prop_overflow': 'Overflow',
+    'style.prop_visibility': 'Visibility',
+    'style.prop_position': 'Position',
+    'style.prop_top': 'Top',
+    'style.prop_right': 'Right',
+    'style.prop_bottom': 'Bottom',
+    'style.prop_left': 'Left',
+    'style.prop_z_index': 'Z-index',
+});
+
+var PARTS = ['spacing', 'textalign', 'visibility', 'float'];
+
+GridEditor.utilities.style = function(ge) {
+
+    var options = resolveOptions(ge);
+    var parts = {
+        spacing: spacingPart(ge, options.spacing),
+        textalign: textalignPart(ge),
+        visibility: visibilityPart(ge, options.visibility),
+        float: floatPart(ge),
+    };
+    var accordions = []; // { node, accordion } for every panel built since the last init
+    var context = {
+        sections: options.sections,
+        parts: parts,
+        state: { open: null },
+        opened: function(key) {
+            accordions.forEach(function(entry) { entry.accordion.open(key); });
+        },
+    };
+
+    /** Every part's hook, called in turn. */
+    function each(hook) {
+        return function() {
+            var args = arguments;
+            PARTS.forEach(function(name) {
+                if (parts[name][hook]) { parts[name][hook].apply(null, args); }
+            });
+        };
+    }
+
+    var partsRefresh = each('onRefresh');
+
+    return {
+        // The parts' families, edited in the sections rather than in Responsive
+        families: PARTS.reduce(function(all, name) {
+            return all.concat(parts[name].families.map(function(family) {
+                return Object.assign({}, family, { panel: false });
+            }));
+        }, []),
+
+        panelSection: function(node, kind) {
+            var accordion = createAccordion(ge, node, kind, context);
+            if (!accordion) { return null; }
+
+            accordions.push({ node: node, accordion: accordion });
+
+            return { labelKey: 'style.section_title', titleKey: 'style.dialog_title', body: accordion.element };
+        },
+
+        preview: function(node, kind, breakpoint) {
+            return parts.spacing.preview(node, kind, breakpoint);
+        },
+
+        // After a write, a change of classes or of view: the accordions of
+        // the nodes it touched follow
+        onRefresh: function(scope) {
+            partsRefresh(scope);
+
+            accordions = accordions.filter(function(entry) { return entry.accordion.element.isConnected; });
+            accordions.forEach(function(entry) {
+                if (entry.node === scope || scope.contains(entry.node)) { entry.accordion.render(); }
+            });
+        },
+
+        drawerTools: each('drawerTools'),
+
+        onDeinit: function() {
+            each('onDeinit')();
+            accordions = [];
+        },
+    };
+};
+
+GridEditor.utilities.style.replaces = PARTS;

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

@@ -12,47 +12,16 @@
  *
  * The class aligns everything inside the node that does not align itself: a
  * paragraph the rich text editor gave its own text-align keeps it.
+ *
+ * Deprecated since 7.3, and gone in 8.0: grideditor.style.js carries this
+ * plugin's families, and edits them in its own sections. This file is that
+ * part on its own, as it was, and says so once per editor. Loaded beside
+ * the style plugin, it stands down.
  */
 import { GridEditor } from '../grideditor.js';
-
-Object.assign(GridEditor.locales.en, {
-    'utility.text_align': 'Text alignment',
-    'utility.text_start': 'Start',
-    'utility.text_center': 'Center',
-    'utility.text_end': 'End',
-});
-
-/** Start and end are left and right: Bootstrap's css is left to right. */
-var CSS = { start: 'left', center: 'center', end: 'right' };
+import { textalignPart } from '../style/textalign.js';
 
 GridEditor.utilities.textalign = function(ge) {
-
-    function label(value) {
-        if (value === 'start') { return ge.t('utility.text_start'); }
-        if (value === 'center') { return ge.t('utility.text_center'); }
-
-        return ge.t('utility.text_end');
-    }
-
-    return {
-        families: [{
-            name: 'text-align',
-            prefix: 'text',
-            values: ['start', 'center', 'end'],
-            appliesTo: ['row', 'column', 'text', 'element', 'container'],
-            labelKey: 'utility.text_align',
-            label: label,
-
-            /**
-             * With no class applying here, the node aligns as its parent
-             * does - or as the host's css says - which only the browser can
-             * tell, so it is asked with the classes out of the way. Parents
-             * are previewed before their children, so the parent's answer is
-             * already the view's.
-             */
-            preview: function(value, node) {
-                return { 'text-align': value === null ? ge.bareStyle(node, 'text-align', 'text-align') : CSS[value] };
-            },
-        }],
-    };
+    ge.warn('the "textalign" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
+    return textalignPart(ge);
 };