feat: change fired markup instance

exadel-inc · Jun 15, 2021 · 5c8984f · 5c8984f
1 parent 48caeeb
commit 5c8984f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/core/plugin.ts b/src/core/plugin.ts
@@ -1,5 +1,6 @@
 import {attr, ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
 import {UIPRoot} from './root';
+import {StateModelFiredObj} from './state-model';
 
 /**
  * Base class for UI Playground plugins.
@@ -28,7 +29,7 @@ export abstract class UIPPlugin extends ESLBaseElement {
     super.connectedCallback();
     this.classList.add('uip-plugin');
     this.root = this.closest(`${UIPRoot.is}`) as UIPRoot;
-    this.root && this._onRootStateChange();
+    this.root && this._onRootStateChange({markup: this.root.model.html});
   }
   protected disconnectedCallback() {
     this._root?.removeStateListener(this._onRootStateChange);
@@ -41,5 +42,5 @@ export abstract class UIPPlugin extends ESLBaseElement {
   }
 
   /** Handles root state change*/
-  protected abstract _onRootStateChange(): void;
+  protected abstract _onRootStateChange(e: StateModelFiredObj): void;
 }
diff --git a/src/core/state-model.ts b/src/core/state-model.ts
@@ -1,5 +1,9 @@
 import {Observable} from '@exadel/esl';
 
+export interface StateModelFiredObj {
+  markup: string,
+}
+
 export class UIPStateModel extends Observable {
   protected root: Element;
 
@@ -12,7 +16,7 @@ export class UIPStateModel extends Observable {
     const root = new DOMParser().parseFromString(markup, 'text/html').body;
     if (root.innerHTML !== this.root.innerHTML) {
       this.root = root;
-      this.fire({markup: this.html});
+      this.fire({markup: markup});
     }
   }
 

diff --git a/src/editor/editor.ts b/src/editor/editor.ts
@@ -9,6 +9,7 @@ import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
 import {jsonAttr} from '@exadel/esl/modules/esl-base-element/core';
 
 import {UIPPlugin} from '../core/plugin';
+import {StateModelFiredObj} from '../core/state-model';
 
 interface EditorConfig {
   theme: string;
@@ -44,8 +45,8 @@ export class UIPEditor extends UIPPlugin {
   }, 1000);
 
   @bind
-  protected _onRootStateChange(): void {
-    const markup = this.root!.model.html;
+  protected _onRootStateChange(e: StateModelFiredObj): void {
+    const {markup} = e;
     if (this.editor && markup === this.editor.getValue()) return; // check for self triggered changes
 
     const $inner = document.createElement('div');