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,65 @@
+import React, { useEffect, useState } from "react";
+import { highlightCode, loadLanguage } from "../utils/language";
+
+interface SyntaxHighlighterProps {
+  code: string;
+  language: string;
+  showLineNumbers?: boolean;
+}
+
+export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
+  code,
+  language,
+  showLineNumbers = true,
+}) => {
+  const [highlighted, setHighlighted] = useState(">");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const highlight = async () => {
+      await loadLanguage(language);
+      setHighlighted(highlightCode(code, language));
+    };
+    void highlight();
+  }, [code, language]);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const lines = code.split("\n");
+
+  return (
+    <div className="syntax-highlighter">
+      <div className="highlighter-toolbar">
+        <span className="language-badge">{language}</span>
+        <button
+          className="copy-button"
+          onClick={handleCopy}
+          type="button"
+        >
+          {copied ? "Copied!" : "Copy"}
+        </button>
+      </div>
+      <div className="code-container">
+        {showLineNumbers && (
+          <div className="line-numbers">
+            {lines.map((_, i) => (
+              <div key={i} className="line-number">
+                {i + 1}
+              </div>
+            ))}
+          </div>
+        )}
+        <pre className="code-block">
+          <code
+            className={`language-${language}`}
+            dangerouslySetInnerHTML={{ __html: highlighted }}
+          />
+        </pre>
+      </div>
+    </div>
+  );
+};