@themarioga/grid-editor 6.0.0 → 7.1.0

package/docs/plugins.md

@@ -7,7 +7,7 @@ what turns the feature on. `grideditor.card.js` is the shortest of them, and
 the one to read first if you are about to write your own.
 
 ```html
-<script src="dist/jquery.grideditor.min.js"></script>
+<script src="dist/grideditor.min.js"></script>
 <script src="dist/plugins/grideditor.tabs.min.js"></script>
 <script src="dist/plugins/grideditor.popup.min.js"></script>
 <script src="dist/plugins/grideditor.card.min.js"></script>
@@ -15,11 +15,11 @@ the one to read first if you are about to write your own.
 ```
 
 There are three kinds. A **container plugin** builds a type of container — it
-registers under `$.fn.gridEditor.containers`, and the toolbar offers a button
+registers under `GridEditor.containers`, and the toolbar offers a button
 for it. A **utility plugin** declares families of Bootstrap's responsive
-utility classes — `$.fn.gridEditor.utilities` — and the editor edits them per
+utility classes — `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.
+`GridEditor.features`, hooks into the canvas, and may contribute methods.
 All three are factories called once per editor with the same handle.
 
 Text is a feature plugin too. The core knows the grid and the host's *plain
@@ -50,14 +50,12 @@ A plugin registers a **factory** under the type it builds. The factory is
 called once per editor, with the handle below, and returns the definition:
 
 ```javascript
-(function($) {
-
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'container.add_carousel': 'Carousel',
     'container.carousel_label': 'Slide {number}',
 });
 
-$.fn.gridEditor.containers.carousel = function(ge) {
+GridEditor.containers.carousel = function(ge) {
 
     function addSlideTo(container, options) { … }
 
@@ -77,10 +75,28 @@ $.fn.gridEditor.containers.carousel = function(ge) {
         onDeinit: function() { … },                      // optional, per canvas deinit
     };
 };
+```
+
+That is a classic script, loaded after `grideditor.js`, with `GridEditor` on
+window. The same plugin as an ES module imports the editor and registers as
+it is imported, which is how the shipped plugins' modules work:
+
+```javascript
+import { GridEditor } from '@themarioga/grid-editor';
 
-})(jQuery);
+GridEditor.containers.carousel = function(ge) { … };
 ```
 
+A page or an app imports it for that side effect, after the editor:
+`import './carousel.js'`. Either way there is one registry per page, and the
+editors made after a plugin registered have it.
+
+Everything the editor hands a plugin, and everything a plugin hands back, is
+DOM: elements, and arrays of them where there may be several. Up to 6.x it was
+jQuery objects; a plugin written for 6.x is ported by taking that out, and
+[UPGRADING.md](../UPGRADING.md) says how. The shipped plugins are written in
+plain DOM, and a plugin of your own is free to use whatever it likes.
+
 - **`iconClass`**, when given, is the toolbar button's face: the icon alone,
   with the label as its title. Without one the button shows a plus and the
   label.
@@ -102,7 +118,9 @@ The handle
 
 Everything a plugin needs from the editor comes through the handle its factory
 is called with. It is the plugin contract: these names, and what they do, do
-not change without a major version.
+not change without a major version. 7.0 was one: every node it takes or gives
+is an element, and where 6.x gave a jQuery set that may hold several, an
+array.
 
 | | |
 | --- | --- |
@@ -112,10 +130,10 @@ not change without a major version.
 | `ge.warn(message)` | A console warning, prefixed like the editor's own |
 | `ge.containerId(type)` | A generated id, stable across a reset, for Bootstrap's toggles |
 | `ge.defaultRegion()` | A row with one full width column: what an empty pane starts as |
-| `ge.createTool(drawer, title, className, iconClass, handlers)` | A tool in a drawer |
-| `ge.createMoveTool(drawer)` | The drag handle, unless `drag_handle` says the whole drawer is one |
+| `ge.createTool(drawer, title, className, iconClass, handlers)` | A tool in a drawer, which it returns. `handlers` is a click handler or `{ eventName: handler }`; each gets the DOM event, with `this` the tool |
+| `ge.createMoveTool(drawer)` | The drag handle, unless `drag_handle` says the whole drawer is one; the tool, or null |
 | `ge.addSettingsTool(drawer, node, presets)` | The gear, and the id and class panel it opens. Returns the panel, to add fields to |
-| `ge.detailsOf(node)` | A node's settings panel, wherever it is: in its drawer, or open in the offcanvas, popover or modal `settings_panel` names, outside the canvas. Find a panel's fields through it, never through the drawer |
+| `ge.detailsOf(node)` | A node's settings panel, wherever it is: in its drawer, or open in the offcanvas, popover or modal `settings_panel` names, outside the canvas. Find a panel's fields through it, never through the drawer. Null for a node with none |
 | `ge.deleteNode(kind, node, confirmText, animate)` | Remove a node: ask, animate, announce |
 | `ge.place(node, kind, options)` | Put a created node where `appendTo` and friends say, through the add events. `options.source` is the payload's `source`, `api` by default |
 | `ge.createPaneControls(pane, kind, hostTools, confirmText, remove)` | The drawer a pane gets: move, the host's tools, delete |
@@ -132,15 +150,15 @@ not change without a major version.
 | `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 |
+| `ge.utilityField(node, family)` | A panel field for one family, for a plugin that builds its own panel; null for a family no plugin declares |
 | `ge.rowFromLayout(layout)` | A detached row from a layout: `[8, 4]`, `['auto', 'equal']` or `{ row_cols, columns }` |
-| `ge.drawerOf(node)` | A node's drawer: its first child, or for a content area the one beside it in its text block |
+| `ge.drawerOf(node)` | A node's drawer: its first child, or for a content area the one beside it in its text block; null when it has none |
 | `ge.textReady(block)` | A text editor has rewritten a content area: whatever the editor and its plugins put in there goes back in |
 | `ge.attachPicker(tool, open)` | Hold a tool, or rest the pointer on it, and `open` is called: how a tool offers a choice |
 | `ge.openPicker(anchor, choices, className?)` | The choice itself, as a strip under `anchor`: one button per `{ label, title, attributes, choose }` |
 | `ge.closePicker()` | Close it; true when one was open, which is also a click's answer |
 | `ge.nodeHtml(node)` | One node's markup as `getHtml` would give it. The canvas leaves editing to read it and comes back, as it does for `getHtml` |
-| `ge.toolbarItems(name)` | The toolbar buttons the feature plugin `name` declared, for showing and hiding them |
+| `ge.toolbarItems(name)` | An array of the toolbar buttons the feature plugin `name` declared, for showing and hiding them |
 | `ge.bareStyle(node, family, property)` | A css property's value on the node with none of the family's classes: what a preview shows when no class applies and that is not a constant |
 
 The add, delete and move events for a container and its panes are fired by the
@@ -154,7 +172,7 @@ Feature plugins
 A feature plugin returns hooks rather than a container definition:
 
 ```javascript
-$.fn.gridEditor.features.elements = function(ge) {
+GridEditor.features.elements = function(ge) {
     return {
         methods: { createElement: … },   // added to the editor's own methods
         kindOf: function(node) { … },    // what an event calls this node
@@ -246,7 +264,7 @@ rather than remembering anything about it.
 
   ```javascript
   onSortable: function(sortable) {
-      sortable(ge.canvas.find('.ge-content'), {
+      sortable(Array.from(ge.canvas.querySelectorAll('.ge-content')), {
           draggable: '> .ge-element',   // which children move
           group: 'element',             // lists sharing a group connect
       });
@@ -316,7 +334,7 @@ A feature plugin that edits text declares its types, and that is all the
 core asks of it:
 
 ```javascript
-$.fn.gridEditor.features.mytext = function(ge) {
+GridEditor.features.mytext = function(ge) {
     return {
         textTypes: function() {
             return [{
@@ -361,8 +379,12 @@ off there.
 block's drawer, the *Text* buttons in the toolbar, `createText`, opening an
 editor on a click and closing it with
 the host's attributes put back, and `textTypes` - from
-`src/js/text/grideditor.text.js`, which the build puts at the top of each.
-However many a page loads, that is installed once.
+`src/js/text/grideditor.text.js`, which each of them imports, so its script
+carries it. However many a page loads, that is installed once.
+
+Each registers on `GridEditor.texts`, the text feature's own registry, with a
+factory whose `start(contentAreas)` and `stop(contentAreas)` get an array of
+content areas.
 
 The editors offered are `content_types`, every one loaded by default, in the
 order the page loaded them; the `plugins` setting does not choose them. A
@@ -379,9 +401,9 @@ editors.
 
 Up to 5.x an editor of a host's own registered under
 `$.fn.gridEditor.RTEs`, and in 5.x and the 6.0 betas under
-`$.fn.gridEditor.texts`. 6.0 removes the first - what is registered there is
-ignored, with a warning - and `texts` is the shipped editors' own registry,
-not a contract.
+`$.fn.gridEditor.texts`. 6.0 ignored the first, with a warning, and 7.0 has
+neither: `GridEditor.texts` is the shipped editors' own registry, not a
+contract.
 
 
 Utility plugins
@@ -393,7 +415,7 @@ ones spelled `{property}-{breakpoint}-{value}`, like `order-md-2` or
 and the editor reads, writes, previews and announces them:
 
 ```javascript
-$.fn.gridEditor.utilities.order = function(ge) {
+GridEditor.utilities.order = function(ge) {
     return {
         families: [{
             name: 'order',                 // what events and setUtility call it

package/example/adapter.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies: jQuery 4, which this page's own code is
+         written in, as a page for grid-editor 6 was -->
+    <script src="https://code.jquery.com/jquery-4.0.0.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: the editor, then the jQuery API on top of
+         it, then the plugins - which are 7.0's, like the editor -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/grideditor.min.js"></script>
+    <script src="../dist/grideditor.jquery.min.js"></script>
+    <script src="../dist/plugins/grideditor.tabs.min.js"></script>
+    <script src="../dist/plugins/grideditor.card.min.js"></script>
+
+    <script>
+        // Everything below is grid-editor 6 code, unchanged
+        $(function() {
+            $('#myGrid').gridEditor({
+                new_row_layouts: [[12], [6, 6], [4, 4, 4]],
+                content_types: [],
+
+                // A callback gets the payload with jQuery objects in it
+                callbacks: {
+                    after_add_row: function(payload) {
+                        $('#last').text('A row was added, with ' +
+                            payload.node.children('.column').length + ' columns');
+                    },
+                },
+            });
+
+            // And so does a jQuery event listener, as its second argument
+            $('#myGrid').on('grideditor:before-delete', function(e, payload) {
+                if (payload.node.hasClass('locked')) {
+                    e.preventDefault();
+                    $('#last').text('That row is locked: it stays');
+                }
+            });
+
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            });
+        });
+    </script>
+
+    <title>Grid Editor jQuery API 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 class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">The jQuery API</h1>
+                <p class="form-text">
+                    grid-editor needs no jQuery since 7.0. A page written for
+                    6.x loads jQuery 4 and <code>grideditor.jquery.js</code>
+                    after the editor, and its code runs as it did:
+                    <code>$('#myGrid').gridEditor(...)</code>, the methods by
+                    name, jQuery event listeners and callbacks with jQuery
+                    objects in their payloads. The plugins are 7.0's; a plugin
+                    written for 6.x is the one thing to port, as
+                    <code>UPGRADING.md</code> explains.
+                </p>
+                <p class="form-text">
+                    Add a row and the callback counts its columns. The first
+                    row carries a <code>locked</code> class, which the event
+                    listener reads to turn its delete away.
+                </p>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <p class="form-text" id="last"></p>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="row locked">
+                <div class="col-lg-12">
+                    <h2 class="h5">A locked row</h2>
+                    <p>Its delete is canceled by the page's own jQuery listener.</p>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-lg-6">
+                    <p>An ordinary column.</p>
+                </div>
+                <div class="col-lg-6">
+                    <p>And another.</p>
+                </div>
+            </div>
+
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+
+</body>
+</html>

package/example/attributes.html

@@ -8,15 +8,14 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
 
     <!-- Javascript dependencies -->
-    <script src="https://code.jquery.com/jquery-4.0.0.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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/7.9.3/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/grideditor.min.js"></script>
     <!-- The text editor is a plugin of its own, loaded after the editor -->
     <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
     <script src="../dist/plugins/grideditor.card.min.js"></script>
@@ -34,9 +33,9 @@
     <!-- A plugin of this page's own: a drawer tool that opens a modal, and
          what the user chooses there saved as an attribute on the node. -->
     <script id="animation-plugin">
-        (function($) {
+        (function() {
 
-            $.extend($.fn.gridEditor.locales.en, {
+            Object.assign(GridEditor.locales.en, {
                 'animation.tool': 'Animation',
                 'animation.title': 'Animate on scroll',
                 'animation.effect': 'Effect',
@@ -56,49 +55,67 @@
             var ATTRIBUTE = 'data-animation';
             var EFFECTS = ['fade', 'slide', 'zoom'];
 
-            $.fn.gridEditor.features.animation = function(ge) {
+            GridEditor.features.animation = function(ge) {
 
                 var modal = null;
 
                 function read(node) {
                     try {
-                        return JSON.parse(node.attr(ATTRIBUTE) || 'null');
+                        return JSON.parse(node.getAttribute(ATTRIBUTE) || 'null');
                     } catch (error) {
                         return null;
                     }
                 }
 
                 /**
-                 * A plain attr() on any node: an element is never inside a
-                 * text editor since 6.0, and a text's own attributes, given
+                 * A plain setAttribute on any node: an element is never inside
+                 * a text editor since 6.0, and a text's own attributes, given
                  * while its editor is open, are kept by grid-editor when the
                  * editor closes.
                  */
                 function write(node, value) {
                     if (value) {
-                        node.attr(ATTRIBUTE, JSON.stringify(value));
+                        node.setAttribute(ATTRIBUTE, JSON.stringify(value));
                     } else {
-                        node.removeAttr(ATTRIBUTE);
+                        node.removeAttribute(ATTRIBUTE);
                     }
                 }
 
+                function make(tag, className, text) {
+                    var node = document.createElement(tag);
+                    if (className) { node.className = className; }
+                    if (text !== undefined) { node.textContent = text; }
+                    return node;
+                }
+
                 /** Built once, outside the canvas, so it is never part of getHtml. */
                 function dialog() {
                     if (modal) { return modal; }
 
-                    var effects = $('<select class="form-select" name="effect" />')
-                        .append($('<option value="" />').text(ge.t('animation.none')));
+                    var effects = make('select', 'form-select');
+                    effects.name = 'effect';
+                    var none = make('option', null, ge.t('animation.none'));
+                    none.value = '';
+                    effects.appendChild(none);
                     EFFECTS.forEach(function(effect) {
-                        effects.append($('<option />').val(effect).text(ge.t('animation.' + effect)));
+                        var option = make('option', null, ge.t('animation.' + effect));
+                        option.value = effect;
+                        effects.appendChild(option);
                     });
 
                     var field = function(label, input) {
-                        return $('<div class="mb-3" />')
-                            .append($('<label class="form-label" />').text(ge.t(label)))
-                            .append(input);
+                        var wrapper = make('div', 'mb-3');
+                        wrapper.appendChild(make('label', 'form-label', ge.t(label)));
+                        if (typeof input === 'string') {
+                            wrapper.insertAdjacentHTML('beforeend', input);
+                        } else {
+                            wrapper.appendChild(input);
+                        }
+                        return wrapper;
                     };
 
-                    modal = $(
+                    var holder = document.createElement('div');
+                    holder.innerHTML =
                         '<div class="modal fade my-animation-modal" tabindex="-1" aria-hidden="true">' +
                             '<div class="modal-dialog modal-dialog-centered"><form class="modal-content">' +
                                 '<div class="modal-header">' +
@@ -111,46 +128,52 @@
                                     '<button type="submit" class="btn btn-primary"></button>' +
                                 '</div>' +
                             '</form></div>' +
-                        '</div>'
-                    ).appendTo('body');
-
-                    modal.find('.modal-title').text(ge.t('animation.title'));
-                    modal.find('.modal-footer .btn-secondary').text(ge.t('animation.cancel'));
-                    modal.find('.modal-footer .btn-primary').text(ge.t('animation.save'));
-                    modal.find('.modal-body')
-                        .append(field('animation.effect', effects))
-                        .append(field('animation.duration', '<input class="form-control" type="number" name="duration" min="0" step="100">'))
-                        .append(field('animation.delay', '<input class="form-control" type="number" name="delay" min="0" step="100">'))
-                        .append($('<div class="form-check" />')
-                            .append('<input class="form-check-input" type="checkbox" name="once" id="my-animation-once">')
-                            .append($('<label class="form-check-label" for="my-animation-once" />').text(ge.t('animation.once'))));
+                        '</div>';
+                    modal = document.body.appendChild(holder.firstChild);
+
+                    modal.querySelector('.modal-title').textContent = ge.t('animation.title');
+                    modal.querySelector('.modal-footer .btn-secondary').textContent = ge.t('animation.cancel');
+                    modal.querySelector('.modal-footer .btn-primary').textContent = ge.t('animation.save');
+
+                    var once = make('div', 'form-check');
+                    once.innerHTML = '<input class="form-check-input" type="checkbox" name="once" id="my-animation-once">';
+                    var onceLabel = make('label', 'form-check-label', ge.t('animation.once'));
+                    onceLabel.setAttribute('for', 'my-animation-once');
+                    once.appendChild(onceLabel);
+
+                    var body = modal.querySelector('.modal-body');
+                    body.appendChild(field('animation.effect', effects));
+                    body.appendChild(field('animation.duration', '<input class="form-control" type="number" name="duration" min="0" step="100">'));
+                    body.appendChild(field('animation.delay', '<input class="form-control" type="number" name="delay" min="0" step="100">'));
+                    body.appendChild(once);
 
                     return modal;
                 }
 
                 function open(node, kind, tool) {
-                    var form = dialog().find('form');
+                    var form = dialog().querySelector('form');
                     var current = read(node) || {};
 
-                    form.find('[name=effect]').val(current.effect || '');
-                    form.find('[name=duration]').val(current.duration || 600);
-                    form.find('[name=delay]').val(current.delay || 0);
-                    form.find('[name=once]').prop('checked', current.once !== false);
+                    form.elements.effect.value = current.effect || '';
+                    form.elements.duration.value = current.duration || 600;
+                    form.elements.delay.value = current.delay || 0;
+                    form.elements.once.checked = current.once !== false;
 
-                    form.off('submit').on('submit', function(e) {
+                    // One handler at a time: this node's, until the next open
+                    form.onsubmit = function(e) {
                         e.preventDefault();
 
-                        var effect = form.find('[name=effect]').val();
+                        var effect = form.elements.effect.value;
                         var value = effect ? {
                             effect: effect,
-                            duration: parseInt(form.find('[name=duration]').val(), 10) || 0,
-                            delay: parseInt(form.find('[name=delay]').val(), 10) || 0,
-                            once: form.find('[name=once]').prop('checked'),
+                            duration: parseInt(form.elements.duration.value, 10) || 0,
+                            delay: parseInt(form.elements.delay.value, 10) || 0,
+                            once: form.elements.once.checked,
                         } : null;
 
                         var from = read(node);
                         write(node, value);
-                        tool.toggleClass('my-animation-set', !!value);
+                        tool.classList.toggle('my-animation-set', !!value);
 
                         // Announced like the editor's own changes, for a host
                         // that listens: grideditor:animation-change
@@ -158,10 +181,10 @@
                             source: 'tool', from: from, to: value,
                         }));
 
-                        window.bootstrap.Modal.getInstance(modal[0]).hide();
-                    });
+                        window.bootstrap.Modal.getInstance(modal).hide();
+                    };
 
-                    window.bootstrap.Modal.getOrCreateInstance(modal[0]).show();
+                    window.bootstrap.Modal.getOrCreateInstance(modal).show();
                 }
 
                 return {
@@ -169,46 +192,50 @@
                     // a row, a column, an element, a container's type, a pane
                     drawerTools: function(drawer, node, kind) {
                         var animated = ['row', 'column', 'section', 'text', 'element'].indexOf(kind) !== -1 ||
-                            !!$.fn.gridEditor.containers[kind];
+                            !!GridEditor.containers[kind];
                         if (!animated) { return; }
 
-                        ge.createTool(drawer, ge.t('animation.tool'), 'my-animation-tool', 'bi bi-magic', function() {
+                        var tool = ge.createTool(drawer, ge.t('animation.tool'), 'my-animation-tool', 'bi bi-magic', function() {
                             open(node, kind, tool);
                         });
 
                         // Drawers are built again on every init, so the tool
                         // reads the node rather than remembering anything
-                        var tool = drawer.children('.my-animation-tool').last()
-                            .toggleClass('my-animation-set', !!read(node));
+                        tool.classList.toggle('my-animation-set', !!read(node));
                     },
                 };
             };
 
-        })(jQuery);
+        })();
     </script>
 
     <script>
-        $(function() {
-            $('#animation-source').text($('#animation-plugin').text().trim().replace(/^ {8}/gm, ''));
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('animation-source').textContent =
+                document.getElementById('animation-plugin').textContent.trim().replace(/^ {8}/gm, '');
 
-            $('#myGrid').gridEditor({
+            var editor = new GridEditor('#myGrid', {
                 new_row_layouts: [[12], [6, 6], [4, 4, 4]],
                 content_types: ['tinymce'],
+                // tinyMCE 7 is GPL-2.0-or-later: 'gpl' accepts that licence.
+                // A commercial licence passes its own key here instead.
+                tinymce: { config: { license_key: 'gpl' } },
             });
 
-            $('#myGrid').on('grideditor:animation-change', function(e, payload) {
-                $('#log').text('The ' + payload.kind + ' now animates: ' +
-                    (payload.to ? payload.to.effect : 'no'));
+            document.getElementById('myGrid').addEventListener('grideditor:animation-change', function(e) {
+                var payload = e.detail;
+                document.getElementById('log').textContent = 'The ' + payload.kind + ' now animates: ' +
+                    (payload.to ? payload.to.effect : 'no');
             });
 
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getPlainHtml'));
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getPlainHtml();
             });
 
             // The published page: the plain html, and a few lines of the
             // host's own that read data-animation. Nothing of grid-editor.
-            $('#published').on('click', function() {
-                var html = $('#myGrid').gridEditor('getPlainHtml');
+            document.getElementById('published').addEventListener('click', function() {
+                var html = editor.getPlainHtml();
                 var page = window.open('', '_blank');
 
                 page.document.write(
@@ -227,7 +254,7 @@
                         'Scroll down: each node animates as it comes into view' +
                     '</div>' +
                     '<div class="container">' + html + '</div>' +
-                    '<script>' + $('#runtime').text() + '<\/script>' +
+                    '<script>' + document.getElementById('runtime').textContent + '<\/script>' +
                     '</body></html>'
                 );
                 page.document.close();
@@ -280,7 +307,7 @@
                     text, from its drawer, while you are typing: the attribute
                     is kept when the editor closes, although tinyMCE puts back
                     the attributes it found when it opened. The plugin does
-                    nothing special for that - a plain <code>attr()</code> -
+                    nothing special for that - a plain <code>setAttribute()</code> -
                     and nothing special for the quote either, which is an
                     element: a block beside the texts, never inside one.
                 </p>

package/example/autocols.html

@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
 
     <!-- Javascript dependencies -->
-    <script src="https://code.jquery.com/jquery-4.0.0.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,12 +16,12 @@
     <!-- The editor, and the sections plugin: equal and auto sizes and
          columns per row are the editor's own, sections are a plugin -->
     <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/grideditor.min.js"></script>
     <script src="../dist/plugins/grideditor.sections.min.js"></script>
 
     <script>
-        $(function() {
-            $('#myGrid').gridEditor({
+        document.addEventListener('DOMContentLoaded', function() {
+            var editor = new GridEditor('#myGrid', {
                 content_types: [],
 
                 // Sizes are numbers, 'equal' (col) or 'auto' (col-auto), and a
@@ -36,17 +35,18 @@
             });
 
             // A width chosen anywhere - tools, edge, panel - is a resize
-            $('#myGrid').on('grideditor:after-resize', function(e, payload) {
-                $('#last').text('width at ' + payload.breakpoint + ': ' +
+            document.getElementById('myGrid').addEventListener('grideditor:after-resize', function(e) {
+                var payload = e.detail;
+                document.getElementById('last').textContent = 'width at ' + payload.breakpoint + ': ' +
                     (payload.from === null ? 'from the row' : payload.from) + ' → ' +
                     (payload.to === null ? 'inherit' : payload.to) +
                     (payload.cleared && payload.cleared.length ? ' (took off ' + payload.cleared.map(function(entry) {
                         return entry.breakpoint;
-                    }).join(', ') + ')' : ''));
+                    }).join(', ') + ')' : '');
             });
 
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
             });
         });
     </script>