feat: implement file editor with syntax highlighting and editing

- Install react-simple-code-editor and prismjs dependencies - Create language detection utility with 50+ file extensions - Create SyntaxHighlighter component with Prism.js highlighting - Create CodeEditor component with syntax-highlighted editing - Create CommitDialog with diff preview and commit message - Create FileEditor component integrating view/edit/commit flow - Replace FileViewer with FileEditor in RepoWorkspace - Add comprehensive CSS styles for editor, highlighter, and dialog - Support keyboard shortcuts: Ctrl+E (toggle edit), Ctrl+S (save) - Quality gates: typecheck ✓ lint ✓ build ✓
2026-05-19 16:04:48 +02:00
parent 84bf7e4aeb
commit 7261c75bb2
14 changed files with 1533 additions and 90 deletions
@@ -0,0 +1,228 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { apiClient } from "../api/client";
+import { useAuth } from "../state/auth";
+import { CodeEditor } from "../components/code-editor";
+import { CommitDialog } from "../components/commit-dialog";
+import { SyntaxHighlighter } from "../components/syntax-highlighter";
+import { detectLanguage } from "../utils/language";
+
+interface FileEditorProps {
+  projectId: string;
+  repoId: string;
+}
+
+export const FileEditor: React.FC<FileEditorProps> = ({
+  projectId,
+  repoId,
+}) => {
+  const [searchParams] = useSearchParams();
+  const { user } = useAuth();
+
+  const [mode, setMode] = useState<"view" | "edit">("view");
+  const [content, setContent] = useState(">");
+  const [originalContent, setOriginalContent] = useState(">");
+  const [language, setLanguage] = useState("plaintext");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showCommitDialog, setShowCommitDialog] = useState(false);
+  const [isBinary, setIsBinary] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const branch = searchParams.get("branch") || "main";
+  const filePath = searchParams.get("file");
+
+  const loadFile = useCallback(async () => {
+    if (!filePath) {
+      setContent("");
+      setOriginalContent("");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await apiClient.get(
+        `/projects/${projectId}/repositories/${repoId}/files/content`,
+        {
+          params: {
+            branch,
+            path: filePath,
+          },
+        }
+      );
+      const data = response.data;
+      if (data.is_binary) {
+        setIsBinary(true);
+        setContent("Binary file - cannot display");
+        setOriginalContent("");
+      } else {
+        setIsBinary(false);
+        setContent(data.content);
+        setOriginalContent(data.content);
+        setLanguage(detectLanguage(filePath));
+      }
+    } catch {
+      setError("Failed to load file");
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, repoId, branch, filePath]);
+
+  useEffect(() => {
+    void loadFile();
+  }, [loadFile]);
+
+  const handleEdit = () => {
+    if (isBinary) return;
+    setMode("edit");
+  };
+
+  const handleCancel = () => {
+    setContent(originalContent);
+    setMode("view");
+    setShowCommitDialog(false);
+  };
+
+  const handleSave = () => {
+    if (content === originalContent) {
+      setMode("view");
+      return;
+    }
+    setShowCommitDialog(true);
+  };
+
+  const handleCommit = async (message: string) => {
+    if (!filePath || !user) return;
+
+    setSaving(true);
+    try {
+      await apiClient.post(
+        `/projects/${projectId}/repositories/${repoId}/files/content`,
+        {
+          path: filePath,
+          branch,
+          content,
+          commit_message: message,
+          author_name: user.name || "User",
+          author_email: user.email || "user@example.com",
+        }
+      );
+      setOriginalContent(content);
+      setMode("view");
+      setShowCommitDialog(false);
+    } catch {
+      setError("Failed to save changes");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "e") {
+        e.preventDefault();
+        if (mode === "view" && !isBinary) {
+          handleEdit();
+        } else if (mode === "edit") {
+          handleCancel();
+        }
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        if (mode === "edit") {
+          handleSave();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [mode, isBinary, content, originalContent]);
+
+  if (!filePath) {
+    return (
+      <div className="file-viewer-empty">
+        <p className="muted">Select a file to view its contents</p>
+      </div>
+    );
+  }
+
+  if (loading) return <p className="muted">Loading file...</p>;
+  if (error) return <p className="error-text">{error}</p>;
+
+  return (
+    <div className="file-editor">
+      <div className="file-editor-toolbar">
+        <div className="file-breadcrumbs">
+          {filePath.split("/").map((part, i, arr) => (
+            <span key={i}>
+              {part}
+              {i < arr.length - 1 && (
+                <span className="breadcrumb-sep">/</span>
+              )}
+            </span>
+          ))}
+        </div>
+        <div className="file-actions">
+          {mode === "view" && !isBinary && (
+            <button
+              className="btn-primary"
+              onClick={handleEdit}
+              type="button"
+            >
+              Edit
+            </button>
+          )}
+          {mode === "edit" && (
+            <>
+          <button
+            className="btn-primary"
+            onClick={handleSave}
+            disabled={content === originalContent || saving}
+            type="button"
+          >
+            {saving ? "Saving..." : "Save"}
+          </button>
+              <button
+                className="btn-secondary"
+                onClick={handleCancel}
+                type="button"
+              >
+                Cancel
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="file-editor-content">
+        {mode === "view" && (
+          <SyntaxHighlighter
+            code={content}
+            language={language}
+            showLineNumbers={!isBinary}
+          />
+        )}
+
+        {mode === "edit" && (
+          <CodeEditor
+            value={content}
+            onChange={setContent}
+            language={language}
+          />
+        )}
+      </div>
+
+      <CommitDialog
+        isOpen={showCommitDialog}
+        filePath={filePath}
+        originalContent={originalContent}
+        newContent={content}
+        onCommit={handleCommit}
+        onCancel={() => setShowCommitDialog(false)}
+      />
+    </div>
+  );
+};