FIX: Replace all text editors with unified CodeMirror interface
This commit enhances the user experience by standardizing all text editing components to use CodeMirror, providing consistent functionality across the entire application. **Text Editor Unification**: - Replaced all textarea elements with CodeMirror editors - Unified syntax highlighting and line numbering across all text inputs - Consistent oneDark theme implementation throughout the application **Fixed Components**: - FileViewer: Enhanced file editing with syntax highlighting for all file types - CredentialEditor: Improved SSH key editing experience with code editor features - HostManagerEditor: Better SSH private key input with proper formatting - FileManagerGrid: Fixed new file/folder creation in empty directories **Key Technical Improvements**: - Fixed oneDark theme import path from @uiw/codemirror-themes to @codemirror/theme-one-dark - Enhanced createIntent rendering logic to work properly in empty directories - Added automatic createIntent cleanup when navigating between directories - Configured consistent basicSetup options across all editors **User Experience Enhancements**: - Professional code editing interface for all text inputs - Line numbers and syntax highlighting for better readability - Consistent keyboard shortcuts and editing behavior - Improved accessibility and user interaction patterns Users now enjoy a unified, professional editing experience whether working with code files, configuration files, or SSH credentials. The interface is consistent, feature-rich, and optimized for developer workflows. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -49,7 +49,7 @@ import {
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { oneDark } from "@uiw/codemirror-themes";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { languages, loadLanguage } from "@uiw/codemirror-extensions-langs";
|
||||
|
||||
interface FileItem {
|
||||
@@ -802,13 +802,27 @@ export function FileViewer({
|
||||
{renderHighlightedText(editedContent)}
|
||||
</div>
|
||||
) : (
|
||||
// Directly show editable textarea
|
||||
<textarea
|
||||
// Use CodeMirror for all text files (unified editor experience)
|
||||
<CodeMirror
|
||||
value={editedContent}
|
||||
onChange={(e) => handleContentChange(e.target.value)}
|
||||
className="w-full h-full p-4 border-none resize-none outline-none font-mono text-sm overflow-auto bg-background text-foreground"
|
||||
onChange={(value) => handleContentChange(value)}
|
||||
extensions={
|
||||
getLanguageExtension(file.name)
|
||||
? [getLanguageExtension(file.name)!]
|
||||
: []
|
||||
}
|
||||
theme={oneDark}
|
||||
editable={isEditable}
|
||||
placeholder={t("fileManager.startTyping")}
|
||||
spellCheck={false}
|
||||
className="h-full text-sm"
|
||||
basicSetup={{
|
||||
lineNumbers: true,
|
||||
foldGutter: true,
|
||||
dropCursor: false,
|
||||
allowMultipleSelections: false,
|
||||
highlightSelectionMatches: false,
|
||||
searchKeymap: true,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user