@themarioga/grid-editor 3.2.1 → 4.0.0

package/BUILDING.md

@@ -19,8 +19,17 @@ and the files in `src/js/locales/` and `src/js/plugins/` one by one under
 `dist/locales/` and `dist/plugins/`. Neither of those two directories is part
 of the main bundle: the `src/js/*.js` glob does not descend, so a page loads
 the languages and the container plugins it actually wants. See
-[docs/plugins.md](docs/plugins.md) for what a container plugin is. Locale files are
-deliberately not part of the main bundle: a page loads only the languages it
+[docs/plugins.md](docs/plugins.md) for what a container plugin is.
+
+One more file comes out of it: `dist/jquery.grideditor.bundle.min.js`, the
+minified editor concatenated with the copy of SortableJS in `node_modules`,
+for pages that would rather load one file than two. It carries both MIT
+notices, it is built after the minified editor because it is made of it, and a
+page loads it *or* the editor and SortableJS separately, never both. The
+version is pinned in `package.json`, so refreshing it is an `npm update
+sortablejs` and a rebuild.
+
+Locale files are deliberately not part of the main bundle: a page loads only the languages it
 offers. English is the exception and lives in the bundle, because it is the
 fallback every string lookup ends at. See `docs/locale-keys.md` for the keys,
 and `src/js/locales/grideditor.es.js` for what a locale file looks like.
@@ -44,7 +53,7 @@ suite, pass part of its name:
 
 A suite can also be run on its own with `node test/rte.js`.
 
-The fixture pages in `test/fixtures` load jQuery, jQuery UI and Bootstrap from
+The fixture pages in `test/fixtures` load jQuery, SortableJS and Bootstrap from
 `test/vendor` rather than from a CDN, so most of the suite runs offline. The
 rich text editor suite is the exception: it loads tinyMCE, CKEditor and
 Summernote from their CDNs to test against the real editors, and the runner

package/CHANGELOG.md

@@ -5,6 +5,51 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [4.0.0] - 2026-09-22
+### Added
+- Editing from a touchscreen. Sorting, resizing a column and carrying a toolbar
+  button onto the canvas all work with a finger; a touch rests for
+  `drag.touch_delay` before it moves anything, so the page can still be
+  scrolled. `test/touch.js` holds every gesture to it, and none of them worked
+  in 3.x.
+- `dist/jquery.grideditor.bundle.min.js`: the editor with SortableJS inside it,
+  for pages that would rather load one file than two. A page loads it or the
+  pair, never both.
+- A `drag` setting: `delay`, `touch_delay`, `threshold`, `animation` and
+  `scroll`, named for the gesture rather than for the library underneath.
+- A whole container can be dragged. Its move tool used to be a handle for a
+  list that did not accept containers, so dragging one did nothing.
+
+### Removed
+- jQuery UI is no longer a dependency. A page loads jQuery, SortableJS and the
+  editor, which comes to 81.6 kB gzip against 132.8 kB before: 51 kB less, 39%
+  of the page.
+- `sortable_options` and `resizable_options`. Both handed out the drag
+  library's own options; `drag` and `resize` replace them, and passing either
+  warns once naming the replacement.
+
+### Changed
+- Resizing a column and dragging a toolbar button onto the canvas are the
+  editor's own pointer code, so jQuery UI is no longer used at all. A refused
+  `before-resize` now stops the gesture before it starts instead of refusing
+  every step of it, and the pointer is captured, so a fast drag that leaves the
+  column behind keeps resizing it. `.ui-resizable-*` become `.ge-resize-*` and
+  `.ge-resizing`; a palette button carries `.ge-palette-button`.
+- Sorting is SortableJS instead of jQuery UI: rows, columns, blocks, tabs,
+  accordion items and elements all move through it, with touch support that
+  jQuery UI sortable never had. `.ui-sortable-helper` and
+  `.ui-sortable-placeholder` become `.ge-drag-helper` and
+  `.ge-drag-placeholder`.
+- Every sortable list the editor makes, core's and a plugin's, goes through one
+  internal seam that names the drag toolkit in one place. Groundwork for 4.0,
+  which replaces jQuery UI with SortableJS.
+- A plugin's `onSortable` hook receives that function instead of a jQuery UI
+  options object, and describes a list rather than making one. See
+  `UPGRADING.md`.
+- Sortable groups are scoped to the editor instance, so two editors on one page
+  no longer drag into each other.
+
+
 ## [3.2.1] - 2026-09-22
 ### Changed
 - `example/containers.html` shows a card too: its own row, with two columns

package/README.md

@@ -1,7 +1,7 @@
 Grid Editor
 ===========
 
-Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, indent them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
+Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, indent them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
 
 This is a fork of [Friendly-Pixel/grid-editor](https://github.com/Friendly-Pixel/grid-editor)
 by Simon Epskamp, carrying it on from 2.x. It is published as
@@ -39,7 +39,7 @@ from any web server, or from GitHub Pages, with no build step.
 Installation
 ------------
 
-* __Dependencies:__ Grid Editor depends on jQuery, jQuery UI, Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. 
+* __Dependencies:__ Grid Editor depends on jQuery, [SortableJS](https://sortablejs.github.io/Sortable/), Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. 
     * If you want to use the tinyMCE integration, include tinyMCE 6 as well. The tinyMCE jQuery plugin is no longer needed, and no longer exists as of tinyMCE 6.
     * If you want to use the summernote integration, include summernote as well.
     * If you want to use the CKEditor integration... you get the point.
@@ -52,11 +52,20 @@ npm install @themarioga/grid-editor
 * Or [download the latest version of Grid Editor](https://github.com/themarioga/grid-editor/archive/master.zip) and include it in your page: 
 
 ```html
-<!-- Make sure jQuery, jQuery UI, bootstrap icons, and bootstrap 5 are included. TinyMCE is optional. -->
+<!-- Make sure jQuery, SortableJS, bootstrap icons, and bootstrap 5 are included. TinyMCE is optional. -->
 <link rel="stylesheet" type="text/css" href="grid-editor/dist/grideditor.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
 <script src="grid-editor/dist/jquery.grideditor.min.js"></script>
 ```
 
+Or, for a page that would rather load one file, the editor with SortableJS
+inside it &mdash; one or the other, never both:
+
+```html
+<link rel="stylesheet" type="text/css" href="grid-editor/dist/grideditor.min.css" />
+<script src="grid-editor/dist/jquery.grideditor.bundle.min.js"></script>
+```
+
 Usage
 -----
 ```javascript
@@ -295,7 +304,19 @@ $('#myGrid').gridEditor({
 
 __`confirm_delete`:__ Whether to ask before deleting a row, column, element or container. Default `true`. The question is asked in a Bootstrap modal the editor builds outside your canvas, in the interface language; a page that loaded Bootstrap's css but not its javascript gets the browser's own confirm instead. Set it to `false` if you cancel `before-delete` and ask in your own way.
 
-__`sortable_options`:__ Merged into every jQuery UI sortable, for hosts that need `cancel`, `tolerance` or a custom `connectWith`.
+__`drag`:__ How a drag behaves, wherever the editor drags something. Named for the gesture rather than for the library underneath, so it survives a change of library. Every gesture works from a touchscreen, which is what `touch_delay` is for: a touch drag that started instantly would take the page's scrolling with it, so a finger has to rest for a moment before it moves anything. Setting `delay` makes both gestures wait that long.
+
+```javascript
+$('#myGrid').gridEditor({
+    drag: {
+        delay: 0,           // ms to hold before a drag starts
+        touch_delay: 100,   // the same for touch, where 0 eats the page's scrolling
+        threshold: 3,       // px of movement before a gesture counts as a drag
+        animation: 150,     // ms of reordering animation, 0 for none
+        scroll: true,       // scroll the page when a drag reaches its edge
+    },
+});
+```
 
 ### Breakpoints and sizing
 
@@ -315,13 +336,12 @@ __`resize`:__ Resizing a column by dragging its edge. Defaults:
 $('#myGrid').gridEditor({
     resize: {
         enabled: true,
-        handles: 'e',      // as jQuery UI names them; 'w' for a right to left page
+        handles: 'e',      // 'w' for a right to left page, 'e, w' for both
         balance: 'next',   // the following column absorbs the change; false lets the row wrap
     },
 });
 ```
 
-__`resizable_options`:__ Merged into every jQuery UI resizable.
 
 ### Elements
 

package/UPGRADING.md

@@ -1,3 +1,82 @@
+Upgrading from grid-editor `3.*` to `4.*`
+=========================================
+
+One change, and it is worth the major: jQuery UI is gone. The editor is 51 kB
+lighter on the page and works from a touchscreen, which it never did. Four
+things to do:
+
+* __A plugin's `onSortable` takes a function, not an options object.__ It used
+  to receive the editor's shared jQuery UI options and call `.sortable()`
+  itself; it now receives `sortable(lists, { draggable, group })` and describes
+  the list instead. See [docs/plugins.md](docs/plugins.md). Nothing else in the
+  plugin handle changed.
+
+  ```javascript
+  // 3.x
+  onSortable: function(shared) {
+      ge.canvas.find('.ge-content').sortable($.extend({
+          items: '> .ge-element',
+          connectWith: '.ge-canvas .ge-content',
+      }, shared, ge.settings.sortable_options));
+  }
+
+  // 4.x
+  onSortable: function(sortable) {
+      sortable(ge.canvas.find('.ge-content'), {
+          draggable: '> .ge-element',
+          group: 'element',
+      });
+  }
+  ```
+
+* __`sortable_options` and `resizable_options` are gone.__ They existed to hand
+  you the drag library's own options, and 4.0 stops promising there is one: the
+  group names, the handle, the filter and the callbacks are the editor's, and
+  overwriting them breaks the canvas rather than tuning it. What they were used
+  for is now `drag` — `delay`, `touch_delay`, `threshold`, `animation`,
+  `scroll` — and the `resize` block you already have. Passing either warns once
+  and names the replacement.
+
+* __jQuery UI is not a dependency.__ Drop its `<script>` and add SortableJS;
+  resizing a column and carrying a toolbar button onto the canvas are the
+  editor's own pointer code now. A page that would rather load one file can
+  load `dist/jquery.grideditor.bundle.min.js`, the editor with SortableJS
+  inside it, instead of the two.
+
+  ```html
+  <!-- 3.x -->
+  <script src="jquery-ui.min.js"></script>
+  <script src="dist/jquery.grideditor.min.js"></script>
+
+  <!-- 4.x -->
+  <script src="Sortable.min.js"></script>
+  <script src="dist/jquery.grideditor.min.js"></script>
+  ```
+
+  Classes you may have styled:
+
+  | 3.x | 4.0 |
+  | --- | --- |
+  | `.ui-sortable-helper` | `.ge-drag-helper` |
+  | `.ui-sortable-placeholder` | `.ge-drag-placeholder` |
+  | `.ui-resizable-handle` | `.ge-resize-handle` |
+  | `.ui-resizable-e`, `.ui-resizable-w` | `.ge-resize-e`, `.ge-resize-w` |
+  | `.ui-resizable-resizing` | `.ge-resizing` |
+  | `.ui-draggable` on a toolbar button | `.ge-palette-button` |
+
+* __A whole container can be dragged now.__ Its move tool was a handle for a
+  list that did not accept containers, so in 3.x dragging one did nothing. It
+  moves like a row does, and fires the same `before-move`/`after-move` with the
+  container's kind.
+
+* __Two editors on one page no longer drag into each other.__ Lists were
+  connected by selector — `.ge-canvas .row` matches every canvas on the page —
+  so a column could be dragged from one editor into another, carrying the first
+  editor's furniture and firing its events in the wrong place. Lists are now
+  connected per instance. If you were relying on that, you were relying on a
+  bug.
+
+
 Upgrading from grid-editor `2.*` to `3.*`
 =========================================
 

package/dist/grideditor.css

@@ -76,7 +76,21 @@
   background: #2FA4E7;
 }
 /* The button following the pointer must not be what the pointer is over */
+.ge-drag-helper {
+  opacity: 0.85;
+  pointer-events: none;
+}
+.ge-drag-helper .ge-tools-drawer {
+  pointer-events: none;
+}
+/* A toolbar button that can be carried onto the canvas */
+.ge-palette-button {
+  cursor: move;
+  touch-action: none;
+}
 .ge-toolbar-helper {
+  position: absolute;
+  z-index: 1000;
   pointer-events: none;
   opacity: 0.85;
 }
@@ -114,21 +128,21 @@
   /* A trigger pointing at a popup that is not there any more */
   /* Elements: the level below a column, inside a content area. Dashed
        rather than solid, so a page full of them still reads as content */
-  /* Sorting */
+  /* Sorting. The dragged node stays in the list and shows where it would
+       land - that is the placeholder - while a copy of it follows the
+       pointer. */
   /* A size change should read as a movement rather than a jump, but not
        while the pointer is dragging the edge: there the column follows the
        pointer and a transition only lags behind it */
-  /* Resizing. jQuery UI's own stylesheet is not a dependency, so the handle
-       is styled here: a grip on the column's edge, clear of the drawer, which
-       is what keeps the resize gesture and the sort gesture apart */
+  /* Resizing: a grip on the column's edge, clear of the drawer, which is
+       what keeps the resize gesture and the sort gesture apart */
   /* The units the column would land on, shown in its drawer while dragging */
 }
 .ge-canvas.ge-editing .ge-tools-drawer {
   /* Positioned, so a tool can hang a picker off itself. Deliberately
-           not stacked above anything the rest of the time: jQuery UI's resize
-           handle carries an inline z-index of 90 and runs down the column's
-           edge, and a drawer sitting over it would take the clicks meant for
-           the handle. */
+           not stacked above anything the rest of the time: the resize handle
+           runs down the column's edge, and a drawer sitting over it would take
+           the clicks meant for the handle. */
   position: relative;
   -webkit-touch-callout: none;
   /* While one of its tools is offering a choice, this drawer is the one
@@ -364,42 +378,48 @@
 .ge-canvas.ge-editing .ge-element > .ge-element-drawer > a.ge-element-info {
   cursor: default;
 }
-.ge-canvas.ge-editing .ui-sortable-placeholder {
+.ge-canvas.ge-editing .ge-drag-placeholder {
   background: rgba(255, 255, 0, 0.2);
-  visibility: visible !important;
+  opacity: 1;
   min-height: 50px;
   max-height: 100px;
 }
+.ge-canvas.ge-editing .ge-drag-placeholder > * {
+  visibility: hidden;
+}
 .ge-canvas.ge-editing .column {
   transition: width 120ms ease, margin-left 120ms ease;
 }
-.ge-canvas.ge-editing .column.ui-resizable-resizing {
+.ge-canvas.ge-editing .column.ge-resizing {
   transition: none;
   /* Follow the pointer in pixels: the layout mode's max-width is what
            the column will snap back into once the drag lands */
   max-width: none;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-handle {
+.ge-canvas.ge-editing .column > .ge-resize-handle {
   position: absolute;
   display: block;
   z-index: 10;
+  /* The gesture is the editor's, not the page's: without this a touch
+           drag on the handle scrolls instead of resizing */
+  touch-action: none;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-e,
-.ge-canvas.ge-editing .column > .ui-resizable-w {
+.ge-canvas.ge-editing .column > .ge-resize-e,
+.ge-canvas.ge-editing .column > .ge-resize-w {
   top: 0;
   bottom: 0;
   width: 8px;
   cursor: ew-resize;
   background: rgba(47, 164, 231, 0.3);
 }
-.ge-canvas.ge-editing .column > .ui-resizable-e:hover,
-.ge-canvas.ge-editing .column > .ui-resizable-w:hover {
+.ge-canvas.ge-editing .column > .ge-resize-e:hover,
+.ge-canvas.ge-editing .column > .ge-resize-w:hover {
   background: #2FA4E7;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-e {
+.ge-canvas.ge-editing .column > .ge-resize-e {
   right: -1px;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-w {
+.ge-canvas.ge-editing .column > .ge-resize-w {
   left: -1px;
 }
 .ge-canvas.ge-editing .ge-tools-drawer > .ge-resize-size {
@@ -409,11 +429,11 @@
   font-size: 11px;
   color: #178acc;
 }
-.ge-canvas.ge-editing .column.ui-resizable-resizing > .ge-tools-drawer > .ge-resize-size {
+.ge-canvas.ge-editing .column.ge-resizing > .ge-tools-drawer > .ge-resize-size {
   display: block;
 }
 /* The handle belongs to editing, and never to the output */
-.ge-canvas:not(.ge-editing) .ui-resizable-handle {
+.ge-canvas:not(.ge-editing) .ge-resize-handle {
   display: none;
 }
 /* Layout modes */