@themarioga/grid-editor 4.1.0 → 5.1.0

package/docs/events.md

@@ -59,6 +59,7 @@ about every insertion can bind `grideditor:before-add` and switch on
 | `grideditor:before-utility` | — | yes | before a utility class is written, from the panel, a plugin's tool or `setUtility` |
 | `grideditor:after-utility` | — | no | after the class is written and the preview redrawn, only if something changed |
 | `grideditor:view-change` | — | no | after the view changes, only if it actually changed |
+| `grideditor:after-copy` | — | no | with the clipboard plugin, after a node is copied |
 
 Two things here are not in the 3.0 specification's catalogue. The indent pair,
 because the indent tools are an operation like any other and announce
@@ -73,19 +74,24 @@ The payload
 {
     kind: 'row',          // row | column | content | element
                           // tabs | accordion | popup | tab | accordion-item
+                          // section, with the sections plugin
     node: jQuery,         // the node added, deleted, moved or resized
     parent: jQuery,       // where it is going, or where it came from on a delete
     canvas: jQuery,
     breakpoint: 'lg',     // the view at the time: a breakpoint key, or 'all'
-    source: 'tool',       // tool | api | dragdrop | panel
+    source: 'tool',       // tool | api | dragdrop | panel (a width chosen in the panel)
 
     // move only
     from: { parent: jQuery, index: 2 },
     to:   { parent: jQuery, index: 0 },
 
-    // resize and indent only: units, not pixels
+    // resize and indent only: units, not pixels. A size can also be
+    // 'equal' or 'auto', and null when the width field chose "inherit"
     from: 6,
     to: 7,
+    cleared: [            // the all view only: the breakpoints' own sizes or
+        { breakpoint: 'md', value: 4 },     // offsets, which the write took off
+    ],
 
     // a pane inside a container
     container: jQuery,
@@ -104,6 +110,12 @@ The payload
 }
 ```
 
+A section's width change is announced as a utility change too, with
+`family: 'section'`, `breakpoint: 'all'` and the widths - `'fixed'`, `'fluid'`,
+`'md'` - as `from` and `to`: a section has one container class, whatever the
+breakpoint. Adding a section fires `before-add-section` and `after-add-section`,
+with the generic pair.
+
 `view-change` carries no node: its payload is `canvas`, `breakpoint` (the new
 view), `from` and `to`. A utility's `breakpoint` is the view it was written
 in, which `setUtility` can be asked to make a different one from the view on
@@ -111,7 +123,9 @@ screen, and its `source` is `panel`, `tool` or `api`.
 
 `source` matters to a host that both drives the editor from its own palette and
 listens for what the user does: `api` is your own call coming back to you,
-`tool` is a click in the editor, `dragdrop` is a gesture.
+`tool` is a click in the editor, `dragdrop` is a gesture, and `paste` is a node
+the clipboard plugin put in, from a paste tool or the toolbar. A paste is an add
+like any other, so canceling its `before-add-*` turns it away.
 
 `kind: 'content'` appears when a content area itself is dragged between
 columns. The kinds for containers are the container's own type, so a listener

package/docs/locale-keys.md

@@ -30,6 +30,8 @@ The tools in a drawer, and the buttons in the toolbar above the canvas.
 | `tool.add_row` | Add row | Column drawer, adds a nested row |
 | `tool.add_column` | Add column\n(hold to choose the width) | Row drawer. A click adds a column, holding the tool offers the widths. Two lines |
 | `tool.column_size` | {size} of 12 | Tooltip of a width in that picker |
+| `tool.column_equal` | Equal: shares what the row has left | The `equal` choice in that picker, which adds a `col` |
+| `tool.column_auto` | Auto: as wide as its content | The `auto` choice in that picker, which adds a `col-auto` |
 | `tool.delete_row` | Remove row | Row drawer |
 | `tool.delete_column` | Remove col | Column drawer |
 | `tool.delete_element` | Remove element | Element drawer |
@@ -57,6 +59,7 @@ row.*
 | Key | English | Where |
 | --- | --- | --- |
 | `row.add` | Add row {layout} | Tooltip of each toolbar add-row button. `{layout}` is the column layout, as in `6-6` |
+| `row.add_row_cols` | Add a row of {columns} columns, {counts} per row | Tooltip of a toolbar button for a `{ row_cols, columns }` layout. `{counts}` reads like `1, md: 3` |
 
 
 container.*
@@ -80,6 +83,36 @@ The containers: tabs, accordions and popups, and the panes inside them.
 | `container.card_footer` | Card footer | Text of a new card's footer, when it has one |
 
 
+section.*
+---------
+
+The sections plugin: Bootstrap's `.container` and its kin, on the canvas.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `section.add` | Section | Toolbar button that adds a section |
+| `section.width` | Width | Label of a section's width field, in its settings panel |
+| `section.fixed` | Fixed | Its choice for `container` |
+| `section.fluid` | Full width | Its choice for `container-fluid` |
+| `section.from` | Fixed from {breakpoint} | Its choice for `container-{bp}`. `{breakpoint}` is the key |
+| `tool.add_row_to_section` | Add row | Section drawer, adds a row to the section |
+| `tool.delete_section` | Remove section | Section drawer |
+| `confirm.delete_section` | Delete this section and everything in it? | Asked before a section is deleted |
+
+
+clipboard.*
+-----------
+
+The clipboard plugin: copy and paste.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `tool.copy` | Copy | Row, column, section, container and element drawers |
+| `tool.paste` | Paste | Column, row and section drawers, while something that fits there is copied |
+| `clipboard.paste_row` | Paste row | Toolbar button, while a row is copied |
+| `clipboard.paste_section` | Paste section | Toolbar button, while a section is copied |
+
+
 confirm.*
 ---------
 
@@ -113,7 +146,7 @@ key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
 
 | Key | English | Where |
 | --- | --- | --- |
-| `view.all` | All sizes | The default view, which writes every breakpoint at once |
+| `view.all` | All sizes | The default view, which writes one class for every breakpoint |
 | `view.xs` | Phone | Layout mode writing `col-*` and `offset-*` |
 | `view.sm` | Tablet | Layout mode writing `col-sm-*` and `offset-sm-*` |
 | `view.md` | Small desktop | Layout mode writing `col-md-*` and `offset-md-*` |
@@ -131,6 +164,11 @@ The labels of each utility and its values are the plugins' own keys.
 | Key | English | Where |
 | --- | --- | --- |
 | `utility.section` | Responsive: {view} | The section's fold toggle. `{view}` is the label of the view being edited |
+| `utility.col_width` | Width | The column width field, in a column's Responsive section |
+| `utility.col_equal` | Equal | Its choice for `col` / `col-{bp}` |
+| `utility.col_auto` | Auto | Its choice for `col-auto` / `col-{bp}-auto` |
+| `utility.col_from_row` | From the row: {count} | The width field's empty choice when the row's row-cols sizes the column. `{count}` is `badge.row_cols` |
+| `utility.row_cols` | Columns per row | The row-cols field, in a row's Responsive section |
 | `utility.default` | Default | The empty choice of a field when nothing below the view sets the utility, and always in the all view |
 | `utility.inherit` | Inherit: {value} (from {breakpoint}) | The empty choice in a breakpoint view when a smaller breakpoint sets the utility. `{breakpoint}` is its key, `sm` |
 | `utility.varies` | Changes at {breakpoints}; choosing here replaces that | Note under a field in the all view when breakpoints set their own value. `{breakpoints}` is a list of keys |
@@ -159,6 +197,14 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.side_b` | Bottom | The side of `pb-*` and `mb-*` |
 | `utility.side_s` | Start | The side of `ps-*` and `ms-*` |
 | `utility.side_e` | End | The side of `pe-*` and `me-*` |
+| `utility.text_align` | Text alignment | Label of the textalign plugin's field |
+| `utility.text_start` | Start | Its choice for `text-*-start` |
+| `utility.text_center` | Center | Its choice for `text-*-center` |
+| `utility.text_end` | End | Its choice for `text-*-end` |
+| `utility.float` | Float | Label of the float plugin's field, on an element |
+| `utility.float_start` | Start | Its choice for `float-*-start` |
+| `utility.float_end` | End | Its choice for `float-*-end` |
+| `utility.float_none` | None | Its choice for `float-*-none` |
 | `utility.spacing_gutter` | A column's side padding is its gutter: changing it changes the gutter | Note in a column's spacing group while it carries side padding |
 
 
@@ -171,6 +217,8 @@ markup `getHtml` returns.
 | Key | English | Where |
 | --- | --- | --- |
 | `badge.hidden_in` | Hidden at {breakpoints} | Corner of a node hidden at some breakpoints, in the all view. `{breakpoints}` is a list of keys |
+| `badge.row_cols` | {count} per row | Corner of a row whose row-cols sizes its columns in the view being edited |
+| `badge.row_cols_auto` | As wide as their content | The same, for `row-cols-auto` |
 | `badge.order` | Order: {value} | Corner of a column ordered by class in the view being edited |
 
 

package/docs/plugins.md

@@ -107,7 +107,7 @@ not change without a major version.
 | `ge.createMoveTool(drawer)` | The drag handle, unless `drag_handle` says the whole drawer is one |
 | `ge.addSettingsTool(drawer, node, presets)` | The gear, and the id and class panel it opens |
 | `ge.deleteNode(kind, node, confirmText, animate)` | Remove a node: ask, animate, announce |
-| `ge.place(node, kind, options)` | Put a created node where `appendTo` and friends say, through the add events |
+| `ge.place(node, kind, options)` | Put a created node where `appendTo` and friends say, through the add events. `options.source` is the payload's `source`, `api` by default |
 | `ge.createPaneControls(pane, kind, hostTools, confirmText, remove)` | The drawer a pane gets: move, the host's tools, delete |
 | `ge.makeLabelEditable(label)` | Rename in place, with the Bootstrap toggle suspended while typing |
 | `ge.labelIn(button)` | The label span inside a button, wrapped if it is not already |
@@ -118,11 +118,15 @@ not change without a major version.
 | `ge.operate(body)` | Run `body` as one operation, so a handler calling back in is queued |
 | `ge.kindOf(node)` | What an event calls a node: `row`, `column`, `element`, a container's type… |
 | `ge.view()` | The view being edited: a breakpoint key, or `'all'` |
-| `ge.viewTiers()` | The breakpoint keys that view writes: one, or all six |
+| `ge.viewTiers()` | The breakpoint key that view writes: the one being edited, or `xs` - the class with no breakpoint - in the all view |
 | `ge.breakpoints` | Every breakpoint key, smallest first |
 | `ge.getUtility(node, family, view?)` | A utility's value, as in the public method |
 | `ge.setUtility(node, family, value, options?)` | Write one through the events. `options` is a view key or `{ view, source }` |
 | `ge.utilityField(node, family)` | A panel field for one family, for a plugin that builds its own panel |
+| `ge.rowFromLayout(layout)` | A detached row from a layout: `[8, 4]`, `['auto', 'equal']` or `{ row_cols, columns }` |
+| `ge.nodeHtml(node)` | One node's markup as `getHtml` would give it. The canvas leaves editing to read it and comes back, as it does for `getHtml` |
+| `ge.toolbarItems(name)` | The toolbar buttons the feature plugin `name` declared, for showing and hiding them |
+| `ge.bareStyle(node, family, property)` | A css property's value on the node with none of the family's classes: what a preview shows when no class applies and that is not a constant |
 
 The add, delete and move events for a container and its panes are fired by the
 editor, not by the plugin: `createPaneControls` handles a pane's delete, and
@@ -143,10 +147,36 @@ $.fn.gridEditor.features.elements = function(ge) {
         onDeinit: function() { … },      // every deinit: take it out again
         onContentReady: function(area) { … },  // a rich text editor just took over
         onSortable: function(sortable) { … },  // declare your own sortable lists
+        blocks: '.ge-section',            // more blocks the canvas and the columns move
+        regions: '.ge-section',           // more lists those blocks move in
+        accepts: function(region, node) { … },  // false turns a block away from a region
+        toolbar: [{ labelKey: …, kind: …, create: function() { … } }],  // buttons beside the containers'
+        drawerTools: function(drawer, node, kind) { … },  // tools beside the gear, in every drawer
     };
 };
 ```
 
+The last four are what the sections plugin is made of, and what a plugin
+needs to put a new kind of block on the canvas:
+
+- **`blocks`** is a selector added to what the canvas and every column move -
+  rows, content areas and containers, the editor's own blocks.
+- **`regions`** is a selector for more lists those blocks move in, in the same
+  group, so a row dragged from the canvas can land in one.
+- **`accepts(region, node)`** can turn a block away from a list: `false` and the
+  drag will not drop it there, whoever's block and whoever's list. With none of
+  these hooks, every block goes everywhere, as before.
+- **`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.
+
+- **`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
+  plugin puts its copy and paste tools in with it.
+- A **`toolbar`** item can also have an `iconClass`, `bi bi-plus` otherwise,
+  and a `source` for the add events, `tool` or `dragdrop` otherwise.
+
 - **`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
   itself, which is what keeps `drag_handle`, the cancel selector and the move
@@ -208,6 +238,8 @@ $.fn.gridEditor.utilities.order = function(ge) {
             label: function(value) { … },  // an option's text, optional: the value itself otherwise
             choices: function(node, kind) { … },   // what to offer this node, optional: every value otherwise
             panel: false,                          // optional: no field of its own, see "A panel of your own"
+            className: function(breakpoint, value) { … },   // optional, for classes not spelled {prefix}-{bp}-{value}
+            write: function(node, value, view, source) { … }, // optional, a write that is some other operation
             preview: function(value, node, kind) { // what the value looks like, see below
                 return { order: value === null ? 0 : value };
             },
@@ -239,7 +271,10 @@ What the editor does with a family:
   breakpoint view each node that carries a family's class gets
   `preview(value)` — the value that applies there, or `null` — as inline
   `!important` styles. Return what `null` looks like too: a wider breakpoint's
-  class is still live in a wide window and has to be overruled. The all view
+  class is still live in a wide window and has to be overruled. When what
+  `null` looks like depends on the page — `text-align` inherits, the host's
+  css may float an element — `ge.bareStyle(node, family, property)` asks the
+  browser. Parents are previewed before their children. The all view
   previews nothing, since every breakpoint there is live and what Bootstrap
   shows is the truth. The styles come off on `deinit`, leaving the host's own
   `style` as it was, so `getHtml` never sees them.
@@ -275,6 +310,13 @@ set the top padding. A plugin-level `preview(node, kind, breakpoint)` is called
 for every node in a breakpoint view, after the families' own, and returns the
 styles for the node or an empty object.
 
+Two escape hatches, which the column width uses: `className(breakpoint,
+value)` spells the classes of a family that does not follow the pattern
+(`col`, `col-md`, `col-md-auto`), and `write(node, value, view, source)` does a
+write some other way than a utility change - the width field's writes are
+resizes, through the resize events. The editor still checks the value and the
+node before it calls `write`.
+
 Two plugins cannot declare the same family name: the second one is ignored,
 with a warning.
 

package/example/autocols.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+
+    <!-- The editor, and the sections plugin: equal and auto sizes and
+         columns per row are the editor's own, sections are a plugin -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script src="../dist/plugins/grideditor.sections.min.js"></script>
+
+    <script>
+        $(function() {
+            $('#myGrid').gridEditor({
+                content_types: [],
+
+                // Sizes are numbers, 'equal' (col) or 'auto' (col-auto), and a
+                // layout can be a row with columns per row
+                new_row_layouts: [
+                    [12], [6, 6], ['auto', 'equal'], ['equal', 'equal', 'equal'],
+                    { row_cols: { xs: 1, sm: 2, lg: 4 }, columns: 4 },
+                ],
+
+                default_view: 'lg',
+            });
+
+            // A width chosen anywhere - tools, edge, panel - is a resize
+            $('#myGrid').on('grideditor:after-resize', function(e, payload) {
+                $('#last').text('width at ' + payload.breakpoint + ': ' +
+                    (payload.from === null ? 'from the row' : payload.from) + ' → ' +
+                    (payload.to === null ? 'inherit' : payload.to) +
+                    (payload.cleared && payload.cleared.length ? ' (took off ' + payload.cleared.map(function(entry) {
+                        return entry.breakpoint;
+                    }).join(', ') + ')' : ''));
+            });
+
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            });
+        });
+    </script>
+
+    <title>Grid Editor column sizes and sections example</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+
+    <div class="container-fluid px-4">
+
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Column sizes, columns per row, and sections</h1>
+                <p class="form-text">
+                    <strong>Equal and auto.</strong> A column is a number of
+                    twelfths, <em>equal</em> (<code>col</code>: an equal share
+                    of what the row has left) or <em>auto</em>
+                    (<code>col-auto</code>: as wide as its content), at each
+                    breakpoint. Every size is in the <em>Width</em> field of a
+                    column's settings, under Responsive; the width tools and
+                    dragging an edge turn an equal or auto column into a
+                    number, starting from the width it has.
+                </p>
+                <p class="form-text">
+                    <strong>Columns per row.</strong> A row's
+                    <em>Columns per row</em> field shares the line out among
+                    the columns that have no size of their own. The second
+                    section's cards are one per line on phones, two on
+                    tablets, four on desktops.
+                </p>
+                <p class="form-text">
+                    <strong>Sections.</strong> Bootstrap's containers, grouping
+                    rows. Drag rows in and out of them, choose their width in
+                    their settings, and switch views to see each one as wide
+                    as its container would be. <strong>All sizes</strong>
+                    writes one class for every size.
+                </p>
+                <p class="form-text">Last width change: <span id="last">none yet</span></p>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="container">
+                <div class="row">
+                    <div class="col-auto">
+                        <h2 class="h5">Auto</h2>
+                        <p>As wide as this.</p>
+                    </div>
+                    <div class="col">
+                        <h2 class="h5">Equal</h2>
+                        <p>Takes what the auto column leaves.</p>
+                    </div>
+                    <div class="col-3">
+                        <h2 class="h5">Three</h2>
+                        <p>A fixed quarter.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container-lg">
+                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4">
+                    <div class="col"><h2 class="h6">Card one</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card two</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card three</h2><p>Shared out by the row.</p></div>
+                    <div class="col"><h2 class="h6">Card four</h2><p>Shared out by the row.</p></div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-12">
+                    <h2 class="h5">A row outside any section</h2>
+                    <p>Full width of the canvas. Drag it into one of the sections above.</p>
+                </div>
+            </div>
+
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container-fluid -->
+
+</body>
+</html>

package/example/breakpoints.html

@@ -23,9 +23,10 @@
                 new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
                 content_types: [],
 
-                // The default: every size and offset change is written to all
-                // six breakpoints at once. Switch the dropdown to a single
-                // breakpoint to tune that one on its own.
+                // The default: a size or offset change is written once, as the
+                // class with no breakpoint, and replaces what the breakpoints
+                // said. Switch the dropdown to a single breakpoint to tune
+                // that one on its own.
                 default_view: 'all',
 
                 // A host that wants the old three-mode feel can offer three
@@ -55,8 +56,9 @@
                 <p class="form-text">
                     The dropdown on the right of the toolbar picks the layout
                     mode. In <strong>All sizes</strong> the canvas renders as
-                    the browser would, and the width and indent tools write
-                    every breakpoint at once. Pick a single breakpoint and the
+                    the browser would, and the width and indent tools write one
+                    class for every size (<code>col-4</code>), replacing what
+                    the breakpoints had. Pick a single breakpoint and the
                     canvas narrows to that tier's width, that tier's classes
                     become the effective ones whatever your window is doing,
                     and the tools write only that tier.

package/example/clipboard.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <!-- Copy and paste is a plugin of its own. The others are here so there
+         is a bit of everything to copy. -->
+    <script src="../dist/plugins/grideditor.clipboard.min.js"></script>
+    <script src="../dist/plugins/grideditor.sections.min.js"></script>
+    <script src="../dist/plugins/grideditor.tabs.min.js"></script>
+    <script src="../dist/plugins/grideditor.accordion.min.js"></script>
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+
+    <script>
+        $(function() {
+            var settings = {
+                new_row_layouts: [[12], [6, 6], [4, 4, 4]],
+                content_types: ['tinymce'],
+            };
+
+            $('#myGrid').gridEditor(settings);
+            $('#otherGrid').gridEditor(settings);
+
+            // A paste is an add like any other, with source 'paste'
+            $('#myGrid, #otherGrid').on('grideditor:after-add', function(e, payload) {
+                if (payload.source === 'paste') {
+                    $('#log').text('Pasted a ' + payload.kind + ' into ' + e.currentTarget.id);
+                }
+            });
+        });
+    </script>
+
+    <title>Grid Editor example - copy and paste</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+    <div class="container py-3">
+        <h2>Copy and paste</h2>
+        <p class="text-body-secondary">
+            Every row, column, section, container and element has a
+            <i class="bi bi-copy"></i> copy tool in its drawer. Once something
+            is copied, a <i class="bi bi-clipboard-plus"></i> paste tool shows
+            wherever it can go: a row into a column or a section, a column into
+            a row, a container or an element into a column. Rows and sections
+            also get a <em>Paste</em> button in the toolbar, which can be
+            clicked or dragged to where the copy should land.
+        </p>
+        <p class="text-body-secondary">
+            What is copied is kept in the browser, so it can be pasted in the
+            other editor, after a reload, or in this page open in another tab.
+            <span id="log" class="fw-semibold"></span>
+        </p>
+
+        <h5 class="mt-4">One editor</h5>
+        <div id="myGrid">
+            <div class="row" id="intro">
+                <div class="col-lg-6">
+                    <h3>Copy this row</h3>
+                    <p>Then paste it into a column below, or into the other editor. Its id is renamed in the copy, so <a href="#intro">links to it</a> keep working.</p>
+                </div>
+                <div class="col-lg-6">
+                    <blockquote data-ge-element="quote">An element: copy it into another column.</blockquote>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4"><p>A column to paste into.</p></div>
+                <div class="col-lg-4"><p>Another one.</p></div>
+                <div class="col-lg-4"><p>And a third.</p></div>
+            </div>
+        </div>
+
+        <h5 class="mt-4">Another editor</h5>
+        <div id="otherGrid">
+            <div class="row">
+                <div class="col-lg-12"><p>Paste here what you copied above.</p></div>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>

package/example/index.html

@@ -31,7 +31,13 @@
             editor and SortableJS in one file.
         </p>
         <p class="text-body-secondary">
-            New in 4.1: utility plugins, which edit Bootstrap's responsive
+            New in 5.0: equal and auto columns, columns per row, and sections
+            for Bootstrap's containers &mdash; see
+            <a href="autocols.html">Column sizes and sections</a>. The
+            <em>All sizes</em> view now writes one class for every size.
+        </p>
+        <p class="text-body-secondary">
+            Since 4.1: utility plugins, which edit Bootstrap's responsive
             utility classes &mdash; visibility, column order, alignment,
             gutters and spacing &mdash; per breakpoint. See
             <a href="utilities.html">Responsive utilities</a>.
@@ -79,12 +85,20 @@
                 <span class="text-body-secondary">The six breakpoints, the &ldquo;all sizes&rdquo; view, and resizing by dragging</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="autocols.html">
+                <div class="d-flex justify-content-between">
+                    <strong>Column sizes and sections</strong>
+                    <code class="text-body-secondary">autocols.html</code>
+                </div>
+                <span class="text-body-secondary">Equal and auto columns, columns per row, and Bootstrap's containers as sections</span>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="utilities.html">
                 <div class="d-flex justify-content-between">
                     <strong>Responsive utilities</strong>
                     <code class="text-body-secondary">utilities.html</code>
                 </div>
-                <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters and spacing</span>
+                <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters, spacing, text alignment and float</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="locale.html">
@@ -111,6 +125,14 @@
                 <span class="text-body-secondary">The same, with summernote</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="clipboard.html">
+                <div class="d-flex justify-content-between">
+                    <strong>Copy and paste</strong>
+                    <code class="text-body-secondary">clipboard.html</code>
+                </div>
+                <span class="text-body-secondary">Copying a row, a column or a container and pasting it somewhere else, in this editor or another</span>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="wrap_content.html">
                 <div class="d-flex justify-content-between">
                     <strong>Wrapped content</strong>

package/example/utilities.html

@@ -23,6 +23,10 @@
     <script src="../dist/plugins/grideditor.alignment.min.js"></script>
     <script src="../dist/plugins/grideditor.gutters.min.js"></script>
     <script src="../dist/plugins/grideditor.spacing.min.js"></script>
+    <script src="../dist/plugins/grideditor.textalign.min.js"></script>
+    <!-- Float works on elements, so the elements plugin comes first -->
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+    <script src="../dist/plugins/grideditor.float.min.js"></script>
 
     <script>
         $(function() {
@@ -101,6 +105,13 @@
                     every panel, each a side and a value. The centred column
                     below gets more padding from small desktop up.
                 </p>
+                <p class="form-text">
+                    <strong>Text alignment:</strong> a field in every panel.
+                    The centred column's text is centred from small desktop
+                    up. <strong>Float:</strong> a field in an element's panel;
+                    the quote in the last row floats to the end from tablet up,
+                    with the text flowing round it.
+                </p>
                 <p class="form-text">Last change: <span id="last">none yet</span></p>
                 <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
                 <pre id="html" class="form-text"></pre>
@@ -132,12 +143,22 @@
             </div>
 
             <div class="row justify-content-md-center">
-                <div class="col-12 col-md-6 py-2 py-md-4">
+                <div class="col-12 col-md-6 py-2 py-md-4 text-md-center">
                     <h2 class="h5">Centred</h2>
                     <p>Its row has <code>justify-content-md-center</code>, and it has <code>py-2 py-md-4</code>.</p>
                 </div>
             </div>
 
+            <div class="row">
+                <div class="col-12">
+                    <blockquote data-ge-element="quote" data-ge-label="Pull quote" class="float-sm-end ms-sm-3 p-3 border-start border-4">
+                        A floated element, <code>float-sm-end</code>.
+                    </blockquote>
+                    <p>The text of the content area flows round the quote from tablet up, and runs under it on phones, where it does not float. Switch between Phone and Tablet in the dropdown to see it move, or choose another float in the element's panel.</p>
+                    <p>A second paragraph, so there is enough text to flow.</p>
+                </div>
+            </div>
+
         </div> <!-- /#myGrid -->
     </div> <!-- /.container -->