@themarioga/grid-editor 5.3.0 → 6.0.0-beta.1

package/BUILDING.md

@@ -22,10 +22,8 @@ the languages and the container plugins it actually wants. See
 [docs/plugins.md](docs/plugins.md) for what a container plugin is.
 
 The text editor plugins - tinyMCE, CKEditor and summernote - are built to
-`dist/plugins/` like the others, and up to 6.0 also go into the main bundle,
-followed by `src/js/compat/bundled-texts.js`, which marks them as the bundle's
-copies so the editor can warn a page that relies on them. 6.0 drops both from
-`jsFiles` in the Gruntfile.
+`dist/plugins/` like the others, and like them are not part of the main
+bundle. Up to 5.x the bundle carried a copy of each.
 
 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`,

package/CHANGELOG.md

@@ -5,6 +5,44 @@ 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).
 
 
+## [6.0.0-beta.1] - 2026-09-23
+### Changed
+- **Elements are blocks of the column.** An element sits in a column beside
+  its texts, rows and containers, never inside a content area's text, and
+  drags within a column and between columns; the canvas and sections turn one
+  away. Markup 5.x saved, with elements in the text, is converted as the editor
+  starts: a content area is cut at each element among its own children, the
+  text after going into a new content area of the same type. Rows and
+  containers inside a content area come out the same way. `getPlainHtml`
+  publishes what 5.x published, except that a content area's own id and classes
+  stay on its first part. See [UPGRADING.md](UPGRADING.md).
+- **The text editors are not in the main bundle**, nor in the bundle with
+  SortableJS: load `dist/plugins/grideditor.<editor>.min.js`.
+- `elements.auto: true` makes every loose node of a column an element.
+- `createElement` into a content area puts the element beside it, and warns.
+- A text dragged between columns is `kind: 'text'`, as when it is added or
+  deleted; it was `kind: 'content'`.
+- Elements carry no `contenteditable` and their drawers no `data-mce-bogus`.
+- While a text is being edited its drawer stays faint, so as not to hide the
+  end of the line being typed, until the pointer is on the drawer itself; with
+  its settings open it stays whole.
+
+### Added
+- A feature plugin's `cuts`: the nodes that are never part of a text, which
+  cut the content area they sit in.
+
+### Removed
+- The copies of the text editors in the main bundle, and the warning about
+  using them.
+
+## [5.3.1] - 2026-09-23
+### Changed
+- A text's drawer sits over the text's top right corner instead of in a bar
+  above it, and takes no room: in 5.3.0 every text made its column about
+  35px taller. It shows while the pointer is over the text, while the text is
+  being edited or holds the focus, while its settings are open (across the
+  text then, so the panel has room) and during a drag.
+
 ## [5.3.0] - 2026-09-23
 ### Added
 - **Text as a block.** Each content area in a column is a text block while

package/README.md

@@ -47,7 +47,7 @@ Installation
     * If you want to use the tinyMCE integration, include tinyMCE 6 as well, and `dist/plugins/grideditor.tinymce.min.js` after the editor. 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 and `dist/plugins/grideditor.summernote.min.js`.
     * If you want to use the CKEditor integration... you get the point: CKEditor and `dist/plugins/grideditor.ckeditor.min.js`.
-    * Up to 5.x the main bundle still carries a copy of the three, so a page that does not load the plugin keeps working, and the console says, once, to load it. 6.0 leaves the copies out.
+    * Up to 5.x the main bundle carried a copy of the three; since 6.0 the plugin of the editor you use has to be loaded, as above. See [UPGRADING.md](UPGRADING.md).
 * From npm:
 
 ```
@@ -411,7 +411,11 @@ it, and a drawer of its own - move, which editor, settings, the host's
 clipboard copies it, and spacing, text alignment and visibility apply to it.
 The markup does not change: the drawer sits beside the content area in a
 wrapper that only exists while editing, because inside it the text editor would
-take it for text.
+take it for text. It sits over the text's top right corner and takes no room,
+showing while the pointer is over the text, while the text is being edited or
+holds the focus, and while its settings are open. While the text is being
+edited it stays faint, not to hide the end of the line being typed, until the
+pointer is on the drawer itself.
 
 A column's drawer has an *Add text* tool, and the toolbar a *Text* button, one
 per editor when `content_types` offers several (*Text (tinyMCE)*, *Text
@@ -431,9 +435,9 @@ __`text_classes`:__ Preset class toggles on a text's settings panel, as `row_cla
 
 ### Elements
 
-An element is a node inside a content area that the editor treats as one
-movable, deletable thing instead of as rich text. It is a plugin, like the
-containers:
+An element is a node the editor treats as one movable, deletable block instead
+of as rich text: a block of the column, beside its texts, rows and containers,
+never part of a text. It is a plugin, like the containers:
 
 ```html
 <script src="grid-editor/dist/plugins/grideditor.elements.min.js"></script>
@@ -442,11 +446,20 @@ containers:
 You mark the elements themselves:
 
 ```html
-<div class="ge-content">
+<div class="col-md-6">
+  <div class="ge-content"><p>Some text</p></div>
   <blockquote data-ge-element="quote" data-ge-label="Pull quote">…your markup…</blockquote>
 </div>
 ```
 
+Up to 5.x an element lived inside a content area, among its text. Markup saved
+that way still loads: each element comes out of the text it sits in, into the
+column, and the text is cut there - before it, and after it in a new content
+area of the same type. Only a content area's own children count, as in 5.x;
+a marked node inside a paragraph is text. What `getPlainHtml` publishes is the
+same as before. `createElement` with `appendTo` a content area puts the element
+beside it instead, with a warning.
+
 __`elements`:__ Defaults:
 
 ```javascript
@@ -454,7 +467,7 @@ $('#myGrid').gridEditor({
     elements: {
         enabled: 'auto',                 // on when the page has any; true or false to decide yourself
         selector: '[data-ge-element]',   // what counts as an element
-        auto: false,                     // true treats every child of a content area as one
+        auto: false,                     // true treats every loose node of a column as one
     },
 });
 ```
@@ -560,7 +573,7 @@ nowhere else:
 | a section | the canvas, from the toolbar's paste button |
 | a container (tabs, accordion, popup, card) | a column |
 | a text | a column |
-| an element | a column's content area |
+| an element | a column |
 
 The toolbar's paste button is the clipboard icon on the right, beside the
 source and preview buttons, and shows only while a row or a section is copied.

package/UPGRADING.md

@@ -1,25 +1,70 @@
-Getting ready for grid-editor `6.*`, from `5.2`
-===============================================
+Upgrading from grid-editor `5.*` to `6.*`
+=========================================
 
-Nothing here breaks in 5.x. It is what 6.0 will need, and 5.2 already
-accepts, so a page can make the change at its own pace.
+Two changes make it a major: **elements are blocks of the column**, no longer
+part of a text, and **the text editors are not in the main bundle**. Markup
+5.x saved loads as it is, and `getPlainHtml` publishes the same from it.
 
-* __Load your text editor as a plugin.__ tinyMCE, CKEditor and summernote
-  are plugins in `dist/plugins/`, loaded after the editor:
+* __Load your text editor as a plugin.__ tinyMCE, CKEditor and summernote are
+  plugins in `dist/plugins/`, loaded after the editor:
 
   ```html
   <script src="grid-editor/dist/jquery.grideditor.min.js"></script>
   <script src="grid-editor/dist/plugins/grideditor.tinymce.min.js"></script>
   ```
 
-  Up to 5.x the main bundle, and the bundle with SortableJS, still carry a
-  copy of each, so a page that does not load the plugin keeps working. When a
-  content area is edited with one of those copies the console says so, once.
-  6.0 leaves the copies out.
+  Up to 5.x the main bundle, and the bundle with SortableJS, carried a copy of
+  each, and since 5.2 editing with one said so in the console. Without the
+  plugin a text is still a block, to move and delete, and its drawer says it
+  cannot be edited.
+
+* __Elements are blocks of the column.__ Up to 5.x an element lived inside a
+  content area, among the text a rich text editor edited. Now it sits in the
+  column beside the texts, and markup saved the 5.x way is converted as the
+  editor starts: each content area is cut at each element among its own
+  children - the text before it stays, the element goes into the column, the
+  text after goes into a new content area of the same type - and the next
+  `getHtml` saves the 6.0 shape.
+
+  ```html
+  <!-- 5.x -->
+  <div class="ge-content"><p>Before</p><blockquote data-ge-element="quote">…</blockquote><p>After</p></div>
+
+  <!-- 6.0 -->
+  <div class="ge-content"><p>Before</p></div>
+  <blockquote data-ge-element="quote">…</blockquote>
+  <div class="ge-content"><p>After</p></div>
+  ```
+
+  What `getPlainHtml` publishes is the same, `div.ge-content` being taken off,
+  with one exception: a content area with an id or classes of the host's
+  keeps them on its first part only. What to do: nothing, unless you style a
+  `div.ge-content` of your own as a whole, or read the saved markup expecting
+  elements inside a content area. A marked node inside a paragraph or a list
+  was text in 5.x and is text still.
+
+  Rows and containers found inside a content area come out of it the same way.
+
+* __`createElement` into a content area__ - `appendTo` or `prependTo` one - puts
+  the element beside it instead, after or before, and warns once. Place it in a
+  column.
+
+* __`elements.auto: true`__ means every loose node of a column is an element,
+  where it meant every child of a content area. A 5.x content area's children
+  still come out as elements, so a page that relied on it looks the same.
+
+* __A text dragged between columns is `kind: 'text'`__ in `before-move` and
+  `after-move`, as it is in its add and delete events since 5.3. It was
+  `kind: 'content'`.
+
+* __No more `contenteditable="false"` or `data-mce-bogus` on elements__, which
+  only existed to live inside a text editor. And a plugin that wrote an
+  element's attributes through tinyMCE's `undoManager.transact` can write them
+  with a plain `attr()`.
 
 * __An integration of your own under `$.fn.gridEditor.RTEs`__ still works,
-  wrapped by the editor, with a warning that it is deprecated. Register it
-  under `$.fn.gridEditor.texts` instead; [docs/plugins.md](docs/plugins.md#text-editor-plugins)
+  wrapped, with a warning that it is deprecated. Register it under
+  `$.fn.gridEditor.texts` instead; [docs/plugins.md](docs/plugins.md#text-editor-plugins)
   has the contract. `RTEs` goes in 7.0.
 
 

package/dist/grideditor.css

@@ -483,9 +483,32 @@
   position: relative;
   outline: 1px dashed rgba(90, 111, 138, 0.6);
   margin-bottom: 5px;
+  /* Over the text rather than above it: nearly every column has a
+           text, and a bar for each would make every column taller. It shows
+           while it is wanted - the pointer over the text, the text being
+           edited or holding the focus, its settings open, a drag under way -
+           and takes no room either way. */
+  /* While the text is being edited it would sit over the end of its
+           first line, so it stands back - faint, still there to click - until
+           the pointer is on the drawer itself */
+  /* Except when something in it is in use: its settings, a choice it
+           offers, a drag */
+  /* With its settings open it spans the text, so the panel has room */
 }
 .ge-canvas.ge-editing .ge-text-block > .ge-text-drawer {
-  background: rgba(90, 111, 138, 0.12);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+  width: auto;
+  margin: 0;
+  border-radius: 0 0 0 4px;
+  background: #e1e5ea;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  /* Hidden only once it has faded, shown at once */
+  transition: opacity 120ms ease, visibility 0s linear 120ms;
 }
 .ge-canvas.ge-editing .ge-text-block > .ge-text-drawer > a {
   color: #50637b;
@@ -497,6 +520,28 @@
 .ge-canvas.ge-editing .ge-text-block > .ge-text-drawer > a.ge-text-missing {
   color: #b02a37;
 }
+.ge-canvas.ge-editing .ge-text-block:hover > .ge-text-drawer,
+.ge-canvas.ge-editing .ge-text-block:focus-within > .ge-text-drawer,
+.ge-canvas.ge-editing .ge-text-block.ge-drag-chosen > .ge-text-drawer,
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-rte-active) > .ge-text-drawer,
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer.ge-picker-open) > .ge-text-drawer,
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer > .ge-details[style*="block"]) > .ge-text-drawer {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 0s;
+}
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-rte-active) > .ge-text-drawer:not(:hover) {
+  opacity: 0.35;
+}
+.ge-canvas.ge-editing .ge-text-block.ge-drag-chosen > .ge-text-drawer:not(:hover),
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer.ge-picker-open) > .ge-text-drawer:not(:hover),
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer > .ge-details[style*="block"]) > .ge-text-drawer:not(:hover) {
+  opacity: 1;
+}
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer > .ge-details[style*="block"]) > .ge-text-drawer {
+  left: 0;
+  border-radius: 0;
+}
 .ge-canvas.ge-editing .column:not(:has( > :not(.ge-tools-drawer, .ge-resize-handle)))::after {
   content: '';
   display: block;