@themarioga/grid-editor 8.3.0 → 8.5.0

package/src/less/grideditor.less

@@ -67,6 +67,18 @@
         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
@@ -94,6 +106,15 @@
         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 {
@@ -1114,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

@@ -109,6 +109,10 @@ export interface GridEditorOptions {
     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. */
@@ -121,7 +125,7 @@ export interface GridEditorOptions {
     inline_style?: InlineStyleOptions;
     /** The tabs plugin: the variant of the tabs containers made new. */
     tabs?: TabsOptions;
-    elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
+    elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean; types?: ElementType[] };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];
     valid_col_offsets?: number[];
@@ -282,6 +286,22 @@ export type GridEditorCallbacks = {
 };
 
 /** A plugin's factory: called once per editor with the handle in docs/plugins.md. */
+/** An element the toolbar offers, from elements.types. */
+export interface ElementType {
+    /** What it is: its data-ge-element. */
+    type: string;
+    /** Its markup: html, or a function called for each one made that returns html or a node. */
+    html: string | (() => string | Node);
+    /** Its button's label, as it is. */
+    label?: string;
+    /** Its button's label, a locale key: wins over label, and follows setLocale. */
+    labelKey?: string;
+    /** The button shows this icon alone, with the label as its title. */
+    iconClass?: string;
+    /** Its toolbar_groups category. Default 'elements'. */
+    group?: string;
+}
+
 export type PluginFactory = ((ge: any) => Record<string, unknown>) & { always?: boolean };
 
 export interface CreateColumnOptions extends Placement {