feat(uip-editor): store editor state

src/core/base/model.storage.ts

@@ -0,0 +1,79 @@
+import type {UIPStateModel} from './model';
+
+interface UIPStateStorageEntry {
+  ts: string;
+  snippets: string;
+}
+
+interface UIPStateModelSnippets {
+  js: string;
+  html: string;
+  note: string;
+}
+
+export class UIPStateStorage {
+  public static readonly STORAGE_KEY = 'uip-editor-storage';
+
+  protected static readonly EXPIRATION_TIME = 3600000 * 12; // 12 hours
+
+  private static instances = new Map<string, UIPStateStorage>();
+
+  protected constructor(protected storeKey: string, protected model: UIPStateModel) {}
+
+  public static for(storeKey: string, model: UIPStateModel): UIPStateStorage {
+    const instance = this.instances.get(storeKey);
+    if (instance) return instance;
+
+    const newInstance = new UIPStateStorage(storeKey, model);
+    this.instances.set(storeKey, newInstance);
+    return newInstance;
+  }
+
+  protected loadEntry(key: string): string | null {
+    const entry = (this.lsGet()[key] || {}) as UIPStateStorageEntry;
+    if (parseInt(entry?.ts, 10) + UIPStateStorage.EXPIRATION_TIME > Date.now()) return entry.snippets || null;
+    this.removeEntry(key);
+    return null;
+  }
+
+  protected saveEntry(key: string, value: string): void {
+    this.lsSet(Object.assign(this.lsGet(), {[key]: {ts: Date.now(), snippets: value}}));
+  }
+
+  protected removeEntry(key: string): void {
+    const data = this.lsGet();
+    delete data[key];
+    this.lsSet(data);
+  }
+
+  protected lsGet(): Record<string, any> {
+    return JSON.parse(localStorage.getItem(UIPStateStorage.STORAGE_KEY) || '{}');
+  }
+
+  protected lsSet(value: Record<string, any>): void {
+    localStorage.setItem(UIPStateStorage.STORAGE_KEY, JSON.stringify(value));
+  }
+
+  protected getStateKey(): string | null {
+    const {activeSnippet} = this.model;
+    if (!activeSnippet) return null;
+    return JSON.stringify({key: this.storeKey, snippet: activeSnippet.html});
+  }
+
+  public loadState(): UIPStateModelSnippets | undefined {
+    const stateKey = this.getStateKey();
+    const state = stateKey && this.loadEntry(stateKey);
+    if (state) return JSON.parse(state);
+  }
+
+  public saveState(): void {
+    const {js, html, note} = this.model;
+    const stateKey = this.getStateKey();
+    stateKey && this.saveEntry(stateKey, JSON.stringify({js, html, note}));
+  }
+
+  public resetState(): void {
+    const stateKey = this.getStateKey();
+    stateKey && this.removeEntry(stateKey);
+  }
+}

src/core/base/model.ts

@@ -8,10 +8,11 @@ import {
   UIPNoteNormalizationPreprocessors
 } from '../processors/normalization';
 
+import {UIPStateStorage} from './model.storage';
 import {UIPSnippetItem} from './snippet';
 
-import type {UIPRoot} from './root';
-import type {UIPPlugin} from './plugin';
+import {UIPRoot} from './root';
+import {UIPPlugin} from './plugin';
 import type {UIPSnippetTemplate} from './snippet';
 import type {UIPChangeInfo} from './model.change';
 
@@ -55,6 +56,8 @@ export class UIPStateModel extends SyntheticEventTarget {
   /** Current markup state */
   private _html = new DOMParser().parseFromString('', 'text/html').body;
 
+  public storage: UIPStateStorage | undefined;
+
   /** Last changes history (used to dispatch changes) */
   private _changes: UIPChangeInfo[] = [];
 
@@ -64,13 +67,17 @@ export class UIPStateModel extends SyntheticEventTarget {
    * @param modifier - plugin, that initiates the change
    */
   public setJS(js: string, modifier: UIPPlugin | UIPRoot): void {
-    const script = UIPJSNormalizationPreprocessors.preprocess(js);
+    const script = this.normalizeJS(js);
     if (this._js === script) return;
     this._js = script;
     this._changes.push({modifier, type: 'js', force: true});
     this.dispatchChange();
   }
 
+  protected normalizeJS(snippet: string): string {
+    return UIPJSNormalizationPreprocessors.preprocess(snippet);
+  }
+
   /**
    * Sets current note state to the passed one
    * @param text - new state
@@ -91,23 +98,53 @@ export class UIPStateModel extends SyntheticEventTarget {
    * @param force - marker, that indicates if html changes require iframe rerender
    */
   public setHtml(markup: string, modifier: UIPPlugin | UIPRoot, force: boolean = false): void {
-    const html = UIPHTMLNormalizationPreprocessors.preprocess(markup);
+    const root = this.normalizeHTML(markup);
+    if (root.innerHTML.trim() === this.html.trim()) return;
+    this._html = root;
+    this._changes.push({modifier, type: 'html', force});
+    this.dispatchChange();
+  }
+
+  protected normalizeHTML(snippet: string): HTMLElement {
+    const html = UIPHTMLNormalizationPreprocessors.preprocess(snippet);
     const {head, body: root} = new DOMParser().parseFromString(html, 'text/html');
 
     Array.from(head.children).reverse().forEach((el) => {
-      if (el.tagName === 'STYLE') {
-        root.innerHTML = '\n' + root.innerHTML;
-        root.insertBefore(el, root.firstChild);
-      }
+      if (el.tagName !== 'STYLE') return;
+      root.innerHTML = '\n' + root.innerHTML;
+      root.insertBefore(el, root.firstChild);
     });
 
-    if (root.innerHTML.trim() !== this.html.trim()) {
-      this._html = root;
-      this._changes.push({modifier, type: 'html', force});
-      this.dispatchChange();
-    }
+    return root;
+  }
+
+  public isHTMLChanged(): boolean {
+    if (!this.activeSnippet) return false;
+    return this.normalizeHTML(this.activeSnippet.html).innerHTML.trim() !== this.html.trim();
+  }
+
+  public isJSChanged(): boolean {
+    if (!this.activeSnippet) return false;
+    return this.normalizeJS(this.activeSnippet.js) !== this.js;
   }
 
+  public resetSnippet(source: 'js' | 'javascript' | 'html', modifier: UIPPlugin | UIPRoot): void {
+    source === 'html' ? this.resetHTML(modifier) : this.resetJS(modifier);
+  }
+
+  protected resetJS(modifier: UIPPlugin | UIPRoot): void {
+    if (!this.activeSnippet) return;
+    this.setJS(this.activeSnippet.js, modifier);
+    this.storage?.resetState();
+  }
+
+  protected resetHTML(modifier: UIPPlugin | UIPRoot): void {
+    if (!this.activeSnippet) return;
+    this.setHtml(this.activeSnippet.html, modifier);
+    this.storage?.resetState();
+  }
+
+
   /** Current js state getter */
   public get js(): string {
     return this._js;
@@ -147,16 +184,25 @@ export class UIPStateModel extends SyntheticEventTarget {
     return this._snippets.find((snippet) => snippet.anchor === anchor);
   }
 
+  protected getStorageKey(modifier: UIPPlugin | UIPRoot): string {
+    return modifier instanceof UIPRoot ? modifier.storeKey : modifier.$root?.storeKey || '';
+  }
+
   /** Changes current active snippet */
   public applySnippet(
     snippet: UIPSnippetItem,
     modifier: UIPPlugin | UIPRoot
   ): void {
     if (!snippet) return;
     this._snippets.forEach((s) => (s.active = s === snippet));
-    this.setHtml(snippet.html, modifier, true);
-    this.setJS(snippet.js, modifier);
-    this.setNote(snippet.note, modifier);
+
+    const storeKey = this.getStorageKey(modifier);
+    if (storeKey) this.storage = UIPStateStorage.for(storeKey, this);
+
+    const {js, html, note} = this.storage?.loadState() || snippet;
+    this.setHtml(html, modifier, true);
+    this.setJS(js, modifier);
+    this.setNote(note, modifier);
     this.dispatchEvent(
       new CustomEvent('uip:model:snippet:change', {detail: this})
     );
@@ -199,6 +245,7 @@ export class UIPStateModel extends SyntheticEventTarget {
     if (!this._changes.length) return;
     const detail = this._changes;
     this._changes = [];
+    this.storage?.saveState();
     this.dispatchEvent(
       new CustomEvent('uip:model:change', {detail})
     );

src/core/base/root.ts

@@ -3,14 +3,15 @@ import {
   memoize,
   boolAttr,
   listen,
-  prop
+  prop,
+  attr
 } from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPStateModel} from './model';
 import {UIPChangeEvent} from './model.change';
 
-import type {UIPSnippetTemplate} from './snippet';
 import type {UIPChangeInfo} from './model.change';
+import type {UIPSnippetTemplate} from './snippet';
 
 /**
  * UI Playground root custom element definition
@@ -36,6 +37,8 @@ export class UIPRoot extends ESLBaseElement {
 
   /** Indicates that the UIP components' theme is dark */
   @boolAttr() public darkTheme: boolean;
+  /** Key to store UIP state in the local storage */
+  @attr({defaultValue: ''}) public storeKey: string;
 
   /** Indicates ready state of the uip-root */
   @boolAttr({readonly: true}) public ready: boolean;
@@ -51,7 +54,7 @@ export class UIPRoot extends ESLBaseElement {
     return Array.from(this.querySelectorAll(UIPRoot.SNIPPET_SEL));
   }
 
-  protected delyedScrollIntoView(): void {
+  protected delayedScrollIntoView(): void {
     setTimeout(() => {
       this.scrollIntoView({behavior: 'smooth', block: 'start'});
     }, 100);
@@ -65,7 +68,7 @@ export class UIPRoot extends ESLBaseElement {
     this.$$fire(this.READY_EVENT, {bubbles: false});
 
     if (this.model.anchorSnippet) {
-      this.delyedScrollIntoView();
+      this.delayedScrollIntoView();
     }
   }
 

src/plugins/editor/editor.less

@@ -9,7 +9,7 @@
     padding: 1em;
   }
 
-  &-header-copy {
+  &-header-copy, &-header-reset {
     position: relative;
     width: 25px;
     height: 25px;

src/plugins/editor/editor.tsx

@@ -12,7 +12,7 @@ import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl
 
 import {UIPPluginPanel} from '../../core/panel/plugin-panel';
 import {CopyIcon} from '../copy/copy-button.icon';
-
+import {ResetIcon} from '../reset/reset-button.icon';
 import {EditorIcon} from './editor.icon';
 
 import type {UIPSnippetsList} from '../snippets-list/snippets-list';
@@ -45,6 +45,7 @@ export class UIPEditor extends UIPPluginPanel {
     return (
       <div className={type.is + '-toolbar uip-plugin-header-toolbar'}>
         {this.showCopy ? <uip-copy class={type.is + '-header-copy'} source={this.source}><CopyIcon/></uip-copy> : ''}
+        {this.$root?.storeKey ? <uip-reset class={type.is + '-header-reset'} source={this.source}><ResetIcon/></uip-reset> : ''}
       </div>
     ) as HTMLElement;
   }

src/plugins/registration.less

@@ -8,5 +8,6 @@
 @import './settings/settings.less';
 
 @import './copy/copy-button.less';
+@import './reset/reset-button.less';
 @import './theme/theme-toggle.less';
 @import './direction/dir-toggle.less';

src/plugins/registration.ts

@@ -17,6 +17,9 @@ export {UIPSetting, UIPSettings, UIPTextSetting, UIPBoolSetting, UIPSelectSettin
 import {UIPCopy} from './copy/copy-button';
 export {UIPCopy};
 
+import {UIPReset} from './reset/reset-button';
+export {UIPReset};
+
 import {UIPNote} from './note/note';
 export {UIPNote};
 
@@ -34,6 +37,7 @@ export const registerSettings = (): void => {
 
 export const registerPlugins = (): void => {
   UIPCopy.register();
+  UIPReset.register();
   UIPDirSwitcher.register();
   UIPThemeSwitcher.register();
 

src/plugins/reset/reset-button.icon.tsx

@@ -0,0 +1,7 @@
+import React from 'jsx-dom';
+
+export const ResetIcon = (): SVGElement => (
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 12 12">
+  <path d="M4 0C1.8 0 0 1.8 0 4s1.8 4 4 4c1.1 0 2.12-.43 2.84-1.16l-.72-.72c-.54.54-1.29.88-2.13.88-1.66 0-3-1.34-3-3s1.34-3 3-3c.83 0 1.55.36 2.09.91L4.99 3h3V0L6.8 1.19C6.08.47 5.09 0 3.99 0z"/>
+</svg>
+) as SVGElement;

src/plugins/reset/reset-button.less

@@ -0,0 +1,14 @@
+.uip-reset {
+  display: inline-flex;
+  cursor: pointer;
+
+  > svg {
+    fill: currentColor;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-hidden {
+    display: none;
+  }
+}

src/plugins/reset/reset-button.shape.ts

@@ -0,0 +1,15 @@
+import type {ESLBaseElementShape} from '@exadel/esl/modules/esl-base-element/core';
+import type {UIPReset} from './reset-button';
+
+export interface UIPResetShape extends ESLBaseElementShape<UIPReset> {
+  source?: 'javascript' | 'js' | 'html';
+  children?: any;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uip-reset': UIPResetShape;
+    }
+  }
+}

src/plugins/reset/reset-button.ts

@@ -0,0 +1,35 @@
+import './reset-button.shape';
+
+import {listen, attr} from '@exadel/esl/modules/esl-utils/decorators';
+
+import {UIPPluginButton} from '../../core/button/plugin-button';
+import {UIPRoot} from '../../core/base/root';
+
+/** Button-plugin to reset snippet to default settings */
+export class UIPReset extends UIPPluginButton {
+  public static override is = 'uip-reset';
+
+  /** Source type to copy (html | js) */
+  @attr({defaultValue: 'html'}) public source: 'js' | 'javascript' | 'html';
+
+  protected override connectedCallback(): void {
+    super.connectedCallback();
+  }
+
+  public override onAction(): void {
+    if (this.$root) this.model?.resetSnippet(this.source, this.$root);
+  }
+
+  @listen({event: 'uip:model:change', target: ($this: UIPRoot) => $this.model})
+  protected onModelChange(): void {
+    if (!this.model || !this.model.activeSnippet) return;
+    if (this.source === 'js' || this.source === 'javascript') 
+      this.toggleButton(!this.model.isJSChanged());
+    else if (this.source === 'html')
+      this.toggleButton(!this.model.isHTMLChanged());
+  }
+
+  protected toggleButton(state?: boolean): void {
+    this.$$cls('uip-reset-hidden', state);
+  }
+}