@themarioga/grid-editor 7.0.0 → 7.2.0

package/CHANGELOG.md

@@ -5,6 +5,40 @@ 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.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
+- The tinyMCE integration now targets tinyMCE 7, and the examples, the
+  Angular app and the tests use TinyMCE 7.9.3. 6.8.6 has five known
+  cross-site scripting advisories (GHSA-5359-pvf2-pw78, GHSA-mh5m-5hw4-5c69,
+  GHSA-vg35-5wq7-3x7w, GHSA-q742-qvgc-gc2f, GHSA-v98h-vmpc-fpqv), and 7.9.3
+  is the first release with none. This changes tinyMCE's licence from MIT to
+  GPL-2.0-or-later: the examples pass `license_key: 'gpl'`, and a page that
+  uses tinyMCE 7 passes that or its own commercial key in `tinymce.config`.
+  grid-editor stays MIT. The integration still works with tinyMCE 6.
+
 ## [7.0.0] - 2026-09-28
 grid-editor is plain DOM: no jQuery. See [UPGRADING.md](UPGRADING.md).
 

package/README.md

@@ -39,13 +39,16 @@ from any web server, or from GitHub Pages, with no build step.
 | [example/autosave.html](example/autosave.html) | Saving the html as the user edits | [live](https://themarioga.github.io/grid-editor/example/autosave.html) |
 | [example/adapter.html](example/adapter.html) | A page written for 6.x, with jQuery, running unchanged through the adapter | [live](https://themarioga.github.io/grid-editor/example/adapter.html) |
 
+[example/angular](example/angular) is the editor in an Angular app, from the npm
+package: an Angular CLI project, with a build step, unlike the pages above.
+
 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 6 as well, and `dist/plugins/grideditor.tinymce.min.js` after the editor.
+    * 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:
 
@@ -99,6 +102,9 @@ confirmed with the browser's `confirm()` and the modal settings panel opens
 with a backdrop of the editor's own. Types for the public API come with the
 package (`dist/grideditor.d.ts`).
 
+[example/angular](example/angular) is a whole app that does this, with the
+editor as an Angular component.
+
 Load the classic script *or* the module build on a page, never both.
 
 ### A page written for 6.x
@@ -817,9 +823,9 @@ same way, `codemirror.config` included, and a textarea without it.
 ### Rich text editor options
 
 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/) 6 - `dist/plugins/grideditor.tinymce.min.js` - [(example)](example/basic.html)
+* [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
@@ -836,18 +842,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).
@@ -861,7 +896,7 @@ new GridEditor('#myGrid', {
 ```
 
 __`tinymce.config`:__ Specify tinyMCE config, when using the `tinymce` `content_types`.
-See the [tinyMCE documentation](https://www.tiny.cloud/docs/tinymce/6/).
+See the [tinyMCE documentation](https://www.tiny.cloud/docs/tinymce/7/).
 Also check out the [tinymce example](example/basic.html).
 
 ```javascript
@@ -876,6 +911,24 @@ Grid editor passes `promotion: false`, so tinyMCE's "Upgrade" badge does not
 appear in the menubar of an inline editor sitting in someone's page. Pass
 `promotion: true` in your own config to get it back.
 
+tinyMCE 7 is licensed GPL-2.0-or-later, and asks for a `license_key`: pass
+`license_key: 'gpl'` to accept the GPL, or your own key if you have a
+commercial licence. Without one it runs in evaluation mode and says so in the
+console. Grid editor does not pass one for you, since the licence is yours to
+choose.
+
+```javascript
+new GridEditor('#myGrid', {
+    tinymce: {
+        config: { license_key: 'gpl' }
+    }
+});
+```
+
+Use 7.9.3 or later: every tinyMCE 6 release, and 7.x before 7.9.3, has known
+cross-site scripting vulnerabilities. The integration still works with
+tinyMCE 6, but the examples and tests run on 7.9.3.
+
 
 Upgrading
 ---------

package/UPGRADING.md

@@ -1,3 +1,44 @@
+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.*`
 =========================================