feat: integrate Monaco Editor with tabs, NWScript syntax, and session persistence

2026-04-20 19:06:00 -04:00
parent 42d7f4b041
commit eaca2d8a6c
8 changed files with 617 additions and 0 deletions
@@ -0,0 +1,63 @@
+import { useCallback, useMemo } from "react";
+import { MonacoEditor } from "../components/editor/MonacoEditor";
+import { EditorTabs } from "../components/editor/EditorTabs";
+import { useEditorState } from "../hooks/useEditorState";
+
+export function Editor() {
+  const {
+    openTabs,
+    activeTab,
+    dirtyFiles,
+    selectTab,
+    closeFile,
+    updateContent,
+    getContent,
+  } = useEditorState();
+
+  const tabs = useMemo(
+    () =>
+      openTabs.map((path: string) => ({
+        path,
+        dirty: dirtyFiles.has(path),
+      })),
+    [openTabs, dirtyFiles],
+  );
+
+  const activeContent = activeTab ? (getContent(activeTab) ?? "") : "";
+
+  const handleChange = useCallback(
+    (value: string) => {
+      if (activeTab) {
+        updateContent(activeTab, value);
+      }
+    },
+    [activeTab, updateContent],
+  );
+
+  return (
+    <div className="flex h-screen flex-col" style={{ backgroundColor: "var(--forge-bg)" }}>
+      <EditorTabs
+        tabs={tabs}
+        activeTab={activeTab}
+        onSelect={selectTab}
+        onClose={closeFile}
+      />
+      <div className="flex-1 overflow-hidden">
+        {activeTab ? (
+          <MonacoEditor
+            key={activeTab}
+            filePath={activeTab}
+            content={activeContent}
+            onChange={handleChange}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center">
+            <p style={{ color: "var(--forge-text-secondary)" }} className="text-lg">
+              Open a file from the File Explorer to start editing
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}