@themarioga/grid-editor 6.0.0 → 7.1.0

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">

package/example/locale.html

@@ -8,20 +8,19 @@
     <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, then the locales the page offers. English is
-         built into the plugin; every other language is a file of its own. -->
+         built into the editor; every other language is a file of its own. -->
     <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/locales/grideditor.es.js"></script>
 
     <script>
-        $(function() {
-            $('#myGrid').gridEditor({
+        document.addEventListener('DOMContentLoaded', function() {
+            var editor = new GridEditor('#myGrid', {
                 new_row_layouts: [[12], [6,6], [9,3]],
                 content_types: [],
                 locale: 'es',
@@ -32,8 +31,8 @@
             });
 
             // Switching language at runtime re-renders the controls
-            $('#language').on('change', function() {
-                $('#myGrid').gridEditor('setLocale', this.value);
+            document.getElementById('language').addEventListener('change', function() {
+                editor.setLocale(this.value);
             });
         });
     </script>

package/example/plugins.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,7 +16,7 @@
     <!-- The editor, and the plugins this page offers. Loading a file is what
          makes its feature available; nothing here is in the main bundle. -->
     <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.tabs.min.js"></script>
     <script src="../dist/plugins/grideditor.accordion.min.js"></script>
     <script src="../dist/plugins/grideditor.popup.min.js"></script>
@@ -27,17 +26,17 @@
     <!-- And one written here, to show what a plugin of your own takes. It is
          a container type: a bootstrap alert whose body is an editable region. -->
     <script id="callout-plugin">
-        (function($) {
+        (function() {
 
             // A plugin brings its own strings
-            $.extend($.fn.gridEditor.locales.en, {
+            Object.assign(GridEditor.locales.en, {
                 'container.add_callout': 'Callout',
                 'container.callout_title': 'Heads up',
             });
 
             // Registered under the type it builds, and called once per editor
-            // with the handle it works through
-            $.fn.gridEditor.containers.callout = function(ge) {
+            // with the handle it works through. The handle hands out elements.
+            GridEditor.containers.callout = function(ge) {
 
                 return {
                     // The toolbar button's label
@@ -46,21 +45,31 @@
                     // A detached container. data-ge-container is what the
                     // editor recognises: never a class, so restyling is free.
                     create: function(options) {
-                        var callout = $('<div class="alert alert-primary" role="alert" />')
-                            .append($('<h4 class="alert-heading" />')
-                                .append($('<span class="ge-pane-label" />')
-                                    .text(options.title || ge.t('container.callout_title'))))
-                            .append(ge.defaultRegion())
-                        ;
-
-                        return $('<div />').attr('data-ge-container', 'callout').append(callout);
+                        var label = document.createElement('span');
+                        label.className = 'ge-pane-label';
+                        label.textContent = options.title || ge.t('container.callout_title');
+
+                        var heading = document.createElement('h4');
+                        heading.className = 'alert-heading';
+                        heading.appendChild(label);
+
+                        var callout = document.createElement('div');
+                        callout.className = 'alert alert-primary';
+                        callout.setAttribute('role', 'alert');
+                        callout.appendChild(heading);
+                        callout.appendChild(ge.defaultRegion());
+
+                        var container = document.createElement('div');
+                        container.setAttribute('data-ge-container', 'callout');
+                        container.appendChild(callout);
+                        return container;
                     },
 
                     // Editing furniture on, and off again. Anything mark()
                     // adds, unmark() has to take away: what is left is what
                     // getHtml hands back.
                     mark: function(container) {
-                        ge.makeLabelEditable(ge.labelIn(container.find('.alert-heading')));
+                        ge.makeLabelEditable(ge.labelIn(container.querySelector('.alert-heading')));
                     },
 
                     unmark: function(container) {
@@ -69,21 +78,26 @@
                 };
             };
 
-        })(jQuery);
+        })();
     </script>
 
     <script>
-        $(function() {
+        document.addEventListener('DOMContentLoaded', function() {
             // Show the plugin written above as the page's own source
-            $('#callout-source').text($('#callout-plugin').text().trim().replace(/^ {8}/gm, ''));
+            document.getElementById('callout-source').textContent =
+                document.getElementById('callout-plugin').textContent.trim().replace(/^ {8}/gm, '');
 
             function activePlugins() {
-                return $('.plugin-choice:checked').map(function() { return this.value; }).get();
+                return Array.prototype.map.call(document.querySelectorAll('.plugin-choice:checked'), function(box) {
+                    return box.value;
+                });
             }
 
             function start() {
-                $('#myGrid').gridEditor('destroy');
-                $('#myGrid').gridEditor({
+                var running = GridEditor.get('#myGrid');
+                if (running) { running.destroy(); }
+
+                new GridEditor('#myGrid', {
                     new_row_layouts: [[12], [6, 6]],
                     content_types: [],
 
@@ -92,16 +106,17 @@
                     plugins: activePlugins(),
                 });
 
-                $('#in-use').text(activePlugins().join(', ') || 'none');
-                $('#registered').text(
-                    Object.keys($.fn.gridEditor.containers).concat(
-                        Object.keys($.fn.gridEditor.features)).sort().join(', ')
-                );
+                document.getElementById('in-use').textContent = activePlugins().join(', ') || 'none';
+                document.getElementById('registered').textContent =
+                    Object.keys(GridEditor.containers).concat(
+                        Object.keys(GridEditor.features)).sort().join(', ');
             }
 
-            $('.plugin-choice').on('change', start);
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            document.querySelectorAll('.plugin-choice').forEach(function(box) {
+                box.addEventListener('change', start);
+            });
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = GridEditor.get('#myGrid').getHtml();
             });
 
             start();

package/example/summernote.html

@@ -7,7 +7,8 @@
     <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 -->
+    <!-- Javascript dependencies. jQuery is summernote's: the editor itself
+         does not need it, and this page loads no jQuery adapter -->
     <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>
     
@@ -20,14 +21,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.summernote.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], [3, 9]],
                 content_types: ['summernote'],
                 summernote: {
@@ -43,7 +44,7 @@
             });
             
             // Get resulting html
-            var html = $('#myGrid').gridEditor('getHtml');
+            var html = editor.getHtml();
             console.log(html);
         });
     </script>

package/example/utilities.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,7 +16,7 @@
     <!-- The editor, and the utility plugins. Each is a file of its own, and
          loading it is what puts its field in the settings panels. -->
     <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.visibility.min.js"></script>
     <script src="../dist/plugins/grideditor.order.min.js"></script>
     <script src="../dist/plugins/grideditor.alignment.min.js"></script>
@@ -29,9 +28,12 @@
     <script src="../dist/plugins/grideditor.float.min.js"></script>
 
     <script>
-        $(function() {
+        document.addEventListener('DOMContentLoaded', function() {
+            var grid = document.getElementById('myGrid');
+            var editor;
+
             function start(panel) {
-                $('#myGrid').gridEditor({
+                editor = new GridEditor(grid, {
                     new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
                     content_types: [],
 
@@ -44,24 +46,26 @@
                     settings_panel: panel,
                 });
             }
-            start($('#panel').val());
+            start(document.getElementById('panel').value);
 
             // The same canvas, started again with its settings elsewhere
-            $('#panel').on('change', function() {
-                var html = $('#myGrid').gridEditor('getHtml');
-                $('#myGrid').gridEditor('destroy').html(html);
+            document.getElementById('panel').addEventListener('change', function() {
+                var html = editor.getHtml();
+                editor.destroy();
+                grid.innerHTML = html;
                 start(this.value);
             });
 
             // Every change to a utility is announced, like any other operation
-            $('#myGrid').on('grideditor:after-utility', function(e, payload) {
-                $('#last').text(payload.family + ' at ' + payload.breakpoint + ': ' +
+            grid.addEventListener('grideditor:after-utility', function(e) {
+                var payload = e.detail;
+                document.getElementById('last').textContent = payload.family + ' at ' + payload.breakpoint + ': ' +
                     (payload.from === null ? 'default' : payload.from) + ' → ' +
-                    (payload.to === null ? 'inherit' : payload.to));
+                    (payload.to === null ? 'inherit' : payload.to);
             });
 
-            $('#output').on('click', function() {
-                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
             });
         });
     </script>

package/example/wrap_content.html

@@ -8,42 +8,45 @@
     <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>
-        $(function() {
-            var grid = $('#myGrid');
+        document.addEventListener('DOMContentLoaded', function() {
+            var grid = document.getElementById('myGrid');
+            var show = function(id, text) { document.getElementById(id).textContent = text.trim(); };
 
             // 1. The markup as the page wrote it, captured before the editor
             //    touches it
-            $('#before').text(grid.html().trim());
+            show('before', grid.innerHTML);
 
             // 2. The editor finds no .row in there, so it wraps everything
             //    into one row with a single full-width column
-            grid.gridEditor({
+            var editor = new GridEditor(grid, {
                 new_row_layouts: [[12], [6, 6], [9, 3], [3, 9]],
                 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' } },
             });
 
             // 3. What getHtml hands back: the same content, now a grid, with
             //    the marking the editor needs to read it back
             // 4. What getPlainHtml hands back: the same, without that marking
             function showResult() {
-                $('#after').text(grid.gridEditor('getHtml').trim());
-                $('#plain').text(grid.gridEditor('getPlainHtml').trim());
+                show('after', editor.getHtml());
+                show('plain', editor.getPlainHtml());
             }
             showResult();
-            $('#refresh').on('click', showResult);
+            document.getElementById('refresh').addEventListener('click', showResult);
         });
     </script>
 

package/package.json

@@ -3,29 +3,28 @@
     "build": "grunt",
     "lint": "eslint .",
     "start": "npm run watch",
-    "test": "node test/run.js",
+    "test": "tsc -p test/types && node test/run.js",
     "test:vendor": "node test/vendor/update.js",
-    "watch": "grunt watch"
+    "watch": "grunt watch",
+    "test:types": "tsc -p test/types"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/themarioga/grid-editor.git"
   },
   "devDependencies": {
+    "esbuild": "^0.28.2",
     "eslint": "^9.39.5",
     "grunt": "^1.6.3",
     "grunt-cli": "^1.5.0",
-    "grunt-contrib-clean": "^2.0.1",
-    "grunt-contrib-concat": "^2.1.0",
-    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-cssmin": "^5.0.0",
     "grunt-contrib-less": "^3.0.0",
-    "grunt-contrib-uglify": "^5.2.2",
     "grunt-contrib-watch": "^1.1.0",
-    "sortablejs": "^1.15.6"
+    "sortablejs": "^1.15.6",
+    "typescript": "^7.0.2"
   },
   "name": "@themarioga/grid-editor",
-  "description": "Visual javascript editor for the bootstrap grid system, written as a jQuery plugin.",
+  "description": "Visual javascript editor for the bootstrap grid system, in plain DOM: no jQuery needed.",
   "bugs": {
     "url": "https://github.com/themarioga/grid-editor/issues"
   },
@@ -34,13 +33,48 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "6.0.0",
-  "main": "dist/jquery.grideditor.js",
+  "version": "7.1.0",
+  "main": "dist/grideditor.js",
+  "module": "dist/grideditor.esm.js",
+  "types": "dist/grideditor.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/grideditor.d.ts",
+      "import": "./dist/grideditor.esm.js",
+      "default": "./dist/grideditor.js"
+    },
+    "./jquery": "./dist/grideditor.jquery.js",
+    "./plugins/*": {
+      "import": "./dist/plugins/grideditor.*.esm.js",
+      "default": "./dist/plugins/grideditor.*.js"
+    },
+    "./locales/*": {
+      "import": "./dist/locales/grideditor.*.esm.js",
+      "default": "./dist/locales/grideditor.*.js"
+    },
+    "./css": "./dist/grideditor.css",
+    "./css/min": "./dist/grideditor.min.css",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/plugins/*",
+    "./dist/locales/*",
+    "./dist/grideditor.js",
+    "./dist/grideditor.min.js",
+    "./dist/grideditor.bundle.min.js",
+    "./dist/grideditor.jquery.js",
+    "./dist/grideditor.jquery.min.js",
+    "*.css",
+    "./src/js/**/*.js"
+  ],
   "files": [
     "dist",
+    "types",
     "src",
     "docs",
     "example",
+    "!example/angular",
     "AUTO_SAVE.md",
     "BUILDING.md",
     "CHANGELOG.md",
@@ -50,8 +84,6 @@
     "example": "example"
   },
   "keywords": [
-    "jquery-plugin",
-    "ecosystem:jquery",
     "bootstrap5",
     "grid",
     "bootstrap-grid",