@themarioga/grid-editor 8.4.0 → 8.6.0

package/src/js/plugins/grideditor.tinymce.js

@@ -140,6 +140,14 @@ GridEditor.texts.tinymce = function(ge) {
             });
         },
 
+        // What remove() leaves in the content area: tinyMCE writes its
+        // content back as it removes an inline editor. Null while it is
+        // still starting, when there is nothing to ask
+        read: function(contentArea) {
+            var editor = editors.get(contentArea);
+            return editor ? editor.getContent() : null;
+        },
+
         stop: function(contentAreas) {
             contentAreas.filter(function(contentArea) {
                 return dom.hasClass(contentArea, 'active');

package/src/js/text/grideditor.text.js

@@ -321,7 +321,7 @@ if (!GridEditor.features.text) {
                     iconClass: TEXTS[type].iconClass,
                     className: 'ge-add-text-button',
                     kind: 'text',
-                    group: 'content',
+                    group: 'elements',
                     inColumn: true,
                     create: function() { return makeText(type); },
                 };
@@ -347,6 +347,32 @@ if (!GridEditor.features.text) {
                 clicks = null;
             },
 
+            // What closing the editors does, on a copy of the canvas: each
+            // open text holds what its editor says it holds, and the
+            // attributes the host gave it, as closeText leaves them. An
+            // editor that cannot say - no read, or not started yet - and the
+            // canvas has to leave editing to be read
+            cleanMarkup: function(root, liveOf) {
+                var blocks = dom.all(root, '.ge-content.ge-rte-active').filter(isOurs);
+
+                for (var i = 0; i < blocks.length; i++) {
+                    var copy = blocks[i];
+                    var block = liveOf(copy);
+                    var text = TEXTS[copy.getAttribute('data-ge-content-type')];
+                    var before = block && readBefore.get(block);
+                    var html = before && text.read ? text.read(block) : null;
+
+                    if (typeof html !== 'string') { return false; }
+
+                    dom.setHtml(copy, html);
+                    restoreAttributes(copy, before, readReady.get(block) || before, attributesOf(block));
+                    // What the editor put beside the content area, its frame
+                    if (text.cleanCopy) { text.cleanCopy(copy, block); }
+                }
+
+                return true;
+            },
+
             // The first time only: an undo says ready again, and by then the
             // host may have changed the content area itself
             onContentReady: function(area) {

package/src/less/grideditor.less

@@ -31,17 +31,25 @@
         top: 0;
     }
     
+    /* The add buttons on the left are grey, so the blue is left to the
+       source, preview and layout buttons on the right */
+    .ge-addRowGroup .btn.btn-light,
+    .ge-addContainerGroup .btn.btn-light,
+    .ge-toolbar-more > .btn.btn-light {
+        background: #f4f4f4;
+        color: @rowTextColor;
+        border-color: #999;
+
+        &:hover,
+        &:active {
+            background: #E3E3E3;
+        }
+    }
+
     .ge-addRowGroup {
-        .btn.btn-primary {
-            background: #f4f4f4;
-            color: @rowTextColor;
-            border-color: #999;
+        .btn.btn-light {
             display: flex;
             align-items: center;
-            
-            &:hover {
-                background: #E3E3E3;
-            }
         }
         
         .ge-row-icon {

package/types/grideditor.d.ts

@@ -125,7 +125,9 @@ export interface GridEditorOptions {
     inline_style?: InlineStyleOptions;
     /** The tabs plugin: the variant of the tabs containers made new. */
     tabs?: TabsOptions;
-    elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
+    elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean; types?: ElementType[] };
+    /** The autosave plugin: what is edited, kept in the browser's storage as it changes. */
+    autosave?: AutosaveOptions;
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];
     valid_col_offsets?: number[];
@@ -151,6 +153,50 @@ export interface GridEditorOptions {
     [plugin: string]: unknown;
 }
 
+/** The autosave plugin's options. */
+export interface AutosaveOptions {
+    /** Saving from the start; the methods turn it on and off. Default true. */
+    enabled?: boolean;
+    /** localStorage or sessionStorage. Default 'local'. */
+    storage?: 'local' | 'session';
+    /** Where the draft is kept. Default 'grideditor.autosave:' + the page's path + '#' + the canvas's id. One per document on a page that loads several. */
+    key?: string | null;
+    /** Milliseconds after the last change. Default 1000. */
+    delay?: number;
+    /** Milliseconds a draft is offered for; null, the default, for ever. */
+    maxAge?: number | null;
+}
+
+/** A draft the autosave plugin kept. */
+export interface AutosaveDraft {
+    html: string;
+    /** When, as an ISO 8601 date. */
+    savedAt: string;
+}
+
+export interface GetHtmlOptions {
+    /** Read the canvas without it leaving editing: open texts and settings panels stay open. */
+    keepEditing?: boolean;
+}
+
+export interface AutosavePayload {
+    canvas: HTMLElement;
+    html: string;
+    savedAt: string;
+    source: 'change' | 'pagehide' | 'api' | 'destroy';
+}
+
+export interface RestoreDraftPayload {
+    canvas: HTMLElement;
+    html: string;
+    savedAt: string;
+}
+
+export interface AutosaveErrorPayload {
+    canvas: HTMLElement;
+    error: unknown;
+}
+
 /** Where a node was, or went: its parent and its index among the blocks there. */
 export interface Position {
     parent: HTMLElement;
@@ -271,6 +317,9 @@ export interface GridEditorEventMap {
     'grideditor:popup-orphan': PopupOrphanPayload;
     'grideditor:view-change': ViewChangePayload;
     'grideditor:target-change': TargetChangePayload;
+    'grideditor:after-autosave': AutosavePayload;
+    'grideditor:after-restore-draft': RestoreDraftPayload;
+    'grideditor:autosave-error': AutosaveErrorPayload;
 }
 
 /** An event the editor dispatches on its canvas: a CustomEvent whose detail is the payload. */
@@ -286,6 +335,22 @@ export type GridEditorCallbacks = {
 };
 
 /** A plugin's factory: called once per editor with the handle in docs/plugins.md. */
+/** An element the toolbar offers, from elements.types. */
+export interface ElementType {
+    /** What it is: its data-ge-element. */
+    type: string;
+    /** Its markup: html, or a function called for each one made that returns html or a node. */
+    html: string | (() => string | Node);
+    /** Its button's label, as it is. */
+    label?: string;
+    /** Its button's label, a locale key: wins over label, and follows setLocale. */
+    labelKey?: string;
+    /** The button shows this icon alone, with the label as its title. */
+    iconClass?: string;
+    /** Its toolbar_groups category. Default 'elements'. */
+    group?: string;
+}
+
 export type PluginFactory = ((ge: any) => Record<string, unknown>) & { always?: boolean };
 
 export interface CreateColumnOptions extends Placement {
@@ -346,10 +411,10 @@ export declare class GridEditor {
     /** A read-only copy of the settings the editor runs with. */
     readonly settings: Readonly<GridEditorOptions>;
 
-    /** The html to save: no drawers, no editor classes, no inline styles. */
-    getHtml(): string;
+    /** The html to save: no drawers, no editor classes, no inline styles. keepEditing reads it without the canvas leaving editing. */
+    getHtml(options?: GetHtmlOptions): string;
     /** getHtml without grid-editor's marking, for publishing. It cannot be edited again as it was. */
-    getPlainHtml(): string;
+    getPlainHtml(options?: GetHtmlOptions): string;
     /** Run the editing pass over the canvas again, after markup was put in. */
     init(): this;
     /** Take the editing furniture off, leaving the markup. */
@@ -379,6 +444,13 @@ export declare class GridEditor {
     getUtility(node: Target, family: string, view?: View): string | null;
     /** Write one through the events; null is inherit. False when canceled or nothing changed. */
     setUtility(node: Target, family: string, value: string | number | null, view?: View): boolean;
+    /** The autosave plugin's, when it is loaded: false when the browser gives it no storage. */
+    enableAutosave?(): boolean;
+    disableAutosave?(): boolean;
+    /** Save now, if it changed: true when it was written. */
+    saveDraft?(): boolean;
+    getDraft?(): AutosaveDraft | null;
+    clearDraft?(): boolean;
 }
 
 export default GridEditor;

package/AUTO_SAVE.md

@@ -1,30 +0,0 @@
-## Auto save and layout import/export
-
-The `example/autosave.html` demo shows how to add **auto save** and
-**import/export** on top of Grid Editor, using only the editor's public API
-(`getHtml()` and `destroy()` on the `GridEditor` instance).
-
-### Features
-
-- **Auto save**
-  Saves the layout to `localStorage` every 5 seconds, so work is not lost on
-  an accidental refresh. The saved draft is restored on page load.
-
-- **Import a saved layout**
-  Load a previously exported `.html` file back into the editor.
-
-- **Export HTML**
-  Download the edited layout as an HTML file for saving or sharing.
-
-- **Clear draft**
-  Remove the stored layout from `localStorage` and start over.
-
-### Demo
-
-Build the `dist/` files first, then open the example:
-
-```bash
-npm install
-npm run build
-open example/autosave.html
-```