@themarioga/grid-editor 8.2.0 → 8.4.0

package/src/js/grideditor.js

@@ -198,6 +198,15 @@ function translate(settings, key, params) {
     });
 }
 
+/** Whether some locale has a string for the key, asked without the warning a missing one gets. */
+function hasString(settings, key) {
+    var locales = GridEditor.locales;
+
+    return (settings.locale_strings || {})[key] !== undefined ||
+        (locales[settings.locale] || {})[key] !== undefined ||
+        locales.en[key] !== undefined;
+}
+
 function warn(message) {
     if (window.console && window.console.warn) {
         window.console.warn('grid-editor: ' + message);
@@ -366,6 +375,9 @@ function build(instance, baseElem, optionsOrMethod) {
             'row_tools'         : [],
             'drag_handle'       : 'tool', // 'tool' for the move tool, 'drawer' for the whole drawer
             'toolbar_drag'      : 'auto', // Drag the toolbar's buttons onto the canvas. 'auto' follows drag_handle
+            'toolbar_overflow'  : 'menu', // What doesn't fit on one line: 'menu' behind a button, 'wrap' onto another line
+            'drawer_overflow'   : 'menu', // The same for the drawers' tools: 'menu' behind a button, 'wrap' onto another line
+            'toolbar_groups'    : false, // The add buttons in categories, one shown at a time, picked with tabs
             'active_target'     : false, // A click in a column makes it where the toolbar's buttons add
             'element_tools'     : [], // Host tools on element drawers, same shape as row_tools
             'element_classes'   : [], // Preset class toggles on an element's settings panel
@@ -420,6 +432,11 @@ function build(instance, baseElem, optionsOrMethod) {
         var sourceOpen = false; // Whether the canvas is being edited as html
         var dropMarker = null; // The line showing where a dragged toolbar button would land
         var activeTarget = null; // The column or region the toolbar adds to, with active_target
+        var toolbarLifetime = null; // Aborted when the toolbar is rebuilt or taken away
+        var closeOverflowMenu = function() {}; // Folds the toolbar's overflow menu away, when it has one
+        var refitToolbar = function() {}; // Works out again what the toolbar's overflow menu holds, when it has one
+        var addButtons = []; // The toolbar's add buttons, in toolbar order: { button, home, group }
+        var toolbarGroup = null; // The category shown, with toolbar_groups. Kept when the toolbar is rebuilt
         var warnedHere = {}; // Some warnings are worth saying once per instance, not once per call
         var sortables = []; // Every list made sortable, so deinit destroys exactly those
         var instanceId = ++editorCounter; // Scopes the sortable groups to this editor
@@ -464,7 +481,7 @@ function build(instance, baseElem, optionsOrMethod) {
             removeConfirmModal();
             removeSettingsPanels();
             removeDialog();
-            mainControls.remove();
+            removeMainControls();
             createMainControls();
             reset();
         }
@@ -969,6 +986,7 @@ function build(instance, baseElem, optionsOrMethod) {
             canvas.parentNode.insertBefore(htmlTextArea, canvas);
 
             createMainControls();
+            watchDrawers();
 
             var signal = { signal: lifetime.signal };
 
@@ -1000,6 +1018,16 @@ function build(instance, baseElem, optionsOrMethod) {
                     if (!dom.hasClass(canvas, 'ge-editing')) { return; }
                     if (from && Math.abs(e.clientX - from.x) + Math.abs(e.clientY - from.y) > settings.drag.threshold) { return; }
                     var region = dom.closest(e.target, targetSelector());
+
+                    // The target's own background, or its drawer's, clicked
+                    // again takes it back. What is in it - a text, a tool, a
+                    // nested column - keeps it, or makes that the target
+                    if (region && region === activeTarget &&
+                        (e.target === region || e.target === dom.child(region, '.ge-tools-drawer'))) {
+                        changeTarget(null);
+                        return;
+                    }
+
                     changeTarget(region && region !== canvas && canvas.contains(region) ? region : null);
                 }, signal);
 
@@ -1035,8 +1063,19 @@ function build(instance, baseElem, optionsOrMethod) {
             htmlTextArea.parentNode.insertBefore(mainControls, htmlTextArea);
             wrapper = mainControls.appendChild(dom.element('div', { 'class': 'ge-wrapper ge-top' }));
 
+            // With the overflow menu, the add buttons stand in a line of
+            // their own that keeps to one line, beside the menu's button
+            var overflowMenu = settings.toolbar_overflow !== 'wrap';
+            var start = wrapper;
+            if (overflowMenu) {
+                dom.addClass(wrapper, 'ge-toolbar-menu');
+                start = wrapper.appendChild(dom.element('div', { 'class': 'ge-toolbar-start' }));
+            }
+
+            addButtons = [];
+
             // Add row
-            addRowGroup = wrapper.appendChild(dom.element('div', { 'class': 'ge-addRowGroup btn-group' }));
+            addRowGroup = start.appendChild(dom.element('div', { 'class': 'ge-addRowGroup btn-group' }));
             addContainerGroup = dom.element('div', { 'class': 'ge-addContainerGroup btn-group ms-1' });
             settings.new_row_layouts.forEach(function(layout) {
                 var grouped = !Array.isArray(layout);
@@ -1065,6 +1104,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     }
                 });
                 addRowGroup.appendChild(btn);
+                addButtons.push({ button: btn, home: addRowGroup, group: 'rows' });
 
                 btn.appendChild(dom.create('<i class="bi bi-plus"></i>'));
 
@@ -1079,7 +1119,7 @@ function build(instance, baseElem, optionsOrMethod) {
                 btn.appendChild(dom.create(icon));
             });
 
-            wrapper.appendChild(addContainerGroup);
+            start.appendChild(addContainerGroup);
 
             // A container starts in a row of its own, the way the add row
             // buttons next to these ones do
@@ -1101,6 +1141,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     }, { parent: canvas, source: 'tool' });
                 });
                 addContainerGroup.appendChild(button);
+                addButtons.push({ button: button, home: addContainerGroup, group: toolbarGroupOf(definition.group) || 'content' });
             });
 
             // A feature plugin's own buttons, beside the containers': what
@@ -1116,6 +1157,8 @@ function build(instance, baseElem, optionsOrMethod) {
                         endItems.push(button);
                     } else {
                         addContainerGroup.appendChild(button);
+                        // One that names no category of its own has its plugin's
+                        addButtons.push({ button: button, home: addContainerGroup, group: toolbarGroupOf(item.group) || name });
                     }
                 });
             });
@@ -1186,9 +1229,194 @@ function build(instance, baseElem, optionsOrMethod) {
                 endItems.forEach(function(button) { end.appendChild(button); });
             }
 
+            if (settings.toolbar_groups) { createGroupTabs(start); }
+            if (overflowMenu) { createOverflowMenu(start); }
+
             makeToolbarDraggable();
         }
 
+        /** The core's categories, ahead of the plugins' own. */
+        var CORE_GROUPS = [
+            { name: 'rows', labelKey: 'group.rows' },
+            { name: 'content', labelKey: 'group.content' },
+        ];
+
+        /** A plugin's category, when it names one. */
+        function toolbarGroupOf(value) {
+            return typeof value === 'string' && value.trim() !== '' ? value : null;
+        }
+
+        /**
+         * toolbar_groups: tabs at the start of the toolbar, one per category
+         * of add buttons, and only the chosen one's buttons on it. The rest
+         * wait in a hidden stash inside the toolbar, so toolbarItems still
+         * finds them and the btn-groups round the corners of what shows. With
+         * a single category there is nothing to choose, and no tabs.
+         */
+        function createGroupTabs(start) {
+            // The core's two first, then the rest as their first button comes
+            var names = CORE_GROUPS.map(function(group) { return group.name; });
+            addButtons.forEach(function(entry) {
+                if (names.indexOf(entry.group) < 0) { names.push(entry.group); }
+            });
+            names = names.filter(function(name) {
+                return addButtons.some(function(entry) { return entry.group === name; });
+            });
+
+            if (names.length < 2) { return; }
+
+            var tabs = dom.element('div', { 'class': 'ge-toolbar-groups btn-group', role: 'tablist', 'aria-label': t('group.select') });
+            start.insertBefore(tabs, start.firstChild);
+            var stash = mainControls.appendChild(dom.element('div', { 'class': 'ge-toolbar-stash', hidden: 'hidden' }));
+
+            names.forEach(function(name) {
+                var tab = tabs.appendChild(dom.element('button', {
+                    type: 'button',
+                    'class': 'btn btn-sm btn-outline-primary',
+                    role: 'tab',
+                    'data-ge-group': name,
+                }, groupLabel(name)));
+
+                tab.addEventListener('click', function() { showGroup(name); });
+            });
+
+            showGroup(names.indexOf(toolbarGroup) >= 0 ? toolbarGroup : names[0]);
+
+            function showGroup(name) {
+                toolbarGroup = name;
+
+                addButtons.forEach(function(entry) {
+                    (entry.group === name ? entry.home : stash).appendChild(entry.button);
+                });
+
+                dom.children(tabs).forEach(function(tab) {
+                    var chosen = tab.getAttribute('data-ge-group') === name;
+                    dom.toggleClass(tab, 'active', chosen);
+                    tab.setAttribute('aria-selected', chosen ? 'true' : 'false');
+                });
+
+                refitToolbar();
+            }
+        }
+
+        /** A category's label: its group.<name> string, or its first button's when it has none. */
+        function groupLabel(name) {
+            var key = 'group.' + name;
+            if (hasString(settings, key)) { return t(key); }
+
+            var first = addButtons.filter(function(entry) { return entry.group === name; })[0];
+            return first.button.getAttribute('title') || name;
+        }
+
+        /** The add buttons on the toolbar's line: all of them, or the chosen category's. */
+        function shownAddButtons() {
+            return addButtons.filter(function(entry) { return !dom.closest(entry.button, '.ge-toolbar-stash'); });
+        }
+
+        /** The toolbar off the page, with what keeps its overflow menu up to date. */
+        function removeMainControls() {
+            if (toolbarLifetime) { toolbarLifetime.abort(); }
+            toolbarLifetime = null;
+            closeOverflowMenu = function() {};
+            refitToolbar = function() {};
+            mainControls.remove();
+        }
+
+        /**
+         * The add buttons that don't fit on the toolbar's line, behind a
+         * button at its end. They are the same buttons, moved rather than
+         * copied, so a click, a drag or a plugin finding them with
+         * toolbarItems works as it does on the line. Which ones go is worked
+         * out again whenever the toolbar or what is on it changes size.
+         */
+        function createOverflowMenu(start) {
+            var more = dom.create('<div class="ge-toolbar-more">' +
+                '<button type="button" class="btn btn-sm btn-primary"><i class="bi bi-three-dots"></i></button>' +
+                '<div class="ge-toolbar-overflow">' +
+                    '<div class="ge-addRowGroup btn-group"></div>' +
+                    '<div class="ge-addContainerGroup btn-group"></div>' +
+                '</div>' +
+            '</div>');
+            start.parentNode.insertBefore(more, start.nextSibling);
+
+            var toggle = dom.one(more, 'button');
+            var panel = dom.one(more, '.ge-toolbar-overflow');
+            var spares = dom.all(panel, '.btn-group');
+            // The spare group in the menu for each group on the line
+            function spareOf(home) {
+                return home === addRowGroup ? spares[0] : spares[1];
+            }
+
+            toggle.setAttribute('title', t('tool.more'));
+            toggle.setAttribute('aria-haspopup', 'true');
+            toggle.setAttribute('aria-expanded', 'false');
+
+            var menuLifetime = toolbarLifetime = new AbortController();
+            var signal = { signal: menuLifetime.signal };
+
+            toggle.addEventListener('click', function() { openOverflow(!dom.hasClass(more, 'ge-open')); });
+            // A button in the menu has done its job once it is clicked
+            panel.addEventListener('click', function(e) {
+                if (dom.closest(e.target, '[data-ge-toolbar]')) { openOverflow(false); }
+            });
+            document.addEventListener('pointerdown', function(e) {
+                if (!more.contains(e.target)) { openOverflow(false); }
+            }, signal);
+            document.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') { openOverflow(false); }
+            }, signal);
+            closeOverflowMenu = function() { openOverflow(false); };
+            // A category chosen: another set of buttons to fit
+            refitToolbar = fit;
+
+            fit();
+
+            if (window.ResizeObserver) {
+                // Not in the callback itself: moving buttons there would
+                // resize what is being observed before the frame is drawn
+                var pending = false;
+                var observer = new window.ResizeObserver(function() {
+                    if (pending) { return; }
+                    pending = true;
+                    window.requestAnimationFrame(function() {
+                        pending = false;
+                        if (!menuLifetime.signal.aborted) { fit(); }
+                    });
+                });
+                // The toolbar's width, and the buttons on the right of it
+                // showing and hiding, as the paste button does
+                observer.observe(wrapper);
+                observer.observe(start);
+                menuLifetime.signal.addEventListener('abort', function() { observer.disconnect(); });
+            }
+
+            function openOverflow(open) {
+                open = open && dom.hasClass(more, 'ge-needed');
+                dom.toggleClass(more, 'ge-open', open);
+                toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+            }
+
+            /** Back on the line, then the last ones off it until the rest fit. */
+            function fit() {
+                // Only the chosen category's, with toolbar_groups: the others
+                // wait in their stash
+                var homes = shownAddButtons();
+                homes.forEach(function(entry) { entry.home.appendChild(entry.button); });
+                dom.removeClass(more, 'ge-needed');
+
+                if (start.scrollWidth <= start.clientWidth) {
+                    openOverflow(false);
+                    return;
+                }
+
+                dom.addClass(more, 'ge-needed');
+                for (var i = homes.length - 1; i >= 0 && start.scrollWidth > start.clientWidth; i--) {
+                    var into = spareOf(homes[i].home);
+                    into.insertBefore(homes[i].button, into.firstChild);
+                }
+            }
+        }
+
         /**
          * A toolbar button's face: the plugin's icon alone when it has one,
          * with its label as the title, or a plus and the label otherwise.
@@ -1298,6 +1526,8 @@ function build(instance, baseElem, optionsOrMethod) {
 
                     helper = dom.addClass(button.cloneNode(true), 'ge-toolbar-helper');
                     document.body.appendChild(helper);
+                    // The menu a button came from would hide where it lands
+                    closeOverflowMenu();
                     dom.addClass(canvas, 'ge-dropping');
                 }
 
@@ -1913,7 +2143,7 @@ function build(instance, baseElem, optionsOrMethod) {
             removeConfirmModal();
             removeSettingsPanels();
             removeDialog();
-            mainControls.remove();
+            removeMainControls();
             htmlTextArea.remove();
             lifetime.abort();
             instances.delete(canvas);
@@ -3214,6 +3444,127 @@ function build(instance, baseElem, optionsOrMethod) {
             return createTool(drawer, t('tool.move'), 'ge-move', 'bi bi-arrows-move');
         }
 
+        /**
+         * The drawers that span their node - a row's, a column's, a
+         * container's, an element's, a section's - keep their tools to one
+         * line. The tools that don't fit are hidden from the end, and a more
+         * tool at the drawer's end unfolds it to show them all, wrapping as
+         * it would otherwise. They stay where they are, so whatever finds a
+         * tool in its drawer, or hangs a picker off it, still does.
+         *
+         * A text's drawer sits over the text, as wide as its tools, and a
+         * pane's sits by its label: neither is one of them.
+         */
+        var FITTED_DRAWERS = '.ge-tools-drawer:not(.ge-text-drawer):not(.ge-pane-drawer):not(.ge-code-inline)';
+
+        /**
+         * Fit every drawer as it comes onto the canvas, and again when it
+         * changes width or a tool is added to it, shown or hidden. Plugins
+         * add tools at their own moments, so this watches rather than
+         * waiting to be told.
+         */
+        function watchDrawers() {
+            if (settings.drawer_overflow === 'wrap' || !window.ResizeObserver || !window.MutationObserver) { return; }
+
+            var due = new Set();
+            var frame = null;
+
+            // Once a frame, after the layout: moving tools in the observers'
+            // callbacks would resize what they are watching
+            function schedule(drawer) {
+                due.add(drawer);
+                if (frame === null) { frame = window.requestAnimationFrame(flush); }
+            }
+
+            function flush() {
+                frame = null;
+                var drawers = Array.from(due);
+                due.clear();
+                drawers.forEach(function(drawer) {
+                    if (!drawer.isConnected) {
+                        drawerResizes.unobserve(drawer);
+                        return;
+                    }
+                    fitDrawer(drawer);
+                });
+            }
+
+            var drawerResizes = new window.ResizeObserver(function(entries) {
+                entries.forEach(function(entry) { schedule(entry.target); });
+            });
+
+            var mutations = new window.MutationObserver(function(records) {
+                records.forEach(function(record) {
+                    var target = record.target;
+
+                    // A tool shown or hidden
+                    if (record.type === 'attributes') {
+                        var parent = target.parentNode;
+                        if (parent && parent.nodeType === 1 && parent.matches(FITTED_DRAWERS)) { schedule(parent); }
+                        return;
+                    }
+
+                    // A tool added
+                    if (target.nodeType === 1 && target.matches(FITTED_DRAWERS)) {
+                        schedule(target);
+                        return;
+                    }
+
+                    record.addedNodes.forEach(function(node) {
+                        if (node.nodeType !== 1) { return; }
+                        dom.selfAndAll(node, FITTED_DRAWERS).forEach(function(drawer) {
+                            dom.addClass(drawer, 'ge-drawer-fit');
+                            drawerResizes.observe(drawer);
+                            schedule(drawer);
+                        });
+                    });
+                });
+            });
+            mutations.observe(canvas, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
+
+            lifetime.signal.addEventListener('abort', function() {
+                mutations.disconnect();
+                drawerResizes.disconnect();
+                if (frame !== null) { window.cancelAnimationFrame(frame); }
+            });
+        }
+
+        /** Hide the tools that don't fit on the drawer's line, from the end, behind its more tool. */
+        function fitDrawer(drawer) {
+            var tools = dom.children(drawer, 'a').filter(function(tool) { return !dom.hasClass(tool, 'ge-drawer-more'); });
+            var expanded = dom.hasClass(drawer, 'ge-drawer-expanded');
+
+            // Measured on one line, with every tool back on it
+            dom.removeClass(drawer, 'ge-drawer-overflow ge-drawer-expanded');
+            tools.forEach(function(tool) { dom.removeClass(tool, 'ge-tool-overflow'); });
+
+            if (!drawerOverflows(drawer, tools)) { return; }
+
+            dom.addClass(drawer, 'ge-drawer-overflow');
+            if (!dom.child(drawer, '.ge-drawer-more')) {
+                createTool(drawer, t('tool.more'), 'ge-drawer-more', 'bi bi-three-dots', function() {
+                    dom.toggleClass(drawer, 'ge-drawer-expanded');
+                });
+            }
+
+            for (var i = tools.length - 1; i >= 0 && drawerOverflows(drawer, tools); i--) {
+                dom.addClass(tools[i], 'ge-tool-overflow');
+            }
+
+            dom.toggleClass(drawer, 'ge-drawer-expanded', expanded);
+        }
+
+        function drawerOverflows(drawer, tools) {
+            var style = window.getComputedStyle(drawer);
+            var limit = drawer.getBoundingClientRect().right -
+                parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+
+            return tools.some(function(tool) {
+                var rects = tool.getClientRects();
+                return rects.length > 0 && rects[0].right > limit + 0.5;
+            });
+        }
+
         /**
          * A tool in a drawer: a link with an icon, and what it does. The
          * handlers are a click handler, or { eventName: handler }; each gets
@@ -5416,6 +5767,10 @@ GridEditor.locales = {
         'tool.indent_increase': 'Increase indent\n(hold shift for max)',
         'tool.edit_source': 'Edit Source Code',
         'tool.preview': 'Preview',
+        'tool.more': 'More',
+        'group.rows': 'Rows',
+        'group.content': 'Content',
+        'group.select': 'Add',
         'panel.title': '{kind} settings',
         'panel.close': 'Close',
         'panel.done': 'Done',

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

@@ -51,6 +51,10 @@ GridEditor.locales.es = {
     'tool.indent_increase': 'Aumentar sangría\n(Mayús para el máximo)',
     'tool.edit_source': 'Editar el código fuente',
     'tool.preview': 'Vista previa',
+    'tool.more': 'Más',
+    'group.rows': 'Filas',
+    'group.content': 'Contenido',
+    'group.select': 'Añadir',
     'panel.title': 'Ajustes: {kind}',
     'panel.close': 'Cerrar',
     'panel.done': 'Hecho',

package/src/js/plugins/grideditor.sections.js

@@ -192,6 +192,7 @@ GridEditor.features.sections = function(ge) {
         toolbar: [{
             labelKey: 'section.add',
             kind: 'section',
+            group: 'content',
             create: function() { return createSection(); },
         }],
 

package/src/js/text/grideditor.text.js

@@ -321,6 +321,7 @@ if (!GridEditor.features.text) {
                     iconClass: TEXTS[type].iconClass,
                     className: 'ge-add-text-button',
                     kind: 'text',
+                    group: 'content',
                     inColumn: true,
                     create: function() { return makeText(type); },
                 };

package/src/less/grideditor.less

@@ -67,6 +67,103 @@
         margin-left: 5px;
     }
 
+    /* toolbar_groups: the tabs choosing which category of add buttons
+       shows, at the start of the line. Never squeezed, and never behind the
+       more button */
+    .ge-toolbar-groups {
+        flex: none;
+        margin-right: 8px;
+
+        > .btn {
+            white-space: nowrap;
+        }
+    }
+
+    /* toolbar_overflow: 'menu'. The add buttons keep to one line, and the
+       ones that don't fit go behind a button at its end. The right-hand
+       buttons come before in the markup, so they are ordered back to how
+       floating them puts them. */
+    .ge-wrapper.ge-toolbar-menu {
+        display: flex;
+        align-items: flex-start;
+
+        > .pull-right {
+            float: none;
+        }
+        > .ge-toolbar-end {
+            order: 1;
+        }
+        > .btn-group.pull-right {
+            order: 2;
+        }
+        > .ge-layout-mode {
+            order: 3;
+        }
+    }
+
+    .ge-toolbar-start {
+        display: flex;
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+
+        /* A group as wide as its buttons and a button as wide as its label:
+           squeezed, they would wrap their labels rather than overflow */
+        > .btn-group {
+            flex: none;
+        }
+        .btn {
+            white-space: nowrap;
+        }
+    }
+
+    .ge-toolbar-more {
+        display: none;
+        position: relative;
+        flex: none;
+        margin: 0 5px 0 4px;
+
+        &.ge-needed {
+            display: block;
+        }
+    }
+
+    .ge-toolbar-overflow {
+        display: none;
+        position: absolute;
+        z-index: 30;
+        top: ~"calc(100% + 4px)";
+        right: 0;
+        flex-direction: column;
+        gap: 6px;
+        width: max-content;
+        max-width: ~"min(420px, calc(100vw - 32px))";
+        padding: 6px;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, .15);
+        border-radius: 6px;
+        box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
+
+        > .btn-group {
+            flex-wrap: wrap;
+            gap: 4px;
+            margin: 0;
+
+            &:empty {
+                display: none;
+            }
+        }
+        /* Wrapped onto several lines, a group's buttons stand apart */
+        > .btn-group > .btn.btn {
+            margin-left: 0;
+            border-radius: 4px;
+        }
+    }
+
+    .ge-toolbar-more.ge-open > .ge-toolbar-overflow {
+        display: flex;
+    }
+
     .ge-toolbar-end {
         margin-right: 5px;
 
@@ -1038,6 +1135,43 @@
     }
 }
 
+/* drawer_overflow: 'menu'. A drawer keeps its tools to one line; the ones
+   that don't fit are hidden behind a more tool at its end, which unfolds it
+   to show them all */
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit {
+    white-space: nowrap;
+
+    > .ge-details {
+        white-space: normal;
+    }
+    > a.ge-tool-overflow,
+    > a.ge-drawer-more {
+        display: none;
+    }
+
+    &.ge-drawer-overflow {
+        padding-right: 26px;
+
+        > a.ge-drawer-more {
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+    }
+
+    &.ge-drawer-expanded {
+        white-space: normal;
+
+        > a.ge-tool-overflow {
+            display: inline-block;
+        }
+        > a.ge-drawer-more {
+            background: rgba(0, 0, 0, 0.08);
+        }
+    }
+}
+
 /* The handle belongs to editing, and never to the output */
 .ge-canvas:not(.ge-editing) .ge-resize-handle {
     display: none;

package/types/grideditor.d.ts

@@ -107,6 +107,12 @@ export interface GridEditorOptions {
     text_tools?: HostTool[];
     drag_handle?: 'tool' | 'drawer';
     toolbar_drag?: 'auto' | boolean;
+    /** The add buttons that don't fit on the toolbar's line: behind a more button, or onto another line. Default 'menu'. */
+    toolbar_overflow?: 'menu' | 'wrap';
+    /** The drawers' tools that don't fit on one line: behind a more tool, or onto more lines. Default 'menu'. */
+    drawer_overflow?: 'menu' | 'wrap';
+    /** The add buttons in categories - rows, content, and a plugin's own - one shown at a time, chosen with tabs. Default false. */
+    toolbar_groups?: boolean;
     /** A click in a column or a section makes it where the toolbar's buttons add. Default false. */
     active_target?: boolean;
     /** The plugins to use, of any kind; null is every one loaded. */