@editora/light-code-editor 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +274 -0
  2. package/dist/index.es.js +1116 -0
  3. package/dist/index.umd.js +166 -0
  4. package/dist/light-code-editor.css +1 -0
  5. package/package.json +41 -0
package/README.md ADDED
@@ -0,0 +1,274 @@
1
+ # Light Code Editor
2
+
3
+ A lightweight, modular code editor library inspired by CodeMirror, optimized for embedding inside rich text editors.
4
+
5
+ ## Features
6
+
7
+ ✅ **Self-Contained Library** - Everything needed (including CSS) is bundled within the library
8
+ ✅ **Modular Architecture** - Extension-based system for maximum flexibility
9
+ ✅ **Syntax Highlighting** - HTML syntax highlighting with VS Code-style colors
10
+ ✅ **Themes** - Light and dark theme support
11
+ ✅ **Line Numbers** - Optional line number gutter
12
+ ✅ **Search** - Find and highlight functionality
13
+ ✅ **Bracket Matching** - Automatic bracket pair highlighting
14
+ ✅ **Code Folding** - Collapse/expand code sections
15
+ ✅ **Read-Only Mode** - Prevent text modifications
16
+ ✅ **TypeScript Support** - Full TypeScript definitions
17
+ ✅ **Zero Dependencies** - Pure JavaScript implementation
18
+
19
+ ## Installation
20
+
21
+ ```bash
22
+ npm install @editora/light-code-editor
23
+ ```
24
+
25
+ ## Quick Start
26
+
27
+ ```html
28
+ <!DOCTYPE html>
29
+ <html>
30
+ <head>
31
+ <link rel="stylesheet" href="node_modules/@editora/light-code-editor/dist/light-code-editor.css">
32
+ </head>
33
+ <body>
34
+ <div id="editor"></div>
35
+
36
+ <script type="module">
37
+ import { createEditor, LineNumbersExtension, SyntaxHighlightingExtension } from '@editora/light-code-editor';
38
+
39
+ const editor = createEditor(document.getElementById('editor'), {
40
+ value: '<div class="hello">Hello World</div>',
41
+ theme: 'dark',
42
+ extensions: [
43
+ new LineNumbersExtension(),
44
+ new SyntaxHighlightingExtension()
45
+ ]
46
+ });
47
+
48
+ // Get current content
49
+ console.log(editor.getValue());
50
+
51
+ // Listen for changes
52
+ editor.on('change', (changes) => {
53
+ console.log('Content changed:', changes);
54
+ });
55
+ </script>
56
+ </body>
57
+ </html>
58
+ ```
59
+
60
+ ## API
61
+
62
+ ### `createEditor(container, config)`
63
+
64
+ Factory function to create a new editor instance.
65
+
66
+ #### Parameters
67
+
68
+ - `container`: HTMLElement - The DOM element to attach the editor to
69
+ - `config`: EditorConfig - Configuration options
70
+
71
+ #### EditorConfig
72
+
73
+ ```typescript
74
+ interface EditorConfig {
75
+ value?: string; // Initial content
76
+ theme?: 'light' | 'dark'; // Theme
77
+ readOnly?: boolean; // Read-only mode
78
+ extensions?: EditorExtension[]; // Extensions to load
79
+ keymap?: Record<string, string>; // Custom key bindings
80
+ }
81
+ ```
82
+
83
+ ### Editor Methods
84
+
85
+ ```typescript
86
+ interface EditorAPI {
87
+ // Content
88
+ getValue(): string;
89
+ setValue(value: string): void;
90
+
91
+ // Focus & Selection
92
+ focus(): void;
93
+ hasFocus(): boolean;
94
+
95
+ // Theme & Appearance
96
+ setTheme(theme: 'light' | 'dark'): void;
97
+
98
+ // Read-only mode
99
+ setReadOnly(readOnly: boolean): void;
100
+
101
+ // Extensions
102
+ registerCommand(name: string, handler: Function): void;
103
+
104
+ // Events
105
+ on(event: string, handler: Function): void;
106
+ off(event: string, handler: Function): void;
107
+ }
108
+ ```
109
+
110
+ ## Extensions
111
+
112
+ ### Core Extensions
113
+
114
+ #### `LineNumbersExtension`
115
+ Adds line numbers to the left gutter.
116
+
117
+ ```typescript
118
+ import { LineNumbersExtension } from '@editora/light-code-editor';
119
+
120
+ const editor = createEditor(container, {
121
+ extensions: [new LineNumbersExtension()]
122
+ });
123
+ ```
124
+
125
+ #### `SyntaxHighlightingExtension`
126
+ Provides HTML syntax highlighting.
127
+
128
+ ```typescript
129
+ import { SyntaxHighlightingExtension } from '@editora/light-code-editor';
130
+
131
+ const editor = createEditor(container, {
132
+ extensions: [new SyntaxHighlightingExtension()]
133
+ });
134
+ ```
135
+
136
+ #### `ThemeExtension`
137
+ Enables theme switching.
138
+
139
+ ```typescript
140
+ import { ThemeExtension } from '@editora/light-code-editor';
141
+
142
+ const editor = createEditor(container, {
143
+ extensions: [new ThemeExtension()]
144
+ });
145
+ ```
146
+
147
+ #### `ReadOnlyExtension`
148
+ Adds read-only mode functionality.
149
+
150
+ ```typescript
151
+ import { ReadOnlyExtension } from '@editora/light-code-editor';
152
+
153
+ const editor = createEditor(container, {
154
+ extensions: [new ReadOnlyExtension()]
155
+ });
156
+ ```
157
+
158
+ #### `SearchExtension`
159
+ Provides search and replace functionality.
160
+
161
+ ```typescript
162
+ import { SearchExtension } from '@editora/light-code-editor';
163
+
164
+ const editor = createEditor(container, {
165
+ extensions: [new SearchExtension()]
166
+ });
167
+ ```
168
+
169
+ #### `BracketMatchingExtension`
170
+ Highlights matching brackets.
171
+
172
+ ```typescript
173
+ import { BracketMatchingExtension } from '@editora/light-code-editor';
174
+
175
+ const editor = createEditor(container, {
176
+ extensions: [new BracketMatchingExtension()]
177
+ });
178
+ ```
179
+
180
+ #### `CodeFoldingExtension`
181
+ Enables code folding functionality.
182
+
183
+ ```typescript
184
+ import { CodeFoldingExtension } from '@editora/light-code-editor';
185
+
186
+ const editor = createEditor(container, {
187
+ extensions: [new CodeFoldingExtension()]
188
+ });
189
+ ```
190
+
191
+ ### Custom Extensions
192
+
193
+ Create your own extensions by implementing the `EditorExtension` interface:
194
+
195
+ ```typescript
196
+ import { EditorExtension, EditorAPI } from '@editora/light-code-editor';
197
+
198
+ class MyExtension implements EditorExtension {
199
+ public readonly name = 'my-extension';
200
+
201
+ setup(editor: EditorAPI): void {
202
+ // Initialize your extension
203
+ editor.registerCommand('my-command', () => {
204
+ console.log('My command executed!');
205
+ });
206
+ }
207
+
208
+ destroy(): void {
209
+ // Cleanup
210
+ }
211
+ }
212
+ ```
213
+
214
+ ## Styling
215
+
216
+ The library includes its own CSS file that provides complete styling. Include it in your HTML:
217
+
218
+ ```html
219
+ <link rel="stylesheet" href="dist/light-code-editor.css">
220
+ ```
221
+
222
+ ### CSS Classes
223
+
224
+ - `.rte-light-editor` - Main editor container
225
+ - `.rte-light-editor-content` - Textarea element
226
+ - `.rte-light-editor-gutter` - Line numbers gutter
227
+ - `.rte-syntax-highlight-overlay` - Syntax highlighting overlay
228
+ - `.rte-light-editor.dark` - Dark theme
229
+ - `.rte-light-editor.light` - Light theme
230
+
231
+ ## Architecture
232
+
233
+ The editor follows a modular, extension-first architecture:
234
+
235
+ ```
236
+ EditorCore
237
+ ├── TextModel (content management)
238
+ ├── View (DOM rendering)
239
+ ├── Extension Registry
240
+ ├── Command System
241
+ └── Event System
242
+ ```
243
+
244
+ ### Design Principles
245
+
246
+ 1. **Self-Contained** - Everything needed is included
247
+ 2. **Extension-First** - All features are extensions
248
+ 3. **Zero Dependencies** - Pure JavaScript
249
+ 4. **Type-Safe** - Full TypeScript support
250
+ 5. **Performant** - Optimized for large documents
251
+
252
+ ## Browser Support
253
+
254
+ - Chrome 60+
255
+ - Firefox 60+
256
+ - Safari 12+
257
+ - Edge 79+
258
+
259
+ ## Contributing
260
+
261
+ This library follows the CodeMirror architecture principles and is designed to be maintainable and extensible. When adding features:
262
+
263
+ 1. Implement as extensions, not core modifications
264
+ 2. Maintain TypeScript types
265
+ 3. Include comprehensive tests
266
+ 4. Update documentation
267
+
268
+ ## License
269
+
270
+ MIT License - see LICENSE file for details.
271
+
272
+ ## Author
273
+
274
+ Ajay Kumar <ajaykr089@gmail.com>