@themarioga/grid-editor 5.1.1 → 5.2.0

package/dist/plugins/grideditor.tinymce.js

@@ -0,0 +1,157 @@
+/**
+ * tinyMCE for grid-editor's content areas.
+ *
+ * A text editor plugin: load this file after the editor, and tinyMCE 6
+ * after or before it, and content_types: ['tinymce'] edits each content area
+ * with an inline tinyMCE. What it can ask the editor for is the handle its
+ * factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="tinymce/tinymce.min.js"></script>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
+ *
+ * Up to 6.0 the main bundle carries a copy of this file too.
+ */
+(function($) {
+
+    // tinyMCE snapshots the target element's attributes when an inline editor is
+    // created and restores them on remove(), so this has to run *after* remove()
+    // to keep the grid editor's own class and tinyMCE's leftovers off the element.
+    function cleanUp(contentArea) {
+        contentArea
+            .removeClass('active')
+            .removeClass('ge-rte-active')
+            .removeAttr('id')
+            .removeAttr('style')
+            .removeAttr('spellcheck')
+            .removeAttr('contenteditable')
+            .removeAttr('data-mce-style')
+        ;
+    }
+
+    var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
+
+    $.fn.gridEditor.texts.tinymce = function(ge) {
+        return {
+            initialContent: INITIAL_CONTENT,
+            missingKey: 'error.tinymce_missing',
+
+            available: function() { return !!window.tinymce; },
+
+            start: function(contentAreas) {
+                var settings = ge.settings;
+                var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
+
+                contentAreas.each(function() {
+                    var contentArea = $(this);
+                    if (contentArea.hasClass('active')) { return; }
+
+                    if (contentArea.html() == INITIAL_CONTENT) {
+                        contentArea.html('');
+                    }
+                    contentArea.addClass('active');
+
+                    var configuration = $.extend({
+                        // tinyMCE's own "Upgrade" badge in the menubar. Off by
+                        // default because an inline editor here is a column of
+                        // someone's page, not tinyMCE's own interface; a host that
+                        // wants it back passes promotion: true.
+                        promotion: false,
+                    }, userConfig, {
+                        target: this,
+                        inline: true,
+                        init_instance_callback: function(editor) {
+                            // deinit ran before this init finished, so tear it down again
+                            if (contentArea.data('ge-tinymce-pending-remove')) {
+                                contentArea.removeData('ge-tinymce-pending-remove');
+                                editor.remove();
+                                // deinit already ran and cannot clean up after this
+                                // late remove(), so do it here instead
+                                cleanUp(contentArea);
+                                return;
+                            }
+
+                            contentArea.data('ge-tinymce', editor);
+
+                            // The editor rewrote what is inside this content area
+                            // while it took it over, so whatever the grid editor
+                            // had in there is gone. Saying so lets it put its own
+                            // furniture back.
+                            ge.textReady(contentArea);
+
+                            // Undo and redo rewrite it too, from snapshots that
+                            // leave out whatever is marked data-mce-bogus - an
+                            // element's drawer among them - so it goes back in
+                            // after each of those as well
+                            editor.on('Undo Redo', function() {
+                                ge.textReady(contentArea);
+                            });
+
+                            // The inline toolbar is laid out against the element's
+                            // geometry at the moment tinyMCE draws it, and an
+                            // element that has just appeared - a tab pane, an
+                            // accordion body, a column whose width is still
+                            // settling - may not have its own width yet. Asking
+                            // for the ui again once the browser has laid the frame
+                            // out measures it as it now is, instead of leaving a
+                            // toolbar wrapped into a narrow column.
+                            window.requestAnimationFrame(function() {
+                                if (editor.removed || !editor.ui || !editor.ui.show) { return; }
+
+                                editor.ui.show();
+                            });
+
+                            // And again whenever the user comes back to this
+                            // editor: by then the element may have been resized,
+                            // hidden and shown again - a tab switched away from
+                            // and back, a column made narrower - and the toolbar
+                            // is only ever as right as its last measurement.
+                            editor.on('focus', function() {
+                                window.requestAnimationFrame(function() {
+                                    if (editor.removed || !editor.ui || !editor.ui.show) { return; }
+
+                                    editor.ui.show();
+                                });
+                            });
+
+                            // Bring focus to text field
+                            editor.focus();
+
+                            // Call the original callbacks, if any were passed in the config
+                            if (userConfig.init_instance_callback) {
+                                userConfig.init_instance_callback.call(this, editor);
+                            }
+                            // 'oninit' is the pre-6 name, honoured so existing configs keep working
+                            if (userConfig.oninit) {
+                                userConfig.oninit.call(this, editor);
+                            }
+                        }
+                    });
+                    // We always edit the element we were handed, so a selector in the
+                    // user config would only fight with target
+                    delete configuration.selector;
+
+                    window.tinymce.init(configuration);
+                });
+            },
+
+            stop: function(contentAreas) {
+                contentAreas.filter('.active').each(function() {
+                    var contentArea = $(this);
+                    var editor = contentArea.data('ge-tinymce');
+
+                    if (editor) {
+                        contentArea.removeData('ge-tinymce');
+                        editor.remove();
+                    } else {
+                        // tinymce.init() is asynchronous, so the editor may not exist
+                        // yet. Leave a note for init_instance_callback to remove it.
+                        contentArea.data('ge-tinymce-pending-remove', true);
+                    }
+
+                    cleanUp(contentArea);
+                });
+            },
+        };
+    };
+})(jQuery);

package/dist/plugins/grideditor.tinymce.min.js

@@ -0,0 +1,2 @@
+(o=>{function a(e){e.removeClass("active").removeClass("ge-rte-active").removeAttr("id").removeAttr("style").removeAttr("spellcheck").removeAttr("contenteditable").removeAttr("data-mce-style")}var c="<p>Lorem ipsum dolores</p>";o.fn.gridEditor.texts.tinymce=function(n){return{initialContent:c,missingKey:"error.tinymce_missing",available:function(){return!!window.tinymce},start:function(e){var t=n.settings,i=t.tinymce&&t.tinymce.config?t.tinymce.config:{};e.each(function(){var e,t=o(this);t.hasClass("active")||(t.html()==c&&t.html(""),t.addClass("active"),delete(e=o.extend({promotion:!1},i,{target:this,inline:!0,init_instance_callback:function(e){t.data("ge-tinymce-pending-remove")?(t.removeData("ge-tinymce-pending-remove"),e.remove(),a(t)):(t.data("ge-tinymce",e),n.textReady(t),e.on("Undo Redo",function(){n.textReady(t)}),window.requestAnimationFrame(function(){!e.removed&&e.ui&&e.ui.show&&e.ui.show()}),e.on("focus",function(){window.requestAnimationFrame(function(){!e.removed&&e.ui&&e.ui.show&&e.ui.show()})}),e.focus(),i.init_instance_callback&&i.init_instance_callback.call(this,e),i.oninit&&i.oninit.call(this,e))}})).selector,window.tinymce.init(e))})},stop:function(e){e.filter(".active").each(function(){var e=o(this),t=e.data("ge-tinymce");t?(e.removeData("ge-tinymce"),t.remove()):e.data("ge-tinymce-pending-remove",!0),a(e)})}}}})(jQuery);
+//# sourceMappingURL=grideditor.tinymce.min.js.map

package/dist/plugins/grideditor.tinymce.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.tinymce.min.js","sources":["../../src/js/plugins/grideditor.tinymce.js"],"names":["$","cleanUp","contentArea","removeClass","removeAttr","INITIAL_CONTENT","fn","gridEditor","texts","tinymce","ge","initialContent","missingKey","available","window","start","contentAreas","settings","userConfig","config","each","configuration","this","hasClass","html","addClass","extend","promotion","target","inline","init_instance_callback","editor","data","removeData","remove","textReady","on","requestAnimationFrame","removed","ui","show","focus","call","oninit","selector","init","stop","filter","jQuery"],"mappings":"CAcUA,IAKN,SAASC,EAAQC,GACbA,EACKC,YAAY,QAAQ,EACpBA,YAAY,eAAe,EAC3BC,WAAW,IAAI,EACfA,WAAW,OAAO,EAClBA,WAAW,YAAY,EACvBA,WAAW,iBAAiB,EAC5BA,WAAW,gBAAgB,CAEpC,CAEA,IAAIC,EAAkB,6BAEtBL,EAAEM,GAAGC,WAAWC,MAAMC,QAAU,SAASC,GACrC,MAAO,CACHC,eAAgBN,EAChBO,WAAY,wBAEZC,UAAW,WAAa,MAAO,CAAC,CAACC,OAAOL,OAAS,EAEjDM,MAAO,SAASC,GACZ,IAAIC,EAAWP,EAAGO,SACdC,EAAcD,EAASR,SAAWQ,EAASR,QAAQU,OAAUF,EAASR,QAAQU,OAAS,GAE3FH,EAAaI,KAAK,WACd,IAQIC,EARAnB,EAAcF,EAAEsB,IAAI,EACpBpB,EAAYqB,SAAS,QAAQ,IAE7BrB,EAAYsB,KAAK,GAAKnB,GACtBH,EAAYsB,KAAK,EAAE,EAEvBtB,EAAYuB,SAAS,QAAQ,EAgF7B,OA9EIJ,EAAgBrB,EAAE0B,OAAO,CAKzBC,UAAW,CAAA,CACf,EAAGT,EAAY,CACXU,OAAQN,KACRO,OAAQ,CAAA,EACRC,uBAAwB,SAASC,GAEzB7B,EAAY8B,KAAK,2BAA2B,GAC5C9B,EAAY+B,WAAW,2BAA2B,EAClDF,EAAOG,OAAO,EAGdjC,EAAQC,CAAW,IAIvBA,EAAY8B,KAAK,aAAcD,CAAM,EAMrCrB,EAAGyB,UAAUjC,CAAW,EAMxB6B,EAAOK,GAAG,YAAa,WACnB1B,EAAGyB,UAAUjC,CAAW,CAC5B,CAAC,EAUDY,OAAOuB,sBAAsB,WACrBN,CAAAA,EAAOO,SAAYP,EAAOQ,IAAOR,EAAOQ,GAAGC,MAE/CT,EAAOQ,GAAGC,KAAK,CACnB,CAAC,EAODT,EAAOK,GAAG,QAAS,WACftB,OAAOuB,sBAAsB,WACrBN,CAAAA,EAAOO,SAAYP,EAAOQ,IAAOR,EAAOQ,GAAGC,MAE/CT,EAAOQ,GAAGC,KAAK,CACnB,CAAC,CACL,CAAC,EAGDT,EAAOU,MAAM,EAGTvB,EAAWY,wBACXZ,EAAWY,uBAAuBY,KAAKpB,KAAMS,CAAM,EAGnDb,EAAWyB,QACXzB,EAAWyB,OAAOD,KAAKpB,KAAMS,CAAM,EAE3C,CACJ,CAAC,GAGoBa,SAErB9B,OAAOL,QAAQoC,KAAKxB,CAAa,EACrC,CAAC,CACL,EAEAyB,KAAM,SAAS9B,GACXA,EAAa+B,OAAO,SAAS,EAAE3B,KAAK,WAChC,IAAIlB,EAAcF,EAAEsB,IAAI,EACpBS,EAAS7B,EAAY8B,KAAK,YAAY,EAEtCD,GACA7B,EAAY+B,WAAW,YAAY,EACnCF,EAAOG,OAAO,GAIdhC,EAAY8B,KAAK,4BAA6B,CAAA,CAAI,EAGtD/B,EAAQC,CAAW,CACvB,CAAC,CACL,CACJ,CACJ,CACH,GAAE8C,MAAM"}

package/docs/plugins.md

@@ -14,13 +14,15 @@ the one to read first if you are about to write your own.
 <script src="dist/plugins/grideditor.elements.min.js"></script>
 ```
 
-There are three kinds. A **container plugin** builds a type of container — it
+There are four kinds. A **container plugin** builds a type of container — it
 registers under `$.fn.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
-breakpoint. A **feature plugin** is anything else the editor can do —
+breakpoint. A **text editor plugin** edits content areas with a rich text
+editor — `$.fn.gridEditor.texts`, one per editor: tinyMCE, CKEditor,
+summernote. A **feature plugin** is anything else the editor can do —
 `$.fn.gridEditor.features`, hooks into the canvas, and may contribute methods.
-All three are factories called once per editor with the same handle.
+All four are factories called once per editor with the same handle.
 
 The `plugins` setting names which of the loaded ones to use:
 
@@ -124,6 +126,7 @@ not change without a major version.
 | `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.rowFromLayout(layout)` | A detached row from a layout: `[8, 4]`, `['auto', 'equal']` or `{ row_cols, columns }` |
+| `ge.textReady(block)` | A text editor has rewritten a content area: whatever the editor and its plugins put in there goes back in |
 | `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.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 |
@@ -174,6 +177,37 @@ needs to put a new kind of block on the canvas:
 - **`drawerTools(drawer, node, kind)`** runs for every drawer that has a gear,
   as a utility plugin's does, so a tool can go on any node. The clipboard
   plugin puts its copy and paste tools in with it.
+
+### Settings of your own, saved on the node
+
+A tool that opens a dialog and saves what the user chose on the node is a
+feature plugin with `drawerTools` and nothing else.
+[example/attributes.html](../example/attributes.html) is one, in full: an
+animation for rows, columns, containers and elements, kept in a
+`data-animation` attribute. Three things to get right:
+
+- **The attribute's name.** Anything but `data-ge-*`, which `getPlainHtml`
+  takes off. `getHtml` keeps every attribute that is not the editor's.
+- **The dialog lives outside the canvas**, appended to `body`, so it is never
+  part of the markup.
+- **An element sits inside text a rich text editor may be editing.** Written
+  behind its back, the attribute is lost the next time the user undoes
+  something: undo restores a snapshot from before it. With tinyMCE, write it
+  through the editor's undo manager, and it becomes a step of its own:
+
+  ```javascript
+  var area = node.closest('.ge-content')[0];
+  var editor = window.tinymce && tinymce.get().filter(function(e) { return e.getBody() === area; })[0];
+  var apply = function() { node.attr('data-animation', JSON.stringify(value)); };
+
+  if (editor) { editor.undoManager.transact(apply); } else { apply(); }
+  ```
+
+  Rows, columns, sections and containers are outside any content area, and a
+  plain `attr()` is all they need.
+
+A node's drawer is built again on every `init`, so a tool reads the node
+rather than remembering anything about it.
 - A **`toolbar`** item can also have an `iconClass`, `bi bi-plus` otherwise,
   and a `source` for the add events, `tool` or `dragdrop` otherwise. With
   `align: 'end'` it goes on the right of the toolbar, beside the source and
@@ -220,6 +254,55 @@ plugin knows which of its parts move: the tabs plugin makes its strip sortable
 and puts the panes back in strip order in `afterPaneMove`.
 
 
+Text editor plugins
+-------------------
+
+A text editor plugin edits content areas with a rich text editor. It is
+registered under the content type it edits - the name `content_types` uses -
+and the three that ship, `grideditor.tinymce.js`, `grideditor.ckeditor.js` and
+`grideditor.summernote.js`, are the ones to read:
+
+```javascript
+$.fn.gridEditor.texts.mytext = function(ge) {
+    return {
+        initialContent: '<p>Write here</p>',   // what a new column's content area holds
+        missingKey: 'error.mytext_missing',    // the error when the library is not loaded, optional
+        available: function() { return !!window.MyText; },   // optional, true otherwise
+
+        start: function(block) { … },   // open the editor on this content area
+        stop: function(block) { … },    // close it, and leave the content area as it was
+    };
+};
+```
+
+- **`start(block)`** is called when the user clicks a content area of this
+  type. The editor marks it `ge-rte-active` first, and does not call `start`
+  again until it has been stopped. Once the library has taken the content
+  area over, call **`ge.textReady(block)`**: it rewrote what was inside, and
+  the editor and its plugins put their own furniture back - an element's
+  drawer, for one. Call it again whenever the library rewrites the content
+  area again, as tinyMCE's undo does.
+- **`stop(block)`** is called for every content area of this type on each
+  `deinit`, which `getHtml` runs: a content area whose editor never started is
+  the plugin's to ignore. Whatever the library and `start` added - classes,
+  `contenteditable`, inline styles, ids - comes off here.
+- **`available()`** false and the editor logs `missingKey`'s message and
+  starts nothing, without marking the content area, so a later click tries
+  again once the library is there.
+
+A text editor is chosen by `content_types`, never by the `plugins` setting: a
+page that names its containers there has named no editor.
+
+Up to 6.0 the main bundle carries a copy of the three shipped ones, marked
+`bundled`; editing with a copy warns once that 6.0 leaves them out. A plugin's
+own file, loaded after, registers itself again and is the one used.
+
+5.x's `$.fn.gridEditor.RTEs.mytext = { init, deinit, initialContent }` still
+works: `init(settings, contentAreas)` and `deinit(settings, contentAreas)` are
+wrapped as `start` and `stop`, with a warning that `RTEs` is deprecated. It goes
+in 7.0.
+
+
 Utility plugins
 ---------------
 

package/example/attributes.html

@@ -0,0 +1,364 @@
+<!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://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="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/jquery.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>
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+
+    <style>
+        /* The drawer tool of a node that has an animation set. Under the
+           canvas's id, to outweigh the colour the editor gives each kind of
+           drawer's tools */
+        #myGrid .ge-tools-drawer > a.my-animation-tool.my-animation-set {
+            color: #d63384;
+        }
+    </style>
+
+    <!-- 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($) {
+
+            $.extend($.fn.gridEditor.locales.en, {
+                'animation.tool': 'Animation',
+                'animation.title': 'Animate on scroll',
+                'animation.effect': 'Effect',
+                'animation.none': 'None',
+                'animation.fade': 'Fade in',
+                'animation.slide': 'Slide up',
+                'animation.zoom': 'Zoom in',
+                'animation.duration': 'Duration (ms)',
+                'animation.delay': 'Delay (ms)',
+                'animation.once': 'Only the first time it scrolls into view',
+                'animation.cancel': 'Cancel',
+                'animation.save': 'Save',
+            });
+
+            // Not data-ge-*: getPlainHtml takes those off, and this has to
+            // reach the published page
+            var ATTRIBUTE = 'data-animation';
+            var EFFECTS = ['fade', 'slide', 'zoom'];
+
+            $.fn.gridEditor.features.animation = function(ge) {
+
+                var modal = null;
+
+                function read(node) {
+                    try {
+                        return JSON.parse(node.attr(ATTRIBUTE) || 'null');
+                    } catch (error) {
+                        return null;
+                    }
+                }
+
+                /**
+                 * An element lives inside a content area, and while a rich
+                 * text editor is open there, a change it does not know about
+                 * is one its undo would take back: undoing the next thing the
+                 * user types restores a snapshot from before the attribute.
+                 * Made through tinyMCE's undo manager, it is a step of its
+                 * own, which undo and redo treat like any other.
+                 */
+                function write(node, value) {
+                    var apply = function() {
+                        if (value) {
+                            node.attr(ATTRIBUTE, JSON.stringify(value));
+                        } else {
+                            node.removeAttr(ATTRIBUTE);
+                        }
+                    };
+                    var editor = editorAround(node);
+
+                    if (editor) {
+                        editor.undoManager.transact(apply);
+                    } else {
+                        apply();
+                    }
+                }
+
+                /** The tinyMCE editor open on the content area around node, if there is one. */
+                function editorAround(node) {
+                    var area = node.closest('.ge-content');
+                    if (!area.length || !window.tinymce) { return null; }
+
+                    return window.tinymce.get().filter(function(editor) {
+                        return editor.getBody && editor.getBody() === area[0];
+                    })[0] || null;
+                }
+
+                /** 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')));
+                    EFFECTS.forEach(function(effect) {
+                        effects.append($('<option />').val(effect).text(ge.t('animation.' + effect)));
+                    });
+
+                    var field = function(label, input) {
+                        return $('<div class="mb-3" />')
+                            .append($('<label class="form-label" />').text(ge.t(label)))
+                            .append(input);
+                    };
+
+                    modal = $(
+                        '<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">' +
+                                    '<h5 class="modal-title"></h5>' +
+                                    '<button type="button" class="btn-close" data-bs-dismiss="modal"></button>' +
+                                '</div>' +
+                                '<div class="modal-body"></div>' +
+                                '<div class="modal-footer">' +
+                                    '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"></button>' +
+                                    '<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'))));
+
+                    return modal;
+                }
+
+                function open(node, kind, tool) {
+                    var form = dialog().find('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.off('submit').on('submit', function(e) {
+                        e.preventDefault();
+
+                        var effect = form.find('[name=effect]').val();
+                        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'),
+                        } : null;
+
+                        var from = read(node);
+                        write(node, value);
+                        tool.toggleClass('my-animation-set', !!value);
+
+                        // Announced like the editor's own changes, for a host
+                        // that listens: grideditor:animation-change
+                        ge.emit('animation-change', ge.payloadFor(kind, node, {
+                            source: 'tool', from: from, to: value,
+                        }));
+
+                        window.bootstrap.Modal.getInstance(modal[0]).hide();
+                    });
+
+                    window.bootstrap.Modal.getOrCreateInstance(modal[0]).show();
+                }
+
+                return {
+                    // Every drawer that has a gear, and the kind of its node:
+                    // a row, a column, an element, a container's type, a pane
+                    drawerTools: function(drawer, node, kind) {
+                        var animated = ['row', 'column', 'section', 'element'].indexOf(kind) !== -1 ||
+                            !!$.fn.gridEditor.containers[kind];
+                        if (!animated) { return; }
+
+                        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));
+                    },
+                };
+            };
+
+        })(jQuery);
+    </script>
+
+    <script>
+        $(function() {
+            $('#animation-source').text($('#animation-plugin').text().trim().replace(/^ {8}/gm, ''));
+
+            $('#myGrid').gridEditor({
+                new_row_layouts: [[12], [6, 6], [4, 4, 4]],
+                content_types: ['tinymce'],
+            });
+
+            $('#myGrid').on('grideditor:animation-change', function(e, payload) {
+                $('#log').text('The ' + payload.kind + ' now animates: ' +
+                    (payload.to ? payload.to.effect : 'no'));
+            });
+
+            $('#output').on('click', function() {
+                $('#html').text($('#myGrid').gridEditor('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');
+                var page = window.open('', '_blank');
+
+                page.document.write(
+                    '<!DOCTYPE html><html><head>' +
+                    '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">' +
+                    '<style>' +
+                        '[data-animation] { transition-property: opacity, transform; }' +
+                        '.animate-waiting { opacity: 0; }' +
+                        '.animate-waiting.animate-slide { transform: translateY(40px); }' +
+                        '.animate-waiting.animate-zoom { transform: scale(.85); }' +
+                        'body { padding-bottom: 60vh; }' +
+                        '.scroll-hint { height: 100vh; }' +
+                    '</style>' +
+                    '</head><body>' +
+                    '<div class="container scroll-hint d-flex align-items-center justify-content-center text-body-secondary">' +
+                        'Scroll down: each node animates as it comes into view' +
+                    '</div>' +
+                    '<div class="container">' + html + '</div>' +
+                    '<script>' + $('#runtime').text() + '<\/script>' +
+                    '</body></html>'
+                );
+                page.document.close();
+            });
+        });
+    </script>
+
+    <!-- What the published page runs: not grid-editor's, the host's -->
+    <script type="text/plain" id="runtime">
+        document.querySelectorAll('[data-animation]').forEach(function(node) {
+            var options = JSON.parse(node.getAttribute('data-animation'));
+            node.style.transitionDuration = options.duration + 'ms';
+            node.style.transitionDelay = options.delay + 'ms';
+            // Prefixed: Bootstrap has a .fade class of its own
+            node.classList.add('animate-waiting', 'animate-' + options.effect);
+
+            new IntersectionObserver(function(entries, observer) {
+                entries.forEach(function(entry) {
+                    node.classList.toggle('animate-waiting', !entry.isIntersecting);
+                    if (entry.isIntersecting && options.once) { observer.disconnect(); }
+                });
+            }, { threshold: 0.2 }).observe(node);
+        });
+    </script>
+
+    <title>Grid Editor example - a plugin with a modal</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-9">
+                <h1 class="h4">A plugin with a modal</h1>
+                <p class="form-text">
+                    The <i class="bi bi-magic"></i> tool in the drawer of a row,
+                    a column, a card or an element is a plugin written on this
+                    page. It opens a modal, and what you choose there is saved
+                    on the node as a <code>data-animation</code> attribute, which
+                    <code>getPlainHtml</code> keeps: only <code>data-ge-*</code>
+                    attributes are the editor&rsquo;s to take off. A node with
+                    an animation has its tool highlighted.
+                </p>
+                <p class="form-text">
+                    The quote is an element, inside text tinyMCE edits. Open the
+                    editor there, set an animation on the quote, keep typing
+                    and press <kbd>Ctrl</kbd>+<kbd>Z</kbd>: the text goes, the
+                    animation stays, because the plugin wrote it through
+                    tinyMCE&rsquo;s undo manager. Written behind its back,
+                    undoing the typing would undo the attribute with it.
+                </p>
+                <p class="form-text">
+                    <em>Open as a published page</em> puts the plain html in a
+                    page of its own, with a few lines that read the attribute
+                    and animate each node as it scrolls into view.
+                    <span id="log" class="fw-semibold"></span>
+                </p>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show getPlainHtml</button>
+                <button class="btn btn-sm btn-primary" id="published" type="button">Open as a published page</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+            <div class="row" data-animation='{"effect":"fade","duration":800,"delay":0,"once":true}'>
+                <div class="col-lg-12">
+                    <h2>This row fades in</h2>
+                    <p>It came with its animation already set, in the markup the editor was started on.</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-6">
+                    <p>Ordinary text, edited by tinyMCE.</p>
+                    <blockquote class="blockquote" data-ge-element="quote" data-ge-label="Quote">
+                        <p>An element: give it an animation while you edit the text around it.</p>
+                    </blockquote>
+                    <p>More text, after the element.</p>
+                </div>
+                <div class="col-lg-6">
+                    <div data-ge-container="card">
+                        <div class="card">
+                            <div class="card-header">A card</div>
+                            <div class="card-body">
+                                <div class="row"><div class="col-lg-12">
+                                    <p>Containers take the tool too.</p>
+                                </div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row my-4">
+            <div class="col-lg-10">
+                <h2 class="h5">The plugin, in full</h2>
+                <p class="form-text">
+                    A feature plugin: <code>drawerTools</code> puts a tool in
+                    every drawer that has a gear, and the kind says whose drawer
+                    it is. See <a href="../docs/plugins.md">docs/plugins.md</a>.
+                </p>
+                <pre class="border rounded p-3 bg-light"><code id="animation-source"></code></pre>
+            </div>
+        </div>
+
+    </div>
+
+</body>
+</html>