@themarioga/grid-editor 3.2.1 → 4.1.0

package/docs/locale-keys.md

@@ -122,6 +122,58 @@ key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
 | `view.xxl` | Widescreen | Layout mode writing `col-xxl-*` and `offset-xxl-*` |
 
 
+utility.*
+---------
+
+The Responsive section of a settings panel, which the utility plugins fill.
+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.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 |
+| `utility.visibility` | Visibility | Label of the visibility plugin's field |
+| `utility.visibility_hidden` | Hidden | Its choice for `d-*-none` |
+| `utility.visibility_shown` | Shown | Its choice for `d-*-block`, or `d-*-flex` on a row |
+| `tool.hide_in_view` | Hide in this view | The visibility plugin's eye, on a node shown in the view being edited |
+| `tool.show_in_view` | Show in this view | The same eye, on a node hidden there |
+| `utility.order` | Order | Label of the order plugin's field |
+| `utility.order_first` | First | Its choice for `order-*-first` |
+| `utility.order_last` | Last | Its choice for `order-*-last` |
+| `tool.order_earlier` | Earlier in this view | The order plugin's left arrow in a column drawer |
+| `tool.order_later` | Later in this view | Its right arrow |
+| `utility.justify_content` | Justify columns | The alignment plugin's `justify-content-*` field, on a row |
+| `utility.align_items` | Align columns | Its `align-items-*` field, on a row |
+| `utility.align_self` | Align self | Its `align-self-*` field, on a column |
+| `utility.gutters` | Gutters | The gutters plugin's `g-*` field, on a row |
+| `utility.gutters_x` | Horizontal gutters | Its `gx-*` field |
+| `utility.gutters_y` | Vertical gutters | Its `gy-*` field |
+| `utility.padding` | Padding | The spacing plugin's padding group |
+| `utility.margin` | Margin | Its margin group |
+| `utility.side_all` | All sides | The side of `p-*` and `m-*` in a group's side choice |
+| `utility.side_x` | Left and right | The side of `px-*` and `mx-*` |
+| `utility.side_y` | Top and bottom | The side of `py-*` and `my-*` |
+| `utility.side_t` | Top | The side of `pt-*` and `mt-*` |
+| `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.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 |
+
+
+badge.*
+-------
+
+Text the utility plugins show on the canvas while editing. Never in the
+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.order` | Order: {value} | Corner of a column ordered by class in the view being edited |
+
+
 error.*
 -------
 
@@ -130,6 +182,8 @@ all the same: the developer reading them is the one who chose the locale.
 
 | Key | English | Where |
 | --- | --- | --- |
+| `error.sortable_missing` | SortableJS not available! … | Logged once when the drag library is not on the page |
+| `warning.setting_removed` | The {setting} setting was removed in 4.0. Use {replacement} instead. | Logged once per removed setting a host still passes |
 | `error.tinymce_missing` | tinyMCE not available! … | `content_types: ['tinymce']` with no tinyMCE loaded |
 | `error.ckeditor_missing` | CKEditor not available! … | `content_types: ['ckeditor']` with no CKEditor loaded |
 | `error.summernote_missing` | Summernote not available! … | `content_types: ['summernote']` with no Summernote loaded |

package/docs/plugins.md

@@ -14,11 +14,13 @@ the one to read first if you are about to write your own.
 <script src="dist/plugins/grideditor.elements.min.js"></script>
 ```
 
-There are two kinds. A **container plugin** builds a type of container — it
+There are three kinds. A **container plugin** builds a type of container — it
 registers under `$.fn.gridEditor.containers`, and the toolbar offers a button
-for it. A **feature plugin** is anything else the editor can do —
+for it. A **utility plugin** declares families of Bootstrap's responsive
+utility classes — `$.fn.gridEditor.utilities` — and the editor edits them per
+breakpoint. A **feature plugin** is anything else the editor can do —
 `$.fn.gridEditor.features`, hooks into the canvas, and may contribute methods.
-Both are factories called once per editor with the same handle.
+All three are factories called once per editor with the same handle.
 
 The `plugins` setting names which of the loaded ones to use:
 
@@ -114,6 +116,13 @@ not change without a major version.
 | `ge.emit(name, payload)` | Fire an event and its callbacks; false means a handler canceled |
 | `ge.payloadFor(kind, node, extra)` | Build a payload the documented way |
 | `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.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 |
 
 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
@@ -133,23 +142,37 @@ $.fn.gridEditor.features.elements = function(ge) {
         onInit: function() { … },        // every init: put the furniture in
         onDeinit: function() { … },      // every deinit: take it out again
         onContentReady: function(area) { … },  // a rich text editor just took over
-        onSortable: function(shared) { … },    // make your own sortables
+        onSortable: function(sortable) { … },  // declare your own sortable lists
     };
 };
 ```
 
-- **`onSortable(shared)`** is handed the options the editor's own sortables
-  use — the handle, the cancel selector, the start and stop handlers — so a
-  plugin's sortables answer to `drag_handle` and fire the move events like
-  everything else.
+- **`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
+  events the same everywhere:
+
+  ```javascript
+  onSortable: function(sortable) {
+      sortable(ge.canvas.find('.ge-content'), {
+          draggable: '> .ge-element',   // which children move
+          group: 'element',             // lists sharing a group connect
+      });
+  }
+  ```
+
+  Leaving `group` out makes a list that sorts only within itself, which is what
+  a tab strip wants. Group names are scoped to the editor instance, so two
+  editors on one page never drag into each other.
 - **`methods`** are added to the instance handle. A method the editor
   documents but a plugin implements — `createElement` — warns and returns null
   when the plugin is not loaded.
 - **`kindOf(node)`** returns the `kind` an event should carry for a node the
   plugin owns, or null.
 
-The core's own sortables and the plugins' are taken down together: jQuery UI
-marks what it made, so a plugin does not have to unmake it.
+The core's own lists and the plugins' are taken down together: every list made
+through `sortable()` is registered, so `deinit` unmakes exactly those and a
+plugin does not have to unmake anything.
 
 
 What the editor does for you
@@ -163,3 +186,99 @@ the plugin.
 Sorting is the one thing a plugin sets up itself, in `mark`, because only the
 plugin knows which of its parts move: the tabs plugin makes its strip sortable
 and puts the panes back in strip order in `afterPaneMove`.
+
+
+Utility plugins
+---------------
+
+A utility plugin edits one of Bootstrap's responsive utility classes — the
+ones spelled `{property}-{breakpoint}-{value}`, like `order-md-2` or
+`d-lg-none` — and hardly has to do anything to do it. It declares **families**,
+and the editor reads, writes, previews and announces them:
+
+```javascript
+$.fn.gridEditor.utilities.order = function(ge) {
+    return {
+        families: [{
+            name: 'order',                 // what events and setUtility call it
+            prefix: 'order',               // order-2, order-md-2, order-xxl-2
+            values: ['first', 0, 1, 2, 3, 4, 5, 'last'],
+            appliesTo: ['column'],         // row | column | element | container | a container type
+            labelKey: 'utility.order',     // the field's label, optional
+            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"
+            preview: function(value, node, kind) { // what the value looks like, see below
+                return { order: value === null ? 0 : value };
+            },
+        }],
+        drawerTools: function(drawer, node, kind) { … },  // optional, tools beside the gear
+        onRefresh: function(scope) { … },                 // optional, see below
+        panel: function(node, kind) { … },                // optional, see "A panel of your own"
+        preview: function(node, kind, breakpoint) { … },  // optional, the same
+        onViewChange: function(view) { … },               // optional
+    };
+};
+```
+
+What the editor does with a family:
+
+- **Reading follows the cascade.** A breakpoint's value is its own class or the
+  nearest smaller breakpoint's. The all view reads the class with no infix.
+- **Writing depends on the view.** A breakpoint view writes its own tier and
+  nothing else. The all view writes the class with no infix and takes the
+  family off every other breakpoint, because choosing one value for every size
+  is choosing it over what the sizes said; the event says what it took off.
+  `null` is inherit: the tier's class comes off.
+- **The panel.** Every node with a gear gets a folded *Responsive* section in
+  its settings panel, with a field per family that applies to it. A field shows
+  the view being edited, says what it inherits and from which breakpoint, and
+  follows the classes field when the user types there.
+- **The preview.** A breakpoint view narrows the canvas, not the window, and
+  Bootstrap's utilities answer to the window with `!important`. So in a
+  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
+  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.
+- **The events.** Every write goes through `before-utility`, which can cancel
+  it, and `after-utility`. See [events.md](events.md).
+
+`drawerTools` runs for every drawer that has a gear — rows, columns, elements,
+containers and panes — so a plugin checks `kind` and adds nothing where its
+tool does not belong. A tool writes with `ge.setUtility(node, family, value,
+{ source: 'tool' })`, and the panel, the classes field and the preview follow.
+
+`onRefresh(scope)` runs whenever the preview is redrawn — on `init`, on a view
+change, after a write, after the user types in a classes field — with the node
+whose utilities changed, or the canvas. It is for what a plugin marks the canvas
+with beyond inline styles: the visibility plugin keeps hidden nodes on the
+canvas and fades them there. Whatever it adds, `onDeinit` takes away.
+
+### A panel of your own
+
+A field per family is the right panel for most plugins and the wrong one for
+some: spacing has fourteen families, and fourteen fields. Such a plugin marks
+its families `panel: false` and returns its own element from
+`panel(node, kind)` — or null where it does not apply — and the editor puts it
+in the Responsive section. Inside it, `ge.utilityField(node, family)` makes the
+same field the editor would, and the editor keeps every such field up to date
+with the view and the classes; swapping one field for another is the plugin's
+business. The spacing plugin's panel is a side and one field, and choosing a
+side swaps the field for that side's family.
+
+The same plugins tend to need the node as a whole for the preview, because
+their families settle one property between them — `p-3` and `pt-md-1` both
+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 plugins cannot declare the same family name: the second one is ignored,
+with a warning.
+
+Plugin options live in the `utilities` setting, under the plugin's name:
+`utilities: { spacing: { values: ['0', '2', '4'] } }`. The editor passes the
+setting through as it is; each plugin fills in its own defaults.
+

package/example/autosave.html

@@ -10,16 +10,21 @@
 
     <!-- JS dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
 </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>Grid Editor example - auto save and import/export</h2>
     <div class="mb-3">

package/example/basic.html

@@ -9,14 +9,15 @@
     
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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="../dist/jquery.grideditor.min.js"></script>
+    <!-- The editor with SortableJS inside it. Every other example loads the
+         two files separately; a page does one or the other, never both. -->
+    <script src="../dist/jquery.grideditor.bundle.min.js"></script>
     
     <script>
         $(function() {
@@ -36,6 +37,11 @@
     <title>Grid Editor 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">
         <div id="myGrid">

package/example/breakpoints.html

@@ -9,12 +9,12 @@
 
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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" />
     <!-- 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>
 
     <script>
@@ -41,6 +41,11 @@
     <title>Grid Editor breakpoints 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">
 

package/example/ckeditor.html

@@ -9,7 +9,6 @@
     
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
     
     <!-- Ckeditor js -->
@@ -18,6 +17,7 @@
     <!-- 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>
     
     <script>
@@ -47,6 +47,11 @@
     <title>Grid Editor 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">
         <div id="myGrid">

package/example/containers.html

@@ -9,13 +9,13 @@
 
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
     <!-- One file per container type: load the ones this page offers -->
     <script src="../dist/plugins/grideditor.tabs.min.js"></script>
@@ -70,6 +70,10 @@
     <title>Grid Editor containers 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">
 

package/example/elements.html

@@ -9,13 +9,13 @@
 
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
 
@@ -89,6 +89,11 @@
     <title>Grid Editor elements 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">
 

package/example/index.html

@@ -21,6 +21,21 @@
             <code>npm run build</code> after changing anything under
             <code>src/</code>.
         </p>
+        <p class="text-body-secondary">
+            Since 4.0 every gesture works with a finger as well as with a
+            mouse &mdash; sorting, resizing a column, dragging a button off the
+            toolbar &mdash; so these are worth opening on a phone. The editor
+            needs jQuery, <a href="https://sortablejs.github.io/Sortable/">SortableJS</a>
+            and Bootstrap 5; the first demo loads
+            <code>jquery.grideditor.bundle.min.js</code> instead, which is the
+            editor and SortableJS in one file.
+        </p>
+        <p class="text-body-secondary">
+            New in 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>.
+        </p>
 
         <div class="list-group my-4">
 
@@ -29,7 +44,7 @@
                     <strong>The editor</strong>
                     <code class="text-body-secondary">basic.html</code>
                 </div>
-                <span class="text-body-secondary">tinyMCE in the content areas, and the drawer as the drag handle</span>
+                <span class="text-body-secondary">tinyMCE in the content areas, the drawer as the drag handle, and the bundled build</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="plugins.html">
@@ -64,6 +79,14 @@
                 <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="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>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="locale.html">
                 <div class="d-flex justify-content-between">
                     <strong>Languages</strong>

package/example/locale.html

@@ -9,13 +9,13 @@
 
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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" />
     <!-- Grid editor javascript, then the locales the page offers. English is
          built into the plugin; every other language is a file of its own. -->
+    <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/locales/grideditor.es.js"></script>
 
@@ -41,6 +41,11 @@
     <title>Grid Editor locale 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">
 

package/example/plugins.html

@@ -9,7 +9,6 @@
 
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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 -->
@@ -17,6 +16,7 @@
 
     <!-- The editor, and the plugins this page offers. Loading a file is what
          makes its feature available; nothing here is in the main bundle. -->
+    <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.tabs.min.js"></script>
     <script src="../dist/plugins/grideditor.accordion.min.js"></script>
@@ -111,6 +111,11 @@
     <title>Grid Editor plugins 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">
 

package/example/summernote.html

@@ -9,7 +9,6 @@
     
     <!-- Javascript dependencies -->
     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
-    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
     
     <!-- Summernote CSS -->
@@ -20,6 +19,7 @@
     <!-- 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>
     
     <script>
@@ -49,6 +49,11 @@
     <title>Grid Editor 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">
         <div id="myGrid">