From 5e6065d38d03a29c3cafa09d27c08aa2fd5be9b7 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Wed, 8 Jan 2025 15:30:22 +0800
Subject: [PATCH] feat(playground): implement editor state management and
 messaging for code execution

---
 src/app/playground/components/button/run.tsx |  9 +++++++
 src/app/playground/layout/editor-panel.tsx   | 25 +++++++++++++++++++-
 src/store/useEditorStore.ts                  | 10 ++++++++
 src/types/editor.ts                          |  7 ++++++
 4 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/store/useEditorStore.ts
 create mode 100644 src/types/editor.ts

diff --git a/src/app/playground/components/button/run.tsx b/src/app/playground/components/button/run.tsx
index d6690a6..9257c25 100644
--- a/src/app/playground/components/button/run.tsx
+++ b/src/app/playground/components/button/run.tsx
@@ -1,12 +1,21 @@
+"use client";
+
 import { Play } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useEditorStore } from "@/store/useEditorStore";
 
 export default function Run() {
+  const { language, code } = useEditorStore();
+
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button
         className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
         variant="outline"
+        onClick={() => {
+          console.log("Run language:", language);
+          console.log("Run code:", code);
+        }}
       >
         <Play
           className="-ms-1 me-2 opacity-60"
diff --git a/src/app/playground/layout/editor-panel.tsx b/src/app/playground/layout/editor-panel.tsx
index 8fbe0c4..cfd5497 100644
--- a/src/app/playground/layout/editor-panel.tsx
+++ b/src/app/playground/layout/editor-panel.tsx
@@ -1,3 +1,26 @@
+"use client";
+
+import { useEffect } from "react";
+import { useEditorStore } from "@/store/useEditorStore";
+
 export default function EditorPanel() {
-  return <iframe src="http://192.168.2.110:5173" className="w-full h-full" />;
+  const { setLanguage, setCode } = useEditorStore();
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin === "https://editor.litchi.icu") {
+        if (event.data.type === "editor-info") {
+          setLanguage(event.data.language);
+          setCode(event.data.code);
+        }
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  return <iframe src="https://editor.litchi.icu" className="w-full h-full" />;
 }
diff --git a/src/store/useEditorStore.ts b/src/store/useEditorStore.ts
new file mode 100644
index 0000000..cb4b9b4
--- /dev/null
+++ b/src/store/useEditorStore.ts
@@ -0,0 +1,10 @@
+import { create } from "zustand";
+import { EditorState } from "@/types/editor";
+
+export const useEditorStore = create<EditorState>((set) => ({
+  language: null,
+  code: null,
+
+  setLanguage: (language: string) => set({ language }),
+  setCode: (code: string) => set({ code }),
+}));
diff --git a/src/types/editor.ts b/src/types/editor.ts
new file mode 100644
index 0000000..8f2c0d5
--- /dev/null
+++ b/src/types/editor.ts
@@ -0,0 +1,7 @@
+export interface EditorState {
+  language: string | null;
+  code: string | null;
+
+  setLanguage: (language: string) => void;
+  setCode: (code: string) => void;
+}