@themarioga/grid-editor 8.8.2 → 8.10.0

package/src/js/plugins/grideditor.clipboard.js

@@ -46,17 +46,6 @@ var TARGETS = {
     section: ['row'],
 };
 
-/**
- * The attributes that point at an id, as the id itself or as a #selector.
- * A pasted copy that has to take new ids takes them here too, so its tabs,
- * its accordion and its popups still point at their own panes.
- */
-var REFERENCES = ['data-bs-target', 'data-bs-parent', 'href', 'aria-controls', 'aria-labelledby',
-    'aria-describedby', 'for', 'data-ge-popup-id', 'data-ge-popup-target'];
-
-/** An id grid-editor generated: ge-{type}-{counter}-{random}. */
-var GENERATED_ID = /^ge-([a-z][a-z-]*?)-\d+-[a-z0-9]+$/;
-
 function read() {
     var raw;
 
@@ -150,66 +139,7 @@ GridEditor.features.clipboard = function(ge) {
         var clip = read();
         if (!fits(clip, categories)) { return; }
 
-        ge.place(fresh(clip.html), clip.kind, { appendTo: target, source: 'paste' });
-    }
-
-    /**
-     * The copied markup as a node, with new ids where the page already has
-     * them: two copies of a tab strip pointing at one set of panes is a tab
-     * strip that opens the other copy's tabs. An id the page does not have
-     * is kept, so pasting into another page changes nothing.
-     *
-     * Parsed the way innerHTML parses, so a <script> in what was copied is
-     * markup, pasted like the rest, and does not run in the editor.
-     */
-    function fresh(html) {
-        var node = dom.create(html);
-        var renamed = {};
-        var taken = function(id) {
-            return !!document.getElementById(id) || Object.keys(renamed).some(function(old) {
-                return renamed[old] === id;
-            });
-        };
-
-        dom.selfAndAll(node, '[id]').forEach(function(element) {
-            var id = element.id;
-            if (!document.getElementById(id)) { return; }
-
-            var generated = GENERATED_ID.exec(id);
-            var next;
-
-            if (generated) {
-                do { next = ge.containerId(generated[1]); } while (taken(next));
-            } else {
-                var n = 2;
-                while (taken(id + '-' + n)) { n++; }
-                next = id + '-' + n;
-            }
-
-            renamed[id] = next;
-            element.id = next;
-        });
-
-        if (!Object.keys(renamed).length) { return node; }
-
-        dom.selfAndAll(node, '*').forEach(function(element) {
-            REFERENCES.forEach(function(name) {
-                var value = element.getAttribute(name);
-                if (value === null) { return; }
-                if (name === 'href' && value.charAt(0) !== '#') { return; }
-
-                var rewritten = value.split(/(\s+)/).map(function(token) {
-                    if (renamed[token]) { return renamed[token]; }
-                    if (token.charAt(0) === '#' && renamed[token.slice(1)]) { return '#' + renamed[token.slice(1)]; }
-
-                    return token;
-                }).join('');
-
-                if (rewritten !== value) { element.setAttribute(name, rewritten); }
-            });
-        });
-
-        return node;
+        ge.place(ge.freshNode(clip.html), clip.kind, { appendTo: target, source: 'paste' });
     }
 
     /** Show the paste tools, and the toolbar's paste buttons, that fit what is copied. */
@@ -240,7 +170,7 @@ GridEditor.features.clipboard = function(ge) {
             source: 'paste',
             // What the button showed, even if another tab has copied
             // something else since
-            create: function() { return fresh(shown.html); },
+            create: function() { return ge.freshNode(shown.html); },
         });
     });
 

package/src/less/grideditor.less

@@ -585,6 +585,65 @@
     --bs-offcanvas-height: 60vh;
 }
 
+/* The sidebar: always there while editing, with the page making room for it
+   (html.ge-sidebar-open) where the window is wide enough. Narrower than
+   Bootstrap's sm it covers the page instead. */
+.ge-settings-sidebar {
+    --bs-offcanvas-width: 340px;
+
+    .ge-sidebar-empty {
+        margin: 0;
+        color: var(--bs-secondary-color, #6c757d);
+    }
+}
+
+html.ge-sidebar-open {
+    padding-right: 340px;
+}
+
+/* On the panel's left edge, centred; folded away, on the window's right edge.
+   Its own element, so the panel can slide out from under it. */
+.ge-sidebar-toggle {
+    position: fixed;
+    top: 50%;
+    right: 340px;
+    z-index: 1045;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 3rem;
+    padding: 0;
+    transform: translateY(-50%);
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    border-right: 0;
+    border-radius: 0.375rem 0 0 0.375rem;
+    background: var(--bs-body-bg, #fff);
+    color: var(--bs-body-color, #212529);
+    transition: right 0.3s ease-in-out;
+
+    &[aria-expanded="false"] {
+        right: 0;
+    }
+}
+
+.ge-sidebar-toggle.ge-under-dialog {
+    z-index: 1040;
+}
+
+@media (max-width: 575.98px) {
+    .ge-settings-sidebar {
+        --bs-offcanvas-width: 100vw;
+    }
+
+    .ge-sidebar-toggle[aria-expanded="true"] {
+        right: calc(100vw - 1.5rem);
+        border: 1px solid var(--bs-border-color, #dee2e6);
+        border-left: 0;
+        border-radius: 0 0.375rem 0.375rem 0;
+    }
+}
+
 .ge-settings-popover {
     /* Popper would position it; without Popper that is the editor's job */
     position: absolute;

package/types/grideditor.d.ts

@@ -121,6 +121,18 @@ export interface InlineStyleOptions {
     visibility?: { drawer?: boolean };
 }
 
+/** What the sidebar shows while nothing is selected, instead of its message. */
+export interface SidebarContent {
+    /** Text, not html. Default the sidebar's own title. */
+    title?: string;
+    body: Element;
+}
+
+export interface SidebarSettings {
+    /** Called whenever the sidebar is left with nothing selected. Null gives the message. */
+    empty?: ((ge: GridEditor) => SidebarContent | null) | null;
+}
+
 export type CustomFilter = ((canvas: HTMLElement, isInit: boolean) => void) | string;
 
 /** The settings. Every one is optional. */
@@ -183,7 +195,10 @@ export interface GridEditorOptions {
     locale_strings?: Record<string, string>;
     callbacks?: Partial<GridEditorCallbacks>;
     confirm_delete?: boolean;
-    settings_panel?: 'offcanvas' | 'popover' | 'modal' | 'inline';
+    /** Where a node's settings open. 'sidebar' is a panel that stays on the right while editing, showing the selected node's; one editor per page has it. */
+    settings_panel?: 'offcanvas' | 'popover' | 'modal' | 'inline' | 'sidebar';
+    /** The 'sidebar' panel. */
+    sidebar?: SidebarSettings;
     drag?: { delay?: number; touch_delay?: number; threshold?: number; animation?: number; scroll?: boolean };
     tinymce?: { config?: Record<string, unknown> };
     ckeditor?: { config?: Record<string, unknown> };
@@ -317,6 +332,13 @@ export interface TargetChangePayload {
     from: HTMLElement | null;
 }
 
+/** The selection changed, with settings_panel 'sidebar': the node whose settings the sidebar shows, or null. */
+export interface SelectionChangePayload {
+    canvas: HTMLElement;
+    node: HTMLElement | null;
+    from: HTMLElement | null;
+}
+
 /** The events, by name, with their payloads. Adding fires a specific name and the generic one. */
 export interface GridEditorEventMap {
     'grideditor:before-add': Payload;
@@ -357,6 +379,7 @@ export interface GridEditorEventMap {
     'grideditor:popup-orphan': PopupOrphanPayload;
     'grideditor:view-change': ViewChangePayload;
     'grideditor:target-change': TargetChangePayload;
+    'grideditor:selection-change': SelectionChangePayload;
     'grideditor:after-autosave': AutosavePayload;
     'grideditor:after-restore-draft': RestoreDraftPayload;
     'grideditor:autosave-error': AutosaveErrorPayload;
@@ -468,6 +491,10 @@ export declare class GridEditor {
     getActiveTarget(): HTMLElement | null;
     /** Make a column or region, or the first a selector matches, where the toolbar adds; null for none. */
     setActiveTarget(target: HTMLElement | string | null): this;
+    /** The node whose settings the sidebar shows, or null. Null unless settings_panel is 'sidebar'. */
+    getSelected(): HTMLElement | null;
+    /** Select a node with settings, or the first a selector matches, or null for none. Does nothing unless settings_panel is 'sidebar'. */
+    setSelected(node: HTMLElement | string | null): this;
     getView(): View;
     setLocale(code: string): this;
     createRow(layout?: RowLayout, options?: Placement): HTMLElement | null;