Editor UI Components
Relevant source files
The following files were used as context for generating this wiki page:
Editor UI Components constitute the visual and interactive layers of the Acode editor. These components manage file navigation, text input, command execution, and peripheral tools designed for mobile-first software development. The system integrates a core text editor (CodeMirror) with specialized utility bars and navigation panels to provide a full integrated development environment (IDE) experience on Android devices.
Sources: user-guide/index.md, user-guide/settings/editor-settings.md:1-3
Core Editor Surface
The primary interface component uses the CodeMirror engine to handle text rendering and user input. It supports various visual markers and gutters to assist with code navigation and diagnostics.
Visual Elements and Gutters
The editor surface includes several non-textual components that provide metadata and structural cues:
- Line Numbers: Displays the absolute or relative position of lines in the gutter.
- Lint Gutter: Shows diagnostic markers provided by Language Server Protocol (LSP) integrations.
- Indent Guides: Renders vertical lines to indicate code block levels.
- Color Preview: Displays inline swatches for CSS color values.
Sources: user-guide/settings/editor-settings.md:5-24, user-guide/settings/editor-settings.md:36-37
Editor Configuration
| Component Parameter | Function | Default Value |
|---|---|---|
Font Size | Sets the CSS size string for text. | 12px |
Line Height | Adjusts spacing between lines. | 2 |
Text Wrap | Wraps long lines within the viewport. | On |
Cursor Controller | Configures touch handle size (Small, Medium, Large). | Medium |
Sources: user-guide/settings/editor-settings.md:7-23
Navigation and File Management
The UI manages projects through the File Browser and sidebar areas. These components handle the transition between the file system and the active editing buffer.
File Browser Home View
The Home View serves as the connection manager for local and remote storage.
The diagram shows the hierarchy of actions available within the File Browser's root interface.
Sources: user-guide/file-browser.md:12-30
Active Workspace and Sidebar
When a user selects a folder, the UI sets it as the Active Workspace. This action populates the sidebar for rapid access during editing sessions. The application also allows configuring the visibility of "Active Files" (tabs) in the header, sidebar, or bottom areas.
Sources: user-guide/file-browser.md:68-72, user-guide/settings/app-settings.md:14
QuickTools Toolbar
QuickTools is a specialized UI component designed for touch devices. It provides a two-row customizable toolbar above the software keyboard to input characters not easily accessible on mobile layouts.
Interaction Logic
QuickTools responds to both taps and gestures:
- Swipe Left/Right: Reveals hidden keys that exceed the screen width.
- Single Tap (Toggler): Switches between showing one row or two rows.
- Hold/Double Tap (Toggler): Hides the component from the view.
Sources: user-guide/quicktools.md:16-33
UI Configuration
Users modify the toolbar through a drag-and-drop interface in the App Settings.
The sequence shows the process of customizing the QuickTools component layout.
Sources: user-guide/quicktools.md:46-52, user-guide/settings/app-settings.md:6-9
Command Palette and Overlays
The Command Palette acts as a central modal overlay for executing actions. It provides a searchable interface that bypasses standard menu navigation.
- Activation: Triggered via
Ctrl + Shift + Por a dedicated QuickTools button. - Search: A text input field filters a list of available commands.
- Execution: Selection via arrow keys or touch runs the command logic.
Sources: user-guide/command-palette.md:1-24, tutorials/command-palette.md:20-30
Integrated Terminal Surface
The terminal component renders a Linux environment as an editor tab. It functions as a foreground service to maintain session persistence.
| Feature | UI Implementation |
|---|---|
| Output Rendering | Supports xterm-compatible sequences and images. |
| Input | Captures keyboard events and provides a long-press context menu for copy/paste. |
| Tab Management | Operates as standard editor tabs; supports multiple concurrent sessions. |
Sources: user-guide/terminal.md:10-15, user-guide/terminal.md:79-85, user-guide/settings/terminal-settings.md:23-30
Visual Styles and Themes
The UI appearance is governed by a dual-theming system.
- App Themes: Stylize global components including dialogs, sidebars, and tab containers.
- Editor Themes: Specifically target syntax highlighting within the CodeMirror surface.
Sources: user-guide/settings/themes.md:5-15
Editor UI Components integrate core editing functionality with mobile-optimized input and navigation systems to provide a desktop-class development experience on Android. Through the combination of the CodeMirror surface, the QuickTools toolbar, and the sidebar-driven file management, the system maintains a balance between screen real estate and functional density.