dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

FIX: Replace all text editors with unified CodeMirror interface

Browse Source 
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:
ZacharyZcR
2025-09-24 07:52:29 +08:00
parent fc6acbb81f
commit 2006a0a089
5 changed files with 91 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/ui/Desktop/Apps/Credentials/CredentialEditor.tsx
View File

@@ -28,6 +28,8 @@ import {
generateKeyPair,
} from "@/ui/main-axios";
import { useTranslation } from "react-i18next";
import CodeMirror from "@uiw/react-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import type {
Credential,
CredentialEditorProps,
@@ -908,23 +910,31 @@ export function CredentialEditor({
</div>
</div>
<FormControl>
<textarea
placeholder={t(
"placeholders.pastePrivateKey",
)}
className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
<CodeMirror
value={
typeof field.value === "string"
? field.value
: ""
}
onChange={(e) => {
field.onChange(e.target.value);
onChange={(value) => {
field.onChange(value);
debouncedKeyDetection(
e.target.value,
value,
form.watch("keyPassword"),
);
}}
placeholder={t("placeholders.pastePrivateKey")}
theme={oneDark}
className="border border-input rounded-md"
minHeight="120px"
basicSetup={{
lineNumbers: true,
foldGutter: false,
dropCursor: false,
allowMultipleSelections: false,
highlightSelectionMatches: false,
searchKeymap: false,
}}
/>
</FormControl>
{detectedKeyType && (
@@ -1062,13 +1072,23 @@ export function CredentialEditor({
</Button>
</div>
<FormControl>
<textarea
placeholder={t("placeholders.pastePublicKey")}
className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
<CodeMirror
value={field.value || ""}
onChange={(e) => {
field.onChange(e.target.value);
debouncedPublicKeyDetection(e.target.value);
onChange={(value) => {
field.onChange(value);
debouncedPublicKeyDetection(value);
}}
placeholder={t("placeholders.pastePublicKey")}
theme={oneDark}
className="border border-input rounded-md"
minHeight="120px"
basicSetup={{
lineNumbers: true,
foldGutter: false,
dropCursor: false,
allowMultipleSelections: false,
highlightSelectionMatches: false,
searchKeymap: false,
}}
/>
</FormControl>