From 22225ed0426e3956266f1cf1de0bee5fc92042b5 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 17 Dec 2024 14:19:27 +0800
Subject: [PATCH] feat(playground): add Python support in code editor and
 multi-model editor using path as an identifier

---
 src/app/playground/components/code-editor.tsx     | 15 +++++++++------
 .../playground/components/playground-sidebar.tsx  |  8 ++++++--
 src/store/codeEditorStore.ts                      |  4 ++++
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/app/playground/components/code-editor.tsx b/src/app/playground/components/code-editor.tsx
index fb17544..c71b4dd 100644
--- a/src/app/playground/components/code-editor.tsx
+++ b/src/app/playground/components/code-editor.tsx
@@ -24,14 +24,16 @@ const ADDITIONAL_THEMES = [
   "vitesse-light",
 ];
 
-const ADDITIONAL_LANGUAGES = ["c", "java"] as const satisfies Parameters<
-  typeof createHighlighter
->[0]["langs"];
+const ADDITIONAL_LANGUAGES = [
+  "c",
+  "java",
+  "python",
+] as const satisfies Parameters<typeof createHighlighter>[0]["langs"];
 
 export function CodeEditor() {
   const monacoRef = useRef<Monaco | null>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const { lang, theme, value, isLigature } = useCodeEditorStore();
+  const { lang, path, theme, value, isLigature } = useCodeEditorStore();
 
   useEffect(() => {
     if (monacoRef.current && editorRef.current) {
@@ -77,10 +79,11 @@ export function CodeEditor() {
 
   return (
     <MonacoEditor
-      language={lang}
+      defaultLanguage={lang}
       theme={theme}
+      path={path}
       options={options}
-      value={value}
+      defaultValue={value}
       onMount={handleEditorMount}
     />
   );
diff --git a/src/app/playground/components/playground-sidebar.tsx b/src/app/playground/components/playground-sidebar.tsx
index 2cc0d1c..ae23804 100644
--- a/src/app/playground/components/playground-sidebar.tsx
+++ b/src/app/playground/components/playground-sidebar.tsx
@@ -22,7 +22,7 @@ import {
 import * as actions from "@/actions";
 import { useTranslations } from "next-intl";
 import { useSession } from "next-auth/react";
-import { COriginal, JavaOriginal } from "devicons-react";
+import { COriginal, JavaOriginal, PythonOriginal } from "devicons-react";
 import { useCodeEditorStore } from "@/store/codeEditorStore";
 import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
 
@@ -139,14 +139,17 @@ function Tree({ item }: { item: FileTree }) {
     fileIcon = <COriginal />;
   } else if (fileExtension === "java") {
     fileIcon = <JavaOriginal />;
+  } else if (fileExtension === "py") {
+    fileIcon = <PythonOriginal />;
   }
 
   const [isOpen, setIsOpen] = React.useState(false);
-  const { setLang, setValue } = useCodeEditorStore();
+  const { setLang, setPath, setValue } = useCodeEditorStore();
 
   const langMap: { [key: string]: string } = {
     c: "c",
     java: "java",
+    py: "python",
   };
 
   const handleFileClick = async () => {
@@ -163,6 +166,7 @@ function Tree({ item }: { item: FileTree }) {
       ).toString("utf-8");
       const lang = langMap[fileExtension ?? ""] || "plaintext";
       setLang(lang);
+      setPath(path);
       setValue(decodedContent);
     }
   };
diff --git a/src/store/codeEditorStore.ts b/src/store/codeEditorStore.ts
index 88cb8b5..eec0b54 100644
--- a/src/store/codeEditorStore.ts
+++ b/src/store/codeEditorStore.ts
@@ -2,10 +2,12 @@ import { create } from "zustand";
 
 interface CodeEditorState {
   lang: string;
+  path: string;
   theme: string;
   value: string;
   isLigature: boolean;
   setLang: (lang: string) => void;
+  setPath: (path: string) => void;
   setTheme: (theme: string) => void;
   setValue: (value: string) => void;
   setIsLigature: (isLigature: boolean) => void;
@@ -13,10 +15,12 @@ interface CodeEditorState {
 
 export const useCodeEditorStore = create<CodeEditorState>((set) => ({
   lang: "c",
+  path: "",
   theme: "one-dark-pro",
   value: "",
   isLigature: false,
   setLang: (lang) => set({ lang }),
+  setPath: (path) => set({ path }),
   setTheme: (theme) => set({ theme }),
   setValue: (value) => set({ value }),
   setIsLigature: (isLigature) => set({ isLigature }),