Eru Code Editor

A powerful, customizable code editor component for Angular applications.

Features

• Syntax highlighting for JSON
• Light and dark theme support
• Formatting capabilities
• Line numbers
• Error linting
• Auto-completion
• Bracket matching
• Search functionality
• Multiple selections
• History (undo/redo)
• Customizable styling

Installation

npm install eru-code-editor

Usage

Import the component in your module:

import { EruCodeEditorComponent } from 'eru-code-editor';

@NgModule({
  imports: [
    EruCodeEditorComponent
  ]
})
export class YourModule { }

Use the component in your template:

<eru-code-editor
  [title]="'JSON Editor'"
  [content]="jsonContent"
  [language]="'json'"
  [readOnly]="false"
  [autoFormat]="true"
  [showLineNumbers]="true"
  [theme]="'light'"
  (contentChange)="onContentChange($event)"
  (error)="onError($event)">
</eru-code-editor>

Input Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | title | string | 'Code Editor' | The title displayed in the editor header | | content | string | '' | The initial content of the editor | | language | string | 'json' | The language mode (currently only JSON is supported) | | readOnly | boolean | false | Whether the editor is read-only | | autoFormat | boolean | true | Whether to automatically format the content | | showLineNumbers | boolean | true | Whether to show line numbers | | theme | 'light' | 'dark' | 'light' | The editor theme |

Output Events

| Event | Description | |-------|-------------| | contentChange | Emitted when the content changes | | error | Emitted when there's an error (e.g., invalid JSON) |

Styling

The component uses Material Design tokens for theming. You can customize the appearance by overriding the following CSS variables:

• --mat-sys-surface: Background color
• --mat-sys-on-surface: Text color
• --mat-sys-primary: Primary color (used for caret and selection)
• --mat-sys-surface-container: Gutter background color
• --mat-sys-on-surface-variant: Gutter text color
• --mat-sys-outline-variant: Border color

Development

To build the library:

ng build eru-code-editor

To run the tests:

ng test eru-code-editor

License

MIT