From 5c8984f2fd3e06058c0f73a476833bd81f2fdc69 Mon Sep 17 00:00:00 2001
From: "nharshunova@exadel.com" <nharshunova@exadel.com>
Date: Tue, 15 Jun 2021 17:25:19 +0300
Subject: [PATCH] feat: change fired markup instance

---
 src/core/plugin.ts      | 5 +++--
 src/core/state-model.ts | 6 +++++-
 src/editor/editor.ts    | 5 +++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/core/plugin.ts b/src/core/plugin.ts
index be77b122..69af9a21 100644
--- 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
index 3375424a..1170c7e7 100644
--- 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
index b2122336..49904559 100644
--- 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');