@themarioga/grid-editor 7.1.0 → 7.3.0

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);
 };

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

@@ -17,155 +17,16 @@
  *
  * utilities.visibility.drawer: false leaves the eye out of the drawers, and
  * the panel field is the only control.
+ *
+ * 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.visibility': 'Visibility',
-    'utility.visibility_hidden': 'Hidden',
-    'utility.visibility_shown': 'Shown',
-    'tool.hide_in_view': 'Hide in this view',
-    'tool.show_in_view': 'Show in this view',
-    'badge.hidden_in': 'Hidden at {breakpoints}',
-});
-
-/** 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-content, .ge-element, [data-ge-container]';
+import { visibilityPart } from '../style/visibility.js';
 
 GridEditor.utilities.visibility = function(ge) {
-
-    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);
-
-    /** What "shown" is written as on this kind of node. */
-    function shown(kind) {
-        return kind === 'row' ? 'flex' : 'block';
-    }
-
-    function applies(node, kind) {
-        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||
-            dom.is(node, '[data-ge-container]');
-    }
-
-    function hiddenAt(node, view) {
-        return ge.getUtility(node, 'visibility', view) === 'none';
-    }
-
-    /** The breakpoints at which the node is hidden, smallest first. */
-    function hiddenTiers(node) {
-        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });
-    }
-
-    /**
-     * Whether the node is hidden in the view being edited. In the all view
-     * that means hidden at every breakpoint, since "hidden at some" is what
-     * the badge is for.
-     */
-    function hiddenHere(node) {
-        return ge.view() === 'all'
-            ? hiddenTiers(node).length === ge.breakpoints.length
-            : hiddenAt(node, ge.view());
-    }
-
-    /** What the breakpoint below the view shows, which an inherit falls back to. */
-    function hiddenBelow(node) {
-        var index = ge.breakpoints.indexOf(ge.view());
-
-        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
-    }
-
-    /**
-     * Hide or show the node in the view being edited, with as few classes as
-     * that takes. In a breakpoint view that is often none at all: showing a
-     * node the breakpoint below shows removes this breakpoint's d-*-none
-     * rather than writing a d-*-block on top of it. In the all view a node
-     * is hidden everywhere or shown everywhere, and shown is no class.
-     */
-    function toggle(node, kind) {
-        var hide = !hiddenHere(node);
-        var value;
-
-        if (ge.view() === 'all') {
-            value = hide ? 'none' : null;
-        } else if (hide) {
-            value = hiddenBelow(node) ? null : 'none';
-        } else {
-            value = hiddenBelow(node) ? shown(kind) : null;
-        }
-
-        ge.setUtility(node, 'visibility', value, { source: 'tool' });
-    }
-
-    /**
-     * The canvas shows each node as the view sees it. ge-visibility keeps a
-     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,
-     * and data-ge-hidden-in carries the badge text for the all view.
-     */
-    function mark(scope) {
-        dom.selfAndAll(scope, NODES).forEach(function(node) {
-            var kind = ge.kindOf(node);
-            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');
-            var tiers = carries ? hiddenTiers(node) : [];
-            var here = carries && hiddenHere(node);
-            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
-
-            dom.toggleClass(node, 'ge-visibility', carries);
-            dom.toggleClass(node, 'ge-hidden-in-view', here);
-
-            if (partly) {
-                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
-            } else {
-                node.removeAttribute('data-ge-hidden-in');
-            }
-
-            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {
-                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {
-                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));
-                    dom.all(tool, 'i').forEach(function(icon) {
-                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
-                    });
-                });
-            });
-        });
-    }
-
-    function unmark() {
-        dom.all(ge.canvas, '.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {
-            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');
-            node.removeAttribute('data-ge-hidden-in');
-            dom.dropEmptyClass(node);
-        });
-    }
-
-    return {
-        families: [{
-            name: 'visibility',
-            prefix: 'd',
-            values: ['none', 'block', 'flex'],
-            appliesTo: ['row', 'column', 'text', 'element', 'container'],
-            labelKey: 'utility.visibility',
-
-            /** Hidden, or shown the way this kind of node is shown. */
-            choices: function(node, kind) {
-                return ['none', shown(kind)];
-            },
-
-            label: function(value) {
-                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');
-            },
-        }],
-
-        drawerTools: function(drawer, node, kind) {
-            if (!options.drawer || !applies(node, kind)) { return; }
-
-            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {
-                toggle(node, kind);
-            });
-        },
-
-        onRefresh: mark,
-        onDeinit: unmark,
-    };
+    ge.warn('the "visibility" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
+    return visibilityPart(ge, ge.settings.utilities.visibility);
 };