From 9f128e599f6b878362db0daa3ccc9bd26a7518c4 Mon Sep 17 00:00:00 2001
From: rewin <rewin1996@gmail.com>
Date: Wed, 28 Feb 2024 20:12:10 +0300
Subject: [PATCH] Include inspector change into react

---
 studio-frontend/src/app/app.element.ts |  6 ++++++
 studio-frontend/src/inspector_dummy.ts | 12 ------------
 studio-frontend/src/main.ts            |  4 +---
 3 files changed, 7 insertions(+), 15 deletions(-)
 delete mode 100644 studio-frontend/src/inspector_dummy.ts

diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts
index 989d64f..1df4717 100644
--- a/studio-frontend/src/app/app.element.ts
+++ b/studio-frontend/src/app/app.element.ts
@@ -83,6 +83,12 @@ export class AppElement extends LitElement {
 		return this;
 	}
 
+	@on("inspector-changed")
+	onInspectorChanged(event: studio.InspectorChanged): void {
+		const data = event.detail ? JSON.parse(event.detail) : null;
+		console.log("Inspector changed:", data);
+	}
+
 	@on("keydown")
 	@on("keyup")
 	pipeKeyboardEvents(event: KeyboardEvent): void {
diff --git a/studio-frontend/src/inspector_dummy.ts b/studio-frontend/src/inspector_dummy.ts
deleted file mode 100644
index 0de89eb..0000000
--- a/studio-frontend/src/inspector_dummy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {type InspectorChanged} from "@storyteller/studio";
-
-document.addEventListener('inspector-changed', (event) => {
-    // Cast the event to the InspectorDomChanged type to access its details in TypeScript
-    const customEvent = event as InspectorChanged;
-
-    const data = customEvent['detail'];
-
-    //print to console
-    console.log(data);
-    
-});
\ No newline at end of file
diff --git a/studio-frontend/src/main.ts b/studio-frontend/src/main.ts
index 7356e23..ba385d9 100644
--- a/studio-frontend/src/main.ts
+++ b/studio-frontend/src/main.ts
@@ -1,3 +1 @@
-import "./app/app.element";
-
-import "./inspector_dummy";
\ No newline at end of file
+import "./app/app.element";
\ No newline at end of file