feat: integrate monaco editor

package.json

@@ -36,6 +36,7 @@
     "@electron-toolkit/utils": "^3.0.0",
     "@fontsource/noto-sans": "^5.1.0",
     "@hookform/resolvers": "^3.9.1",
+    "@monaco-editor/react": "^4.6.0",
     "@primer/octicons-react": "^19.9.0",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@reduxjs/toolkit": "^2.2.3",

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>
   );

yarn.lock

@@ -1917,6 +1917,20 @@
     lodash "^4.17.15"
     tmp-promise "^3.0.2"
 
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
+  dependencies:
+    "@monaco-editor/loader" "^1.4.0"
+
 "@napi-rs/nice-android-arm-eabi@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@napi-rs/nice-android-arm-eabi/-/nice-android-arm-eabi-1.0.1.tgz#9a0cba12706ff56500df127d6f4caf28ddb94936"
@@ -8769,6 +8783,11 @@ stat-mode@^1.0.0:
   resolved "https://registry.yarnpkg.com/stat-mode/-/stat-mode-1.0.0.tgz#68b55cb61ea639ff57136f36b216a291800d1465"
   integrity sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 "string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"