feat: integrate monaco editor

src/renderer/src/pages/editor/editor.scss

@@ -15,4 +15,17 @@
   font-size: 7px;
   font-weight: 500;
   color: globals.$body-color;
+  display: flex;
+  align-items: center;
+  gap: globals.$spacing-unit;
+  height: 100%;
 }
+
+.editor-header-status {
+  width: globals.$spacing-unit;
+  height: globals.$spacing-unit;
+  background-color: globals.$body-color;
+  border-radius: 50%;
+  display: inline-flex;
+  align-self: center;
+}

src/renderer/src/pages/editor/editor.tsx

@@ -1,18 +1,44 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { SkeletonTheme } from "react-loading-skeleton";
 import { vars } from "@renderer/theme.css";
 import "./editor.scss";
+import { Editor as Monaco } from "@monaco-editor/react";
 
 export default function Editor() {
+  const [code, setCode] = useState("");
+  const [currentCode, setCurrentCode] = useState("");
+  const [updated, setUpdated] = useState(true);
+
   useEffect(() => {
     console.log("spectre");
   }, []);
 
+  useEffect(() => {
+    setUpdated(currentCode === code);
+  }, [code, currentCode]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 's') {
+        e.preventDefault();
+        setCode(currentCode);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [currentCode]);
+
+  const handleEditorChange = (value: string | undefined) => {
+    setCurrentCode(value || "");
+  };
+
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <div className="editor-header">
         <div className="editor-header-title">
           <h1>CSS Editor</h1>
+          {!updated && <div className="editor-header-status"/>}
         </div>
       </div>
 
@@ -27,7 +53,16 @@ export default function Editor() {
           justifyContent: "center",
         }}
       >
-        <p>spectre</p>
+        <Monaco
+          height="100%"
+          width="100%"
+          defaultLanguage="css"
+          theme="vs-dark"
+          value={currentCode}
+          onChange={handleEditorChange}
+          defaultValue={code}
+          className="editor-monaco"
+        />
       </div>
     </SkeletonTheme>
   );