|
1 | 1 | --- |
2 | 2 | title: Code Editor Panel |
3 | | -description: Professional code editing environment with syntax highlighting, intelligent file management, and seamless terminal integration. |
| 3 | +description: Where you write and organize your code files |
4 | 4 | --- |
5 | 5 |
|
6 | | -The Code Editor Panel serves as your primary workspace for writing, editing, and managing code files. It combines a powerful code editor with intuitive file navigation and terminal integration in a unified interface. |
| 6 | +The Code Editor is where you write your code. It's like a super-smart text editor that understands programming and helps you write better code. |
7 | 7 |
|
8 | | -## Overview |
| 8 | +## What is the Code Editor? |
9 | 9 |
|
10 | | -Designed for modern development workflows, the editor panel provides everything you need for efficient coding: syntax highlighting, intelligent file management, and seamless terminal access. The resizable layout adapts to your preferred working style. |
| 10 | +Think of the Code Editor as a special notebook for writing code. It colors your code to make it easier to read and helps you find mistakes. |
11 | 11 |
|
12 | 12 | <CardGroup cols={3}> |
13 | | - <Card title="Code Editing" icon="code"> |
14 | | - Advanced editor with syntax highlighting and intelligence |
| 13 | + <Card title="Write Code" icon="code"> |
| 14 | + Type your code with helpful colors and hints |
15 | 15 | </Card> |
16 | | - <Card title="File Management" icon="folder"> |
17 | | - Hierarchical file browsing with advanced operations |
| 16 | + <Card title="Organize Files" icon="folder"> |
| 17 | + See all your project files in a tree |
18 | 18 | </Card> |
19 | | - <Card title="Terminal Integration" icon="terminal"> |
20 | | - Built-in command line access |
| 19 | + <Card title="Run Commands" icon="terminal"> |
| 20 | + Use the terminal without leaving the editor |
21 | 21 | </Card> |
22 | 22 | </CardGroup> |
23 | 23 |
|
24 | | -## Main Interface |
| 24 | +## Main Parts |
25 | 25 |
|
26 | | -<AccordionGroup> |
27 | | - <Accordion title="File Navigation" icon="folder-tree"> |
28 | | - ### Project File Tree |
| 26 | +### Finding Your Files |
29 | 27 |
|
30 | | - Navigate your project structure with powerful browsing features: |
31 | | - - **Hierarchical display** - Expandable folder structure |
32 | | - - **File type indicators** - Visual icons for different file types |
33 | | - - **Unsaved changes** - Clear indicators for modified files |
34 | | - - **Hidden file filtering** - Automatic exclusion of system files |
| 28 | +On the left side, you'll see all your project files organized like folders on your computer: |
| 29 | +- Click folders to open them and see what's inside |
| 30 | +- Click files to open and edit them |
| 31 | +- Icons show you what type of file it is (JavaScript, image, etc.) |
| 32 | +- A dot appears next to files you've changed but haven't saved |
35 | 33 |
|
36 | | - </Accordion> |
| 34 | +### Writing Code |
37 | 35 |
|
38 | | - <Accordion title="Code Editor" icon="edit"> |
39 | | - ### Main Editing Area |
| 36 | +The big area in the middle is where you write your code: |
| 37 | +- **Colors** - Different parts of your code show up in different colors to make it easier to read |
| 38 | +- **Suggestions** - As you type, the editor suggests what you might want to write next |
| 39 | +- **Find and replace** - Search for words in your code and change them |
| 40 | +- **Multiple spots** - Edit several places at once |
40 | 41 |
|
41 | | - Professional code editing with modern features: |
42 | | - - **Syntax highlighting** - Support for all major programming languages |
43 | | - - **Auto-completion** - Intelligent code suggestions |
44 | | - - **Multiple cursors** - Simultaneous editing at multiple locations |
45 | | - - **Find and replace** - Advanced search within files |
| 42 | +### Using the Terminal |
46 | 43 |
|
47 | | - </Accordion> |
| 44 | +At the bottom, you can open a terminal to run commands: |
| 45 | +- Open multiple terminal tabs for different tasks |
| 46 | +- Make it bigger or smaller by dragging |
| 47 | +- See commands you ran before |
| 48 | +- Run commands without leaving your code |
48 | 49 |
|
49 | | - <Accordion title="Terminal Access" icon="terminal"> |
50 | | - ### Integrated Command Line |
| 50 | +## What You Can Do With Files |
51 | 51 |
|
52 | | - Execute commands without leaving your coding environment: |
53 | | - - **Multiple terminal tabs** - Different command sessions |
54 | | - - **Resizable panels** - Adjust terminal size as needed |
55 | | - - **Command history** - Access to previous commands |
56 | | - - **Environment integration** - Full project context |
| 52 | +You can manage your files in many ways: |
| 53 | +- **Create** - Make new files and folders |
| 54 | +- **Delete** - Remove files you don't need |
| 55 | +- **Rename** - Change file names |
| 56 | +- **Upload** - Drag files from your computer into the editor |
| 57 | +- **Search** - Find files quickly by name |
57 | 58 |
|
58 | | - </Accordion> |
59 | | -</AccordionGroup> |
| 59 | +### Reviewing AI Changes |
60 | 60 |
|
61 | | -## File Operations |
62 | | - |
63 | | -<BadgeGroup> |
64 | | - <Badge variant="secondary">Create Files/Folders</Badge> |
65 | | - <Badge variant="secondary">Delete/Rename</Badge> |
66 | | - <Badge variant="secondary">Drag & Drop Upload</Badge> |
67 | | - <Badge variant="secondary">File Locking</Badge> |
68 | | - <Badge variant="secondary">Diff Approval</Badge> |
69 | | -</BadgeGroup> |
70 | | - |
71 | | -### File Management Features |
72 | | - |
73 | | -- **Context menus** - Right-click for quick operations |
74 | | -- **Drag and drop** - Upload files from your computer |
75 | | -- **File locking** - Prevent conflicts in team environments |
76 | | -- **Search integration** - Quick file location |
77 | | -- **Diff approval workflow** - Review and approve AI-generated file changes before applying them |
78 | | - |
79 | | -### Diff Approval Workflow |
80 | | - |
81 | | -CodinIT now includes an optional diff approval system that lets you review AI-generated changes before they're applied to your files: |
82 | | - |
83 | | -- **Visual diff comparison** - See exactly what changes the AI wants to make |
84 | | -- **Side-by-side view** - Compare before and after versions inline |
85 | | -- **Approve or reject** - Full control over which changes get applied |
86 | | -- **Syntax highlighting** - Language-aware diff display for better readability |
| 61 | +When the AI wants to change your files, you can review the changes first: |
| 62 | +- **See the differences** - Compare the old and new versions side by side |
| 63 | +- **Approve or reject** - Choose which changes to keep |
| 64 | +- **Colored highlights** - See exactly what's being added or removed |
87 | 65 |
|
88 | 66 | <Callout type="info"> |
89 | | - **Enable Diff Approval**: Toggle this feature in Settings → Features to review all AI file changes before they're applied to your project. |
| 67 | + **Review Changes**: Turn on diff approval in Settings → Features to check all AI changes before they're saved to your files. |
90 | 68 | </Callout> |
0 commit comments