@themarioga/grid-editor 6.0.0 → 7.0.0

package/example/autosave.html

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
 
     <!-- JS 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>
 
@@ -17,7 +16,7 @@
     <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>
 </head>
@@ -41,30 +40,30 @@
 </div>
 <script>
     const LOCAL_STORAGE_KEY = 'gridEditorLayout';
+    const grid = document.getElementById('myGrid');
+    let editor = null;
 
     function initEditor(initialContent = '') {
-        const $grid = $('#myGrid');
-        $grid.html(initialContent);
-        $grid.gridEditor({
+        grid.innerHTML = initialContent;
+        editor = new GridEditor(grid, {
             new_row_layouts: [[12], [6,6], [4,4,4]],
             content_types: ['tinymce']
         });
     }
 
     function autoSave() {
-        const html = $('#myGrid').gridEditor('getHtml');
-        localStorage.setItem(LOCAL_STORAGE_KEY, html);
+        localStorage.setItem(LOCAL_STORAGE_KEY, editor.getHtml());
     }
 
-    $(function () {
+    document.addEventListener('DOMContentLoaded', function () {
         // Restore the previous draft, falling back to whatever markup is in the page
         const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
-        initEditor(saved || $('#myGrid').html());
+        initEditor(saved || grid.innerHTML);
 
         setInterval(autoSave, 5000);
 
-        $('#exportBtn').on('click', () => {
-            const html = $('#myGrid').gridEditor('getHtml');
+        document.getElementById('exportBtn').addEventListener('click', () => {
+            const html = editor.getHtml();
             const blob = new Blob([html], { type: 'text/html' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
@@ -74,19 +73,19 @@
             URL.revokeObjectURL(url);
         });
 
-        $('#importInput').on('change', function (e) {
+        document.getElementById('importInput').addEventListener('change', function (e) {
             const file = e.target.files[0];
             if (!file) return;
             const reader = new FileReader();
             reader.onload = function (e) {
-                $('#myGrid').gridEditor('remove');
+                editor.destroy();
                 initEditor(e.target.result);
                 autoSave();
             };
             reader.readAsText(file);
         });
 
-        $('#resetBtn').on('click', function () {
+        document.getElementById('resetBtn').addEventListener('click', function () {
             localStorage.removeItem(LOCAL_STORAGE_KEY);
             location.reload();
         });

package/example/basic.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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
     
@@ -17,21 +16,21 @@
     <!-- Grid editor javascript -->
     <!-- The editor with SortableJS inside it. Every other example loads the
          two files separately; a page does one or the other, never both. -->
-    <script src="../dist/jquery.grideditor.bundle.min.js"></script>
+    <script src="../dist/grideditor.bundle.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>
-        $(function() {
+        document.addEventListener('DOMContentLoaded', function() {
             // Initialize grid editor
-            $('#myGrid').gridEditor({
+            var editor = new GridEditor('#myGrid', {
 				drag_handle: 'drawer',
                 new_row_layouts: [[12], [6,6], [9,3]],
                 content_types: ['tinymce'],
             });
             
             // // Get resulting html
-            // var html = $('#myGrid').gridEditor('getHtml');
+            // var html = editor.getHtml();
             // console.log(html);
         });
     </script>

package/example/breakpoints.html

@@ -8,18 +8,17 @@
     <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 -->
     <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>
 
     <script>
-        $(function() {
-            $('#myGrid').gridEditor({
+        document.addEventListener('DOMContentLoaded', function() {
+            var editor = new GridEditor('#myGrid', {
                 new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
                 content_types: [],
 
@@ -33,8 +32,8 @@
                 // layout_modes: ['all', 'lg', 'sm', 'xs'],
             });
 
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
             });
         });
     </script>

package/example/ckeditor.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>
     
     <!-- Ckeditor js -->
@@ -18,14 +17,14 @@
     <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.ckeditor.min.js"></script>
     
     <script>
-        $(function() {
+        document.addEventListener('DOMContentLoaded', function() {
             // Initialize grid editor
-            $('#myGrid').gridEditor({
+            var editor = new GridEditor('#myGrid', {
                 new_row_layouts: [[12], [6, 6], [9, 3]],
                 content_types: ['ckeditor'],
                 ckeditor: {
@@ -41,7 +40,7 @@
             });
             
             // Get resulting html
-            var html = $('#myGrid').gridEditor('getHtml');
+            var html = editor.getHtml();
             console.log(html);
         });
     </script>

package/example/clipboard.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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
 
@@ -16,7 +15,7 @@
     <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>
     <!-- Copy and paste is a plugin of its own. The others are here so there
@@ -28,20 +27,22 @@
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
 
     <script>
-        $(function() {
+        document.addEventListener('DOMContentLoaded', function() {
             var settings = {
                 new_row_layouts: [[12], [6, 6], [4, 4, 4]],
                 content_types: ['tinymce'],
             };
 
-            $('#myGrid').gridEditor(settings);
-            $('#otherGrid').gridEditor(settings);
+            ['#myGrid', '#otherGrid'].forEach(function(selector) {
+                var grid = document.querySelector(selector);
+                new GridEditor(grid, settings);
 
-            // A paste is an add like any other, with source 'paste'
-            $('#myGrid, #otherGrid').on('grideditor:after-add', function(e, payload) {
-                if (payload.source === 'paste') {
-                    $('#log').text('Pasted a ' + payload.kind + ' into ' + e.currentTarget.id);
-                }
+                // A paste is an add like any other, with source 'paste'
+                grid.addEventListener('grideditor:after-add', function(e) {
+                    if (e.detail.source === 'paste') {
+                        document.getElementById('log').textContent = 'Pasted a ' + e.detail.kind + ' into ' + e.currentTarget.id;
+                    }
+                });
             });
         });
     </script>

package/example/codemirror.html

@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/lib/codemirror.min.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>
 
@@ -25,7 +24,7 @@
     <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>
     <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
     <!-- The source view in CodeMirror, a plugin of its own -->
     <script src="../dist/plugins/grideditor.codemirror.min.js"></script>
@@ -33,14 +32,17 @@
     <script src="../dist/plugins/grideditor.codemirror-inline.min.js"></script>
 
     <script>
-        $(function() {
+        document.addEventListener('DOMContentLoaded', function() {
+            var checkbox = document.getElementById('editSource');
+
             function start() {
-                if ($('#myGrid').data('grideditor')) { $('#myGrid').gridEditor('destroy'); }
+                var running = GridEditor.get('#myGrid');
+                if (running) { running.destroy(); }
 
-                $('#myGrid').gridEditor({
+                new GridEditor('#myGrid', {
                     new_row_layouts: [[12], [6, 6], [4, 4, 4]],
                     // false leaves the toolbar's source button out
-                    edit_source: $('#editSource').prop('checked'),
+                    edit_source: checkbox.checked,
                     // Anything CodeMirror.fromTextArea takes, over the
                     // plugin's own defaults
                     codemirror: {
@@ -49,7 +51,7 @@
                 });
             }
 
-            $('#editSource').on('change', start);
+            checkbox.addEventListener('change', start);
             start();
         });
     </script>

package/example/containers.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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
 
@@ -16,7 +15,7 @@
     <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>
     <!-- One file per container type: load the ones this page offers -->
@@ -26,8 +25,8 @@
     <script src="../dist/plugins/grideditor.card.min.js"></script>
 
     <script>
-        $(function() {
-            $('#myGrid').gridEditor({
+        document.addEventListener('DOMContentLoaded', function() {
+            var editor = new GridEditor('#myGrid', {
                 new_row_layouts: [[12], [6,6]],
                 content_types: ['tinymce'],
 
@@ -47,12 +46,12 @@
                 accordion_tools: [],
             });
 
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
             });
 
-            $('#authored').on('click', function() {
-                var html = $('#myGrid').gridEditor('getHtml');
+            document.getElementById('authored').addEventListener('click', function() {
+                var html = editor.getHtml();
                 var page = window.open('', '_blank');
 
                 // The output, in a page that loads Bootstrap and nothing else:

package/example/custom_editor.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,39 +16,47 @@
     <!-- The editor, and no text editor of the shipped ones: the one this page
          edits text with is written below -->
     <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>
 
     <!-- A text editor of the page's own. It is a feature plugin like any
          other: the core knows nothing of text, and asks the plugins through
          textTypes which types there are. This one edits with the browser's
          own contenteditable. -->
     <script id="simpletext-plugin">
-        (function($) {
+        (function() {
 
-            $.extend($.fn.gridEditor.locales.en, {
+            Object.assign(GridEditor.locales.en, {
                 'simpletext.label': 'Simple text',
                 'simpletext.add': 'Simple text',
             });
 
             var TYPE = 'simpletext';
 
-            $.fn.gridEditor.features.simpletext = function(ge) {
+            GridEditor.features.simpletext = function(ge) {
 
                 /** A content area of this plugin's: its type is on it. */
                 function isOurs(area) {
-                    return area.attr('data-ge-content-type') === TYPE;
+                    return !!area && area.getAttribute('data-ge-content-type') === TYPE;
                 }
 
                 function start(area) {
-                    if (area.hasClass('ge-rte-active')) { return; }
+                    if (area.classList.contains('ge-rte-active')) { return; }
 
-                    area.addClass('ge-rte-active').attr('contenteditable', 'true').trigger('focus');
+                    area.classList.add('ge-rte-active');
+                    area.setAttribute('contenteditable', 'true');
+                    area.focus();
                 }
 
                 // Whatever start put on the content area comes off: what is
                 // left is what getHtml saves
                 function stop(area) {
-                    area.removeClass('ge-rte-active').removeAttr('contenteditable');
+                    area.classList.remove('ge-rte-active');
+                    area.removeAttribute('contenteditable');
+                }
+
+                /** The content area a text block holds. */
+                function areaOf(textBlock) {
+                    return textBlock.querySelector(':scope > .ge-content');
                 }
 
                 /**
@@ -58,23 +65,32 @@
                  * drawer of a type a plugin declares to that plugin.
                  */
                 function createDrawer(textBlock) {
-                    var area = textBlock.children('.ge-content');
-                    var drawer = $('<div class="ge-tools-drawer ge-text-drawer" />').prependTo(textBlock);
+                    var area = areaOf(textBlock);
+                    var drawer = document.createElement('div');
+                    drawer.className = 'ge-tools-drawer ge-text-drawer';
+                    textBlock.insertBefore(drawer, textBlock.firstChild);
 
                     ge.createMoveTool(drawer);
                     ge.createTool(drawer, ge.t('tool.delete_text'), 'ge-delete-text', 'bi bi-trash', function() {
                         ge.deleteNode('text', area, ge.t('confirm.delete_text'), function(removed) {
                             stop(area);
-                            textBlock.slideUp(function() {
+                            // Folded away, then gone
+                            var fold = textBlock.animate(
+                                [{ height: textBlock.offsetHeight + 'px', opacity: 1 }, { height: '0px', opacity: 0 }],
+                                { duration: 400, easing: 'ease-in-out' }
+                            );
+                            textBlock.style.overflow = 'hidden';
+                            fold.onfinish = function() {
                                 textBlock.remove();
                                 removed();
-                            });
+                            };
                         });
                     });
                 }
 
-                function onClick() {
-                    if (isOurs($(this))) { start($(this)); }
+                function onClick(e) {
+                    var area = e.target.closest('.ge-content');
+                    if (area && ge.canvas.contains(area) && isOurs(area)) { start(area); }
                 }
 
                 return {
@@ -87,8 +103,9 @@
                             type: TYPE,
                             label: ge.t('simpletext.label'),
                             edit: function(area) {
-                                var textBlock = area.parent('.ge-text-block');
-                                if (textBlock.length && !textBlock.children('.ge-tools-drawer').length) {
+                                var textBlock = area.parentElement;
+                                if (textBlock.classList.contains('ge-text-block') &&
+                                        !textBlock.querySelector(':scope > .ge-tools-drawer')) {
                                     createDrawer(textBlock);
                                 }
 
@@ -105,47 +122,49 @@
                         kind: 'text',
                         inColumn: true,
                         create: function() {
-                            return $('<div class="ge-content" />')
-                                .addClass('ge-content-type-' + TYPE)
-                                .attr('data-ge-content-type', TYPE)
-                                .html('<p>Write here</p>');
+                            var area = document.createElement('div');
+                            area.className = 'ge-content ge-content-type-' + TYPE;
+                            area.setAttribute('data-ge-content-type', TYPE);
+                            area.innerHTML = '<p>Write here</p>';
+                            return area;
                         },
                     }],
 
                     onInit: function() {
-                        ge.canvas.find('.ge-text-block').each(function() {
-                            var textBlock = $(this);
-                            if (textBlock.children('.ge-tools-drawer').length) { return; }
-                            if (isOurs(textBlock.children('.ge-content'))) { createDrawer(textBlock); }
+                        ge.canvas.querySelectorAll('.ge-text-block').forEach(function(textBlock) {
+                            if (textBlock.querySelector(':scope > .ge-tools-drawer')) { return; }
+                            if (isOurs(areaOf(textBlock))) { createDrawer(textBlock); }
                         });
 
-                        ge.canvas.off('click.simpletext').on('click.simpletext', '.ge-content', onClick);
+                        // One listener, however many times the canvas is initialized
+                        ge.canvas.removeEventListener('click', onClick);
+                        ge.canvas.addEventListener('click', onClick);
                     },
 
                     // Before the drawers and the text blocks come off
                     onBeforeDeinit: function() {
-                        ge.canvas.find('.ge-content').each(function() {
-                            if (isOurs($(this))) { stop($(this)); }
+                        ge.canvas.querySelectorAll('.ge-content').forEach(function(area) {
+                            if (isOurs(area)) { stop(area); }
                         });
                     },
 
                     onDeinit: function() {
-                        ge.canvas.off('click.simpletext');
+                        ge.canvas.removeEventListener('click', onClick);
                     },
                 };
             };
 
-        })(jQuery);
+        })();
     </script>
 
     <script>
-        $(function() {
-            $('#myGrid').gridEditor({
+        document.addEventListener('DOMContentLoaded', function() {
+            var editor = new GridEditor('#myGrid', {
                 new_row_layouts: [[12], [6, 6], [4, 4, 4]],
             });
 
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
             });
         });
     </script>

package/example/elements.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>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
 
@@ -16,7 +15,7 @@
     <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.elements.min.js"></script>
@@ -37,8 +36,8 @@
     </style>
 
     <script>
-        $(function() {
-            $('#myGrid').gridEditor({
+        document.addEventListener('DOMContentLoaded', function() {
+            var editor = new GridEditor('#myGrid', {
                 new_row_layouts: [[12], [6,6]],
                 content_types: ['tinymce'],
 
@@ -61,9 +60,9 @@
                     className: 'my-app-edit',
                     on: {
                         click: function() {
-                            var element = $(this).closest('.ge-element');
+                            var element = this.closest('.ge-element');
                             alert('The host would open its own editor for ' +
-                                element.attr('data-ge-element') + ' here.');
+                                element.getAttribute('data-ge-element') + ' here.');
                         },
                     },
                 }],
@@ -73,17 +72,17 @@
             // placeholder to see and move while editing, and strips it in its
             // own save step. Grid editor needs no feature for this - the
             // element level controls already apply (spec 4.4).
-            $('#addTag').on('click', function() {
-                var column = $('#myGrid .column').first();
+            document.getElementById('addTag').addEventListener('click', function() {
+                var column = document.querySelector('#myGrid .column');
 
-                $('#myGrid').gridEditor('createElement',
+                editor.createElement(
                     '<span class="my-app-tag-placeholder">Analytics tag</span>',
                     { type: 'analytics-tag', label: 'Analytics', appendTo: column }
                 );
             });
 
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
             });
         });
     </script>

package/example/index.html

@@ -25,11 +25,17 @@
             Since 4.0 every gesture works with a finger as well as with a
             mouse — sorting, resizing a column, dragging a button off the
             toolbar — so these are worth opening on a phone. The editor
-            needs jQuery, <a href="https://sortablejs.github.io/Sortable/">SortableJS</a>
+            needs <a href="https://sortablejs.github.io/Sortable/">SortableJS</a>
             and Bootstrap 5; the first demo loads
-            <code>jquery.grideditor.bundle.min.js</code> instead, which is the
+            <code>grideditor.bundle.min.js</code> instead, which is the
             editor and SortableJS in one file.
         </p>
+        <p class="text-body-secondary">
+            New in 7.0: no jQuery. The editor is <code>new GridEditor(element)</code>,
+            as a script or an ES module, and a page written for 6.x keeps
+            working with jQuery and <code>grideditor.jquery.js</code> &mdash; see
+            <a href="adapter.html">The jQuery API</a>.
+        </p>
         <p class="text-body-secondary">
             New in 5.0: equal and auto columns, columns per row, and sections
             for Bootstrap's containers &mdash; see
@@ -173,6 +179,14 @@
                 <span class="text-body-secondary">Saving the html as the user edits, through the editor&rsquo;s events</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="adapter.html">
+                <div class="d-flex justify-content-between">
+                    <strong>The jQuery API</strong>
+                    <code class="text-body-secondary">adapter.html</code>
+                </div>
+                <span class="text-body-secondary">A page written for grid-editor 6, running unchanged through grideditor.jquery.js</span>
+            </a>
+
         </div>
 
         <p class="text-body-secondary">