@themarioga/grid-editor 8.3.0 → 8.5.0

package/docs/locale-keys.md

@@ -46,7 +46,11 @@ The tools in a drawer, and the buttons in the toolbar above the canvas.
 | `tool.indent_increase` | Increase indent\n(hold shift for max) | Column drawer, adds offset units |
 | `tool.edit_source` | Edit Source Code | Toolbar, swaps the canvas for its html |
 | `tool.preview` | Preview | Toolbar, hides the editing furniture while held |
-| `tool.more` | More | Toolbar, the button that opens the add buttons that don't fit on its line |
+| `tool.more` | More | Toolbar, the button that opens the add buttons that don't fit on its line; drawers, the tool that unfolds the ones that don't fit on theirs |
+| `group.rows` | Rows | Toolbar, with `toolbar_groups`: the tab of the add row buttons |
+| `group.content` | Content | Toolbar, with `toolbar_groups`: the tab of the containers, the sections and the plugins' buttons that join it |
+| `group.elements` | Elements | Toolbar, with `toolbar_groups`: the tab of the texts, the elements of `elements.types` and the plugins' buttons that join it |
+| `group.select` | Add | Toolbar, with `toolbar_groups`: the accessible name of the tabs |
 | `tool.id_placeholder` | id | Placeholder of the id input in the settings panel |
 | `tool.id_title` | Set a unique identifier | Tooltip of that input |
 | `tool.classes_placeholder` | classes | Placeholder of the css class input beside it |

package/docs/plugins.md

@@ -62,6 +62,7 @@ GridEditor.containers.carousel = function(ge) {
     return {
         labelKey: 'container.add_carousel',   // the toolbar button's label
         iconClass: 'bi bi-images',            // optional: the button shows it in place of the label
+        group: 'media',                       // optional: its toolbar tab, with toolbar_groups
         addPaneKey: 'container.add_slide',    // the drawer's add pane tool
         paneKind: 'slide',                    // the kind its panes report
 
@@ -100,6 +101,10 @@ written for 6.x.
 - **`iconClass`**, when given, is the toolbar button's face: the icon alone,
   with the label as its title. Without one the button shows a plus and the
   label.
+- **`group`**, when given, is the toolbar tab the button goes in when the
+  host turns on `toolbar_groups`. Without one a container goes in `content`,
+  with the texts. See the `toolbar` item's `group` below for how tabs are
+  named and labelled.
 - **`create(options)`** returns a detached container. It must carry
   `data-ge-container="<type>"`: that attribute, and never a class, is how the
   editor recognises one.
@@ -218,7 +223,8 @@ needs to put a new kind of block on the canvas:
 - **`toolbar`** adds buttons beside the containers'. A click appends what
   `create()` returns to the canvas, announced as `kind`; a drop puts it where it
   was dropped, or, when that region will not have it, on the canvas just after
-  the block it was dropped in.
+  the block it was dropped in. A `create()` that returns `null` adds nothing:
+  that is how a plugin says it could not make one this time.
 
 - **`drawerTools(drawer, node, kind)`** runs for every drawer that has a gear,
   as a utility plugin's does, so a tool can go on any node. The clipboard
@@ -280,6 +286,23 @@ rather than remembering anything about it.
   container or a text does: a click puts it in a row and a column of its own
   at the end of the canvas, and a drop anywhere but in a column does the
   same where it was dropped.
+- A **`toolbar`** item's **`group`** is the tab it goes in when the host turns
+  on `toolbar_groups`. The core has three: `rows` - the add row buttons -,
+  `content` - the containers and the sections - and `elements` - the texts
+  and the elements of `elements.types` - and an item may join any of them. Any other name is a tab of its own, shared by every item, of
+  any plugin, that names it. An item without a `group` goes in a tab named
+  after its plugin. A tab's label is the `group.<name>` locale string, which
+  the plugin registers with its others, or its first button's label when
+  there is none. Tabs come in this order: `rows`, `content`, `elements`, then the others
+  as their first button comes. `group` is ignored with `align: 'end'`: the
+  buttons on the right are not grouped.
+
+  ```javascript
+  Object.assign(GridEditor.locales.en, { 'group.media': 'Media' });
+  GridEditor.features.gallery = function(ge) {
+      return { toolbar: [{ labelKey: 'gallery.add', kind: 'gallery', group: 'media', create: … }] };
+  };
+  ```
 
 - **`onSortable(sortable)`** is handed the function the editor makes all of its
   own lists with. A plugin describes a list; it never touches the drag toolkit

package/package.json

@@ -33,7 +33,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "8.3.0",
+  "version": "8.5.0",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/grideditor.js

@@ -142,6 +142,7 @@ var NESTED_SETTINGS = {
         enabled: 'auto', // 'auto' turns them on when the page has any
         selector: '[data-ge-element]', // What the host marks an element with
         auto: false, // Treat every child of a content area as an element
+        types: [], // The elements the toolbar offers: { type, html, label | labelKey, iconClass, group }
     },
     resize: {
         enabled: true, // The handle on the column's edge
@@ -198,6 +199,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);
@@ -367,6 +377,8 @@ function build(instance, baseElem, optionsOrMethod) {
             '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
@@ -423,6 +435,9 @@ function build(instance, baseElem, optionsOrMethod) {
         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
@@ -972,6 +987,7 @@ function build(instance, baseElem, optionsOrMethod) {
             canvas.parentNode.insertBefore(htmlTextArea, canvas);
 
             createMainControls();
+            watchDrawers();
 
             var signal = { signal: lifetime.signal };
 
@@ -1003,6 +1019,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);
 
@@ -1047,6 +1073,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 start = wrapper.appendChild(dom.element('div', { 'class': 'ge-toolbar-start' }));
             }
 
+            addButtons = [];
+
             // Add row
             addRowGroup = start.appendChild(dom.element('div', { 'class': 'ge-addRowGroup btn-group' }));
             addContainerGroup = dom.element('div', { 'class': 'ge-addContainerGroup btn-group ms-1' });
@@ -1077,6 +1105,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>'));
 
@@ -1113,6 +1142,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
@@ -1128,6 +1158,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 });
                     }
                 });
             });
@@ -1198,16 +1230,97 @@ 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' },
+            { name: 'elements', labelKey: 'group.elements' },
+        ];
+
+        /** 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();
         }
 
@@ -1231,13 +1344,10 @@ function build(instance, baseElem, optionsOrMethod) {
             var toggle = dom.one(more, 'button');
             var panel = dom.one(more, '.ge-toolbar-overflow');
             var spares = dom.all(panel, '.btn-group');
-            // Every add button with the group it belongs in, in toolbar order
-            var homes = [];
-            [addRowGroup, addContainerGroup].forEach(function(group, index) {
-                Array.prototype.slice.call(group.children).forEach(function(button) {
-                    homes.push({ button: button, home: group, spare: spares[index] });
-                });
-            });
+            // 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');
@@ -1258,6 +1368,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 if (e.key === 'Escape') { openOverflow(false); }
             }, signal);
             closeOverflowMenu = function() { openOverflow(false); };
+            // A category chosen: another set of buttons to fit
+            refitToolbar = fit;
 
             fit();
 
@@ -1288,6 +1400,9 @@ function build(instance, baseElem, optionsOrMethod) {
 
             /** 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');
 
@@ -1298,7 +1413,8 @@ function build(instance, baseElem, optionsOrMethod) {
 
                 dom.addClass(more, 'ge-needed');
                 for (var i = homes.length - 1; i >= 0 && start.scrollWidth > start.clientWidth; i--) {
-                    homes[i].spare.insertBefore(homes[i].button, homes[i].spare.firstChild);
+                    var into = spareOf(homes[i].home);
+                    into.insertBefore(homes[i].button, into.firstChild);
                 }
             }
         }
@@ -1338,6 +1454,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 if (activeTarget) { addToTarget(button, item.source || 'tool'); return; }
 
                 var made = item.create();
+                // A plugin that could not make one says so with null
+                if (!made) { return; }
 
                 // One that belongs in a column brings a row and a column
                 // of its own, the way a container does
@@ -1497,6 +1615,7 @@ function build(instance, baseElem, optionsOrMethod) {
         function insertFeatureFromToolbar(button, where, source) {
             var item = FEATURES[button.getAttribute('data-ge-feature')].toolbar[parseInt(button.getAttribute('data-ge-item'), 10)];
             var made = item.create();
+            if (!made) { return null; }
             var placed = made;
 
             if (item.inColumn) {
@@ -3330,6 +3449,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
@@ -5533,6 +5773,10 @@ GridEditor.locales = {
         'tool.edit_source': 'Edit Source Code',
         'tool.preview': 'Preview',
         'tool.more': 'More',
+        'group.rows': 'Rows',
+        'group.content': 'Content',
+        'group.elements': 'Elements',
+        'group.select': 'Add',
         'panel.title': '{kind} settings',
         'panel.close': 'Close',
         'panel.done': 'Done',

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

@@ -52,6 +52,10 @@ GridEditor.locales.es = {
     'tool.edit_source': 'Editar el código fuente',
     'tool.preview': 'Vista previa',
     'tool.more': 'Más',
+    'group.rows': 'Filas',
+    'group.content': 'Contenido',
+    'group.elements': 'Elementos',
+    'group.select': 'Añadir',
     'panel.title': 'Ajustes: {kind}',
     'panel.close': 'Cerrar',
     'panel.done': 'Hecho',

package/src/js/plugins/grideditor.elements.js

@@ -28,11 +28,95 @@ var NOT_ELEMENTS = '.row, .ge-content, .ge-text-block, [data-ge-container], .ge-
 GridEditor.features.elements = function(ge) {
 
     var warnedIntoText = false;
+    var types = validTypes();
 
     function elementsEnabled() {
         if (ge.settings.elements.enabled !== 'auto') { return !!ge.settings.elements.enabled; }
 
-        return ge.settings.elements.auto || !!ge.canvas.querySelector(ge.settings.elements.selector);
+        // A host that offers elements on the toolbar uses them, even on a
+        // page that has none yet
+        return ge.settings.elements.auto || types.length > 0 ||
+            !!ge.canvas.querySelector(ge.settings.elements.selector);
+    }
+
+    /** The elements.types the toolbar can offer. One that can't be made is left out, with a word to the host. */
+    function validTypes() {
+        return (ge.settings.elements.types || []).filter(function(type, index) {
+            var named = type && typeof type.type === 'string' && type.type.trim() !== '';
+            var html = type && (typeof type.html === 'function' || (typeof type.html === 'string' && type.html.trim() !== ''));
+
+            if (!named || !html) {
+                ge.warn('elements.types[' + index + ']: a type needs a type name and its html, as a string or a ' +
+                    'function; it is left off the toolbar.');
+            }
+
+            return named && html;
+        });
+    }
+
+    /** A type's toolbar button. */
+    function typeItem(type) {
+        var mismatched = false;
+
+        return {
+            // Asked again whenever the toolbar is built, so setLocale
+            // translates a labelKey
+            label: function() { return labelOf(type); },
+            iconClass: type.iconClass,
+            group: type.group || 'elements',
+            kind: 'element',
+            inColumn: true,
+            create: function() {
+                var element = makeElement(type);
+
+                if (element && !mismatched && !ge.settings.elements.auto && !element.matches(ge.settings.elements.selector)) {
+                    mismatched = true;
+                    ge.warn('elements.types "' + type.type + '": what it makes does not match elements.selector "' +
+                        ge.settings.elements.selector + '", so it will not be an element once the editor looks again.');
+                }
+
+                return element;
+            },
+        };
+    }
+
+    function labelOf(type) {
+        if (type.labelKey) { return ge.t(type.labelKey); }
+
+        return type.label || type.type;
+    }
+
+    /**
+     * What a type's button makes: the root of its html, marked as the host
+     * marks its own, or a div around it when it has no single root. Null,
+     * with a word to the host, when there is nothing to make.
+     */
+    function makeElement(type) {
+        var made;
+
+        try {
+            made = typeof type.html === 'function' ? type.html() : type.html;
+        } catch (error) {
+            ge.warn('elements.types "' + type.type + '": its html function threw (' + error.message + '); nothing was added.');
+            return null;
+        }
+
+        var nodes = typeof made === 'string' ? dom.parse(made) : (made && made.nodeType ? [made] : []);
+        // Whitespace between tags is not content
+        nodes = nodes.filter(function(node) { return node.nodeType !== 3 || node.textContent.trim() !== ''; });
+
+        if (!nodes.length) {
+            ge.warn('elements.types "' + type.type + '": its html came out empty; nothing was added.');
+            return null;
+        }
+
+        var element = nodes.length === 1 && nodes[0].nodeType === 1 ? nodes[0] : dom.element('div');
+        if (element !== nodes[0] || nodes.length > 1) { fill(element, nodes); }
+
+        element.setAttribute('data-ge-element', type.type);
+        if (!element.hasAttribute('data-ge-label')) { element.setAttribute('data-ge-label', labelOf(type)); }
+
+        return element;
     }
 
     /** Whether a child of a column is an element. */
@@ -121,6 +205,11 @@ GridEditor.features.elements = function(ge) {
         return placed;
     }
 
+    /** enabled: false takes the toolbar's element buttons away too. */
+    function elementsOff() {
+        return ge.settings.elements.enabled === false;
+    }
+
     /** A place a caller named: an element, or the first one a selector matches. */
     function nodeFrom(node) {
         if (typeof node === 'string') { return document.querySelector(node); }
@@ -163,6 +252,10 @@ GridEditor.features.elements = function(ge) {
             createElement: apiCreateElement,
         },
 
+        // A button for each type the host offers, in the elements category
+        // unless the type names another
+        toolbar: elementsOff() ? [] : types.map(typeItem),
+
         /** A node this plugin marked is an element, whatever else it is. */
         kindOf: function(node) {
             return dom.hasClass(node, 'ge-element') ? 'element' : null;

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: 'elements',
                     inColumn: true,
                     create: function() { return makeText(type); },
                 };