feat(playground): implement editor state management and messaging for code execution

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"

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" />;
 }

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 }),
+}));

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;
+}