Skip to main content

​
Getting Started

We welcome contributions to Code Editor Thing! Whether you’re fixing bugs, adding features, or improving documentation, your help is appreciated.
1

Fork the Repository

Create your own fork of the project to work on changes independently.
2

Set Up Development Environment

Clone your fork and install dependencies:
git clone https://github.com/your-username/code-editor-thing.git
cd code-editor-thing
npm install
3

Create a Feature Branch

Create a branch for your changes:
git checkout -b feature/your-feature-name
Use descriptive branch names like:
  • feature/add-syntax-highlighting
  • fix/file-save-error
  • docs/update-readme

​
Development Workflow

​
Making Changes

1

Start Development Server

Run the app in development mode:
npm run dev
For testing Electron-specific features:
npm run electron:dev
2

Make Your Changes

Edit the relevant files. The main areas are:
  • Electron/Main Process: electron/main.ts, electron/preload.ts
  • React Components: src/components/
  • State Management: src/lib/editor-context.tsx
  • Styling: Tailwind classes in components
  • Editor Config: src/lib/utils.ts for CodeMirror setup
3

Test Your Changes

Test thoroughly in both web and Electron environments:
  • File operations (open, edit, save)
  • UI interactions (sidebar, tabs, theme switching)
  • Keyboard shortcuts
  • Terminal functionality (if modified)
  • Edge cases (empty folders, large files, special characters)

​
Code Style

Follow the existing code style to maintain consistency across the codebase.

​
TypeScript Conventions

// Use explicit types for function parameters and return values
function handleFileSelect(item: FileItem): Promise<void> {
  // ...
}

// Use interfaces for object shapes
interface EditorContextType {
  openFiles: OpenFile[]
  activeFilePath: string | null
  handleSave: () => Promise<void>
}

// Prefer const over let
const items = await readDirectory(path)

// Use optional chaining
window.electronAPI?.readFile(path)

​
React Conventions

// Use functional components with hooks
export default function Editor() {
  const { openFiles, activeFilePath } = useEditor()
  
  // Extract complex logic into custom hooks
  useEffect(() => {
    // ...
  }, [dependencies])
  
  return (
    <div className="flex flex-col">
      {/* ... */}
    </div>
  )
}

// Use destructuring for props
function TreeItem({ item, level }: { item: FileItem; level: number }) {
  // ...
}

​
File Organization

  • Components: One component per file, matching filename
  • Utilities: Group related utilities in src/lib/
  • Types: Define in the same file or src/lib/types.ts
  • Electron: Keep main process code in electron/

​
Testing Locally

# Run TypeScript compiler without emitting files
npx tsc --noEmit

​
Manual Testing Checklist

Open a folder with nested directories
Open multiple files in tabs
Edit and save files
Toggle sidebar (Cmd+B)
Toggle terminal (Cmd+Shift+T)
Test keyboard shortcuts (Cmd+S, Cmd+O)
Switch themes
Test with different file types (.js, .py, .md, etc.)
Test file tree navigation

​
Submitting Changes

1

Commit Your Changes

Write clear, concise commit messages:
git add .
git commit -m "Add syntax highlighting for Python files"
Good commit messages:
  • Fix: Prevent crash when saving untitled files
  • Feature: Add keyboard shortcut for closing tabs
  • Refactor: Extract theme logic into separate module
  • Docs: Update installation instructions
2

Push to Your Fork

Push your branch to GitHub:
git push origin feature/your-feature-name
3

Create a Pull Request

Open a pull request from your fork to the main repository.PR Description Should Include:
  • What problem does this solve?
  • What changes were made?
  • How to test the changes
  • Screenshots (for UI changes)
  • Related issue numbers (if applicable)

​
Pull Request Example

## Description
Adds syntax highlighting support for Python files using CodeMirror's Python language mode.

## Changes
- Imported `@codemirror/lang-python` in `src/lib/utils.ts`
- Updated `getLanguageExtension()` to detect `.py` files
- Added Python to supported languages list

## Testing
1. Open a `.py` file
2. Verify keywords, strings, and comments are highlighted
3. Test with both light and dark themes

## Screenshots
[Before/After screenshots]

Closes #42

​
Contribution Ideas

Bug Fixes

  • Fix reported issues
  • Handle edge cases
  • Improve error handling

New Features

  • Additional language support
  • Search/replace functionality
  • Git integration
  • Settings panel

Performance

  • Optimize large file handling
  • Reduce bundle size
  • Improve startup time

Documentation

  • Code comments
  • API documentation
  • User guides
  • Architecture diagrams

​
Code Review Process

After submitting a pull request:
  1. Automated Checks: Ensure builds pass (if CI is configured)
  2. Code Review: Maintainers review your code for quality and consistency
  3. Feedback: Address any requested changes
  4. Merge: Once approved, your PR will be merged

​
Areas to Explore

If you’re looking for ways to contribute, consider these areas:

​
Electron Integration

  • Menu customization (electron/main.ts:50-85)
  • Additional IPC handlers (electron/main.ts:104-166)
  • Native dialogs and OS integration
  • Window state persistence

​
Editor Features

  • Additional CodeMirror extensions (src/components/Editor.tsx:23-42)
  • Custom key bindings
  • Multi-cursor support
  • Code folding

​
UI/UX Improvements

  • Sidebar enhancements (src/components/Sidebar.tsx)
  • Tab management improvements (src/components/open-files.tsx)
  • Theme customization (src/lib/themes.ts)
  • Modal dialogs

​
State Management

  • File watcher integration (src/lib/editor-context.tsx)
  • Undo/redo for file operations
  • Session persistence
  • Recent files tracking

​
Getting Help

Architecture Guide

Understand the codebase structure

Building Guide

Learn about build processes
If you have questions or need help, open a discussion on GitHub or comment on relevant issues.

​
Thank You!

Your contributions help make Code Editor Thing better for everyone. We appreciate your time and effort in improving this project.

Build docs developers (and LLMs) love

Get started for freeTalk to us