@themarioga/grid-editor 7.1.0 → 7.3.0

package/CHANGELOG.md

@@ -5,6 +5,69 @@ 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).
 
 
+## [7.3.0] - 2026-09-29
+
+### Added
+- The style plugin, `grideditor.style.js`. Every row, column, container,
+  pane, element and section gets a *Style* accordion in its settings panel:
+  size, spacing, border, background, text, typography, display, position
+  and free css. It is written to the node's own `style` through the
+  browser, so a value the browser refuses is marked and not written, and
+  what the host wrote and nobody edits is kept. Each section offers
+  Bootstrap 5.3's classes for what it styles as chips, which put a class in
+  the classes field or take it off. A field whose property a Bootstrap
+  utility on the node also sets says that the class takes priority. Where
+  `settings_panel` is `popover` or `inline` the accordion opens in a
+  dialog, from a *Style* button. The `style` setting chooses the sections,
+  and in each the properties and whether it has chips. See the README and
+  [example/style.html](example/style.html).
+- The style plugin carries spacing, text alignment, visibility and float:
+  their per breakpoint fields are in its Spacing, Text, Display and
+  Position sections rather than in *Responsive*, and do what they did.
+  `style.spacing` and `style.visibility` take what `utilities.spacing` and
+  `utilities.visibility` took.
+- For plugins: `panelSection(node, kind)`, a section of a plugin's own in a
+  node's settings panel, between its general fields and *Responsive*;
+  `ge.openDialog`/`ge.closeDialog`, a modal of the editor's own over the
+  settings; `ge.hostStyle`/`ge.setHostStyle`, the host's own style under a
+  breakpoint preview; and `replaces` on a factory, for a plugin that takes
+  the place of others. A field made with `ge.utilityField` follows the view
+  and the classes field wherever the plugin puts it. See
+  [docs/plugins.md](docs/plugins.md).
+
+### Deprecated
+- `grideditor.spacing.js`, `grideditor.textalign.js`,
+  `grideditor.visibility.js` and `grideditor.float.js`, which go in 8.0.
+  Loaded on their own they do what they did, and say once per editor that
+  they are deprecated; loaded beside the style plugin they stand down, and
+  their names in the `plugins` setting ask for it. `utilities.spacing` and
+  `utilities.visibility` are still read, when `style.spacing` and
+  `style.visibility` are not there, and go in 8.0 too. See
+  [UPGRADING.md](UPGRADING.md).
+
+
+## [7.2.0] - 2026-09-29
+
+### Changed
+- **BREAKING:** The CKEditor integration is CKEditor 5, and the example and
+  the tests use CKEditor 48.5.2, the latest release and one with no known
+  advisories. CKEditor 4.22.1 has five (GHSA-fq6h-4g8v-qqvm,
+  GHSA-6v96-m24v-f58j, GHSA-7r32-vfj5-c2jv, GHSA-wh5w-82f3-wrxh,
+  GHSA-mw2c-vx6j-mg76), and every CKEditor 4 with them fixed is commercial.
+  CKEditor 5 is GPL-2.0-or-later, and does not start without a `licenseKey`
+  in `ckeditor.config`: `'GPL'`, or a commercial key. `ckeditor.config` is
+  CKEditor 5's; the plugin gives it plugins, a toolbar and h1 to h6 headings
+  when the config has none, and still calls `on.instanceReady`. The content
+  type is still `ckeditor`, so saved markup loads as it is, and the `ck-*`
+  classes CKEditor 5 puts on a content area stay out of it. See
+  [UPGRADING.md](UPGRADING.md).
+
+### Added
+- `error.ckeditor_start`, logged when CKEditor 5 cannot start, and
+  `warning.ckeditor_plugin`, for a plugin name the config gives that CKEditor
+  does not have.
+
+
 ## [7.1.0] - 2026-09-29
 
 ### Changed

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/), in plain DOM: no jQuery needed. You can create, drag, resize and delete rows and columns — sized in units, equal (`col`) or to their content (`col-auto`), or shared out by their row (`row-cols-*`) — indent them, group them in sections (`.container`), copy and paste 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. Bootstrap's responsive utilities — visibility, order, alignment, gutters, spacing, text alignment and float — are edited per breakpoint too. 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/), in plain DOM: no jQuery needed. You can create, drag, resize and delete rows and columns — sized in units, equal (`col`) or to their content (`col-auto`), or shared out by their row (`row-cols-*`) — indent them, group them in sections (`.container`), copy and paste 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. Bootstrap's responsive utilities — visibility, order, alignment, gutters, spacing, text alignment and float — are edited per breakpoint too, and any row, column, container or element can be given inline css, with Bootstrap's classes for it offered as chips. 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
@@ -48,7 +48,7 @@ Installation
 * __Dependencies:__ Grid Editor depends on [SortableJS](https://sortablejs.github.io/Sortable/), Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. It does not need jQuery since 7.0.
     * If you want to use the tinyMCE integration, include tinyMCE 7 (7.9.3 or later) as well, and `dist/plugins/grideditor.tinymce.min.js` after the editor.
     * If you want to use the summernote integration, include summernote and `dist/plugins/grideditor.summernote.min.js`. Summernote needs jQuery itself, so that page loads jQuery too; nothing else does.
-    * If you want to use the CKEditor integration... you get the point: CKEditor and `dist/plugins/grideditor.ckeditor.min.js`.
+    * If you want to use the CKEditor integration... you get the point: CKEditor 5's browser build (`ckeditor5.umd.js` and `ckeditor5.css`) and `dist/plugins/grideditor.ckeditor.min.js`. CKEditor 4 is no longer supported.
     * 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:
 
@@ -560,33 +560,98 @@ __`element_tools`:__ Extra tools on every element drawer, same shape as `row_too
 See [example/elements.html](example/elements.html), which also shows the
 pattern for an element with no visual output of its own.
 
+### Style
+
+Inline css for rows, columns, containers, panes, elements and sections, and
+Bootstrap's classes for it. A plugin:
+
+```html
+<script src="grid-editor/dist/plugins/grideditor.style.min.js"></script>   <!-- after grideditor.elements -->
+```
+
+Each of those nodes gets a *Style* accordion in its settings panel, between
+its id and classes and the *Responsive* section. One section is open at a
+time, and the one you opened last is open on the next node too.
+
+| Section | Inline fields | Per breakpoint |
+| --- | --- | --- |
+| Size | `width`, `height`, `min-*` and `max-*` (a column: `min-*` and `max-*` only, its width is the grid's) | |
+| Spacing | `margin-*` and `padding-*`, by side | padding and margin, `{p,m}{,x,y,t,b,s,e}-{bp}-{0–5}` |
+| Border | width, style, color, radius, and a shadow builder | |
+| Background | color, image, size, position, repeat | |
+| Text | color, size, alignment, and a text shadow builder | `text-{bp}-start`, `-center`, `-end` |
+| Typography | family, weight, style, line height, letter spacing, transform, decoration | |
+| Display | display, opacity, overflow, visibility | visibility, `d-{bp}-none` / `-block` / `-flex`, with the eye in the drawer |
+| Position | position, `top`, `right`, `bottom`, `left` (not on a column), `z-index` | float, `float-{bp}-*`, on an element |
+| Custom css | whatever no field stands for, as text | |
+
+What you type goes to the node's own `style`, through the browser: a value it
+does not take is marked and not written, and whatever the host wrote that you
+do not edit is kept, `!important` included. The style attribute is the same at
+every size, and in a breakpoint view the accordion says so; the per breakpoint
+fields are Bootstrap's responsive classes, and edit the view you are in.
+A text gets only Text and Display, with their per breakpoint fields: its
+editor owns what is inside it.
+
+Every section but Spacing and Custom css also offers Bootstrap's classes for
+what it styles - `rounded-3`, `shadow-sm`, `bg-primary`, `fs-4`, `fw-bold`,
+`opacity-50`, `position-relative`… - as chips. A chip puts its class in the
+classes field, and pressing it again takes it off; chips that are
+alternatives, like `rounded-2` and `rounded-pill`, take each other off.
+Bootstrap's utilities are `!important`, so a field whose property a class on
+the node also sets says which class takes priority.
+
+With `settings_panel: 'popover'` or `'inline'` the panel has a *Style* button
+instead, which opens the accordion in a dialog.
+
+__`style`:__ Every section, unless you say otherwise.
+
+```javascript
+new GridEditor('#myGrid', {
+    style: {
+        sections: {
+            position: false,                                                  // no Position section
+            border: { properties: ['border-width', 'border-color'], catalog: false },  // two fields, no chips
+        },
+        spacing: { values: ['0', '2', '4'], scale: [/* if you changed $spacers */] },
+        visibility: { drawer: false },   // no eye in the drawers, the field only
+    },
+});
+```
+
+The sections are `size`, `spacing`, `border`, `background`, `text`,
+`typography`, `display`, `position` and `custom`. `properties` chooses and
+orders a section's inline fields; the per breakpoint ones stay while the
+section does. What a section you left out or narrowed would have shown is in
+Custom css.
+
+Sanitizing what `getHtml` returns is the page's business, style attributes
+included.
+
+See [example/style.html](example/style.html).
+
 ### Responsive utilities
 
-Bootstrap's responsive utility classes, edited per breakpoint. Each family is
-a plugin in a file of its own:
+Bootstrap's responsive utility classes, edited per breakpoint. The grid's are
+plugins of their own; the ones that style a node are the style plugin's, above.
 
 ```html
-<script src="grid-editor/dist/plugins/grideditor.visibility.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.order.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.alignment.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.gutters.min.js"></script>
-<script src="grid-editor/dist/plugins/grideditor.spacing.min.js"></script>
-<script src="grid-editor/dist/plugins/grideditor.textalign.min.js"></script>
-<script src="grid-editor/dist/plugins/grideditor.float.min.js"></script>   <!-- after grideditor.elements -->
+<script src="grid-editor/dist/plugins/grideditor.style.min.js"></script>
 ```
 
 | Plugin | Classes | On |
 | --- | --- | --- |
-| `visibility` | `d-{bp}-none`, `d-{bp}-block`, `d-{bp}-flex` | rows, columns, elements, containers |
 | `order` | `order-{bp}-{first,0–5,last}` | columns |
 | `alignment` | `justify-content-{bp}-*`, `align-items-{bp}-*`; `align-self-{bp}-*` | rows; columns |
 | `gutters` | `g-{bp}-{0–5}`, `gx-{bp}-*`, `gy-{bp}-*` | rows |
-| `spacing` | `{p,m}{,x,y,t,b,s,e}-{bp}-{0–5}`, and `auto` for margin | rows, columns, elements, containers |
-| `textalign` | `text-{bp}-start`, `-center`, `-end` | rows, columns, elements, containers |
-| `float` | `float-{bp}-start`, `-end`, `-none` | elements |
+| `style` | visibility, spacing, text alignment and float; see [Style](#style) | rows, columns, elements, containers, texts |
 
 A plugin puts a field in the *Responsive* section of each drawer's settings
-panel, and some add a tool to the drawer. In a breakpoint view a change is
+panel - or, for the style plugin, in its section of the *Style* accordion -
+and some add a tool to the drawer. In a breakpoint view a change is
 written for that breakpoint alone, and the field says what it inherits and from
 where. In the all view it is written once, as the class with no breakpoint, and
 replaces what the breakpoints said. While you edit, the canvas shows what the
@@ -602,14 +667,18 @@ __`utilities`:__ Options for each plugin, under its name.
 ```javascript
 new GridEditor('#myGrid', {
     utilities: {
-        visibility: { drawer: false },   // no eye in the drawers, the field only
         order: { drawer: false },        // no arrows in the column drawers
         gutters: { scale: ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'] },  // if you changed $spacers
-        spacing: { values: ['0', '2', '4'], scale: [/* the same */] },          // offer fewer steps
     },
 });
 ```
 
+Up to 7.2 visibility, spacing, text alignment and float were plugins of
+their own, `grideditor.visibility.js`, `grideditor.spacing.js`,
+`grideditor.textalign.js` and `grideditor.float.js`, with their options in
+`utilities.visibility` and `utilities.spacing`. In 7.3 those files still work
+on their own, deprecated, and go in 8.0; see [UPGRADING.md](UPGRADING.md).
+
 See [example/utilities.html](example/utilities.html), and
 [docs/plugins.md](docs/plugins.md#utility-plugins) for writing one.
 
@@ -825,7 +894,7 @@ same way, `codemirror.config` included, and a textarea without it.
 Grid editor comes with support for the following rich text editors (RTEs), each a plugin of its own to load after the editor:
 * [TinyMCE](http://www.tinymce.com/) 7 - `dist/plugins/grideditor.tinymce.min.js` - [(example)](example/basic.html)
 * [summernote](http://summernote.org/) 0.9 - `dist/plugins/grideditor.summernote.min.js` - [(example)](example/summernote.html)
-* [CKEditor](http://ckeditor.com/) 4 - `dist/plugins/grideditor.ckeditor.min.js` - [(example)](example/ckeditor.html)
+* [CKEditor](http://ckeditor.com/) 5 - `dist/plugins/grideditor.ckeditor.min.js` - [(example)](example/ckeditor.html)
 
 A text editor is chosen by `content_types`, not by the `plugins` setting: a page
 that names its containers in `plugins` still has its editor. Summernote 0.9.1
@@ -842,18 +911,47 @@ new GridEditor('#myGrid', {
 });
 ```
 
-__`ckeditor.config`:__ Specify ckeditor config, when using the `ckeditor` `content_types`.
-See the [CKEditor documentation](http://docs.ckeditor.com/). 
+__`ckeditor.config`:__ Specify CKEditor 5 config, when using the `ckeditor` `content_types`:
+anything `InlineEditor.create` takes. See the [CKEditor documentation](https://ckeditor.com/docs/ckeditor5/latest/).
 Also check out the [ckeditor example](example/ckeditor.html).
 
+Load CKEditor 5's browser build, which puts it on the page as `window.CKEDITOR`:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.css">
+<script src="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.umd.js"></script>
+```
+
+CKEditor 5 does not start without a `licenseKey`: pass `'GPL'` to accept its
+GPL-2.0-or-later licence, or your own key if you have a commercial licence.
+Grid editor does not pass one for you, since the licence is yours to choose,
+and logs `CKEditor could not start: license-key-missing` when there is none.
+CKEditor's cloud CDN is for commercial keys: with `'GPL'`, load it from npm,
+as above, or host it yourself.
+
+CKEditor 5 has no plugins of its own, so grid editor gives it a set - the basic
+styles, headings h1 to h6, links, lists, block quotes, tables and horizontal
+lines - and a toolbar for them. `plugins` and `toolbar` in your config replace
+those; a plugin can be given by its name on `window.CKEDITOR`. Markup that no
+loaded plugin knows is dropped as the editor opens, a class included: add
+`'GeneralHtmlSupport'` and its `htmlSupport` option to keep it.
+
 ```javascript
 new GridEditor('#myGrid', {
     ckeditor: {
-        config: { language: 'fr' }
+        config: {
+            licenseKey: 'GPL',
+            plugins: ['Essentials', 'Paragraph', 'Heading', 'Bold', 'Italic', 'Link', 'GeneralHtmlSupport'],
+            toolbar: ['heading', 'bold', 'italic', 'link'],
+            htmlSupport: { allow: [{ name: /^(p|h[1-6]|a|strong|i)$/, classes: true }] },
+        }
     }
 });
 ```
 
+`config.on.instanceReady`, CKEditor 4's, is still called once the editor is
+ready, with the editor as `this` and as `evt.editor`.
+
 __`summernote.config`:__ Specify summernote config, when using the `summernote` `content_types`.
 See the [summernote documentation](http://summernote.org/deep-dive/). 
 Also check out the [summernote example](example/summernote.html).

package/UPGRADING.md

@@ -1,3 +1,75 @@
+Upgrading from grid-editor `7.2` to `7.3`
+=========================================
+
+Nothing breaks. The spacing, textalign, visibility and float plugins are now
+part of the **style plugin**, and deprecated on their own: they go in 8.0.
+A page that loads them keeps working as it did, with a warning in the
+console.
+
+* __Load the style plugin instead of the four.__ It edits the same classes
+  per breakpoint, in its Spacing, Text, Display and Position sections rather
+  than in *Responsive*, and adds inline css and Bootstrap's classes as
+  chips.
+
+  ```html
+  <script src="dist/plugins/grideditor.style.min.js"></script>
+  ```
+
+  As a module, `import '@themarioga/grid-editor/plugins/style'`. Loaded
+  beside it, the old files stand down.
+* __Name it in the `plugins` setting__, if the page names its plugins:
+  `plugins: ['style', …]` instead of `'spacing'`, `'textalign'`,
+  `'visibility'` or `'float'`. An old name still asks for the style plugin,
+  with a warning, until 8.0.
+* __Move the options.__ `utilities: { spacing: … }` is
+  `style: { spacing: … }`, and `utilities: { visibility: … }` is
+  `style: { visibility: … }`. The old ones are still read, with a warning,
+  until 8.0.
+* __Tests or code that look for the fields__ in the Responsive section find
+  them in the Style accordion now: `[data-ge-style-section="spacing"]` and
+  the others.
+
+Upgrading from grid-editor `7.1` to `7.2`
+=========================================
+
+Only for a page that uses the CKEditor plugin: **the CKEditor integration is
+CKEditor 5**. It breaks such a page, and it is a minor all the same, because
+it is a change in a plugin, not in the core.
+
+CKEditor 4.22.1, the last open source CKEditor 4, has known cross-site
+scripting vulnerabilities and gets no more fixes; every CKEditor 4 after it is
+commercial. A page that does not use CKEditor has nothing to change. Markup
+saved with a CKEditor text loads as it is: the content type is still
+`ckeditor`.
+
+* __Load CKEditor 5 instead of CKEditor 4.__ Its browser build, and its
+  stylesheet:
+
+  ```html
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.css">
+  <script src="https://cdn.jsdelivr.net/npm/ckeditor5@48.5.2/dist/browser/ckeditor5.umd.js"></script>
+  ```
+
+  With CKEditor 4 on the page, the plugin says CKEditor 5 is not available.
+* __Pass a `licenseKey`.__ CKEditor 5 does not start without one: `'GPL'`
+  accepts its GPL-2.0-or-later licence, or pass your commercial key.
+
+  ```javascript
+  new GridEditor('#myGrid', {
+      content_types: ['ckeditor'],
+      ckeditor: { config: { licenseKey: 'GPL' } },
+  });
+  ```
+* __Rewrite the rest of `ckeditor.config` for CKEditor 5.__ It is what
+  `InlineEditor.create` takes, and CKEditor 4's options mean nothing to it:
+  `toolbar` has another shape, `extraPlugins`, `removePlugins` and
+  `allowedContent` are gone, and `plugins` lists every plugin. grid-editor
+  gives it a set of plugins and a toolbar when the config has none; see the
+  README. `on.instanceReady` is still called, with the editor as `this` and
+  as `evt.editor`.
+* __Markup no plugin knows is dropped__ as the editor opens, as CKEditor 4's
+  content filter did: add `GeneralHtmlSupport` to keep classes and elements.
+
 Upgrading from grid-editor `6.*` to `7.*`
 =========================================