@editora/light-code-editor

v1.0.3

Published

6 days ago

Lightweight, extensible code editor for the web — syntax highlighting, line numbers, code folding, and a plugin-friendly API. Ideal for embedding in docs, demos, and web apps.

0High
0Medium
0Low

ajaykr089

code-editor lightweight-editor syntax-highlighting javascript-editor typescript-editor web-editor code-playground line-numbers code-folding plugin-friendly

Light Code Editor

A lightweight, modular code editor library inspired by CodeMirror, optimized for embedding inside rich text editors.

Features

✅ Self-Contained Library - Everything needed (including CSS) is bundled within the library ✅ Modular Architecture - Extension-based system for maximum flexibility ✅ Syntax Highlighting - HTML syntax highlighting with VS Code-style colors ✅ Themes - Light and dark theme support ✅ Line Numbers - Optional line number gutter ✅ Search - Find and highlight functionality ✅ Bracket Matching - Automatic bracket pair highlighting ✅ Code Folding - Collapse/expand code sections ✅ Read-Only Mode - Prevent text modifications ✅ TypeScript Support - Full TypeScript definitions ✅ Zero Dependencies - Pure JavaScript implementation

Installation

npm install @editora/light-code-editor

Quick Start

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@editora/light-code-editor/dist/light-code-editor.css">
</head>
<body>
  <div id="editor"></div>

  <script type="module">
    import { createEditor, LineNumbersExtension, SyntaxHighlightingExtension } from '@editora/light-code-editor';

    const editor = createEditor(document.getElementById('editor'), {
      value: '<div class="hello">Hello World</div>',
      theme: 'dark',
      extensions: [
        new LineNumbersExtension(),
        new SyntaxHighlightingExtension()
      ]
    });

    // Get current content
    console.log(editor.getValue());

    // Listen for changes
    editor.on('change', (changes) => {
      console.log('Content changed:', changes);
    });
  </script>
</body>
</html>

API

`createEditor(container, config)`

Factory function to create a new editor instance.

Parameters

container: HTMLElement - The DOM element to attach the editor to
config: EditorConfig - Configuration options

EditorConfig

interface EditorConfig {
  value?: string;                    // Initial content
  theme?: 'light' | 'dark';          // Theme
  readOnly?: boolean;                // Read-only mode
  extensions?: EditorExtension[];    // Extensions to load
  keymap?: Record<string, string>;   // Custom key bindings
}

Editor Methods

interface EditorAPI {
  // Content
  getValue(): string;
  setValue(value: string): void;

  // Focus & Selection
  focus(): void;
  hasFocus(): boolean;

  // Theme & Appearance
  setTheme(theme: 'light' | 'dark'): void;

  // Read-only mode
  setReadOnly(readOnly: boolean): void;

  // Extensions
  registerCommand(name: string, handler: Function): void;

  // Events
  on(event: string, handler: Function): void;
  off(event: string, handler: Function): void;
}

Extensions

Core Extensions

`LineNumbersExtension`

Adds line numbers to the left gutter.

import { LineNumbersExtension } from '@editora/light-code-editor';

const editor = createEditor(container, {
  extensions: [new LineNumbersExtension()]
});

`SyntaxHighlightingExtension`

Provides HTML syntax highlighting.

import { SyntaxHighlightingExtension } from '@editora/light-code-editor';

const editor = createEditor(container, {
  extensions: [new SyntaxHighlightingExtension()]
});

`ThemeExtension`

Enables theme switching.

import { ThemeExtension } from '@editora/light-code-editor';

const editor = createEditor(container, {
  extensions: [new ThemeExtension()]
});

`ReadOnlyExtension`

Adds read-only mode functionality.

import { ReadOnlyExtension } from '@editora/light-code-editor';

const editor = createEditor(container, {
  extensions: [new ReadOnlyExtension()]
});

`SearchExtension`

Provides search and replace functionality.

import { SearchExtension } from '@editora/light-code-editor';

const editor = createEditor(container, {
  extensions: [new SearchExtension()]
});

`BracketMatchingExtension`

Highlights matching brackets.

import { BracketMatchingExtension } from '@editora/light-code-editor';

const editor = createEditor(container, {
  extensions: [new BracketMatchingExtension()]
});

`CodeFoldingExtension`

Enables code folding functionality.

import { CodeFoldingExtension } from '@editora/light-code-editor';

const editor = createEditor(container, {
  extensions: [new CodeFoldingExtension()]
});

Custom Extensions

Create your own extensions by implementing the EditorExtension interface:

import { EditorExtension, EditorAPI } from '@editora/light-code-editor';

class MyExtension implements EditorExtension {
  public readonly name = 'my-extension';

  setup(editor: EditorAPI): void {
    // Initialize your extension
    editor.registerCommand('my-command', () => {
      console.log('My command executed!');
    });
  }

  destroy(): void {
    // Cleanup
  }
}

Styling

The library includes its own CSS file that provides complete styling. Include it in your HTML:

<link rel="stylesheet" href="dist/light-code-editor.css">

CSS Classes

.rte-light-editor - Main editor container
.rte-light-editor-content - Textarea element
.rte-light-editor-gutter - Line numbers gutter
.rte-syntax-highlight-overlay - Syntax highlighting overlay
.rte-light-editor.dark - Dark theme
.rte-light-editor.light - Light theme

Architecture

The editor follows a modular, extension-first architecture:

EditorCore
├── TextModel (content management)
├── View (DOM rendering)
├── Extension Registry
├── Command System
└── Event System

Design Principles

Self-Contained - Everything needed is included
Extension-First - All features are extensions
Zero Dependencies - Pure JavaScript
Type-Safe - Full TypeScript support
Performant - Optimized for large documents

Browser Support

Chrome 60+
Firefox 60+
Safari 12+
Edge 79+

Contributing

This library follows the CodeMirror architecture principles and is designed to be maintainable and extensible. When adding features:

Implement as extensions, not core modifications
Maintain TypeScript types
Include comprehensive tests
Update documentation

License

MIT License - see LICENSE file for details.

Author

Ajay Kumar [email protected]

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme