@themarioga/grid-editor 3.1.0

package/docs/locale-keys.md

@@ -0,0 +1,140 @@
+grid-editor locale keys
+=======================
+
+Every user-visible string in grid-editor goes through `t(key)`, and every key
+is listed here. The list is hand-written on purpose — it is prose a reviewer
+can read — and `test/locales.js` holds it to the source in both directions: a
+key in the code that is missing here fails the build, and so does a key here
+that no longer exists in the code.
+
+English lives in `$.fn.gridEditor.locales.en`, inside the main bundle, and is
+where every lookup ends. Shipped locales (currently `es`) translate all of it,
+and `test/locales.js` fails the build when one falls behind. The files are in
+`src/js/locales/`.
+
+Lookup order for a key is `locale_strings` → `locales[locale]` → `locales.en` →
+the key itself. A key nothing defines is shown as the key, and logs once.
+
+`{name}` placeholders are filled from the parameters the call passes.
+
+
+tool.*
+------
+
+The tools in a drawer, and the buttons in the toolbar above the canvas.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `tool.move` | Move | Drag handle in the row and column drawers |
+| `tool.settings` | Settings | Opens the settings panel in a drawer |
+| `tool.add_row` | Add row | Column drawer, adds a nested row |
+| `tool.add_column` | Add column\n(hold to choose the width) | Row drawer. A click adds a column, holding the tool offers the widths. Two lines |
+| `tool.column_size` | {size} of 12 | Tooltip of a width in that picker |
+| `tool.delete_row` | Remove row | Row drawer |
+| `tool.delete_column` | Remove col | Column drawer |
+| `tool.delete_element` | Remove element | Element drawer |
+| `tool.delete_container` | Remove container | Container drawer |
+| `tool.delete_pane` | Remove pane | Drawer of a tab or an accordion item |
+| `tool.rename` | Double click to rename | Tooltip of a pane's label, which is edited in place |
+| `tool.toggle_popup` | Fold this popup away while editing | Popup drawer. Editing shows a popup unfolded, and this folds it away |
+| `tool.element_info` | Element: {name} | Tooltip of the element drawer's info tool. `{name}` is the element's `data-ge-label`, its `data-ge-element` type, or both |
+| `tool.column_narrower` | Make column narrower\n(hold shift for min) | Column drawer, the `-` tool. Two lines |
+| `tool.column_wider` | Make column wider\n(hold shift for max) | Column drawer, the `+` tool. Two lines |
+| `tool.indent_decrease` | Decrease indent\n(hold shift for none) | Column drawer, removes offset units |
+| `tool.indent_increase` | Increase indent\n(hold shift for max) | Column drawer, adds offset units |
+| `tool.edit_source` | Edit Source Code | Toolbar, swaps the canvas for its html |
+| `tool.preview` | Preview | Toolbar, hides the editing furniture while held |
+| `tool.id_placeholder` | id | Placeholder of the id input in the settings panel |
+| `tool.id_title` | Set a unique identifier | Tooltip of that input |
+| `tool.classes_placeholder` | classes | Placeholder of the css class input beside it |
+| `tool.classes_title` | Css classes, separated by spaces | Tooltip of that input |
+| `tool.toggle_class` | Toggle "{label}" styling | Tooltip of a `row_classes`/`col_classes` button. `{label}` is the host's label |
+
+
+row.*
+-----
+
+| Key | English | Where |
+| --- | --- | --- |
+| `row.add` | Add row {layout} | Tooltip of each toolbar add-row button. `{layout}` is the column layout, as in `6-6` |
+
+
+container.*
+-----------
+
+The containers: tabs, accordions and popups, and the panes inside them.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `container.add_tabs` | Tabs | Toolbar button that adds a tabs container |
+| `container.add_tab` | Add tab | Container drawer, adds a pane |
+| `container.tab_label` | Tab {number} | Label of a new tab. `{number}` is its position |
+| `container.add_accordion` | Accordion | Toolbar button that adds an accordion |
+| `container.add_accordion_item` | Add item | Container drawer, adds an item |
+| `container.accordion_label` | Item {number} | Label of a new accordion item |
+| `container.add_popup` | Popup | Toolbar button that adds a popup |
+| `container.popup_title` | Title | Title of a new popup, in its modal header |
+| `container.popup_trigger` | Open | Label of the button a popup makes to open itself |
+
+
+confirm.*
+---------
+
+Shown by `window.confirm` unless the host sets `confirm_delete: false` or
+cancels `grideditor:before-delete` and asks in its own way.
+
+The question is asked in a Bootstrap modal the editor builds outside the
+canvas; a page that loaded Bootstrap's css but not its javascript gets the
+browser's own confirm instead.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `confirm.title` | Confirm | Title of the confirmation modal |
+| `confirm.ok` | Delete | The button that goes through with it |
+| `confirm.cancel` | Cancel | The button that does not, and the close button's label |
+| `confirm.delete_row` | Delete row? | Before a row is removed |
+| `confirm.delete_column` | Delete column? | Before a column is removed |
+| `confirm.delete_element` | Delete element? | Before an element is removed |
+| `confirm.delete_container` | Delete this container and everything in it? | Before a container is removed |
+| `confirm.delete_tab` | Delete this tab and everything in it? | Before a tab and its pane are removed |
+| `confirm.delete_accordion_item` | Delete this item and everything in it? | Before an accordion item is removed |
+
+
+view.*
+------
+
+The layout mode dropdown: one key per view the build offers, used for both the
+dropdown item and the button that shows the current mode. The key is the view
+key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
+— they share a line with the other toolbar buttons.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `view.all` | All sizes | The default view, which writes every breakpoint at once |
+| `view.xs` | Phone | Layout mode writing `col-*` and `offset-*` |
+| `view.sm` | Tablet | Layout mode writing `col-sm-*` and `offset-sm-*` |
+| `view.md` | Small desktop | Layout mode writing `col-md-*` and `offset-md-*` |
+| `view.lg` | Desktop | Layout mode writing `col-lg-*` and `offset-lg-*` |
+| `view.xl` | Large desktop | Layout mode writing `col-xl-*` and `offset-xl-*` |
+| `view.xxl` | Widescreen | Layout mode writing `col-xxl-*` and `offset-xxl-*` |
+
+
+error.*
+-------
+
+Console messages for the host developer, not the page's user, but translated
+all the same: the developer reading them is the one who chose the locale.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `error.tinymce_missing` | tinyMCE not available! … | `content_types: ['tinymce']` with no tinyMCE loaded |
+| `error.ckeditor_missing` | CKEditor not available! … | `content_types: ['ckeditor']` with no CKEditor loaded |
+| `error.summernote_missing` | Summernote not available! … | `content_types: ['summernote']` with no Summernote loaded |
+
+
+Namespaces not in use yet
+-------------------------
+
+`element.*` and `column.*` are reserved and have no keys yet: the element and
+offset strings that exist live under `tool.*` and `confirm.*`, next to the
+tools they belong to.

package/docs/plugins.md

@@ -0,0 +1,163 @@
+Writing a plugin
+================
+
+Tabs, accordions, popups and the element level controls are not built into
+grid-editor: each is a file you load beside it, and loading the file is what
+turns the feature on.
+
+```html
+<script src="dist/jquery.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.elements.min.js"></script>
+```
+
+There are two kinds. A **container plugin** builds a type of container — it
+registers under `$.fn.gridEditor.containers`, and the toolbar offers a button
+for it. A **feature plugin** is anything else the editor can do —
+`$.fn.gridEditor.features`, hooks into the canvas, and may contribute methods.
+Both are factories called once per editor with the same handle.
+
+The `plugins` setting names which of the loaded ones to use:
+
+```javascript
+$('#myGrid').gridEditor({ plugins: ['tabs', 'elements'] });
+```
+
+Every loaded plugin is used when the setting is not given. A name that was
+never loaded logs one warning and changes nothing else. A container in the
+markup whose plugin is not loaded is left alone: no drawer, no tools, and
+`getHtml` gives it back as it found it.
+
+[example/plugins.html](../example/plugins.html) is this page as a working
+editor: the shipped plugins, a container plugin written in the page itself,
+and a checkbox per plugin so you can watch the toolbar and the canvas change.
+
+
+The shape of a plugin
+---------------------
+
+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, {
+    'container.add_carousel': 'Carousel',
+    'container.carousel_label': 'Slide {number}',
+});
+
+$.fn.gridEditor.containers.carousel = function(ge) {
+
+    function addSlideTo(container, options) { … }
+
+    return {
+        labelKey: 'container.add_carousel',   // the toolbar button's label
+        addPaneKey: 'container.add_slide',    // the drawer's add pane tool
+        paneKind: 'slide',                    // the kind its panes report
+
+        create: function(options) { … },              // returns the container
+        addPane: addSlideTo,                          // returns the new pane
+        mark: function(container) { … },              // editing furniture on
+        unmark: function(container) { … },            // and off again
+        afterPaneMove: function(container, pane) { … },  // optional
+        tools: function(drawer, container) { … },        // optional, extra tools
+        onInit: function() { … },                        // optional, per canvas init
+        onDeinit: function() { … },                      // optional, per canvas deinit
+    };
+};
+
+})(jQuery);
+```
+
+- **`create(options)`** returns a detached container. It must carry
+  `data-ge-container="<type>"`: that attribute, and never a class, is how the
+  editor recognises one.
+- **`mark(container)`** is called on every `init`. It adds the drawers, labels
+  and editing attributes, and must be safe to run twice.
+- **`unmark(container)`** is called on every `deinit`, which is what `getHtml`
+  runs before reading the markup. Whatever `mark` added comes off here. What
+  is left is what the host ships.
+- **`onInit`/`onDeinit`** are for work that is about the whole canvas rather
+  than one container — the popup plugin wires up the host's
+  `data-ge-popup-target` triggers there.
+
+
+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.
+
+| | |
+| --- | --- |
+| `ge.canvas` | The canvas element |
+| `ge.settings` | The live settings, for the host's own tool lists |
+| `ge.t(key, params)` | A string from the locale |
+| `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.addSettingsTool(drawer, node, presets)` | The gear, and the id and class panel it opens |
+| `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 |
+| `ge.createPaneControls(pane, kind, hostTools, confirmText, remove)` | The drawer a pane gets: move, the host's tools, delete |
+| `ge.makeLabelEditable(label)` | Rename in place, with the Bootstrap toggle suspended while typing |
+| `ge.labelIn(button)` | The label span inside a button, wrapped if it is not already |
+| `ge.unwrapLabels(scope)` | Take those wrappers off again, for `unmark` |
+| `ge.suspendToggles(scope)` / `ge.resumeToggles(scope)` | Move `data-bs-toggle` aside while editing, and back on the way out |
+| `ge.emit(name, payload)` | Fire an event and its callbacks; false means a handler canceled |
+| `ge.payloadFor(kind, node, extra)` | Build a payload the documented way |
+| `ge.operate(body)` | Run `body` as one operation, so a handler calling back in is queued |
+
+The add, delete and move events for a container and its panes are fired by the
+editor, not by the plugin: `createPaneControls` handles a pane's delete, and
+the toolbar and the drawer handle the adds.
+
+
+Feature plugins
+---------------
+
+A feature plugin returns hooks rather than a container definition:
+
+```javascript
+$.fn.gridEditor.features.elements = function(ge) {
+    return {
+        methods: { createElement: … },   // added to the editor's own methods
+        kindOf: function(node) { … },    // what an event calls this node
+        onInit: function() { … },        // every init: put the furniture in
+        onDeinit: function() { … },      // every deinit: take it out again
+        onContentReady: function(area) { … },  // a rich text editor just took over
+        onSortable: function(shared) { … },    // make your own sortables
+    };
+};
+```
+
+- **`onSortable(shared)`** is handed the options the editor's own sortables
+  use — the handle, the cancel selector, the start and stop handlers — so a
+  plugin's sortables answer to `drag_handle` and fire the move events like
+  everything else.
+- **`methods`** are added to the instance handle. A method the editor
+  documents but a plugin implements — `createElement` — warns and returns null
+  when the plugin is not loaded.
+- **`kindOf(node)`** returns the `kind` an event should carry for a node the
+  plugin owns, or null.
+
+The core's own sortables and the plugins' are taken down together: jQuery UI
+marks what it made, so a plugin does not have to unmake it.
+
+
+What the editor does for you
+----------------------------
+
+Panes are ordinary canvas regions. `init()` walks the whole canvas, so rows,
+columns, content areas and elements nest inside a pane exactly as they do at
+the top level, and containers nest inside each other, with nothing asked of
+the plugin.
+
+Sorting is the one thing a plugin sets up itself, in `mark`, because only the
+plugin knows which of its parts move: the tabs plugin makes its strip sortable
+and puts the panes back in strip order in `afterPaneMove`.

package/example/autosave.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Grid Editor example - auto save and import/export</title>
+
+    <!-- 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">
+
+    <!-- JS dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript -->
+    <script src="../dist/jquery.grideditor.min.js"></script>
+</head>
+<body>
+<div class="container py-3">
+    <h2>Grid Editor example - auto save and import/export</h2>
+    <div class="mb-3">
+        <button id="exportBtn" class="btn btn-primary">Export layout</button>
+        <input type="file" id="importInput" class="btn btn-secondary" accept=".html">
+        <button id="resetBtn" class="btn btn-danger">Clear draft</button>
+    </div>
+
+    <form id="editorForm">
+        <div id="myGrid"></div>
+    </form>
+</div>
+<script>
+    const LOCAL_STORAGE_KEY = 'gridEditorLayout';
+
+    function initEditor(initialContent = '') {
+        const $grid = $('#myGrid');
+        $grid.html(initialContent);
+        $grid.gridEditor({
+            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);
+    }
+
+    $(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());
+
+        setInterval(autoSave, 5000);
+
+        $('#exportBtn').on('click', () => {
+            const html = $('#myGrid').gridEditor('getHtml');
+            const blob = new Blob([html], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'layout.html';
+            a.click();
+            URL.revokeObjectURL(url);
+        });
+
+        $('#importInput').on('change', function (e) {
+            const file = e.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                $('#myGrid').gridEditor('remove');
+                initEditor(e.target.result);
+                autoSave();
+            };
+            reader.readAsText(file);
+        });
+
+        $('#resetBtn').on('click', function () {
+            localStorage.removeItem(LOCAL_STORAGE_KEY);
+            location.reload();
+        });
+    });
+</script>
+</body>
+</html>

package/example/basic.html

@@ -0,0 +1,93 @@
+<!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 -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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>
+    
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript -->
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    
+    <script>
+        $(function() {
+            // Initialize grid editor
+            $('#myGrid').gridEditor({
+				drag_handle: 'drawer',
+                new_row_layouts: [[12], [6,6], [9,3]],
+                content_types: ['tinymce'],
+            });
+            
+            // // Get resulting html
+            // var html = $('#myGrid').gridEditor('getHtml');
+            // console.log(html);
+        });
+    </script>
+    
+    <title>Grid Editor example</title>
+</head>
+<body>
+
+    <div class="container">
+        <div id="myGrid">
+        
+            <div class="row">
+                <div class="col-lg-12">
+                    <h1>Lorem ipsum dolor sit amet, consectetur</h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit exercitationem eaque aperiam rem quia quibusdam dolor ducimus quo similique eos pariatur nostrum aliquam nam eius, doloremque quis voluptatum unde. Porro voluptates aspernatur voluptate ipsam, magni vero. Accusamus, iusto tempore id!</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae laboriosam, excepturi quas.</p>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-lg-4">
+                    <h2>Lorem ipsum dolor</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis vel aliquam aspernatur dolor placeat totam saepe perferendis. Odio quia vel sed eveniet cupiditate, illum doloremque sint veniam eum? Corporis?</p>
+                </div>
+                <div class="col-lg-4">
+                    <h2>Pariatur reprehenderit</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo adipisci ipsa, consequuntur cum, sunt dolores veniam. Enim inventore in dolore deserunt vitae sequi nemo!</p>
+                </div>
+                <div class="col-lg-4">
+                    <h2>Pariatur reprehenderit</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea excepturi ducimus numquam aut error corporis aspernatur ipsum quos eius culpa!</p>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-lg-8">
+                    <h2>Lorem ipsum dolor.</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro distinctio atque molestiae optio, consequuntur? Iusto ratione cumque dolor aut dolore!</p>
+                    
+                    <div class="row">
+                        <div class="col-lg-6">
+                            <hr>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis facilis molestias voluptatum laudantium fuga ratione tempora rem dolor dicta rerum vero ut, suscipit ex qui amet quam vel cupiditate quaerat minus assumenda reiciendis, similique omnis delectus! Autem, repudiandae cumque eaque?</p>
+                        </div>
+                        <div class="col-lg-6">
+                            <hr>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestiae quaerat illum, consequuntur iusto aspernatur quam provident? Possimus!</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="col-lg-4">
+                    <h2>Lusto ratione</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis fugit quasi officiis id laudantium error aut ut aperiam dicta saepe non vel, cupiditate illum ipsam velit deleniti natus incidunt impedit molestias dolore quos dolores enim. Aliquid ipsam eaque consequuntur quaerat, suscipit a in. Praesentium repudiandae quibusdam recusandae sequi eligendi quos, dignissimos, officiis officia minima necessitatibus eaque consequatur in id adipisci qui minus voluptatum quae debitis, quas maxime iure. Tempore vero unde quia reiciendis ad beatae voluptate omnis, ipsa expedita ab, quasi, neque. Doloribus, pariatur. Aut hic voluptate.</p>
+                </div>
+            </div>
+            
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+
+</body>
+</html>

package/example/breakpoints.html

@@ -0,0 +1,94 @@
+<!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 -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.14.2/jquery-ui.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="../dist/jquery.grideditor.min.js"></script>
+
+    <script>
+        $(function() {
+            $('#myGrid').gridEditor({
+                new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
+                content_types: [],
+
+                // The default: every size and offset change is written to all
+                // six breakpoints at once. Switch the dropdown to a single
+                // breakpoint to tune that one on its own.
+                default_view: 'all',
+
+                // A host that wants the old three-mode feel can offer three
+                // layout_modes: ['all', 'lg', 'sm', 'xs'],
+            });
+
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('getHtml'));
+            });
+        });
+    </script>
+
+    <title>Grid Editor breakpoints example</title>
+</head>
+<body>
+
+    <div class="container">
+
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Six breakpoints, and "all sizes"</h1>
+                <p class="form-text">
+                    The dropdown on the right of the toolbar picks the layout
+                    mode. In <strong>All sizes</strong> the canvas renders as
+                    the browser would, and the width and indent tools write
+                    every breakpoint at once. Pick a single breakpoint and the
+                    canvas narrows to that tier's width, that tier's classes
+                    become the effective ones whatever your window is doing,
+                    and the tools write only that tier.
+                </p>
+                <p class="form-text">
+                    The row below starts with a different size per tier, so
+                    switching modes visibly changes it: 3 units on phone, 4 on
+                    tablet, 6 on desktop, 8 on widescreen. The second row shows
+                    offsets, which are indented per tier in the same way.
+                </p>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="row">
+                <div class="col-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8">
+                    <h2 class="h5">Sized per tier</h2>
+                    <p>3 on phone, 4 on tablet, 5 on small desktop, 6 on desktop, 7 on large, 8 on widescreen.</p>
+                </div>
+                <div class="col-9 col-sm-8 col-md-7 col-lg-6 col-xl-5 col-xxl-4">
+                    <h2 class="h5">And the rest of the row</h2>
+                    <p>The two columns always add up to twelve units.</p>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-8 offset-2 col-lg-4 offset-lg-8">
+                    <h2 class="h5">Indented</h2>
+                    <p>Centred on phone, pushed to the right on desktop.</p>
+                </div>
+            </div>
+
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+
+</body>
+</html>