@themarioga/grid-editor 5.3.1 → 6.0.0-beta.2

package/docs/plugins.md

@@ -107,7 +107,8 @@ not change without a major version.
 | `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.addSettingsTool(drawer, node, presets)` | The gear, and the id and class panel it opens. Returns the panel, to add fields to |
+| `ge.detailsOf(node)` | A node's settings panel, wherever it is: in its drawer, or open in the offcanvas, popover or modal `settings_panel` names, outside the canvas. Find a panel's fields through it, never through the drawer |
 | `ge.deleteNode(kind, node, confirmText, animate)` | Remove a node: ask, animate, announce |
 | `ge.place(node, kind, options)` | Put a created node where `appendTo` and friends say, through the add events. `options.source` is the payload's `source`, `api` by default |
 | `ge.createPaneControls(pane, kind, hostTools, confirmText, remove)` | The drawer a pane gets: move, the host's tools, delete |
@@ -149,7 +150,8 @@ $.fn.gridEditor.features.elements = function(ge) {
         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
+        onContentReady: function(area) { … },  // a rich text editor just took over, or rewrote a text
+        cuts: '[data-my-block]',          // what cuts a text: a block of the column, never part of a text
         onSortable: function(sortable) { … },  // declare your own sortable lists
         blocks: '.ge-section',            // more blocks the canvas and the columns move
         regions: '.ge-section',           // more lists those blocks move in
@@ -167,6 +169,12 @@ needs to put a new kind of block on the canvas:
   rows, content areas and containers, the editor's own blocks.
 - **`regions`** is a selector for more lists those blocks move in, in the same
   group, so a row dragged from the canvas can land in one.
+- **`cuts`** is a selector, or a function returning one, for nodes that are
+  never part of a text: blocks of the column. The editor cuts a content area
+  at each of its own children that matches - the text before it stays, the
+  node goes into the column, the text after goes into a new content area -
+  which is how the elements plugin takes 5.x's elements out of their text. Rows
+  and containers always cut.
 - **`accepts(region, node)`** can turn a block away from a list: `false` and the
   drag will not drop it there, whoever's block and whoever's list. With none of
   these hooks, every block goes everywhere, as before.
@@ -194,21 +202,12 @@ animation for rows, columns, containers and elements, kept in a
   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.
+- **Nothing else.** A plain `attr()` on any node. An element is never inside a
+  text editor since 6.0, and a text's own attributes, given while its editor
+  is open, are kept by grid-editor when the editor closes - tinyMCE would put
+  back the ones it found when it opened. Up to 5.x an element sat inside the
+  text, and an attribute written behind the editor's back was lost to its
+  undo.
 
 A node's drawer is built again on every `init`, so a tool reads the node
 rather than remembering anything about it.
@@ -298,9 +297,8 @@ $.fn.gridEditor.texts.mytext = function(ge) {
 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.
+Up to 5.x the main bundle carried a copy of the three shipped ones; since 6.0
+a page loads the plugin of the editor it uses, as it loads any other.
 
 5.x's `$.fn.gridEditor.RTEs.mytext = { init, deinit, initialContent }` still
 works: `init(settings, contentAreas)` and `deinit(settings, contentAreas)` are

package/example/attributes.html

@@ -69,40 +69,19 @@
                 }
 
                 /**
-                 * 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.
+                 * A plain attr() on any node: an element is never inside a
+                 * text editor since 6.0, and a text's own attributes, given
+                 * while its editor is open, are kept by grid-editor when the
+                 * editor closes.
                  */
                 function write(node, value) {
-                    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);
+                    if (value) {
+                        node.attr(ATTRIBUTE, JSON.stringify(value));
                     } else {
-                        apply();
+                        node.removeAttr(ATTRIBUTE);
                     }
                 }
 
-                /** 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; }
@@ -297,12 +276,13 @@
                     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.
+                    Open tinyMCE on a text and set an animation on that same
+                    text, from its drawer, while you are typing: the attribute
+                    is kept when the editor closes, although tinyMCE puts back
+                    the attributes it found when it opened. The plugin does
+                    nothing special for that - a plain <code>attr()</code> -
+                    and nothing special for the quote either, which is an
+                    element: a block beside the texts, never inside one.
                 </p>
                 <p class="form-text">
                     <em>Open as a published page</em> puts the plain html in a
@@ -325,11 +305,15 @@
             </div>
             <div class="row">
                 <div class="col-lg-6">
-                    <p>Ordinary text, edited by tinyMCE.</p>
+                    <div class="ge-content" data-ge-content-type="tinymce">
+                        <p>Ordinary text, edited by tinyMCE.</p>
+                    </div>
                     <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>
+                        <p>An element, beside the texts: give it an animation.</p>
                     </blockquote>
-                    <p>More text, after the element.</p>
+                    <div class="ge-content" data-ge-content-type="tinymce">
+                        <p>More text, after the element.</p>
+                    </div>
                 </div>
                 <div class="col-lg-6">
                     <div data-ge-container="card">

package/example/elements.html

@@ -49,8 +49,8 @@
                     selector: '[data-ge-element]',
 
                     // Turn this on for a page that configures no rich text
-                    // editor and injects its own markup: every child of a
-                    // content area is then an element.
+                    // editor and injects its own markup: every loose node of
+                    // a column is then an element.
                     auto: false,
                 },
 
@@ -74,11 +74,11 @@
             // own save step. Grid editor needs no feature for this - the
             // element level controls already apply (spec 4.4).
             $('#addTag').on('click', function() {
-                var contentArea = $('#myGrid .ge-content').first();
+                var column = $('#myGrid .column').first();
 
                 $('#myGrid').gridEditor('createElement',
                     '<span class="my-app-tag-placeholder">Analytics tag</span>',
-                    { type: 'analytics-tag', label: 'Analytics', appendTo: contentArea }
+                    { type: 'analytics-tag', label: 'Analytics', appendTo: column }
                 );
             });
 
@@ -103,17 +103,20 @@
             <div class="col-lg-8">
                 <h1 class="h4">Element level controls</h1>
                 <p class="form-text">
-                    An element is a node inside a content area that the editor
-                    treats as one movable, deletable thing instead of as rich
-                    text. The host marks them with
-                    <code>data-ge-element</code>, optionally naming them with
-                    <code>data-ge-label</code>. Each one gets a drawer of its
-                    own: move, an info tool, the host's own tools, and delete.
-                    They drag between content areas as well as within one.
+                    An element is a node the editor treats as one movable,
+                    deletable block instead of as rich text: a block of the
+                    column, beside its texts, its rows and its containers. The
+                    host marks them with <code>data-ge-element</code>,
+                    optionally naming them with <code>data-ge-label</code>.
+                    Each one gets a drawer of its own: move, an info tool, the
+                    host's own tools, and delete. They drag within a column and
+                    between columns.
                 </p>
                 <p class="form-text">
-                    Click the text around an element to edit it as text; the
-                    element itself stays atomic while the editor is open.
+                    Click a text to edit it; an element is never part of the
+                    text an editor edits. Markup that 5.x saved, with elements
+                    inside a content area's text, still loads: they come out of
+                    it, into the column.
                 </p>
                 <button class="btn btn-sm btn-secondary" id="addTag" type="button">Add an analytics tag</button>
                 <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
@@ -127,22 +130,24 @@
                 <div class="col-lg-6">
                     <div class="ge-content" data-ge-content-type="tinymce">
                         <p>Ordinary text, edited in place by tinyMCE.</p>
+                    </div>
 
-                        <blockquote class="my-app-quote" data-ge-element="quote" data-ge-label="Pull quote">
-                            <p>An element the host owns and styles.</p>
-                        </blockquote>
+                    <blockquote class="my-app-quote" data-ge-element="quote" data-ge-label="Pull quote">
+                        <p>An element the host owns and styles.</p>
+                    </blockquote>
 
+                    <div class="ge-content" data-ge-content-type="tinymce">
                         <p>More ordinary text, after the element.</p>
                     </div>
                 </div>
                 <div class="col-lg-6">
                     <div class="ge-content" data-ge-content-type="tinymce">
-                        <p>A second content area. Drag an element's drawer from
+                        <p>A second column. Drag an element's drawer from
                         the left column into this one.</p>
+                    </div>
 
-                        <div data-ge-element="figure" data-ge-label="Figure">
-                            <p><strong>Figure 1.</strong> Another element, of a different type.</p>
-                        </div>
+                    <div data-ge-element="figure" data-ge-label="Figure">
+                        <p><strong>Figure 1.</strong> Another element, of a different type.</p>
                     </div>
                 </div>
             </div>

package/example/plugins.html

@@ -180,12 +180,12 @@
                 <div class="col-lg-12">
                     <div class="ge-content">
                         <p>Ordinary text in a content area.</p>
-
-                        <blockquote data-ge-element="quote" data-ge-label="Pull quote">
-                            <p>A node the host marked: an element when the elements plugin is on,
-                            ordinary markup when it is off.</p>
-                        </blockquote>
                     </div>
+
+                    <blockquote data-ge-element="quote" data-ge-label="Pull quote">
+                        <p>A node the host marked: an element when the elements plugin is on,
+                        ordinary markup - text - when it is off.</p>
+                    </blockquote>
                 </div>
             </div>
 

package/example/utilities.html

@@ -30,13 +30,27 @@
 
     <script>
         $(function() {
-            $('#myGrid').gridEditor({
-                new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
-                content_types: [],
-
-                // Utilities are edited per breakpoint, so this page starts in
-                // one. Switch to "All sizes" to see the page as it will render.
-                default_view: 'xs',
+            function start(panel) {
+                $('#myGrid').gridEditor({
+                    new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
+                    content_types: [],
+
+                    // Utilities are edited per breakpoint, so this page starts in
+                    // one. Switch to "All sizes" to see the page as it will render.
+                    default_view: 'xs',
+
+                    // Where a node's settings open: 'offcanvas', the default,
+                    // 'popover', 'modal', or 'inline' in its drawer
+                    settings_panel: panel,
+                });
+            }
+            start($('#panel').val());
+
+            // The same canvas, started again with its settings elsewhere
+            $('#panel').on('change', function() {
+                var html = $('#myGrid').gridEditor('getHtml');
+                $('#myGrid').gridEditor('destroy').html(html);
+                start(this.value);
             });
 
             // Every change to a utility is announced, like any other operation
@@ -75,6 +89,15 @@
                     section with a field per utility, which says what the
                     breakpoint inherits and from where.
                 </p>
+                <div class="d-flex align-items-center gap-2 mb-3">
+                    <label class="form-label mb-0" for="panel">A gear opens its settings in</label>
+                    <select class="form-select form-select-sm w-auto" id="panel">
+                        <option value="offcanvas">a side panel (offcanvas)</option>
+                        <option value="popover">a popover</option>
+                        <option value="modal">a modal</option>
+                        <option value="inline">the drawer itself (inline)</option>
+                    </select>
+                </div>
                 <p class="form-text">
                     <strong>Visibility:</strong> the eye in a drawer hides the
                     node in the view being edited. It stays on the canvas,
@@ -154,7 +177,7 @@
                     <blockquote data-ge-element="quote" data-ge-label="Pull quote" class="float-sm-end ms-sm-3 p-3 border-start border-4">
                         A floated element, <code>float-sm-end</code>.
                     </blockquote>
-                    <p>The text of the content area flows round the quote from tablet up, and runs under it on phones, where it does not float. Switch between Phone and Tablet in the dropdown to see it move, or choose another float in the element's panel.</p>
+                    <p>The text after it flows round the quote from tablet up, and runs under it on phones, where it does not float. Switch between Phone and Tablet in the dropdown to see it move, or choose another float in the element's panel.</p>
                     <p>A second paragraph, so there is enough text to flow.</p>
                 </div>
             </div>

package/package.json

@@ -34,7 +34,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "5.3.1",
+  "version": "6.0.0-beta.2",
   "main": "dist/jquery.grideditor.js",
   "files": [
     "dist",