@themarioga/grid-editor 7.2.0 → 7.3.0

package/src/js/style/sections.js

@@ -0,0 +1,271 @@
+/**
+ * What the 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.
+ *
+ * Data, and the few questions asked of it: which classes set a property,
+ * which properties a kind of node is offered.
+ */
+
+var COLORS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+var SIDES = ['top', 'end', 'bottom', 'start'];
+
+function each(prefix, values, suffix) {
+    return values.map(function(value) { return prefix + value + (suffix || ''); });
+}
+
+/**
+ * A catalog group: the classes it offers and whether they exclude each
+ * other, so choosing one takes the others off. `notOn` names the kinds of
+ * node it is never offered on.
+ */
+function group(classes, exclusive, notOn) {
+    return { classes: classes, exclusive: exclusive !== false, notOn: notOn || [] };
+}
+
+/**
+ * A property's field. `type` is the widget: text for any css value, select
+ * for a fixed list, color, url for background-image, shadow for
+ * box-shadow and text-shadow. `notOn` names the kinds of node it is never
+ * offered on.
+ */
+function prop(name, options) {
+    return {
+        name: name,
+        labelKey: options.labelKey,
+        type: options.type || 'text',
+        values: options.values || null,
+        notOn: options.notOn || [],
+    };
+}
+
+var NOT_ON_COLUMN = ['column'];
+
+export var SECTIONS = [
+    {
+        key: 'size',
+        labelKey: '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' }),
+        ],
+        catalog: [
+            group(each('w-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
+            group(each('h-', ['25', '50', '75', '100', 'auto']), true, NOT_ON_COLUMN),
+            group(['mw-100', 'mh-100', 'vw-100', 'vh-100', 'min-vw-100', 'min-vh-100'], false, NOT_ON_COLUMN),
+        ],
+        parts: [],
+    },
+    {
+        key: 'spacing',
+        labelKey: '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' }),
+        ],
+        catalog: [],
+        parts: ['spacing'],
+    },
+    {
+        key: 'border',
+        labelKey: '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' }),
+        ],
+        catalog: [
+            group(['border', 'border-0'].concat(each('border-', SIDES), each('border-', SIDES, '-0')), false),
+            group(each('border-', ['1', '2', '3', '4', '5'])),
+            group(each('border-', COLORS.concat(['black', 'white']))),
+            group(['rounded'].concat(each('rounded-', ['0', '1', '2', '3', '4', '5', 'circle', 'pill']))),
+            group(each('rounded-', SIDES), false),
+            group(['shadow-none', 'shadow-sm', 'shadow', 'shadow-lg']),
+        ],
+        parts: [],
+    },
+    {
+        key: 'background',
+        labelKey: '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'] }),
+        ],
+        catalog: [
+            group(each('bg-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black', 'transparent']))),
+            group(['bg-gradient'], false),
+        ],
+        parts: [],
+    },
+    {
+        key: 'text',
+        labelKey: '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' }),
+        ],
+        catalog: [
+            group(each('text-', COLORS.concat(['body', 'body-secondary', 'body-tertiary', 'white', 'black']))),
+            group(each('fs-', ['1', '2', '3', '4', '5', '6'])),
+            group(each('text-decoration-', ['none', 'underline', 'line-through'])),
+        ],
+        parts: ['textalign'],
+    },
+    {
+        key: 'typography',
+        labelKey: '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'] }),
+        ],
+        catalog: [
+            group(each('fw-', ['lighter', 'light', 'normal', 'medium', 'semibold', 'bold', 'bolder'])),
+            group(each('fst-', ['italic', 'normal'])),
+            group(each('lh-', ['1', 'sm', 'base', 'lg'])),
+            group(each('text-', ['lowercase', 'uppercase', 'capitalize'])),
+            group(['font-monospace'], false),
+            group(['text-wrap', 'text-nowrap']),
+            group(['text-break'], false),
+        ],
+        parts: [],
+    },
+    {
+        key: 'display',
+        labelKey: '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'] }),
+        ],
+        catalog: [
+            group(each('opacity-', ['0', '25', '50', '75', '100'])),
+            group(each('overflow-', ['auto', 'hidden', 'visible', 'scroll'])),
+            group(['visible', 'invisible']),
+        ],
+        parts: ['visibility'],
+    },
+    {
+        key: 'position',
+        labelKey: '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' }),
+        ],
+        catalog: [
+            group(each('position-', ['static', 'relative', 'absolute', 'fixed', 'sticky'])),
+            group(each('top-', ['0', '50', '100'])),
+            group(each('bottom-', ['0', '50', '100'])),
+            group(each('start-', ['0', '50', '100'])),
+            group(each('end-', ['0', '50', '100'])),
+            group(['translate-middle', 'translate-middle-x', 'translate-middle-y']),
+            group(['z-n1', 'z-0', 'z-1', 'z-2', 'z-3']),
+        ],
+        parts: ['float'],
+    },
+    {
+        key: 'custom',
+        labelKey: 'style.section_custom',
+        properties: [],
+        catalog: [],
+        parts: [],
+        custom: true,
+    },
+];
+
+export function section(key) {
+    return SECTIONS.filter(function(each_) { return each_.key === key; })[0] || null;
+}
+
+/** Whether a property or a catalog group is offered on this kind of node. */
+export function offeredOn(item, kind) {
+    return item.notOn.indexOf(kind) === -1;
+}
+
+var BREAKPOINT = '(?:(?:sm|md|lg|xl|xxl)-)?';
+var SPACER = '(?:[0-5]|auto)';
+var COLOR = '(?:' + COLORS.join('|') + '|black|white)';
+var BG = '(?:' + COLORS.join('|') + '|body|body-secondary|body-tertiary|white|black|transparent)';
+var TEXT_COLOR = '(?:' + COLORS.join('|') + '|body|body-secondary|body-tertiary|white|black|muted|black-50|white-50)';
+var BORDER = 'border(?:-(?:top|end|bottom|start))?(?:-0)?';
+
+function spacing(key, side) {
+    var sides = { top: '[ty]?', bottom: '[by]?', left: '[sx]?', right: '[ex]?' }[side];
+    return new RegExp('^' + key + sides + '-' + BREAKPOINT + SPACER + '$');
+}
+
+/**
+ * The Bootstrap classes that set each property. Every one of Bootstrap's
+ * utilities is !important, so a node that carries one of them for a
+ * property shows the class, whatever its inline style says.
+ */
+var SETS = {
+    'width': /^(?:w-(?:25|50|75|100|auto)|vw-100)$/,
+    'height': /^(?:h-(?:25|50|75|100|auto)|vh-100)$/,
+    'max-width': /^mw-100$/,
+    'max-height': /^mh-100$/,
+    'min-width': /^min-vw-100$/,
+    'min-height': /^min-vh-100$/,
+    'margin-top': spacing('m', 'top'),
+    'margin-right': spacing('m', 'right'),
+    'margin-bottom': spacing('m', 'bottom'),
+    'margin-left': spacing('m', 'left'),
+    'padding-top': spacing('p', 'top'),
+    'padding-right': spacing('p', 'right'),
+    'padding-bottom': spacing('p', 'bottom'),
+    'padding-left': spacing('p', 'left'),
+    'border-width': new RegExp('^(?:' + BORDER + '|border-[1-5])$'),
+    'border-style': new RegExp('^' + BORDER + '$'),
+    'border-color': new RegExp('^(?:' + BORDER + '|border-' + COLOR + ')$'),
+    'border-radius': /^rounded(?:-(?:[0-5]|circle|pill|top|end|bottom|start))?$/,
+    'box-shadow': /^shadow(?:-(?:none|sm|lg))?$/,
+    'background-color': new RegExp('^bg-' + BG + '$'),
+    'background-image': /^bg-gradient$/,
+    'color': new RegExp('^text-' + TEXT_COLOR + '$'),
+    'font-size': /^fs-[1-6]$/,
+    'text-align': new RegExp('^text-' + BREAKPOINT + '(?:start|center|end)$'),
+    'text-decoration': /^text-decoration-(?:none|underline|line-through)$/,
+    'font-family': /^font-monospace$/,
+    'font-weight': /^fw-(?:lighter|light|normal|medium|semibold|bold|bolder)$/,
+    'font-style': /^fst-(?:italic|normal)$/,
+    'line-height': /^lh-(?:1|sm|base|lg)$/,
+    'text-transform': /^text-(?:lowercase|uppercase|capitalize)$/,
+    'display': new RegExp('^d-' + BREAKPOINT + '(?:none|inline|inline-block|block|grid|inline-grid|table|table-row|table-cell|flex|inline-flex)$'),
+    'opacity': /^opacity-(?:0|25|50|75|100)$/,
+    'overflow': /^overflow-(?:auto|hidden|visible|scroll)$/,
+    'visibility': /^(?:visible|invisible)$/,
+    'position': /^position-(?:static|relative|absolute|fixed|sticky)$/,
+    'top': /^top-(?:0|50|100)$/,
+    'bottom': /^bottom-(?:0|50|100)$/,
+    'left': /^start-(?:0|50|100)$/,
+    'right': /^end-(?:0|50|100)$/,
+    'z-index': /^z-(?:n1|[0-3])$/,
+};
+
+/** The first of these classes that sets the property, or null. */
+export function overriding(property, classes) {
+    var pattern = SETS[property];
+    if (!pattern) { return null; }
+
+    return classes.filter(function(name) { return pattern.test(name); })[0] || null;
+}

package/src/js/style/spacing.js

@@ -0,0 +1,286 @@
+/**
+ * Spacing, a part of the style plugin: padding and margin per breakpoint, with Bootstrap's p-{breakpoint}-*,
+ * pt-, px- … and m-{breakpoint}-*, mt-, mx- … classes.
+ *
+ * The part is what the spacing plugin was up to 7.2 - its families, and
+ * whatever it did on the canvas - as a function of the handle and its options.
+ * grideditor.style.js puts it in its sections; the deprecated
+ * grideditor.spacing.js still registers it on its own, as it always did.
+ */
+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)$');
+}
+
+export function spacingPart(ge, given) {
+
+    var options = Object.assign({ values: VALUES, scale: SCALE }, given);
+    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,
+    };
+}

package/src/js/style/textalign.js

@@ -0,0 +1,52 @@
+/**
+ * Text alignment, a part of the style plugin: text alignment per breakpoint, with Bootstrap's text-{breakpoint}-start,
+ * -center and -end classes.
+ *
+ * The part is what the textalign plugin was up to 7.2 - its families, and
+ * whatever it did on the canvas - as a function of the handle.
+ * grideditor.style.js puts it in its sections; the deprecated
+ * grideditor.textalign.js still registers it on its own, as it always did.
+ */
+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' };
+
+export function textalignPart(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] };
+            },
+        }],
+    };
+}