react-codemirror-editor 0.3.0 → 0.3.2

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.
package/README.md CHANGED
@@ -4,51 +4,40 @@
4
4
  ![downloads](https://img.shields.io/npm/dw/react-code-editor)
5
5
  ![license](https://img.shields.io/npm/l/react-code-editor)
6
6
 
7
- A modern, extensible **CodeMirror 6–based React code editor** featuring first-class TypeScript support, language-aware configuration, optional diagnostics, search, and validation support.
7
+ A modern, extensible **CodeMirror 6–based React code editor** with TypeScript support, JSON schema validation, diagnostics, search, and a powerful controller API.
8
8
 
9
- This library is designed to scale from a simple embedded editor to a **multi-language, schema-aware editing platform**.
9
+ Designed to scale from simple embeds to **multi-language platforms**.
10
10
 
11
11
  ---
12
12
 
13
- ## Features
13
+ ## Features
14
14
 
15
- - Built on **CodeMirror 6**
16
- - Controlled & uncontrolled usage
17
- - Language-specific configuration
18
- - Optional diagnostics, completion, and hover
19
- - JSON Schema validation support
20
- - Light & dark themes
21
- - Search & Replace support
22
- - Validation state callback
23
- - Designed for future multi-language support
15
+ - Built on CodeMirror 6
16
+ - JSON schema validation (AJV-powered)
17
+ - Diagnostics & search
18
+ - Controller API
19
+ - Curated light & dark themes
20
+ - Language-agnostic formatting
21
+ - Multi-language ready architecture
24
22
 
25
23
  ---
26
24
 
27
- ## 📦 Installation
28
-
29
- ### Install the editor library
25
+ ## Install
30
26
 
31
27
  ```bash
32
28
  npm install react-code-editor
33
- ```
34
-
35
- ### Required peer dependencies
36
-
37
- ```bash
38
29
  npm install react react-dom
39
30
  ```
40
31
 
41
- ### JSON language support (optional, but recommended)
32
+ Optional (JSON support):
42
33
 
43
34
  ```bash
44
35
  npm install @codemirror/lang-json codemirror-json-schema ajv
45
36
  ```
46
37
 
47
- > `ajv` is used internally by `codemirror-json-schema` for JSON Schema validation.
48
-
49
38
  ---
50
39
 
51
- ## 🚀 Basic Usage
40
+ ## Basic Usage
52
41
 
53
42
  ```tsx
54
43
  import { CodeEditor } from 'react-code-editor';
@@ -58,181 +47,102 @@ export function Example() {
58
47
  }
59
48
  ```
60
49
 
61
- This creates an **uncontrolled JSON editor** with default configuration.
62
-
63
50
  ---
64
51
 
65
- ## 🔁 Controlled vs Uncontrolled
66
-
67
- ### Uncontrolled Editor
68
-
69
- ```tsx
70
- <CodeEditor language="json" defaultValue='{ "name": "John" }' />
71
- ```
72
-
73
- ### Controlled Editor
52
+ ## Controlled vs Uncontrolled
74
53
 
75
54
  ```tsx
76
- const [value, setValue] = useState('{}');
55
+ // Uncontrolled
56
+ <CodeEditor language="json" defaultValue='{"name":"John"}' />
77
57
 
78
- <CodeEditor language="json" value={value} onChange={setValue} />;
58
+ // Controlled
59
+ const [value, setValue] = useState('{}')
60
+ <CodeEditor language="json" value={value} onChange={setValue} />
79
61
  ```
80
62
 
81
- > ⚠️ Do not pass both `value` and `defaultValue`.
63
+ Do not pass both `value` and `defaultValue`.
82
64
 
83
65
  ---
84
66
 
85
- ## 🎮 Editor Controller API
86
-
87
- The editor exposes a controller API that allows you to trigger actions programmatically.
88
-
89
- ### ⚠️ Important design choice
67
+ ## Controller API
90
68
 
91
- This library does **not** impose formatting logic.
92
- Instead, you **pass a callback function** that receives the current editor value and returns the formatted result.
69
+ Pass `controllerRef` for programmatic control.
93
70
 
94
- This keeps the editor **language-agnostic** and flexible.
71
+ ### Methods
95
72
 
96
- ### Available Controller Actions
97
-
98
- - `copy()`
99
- - `format(formatter)`
100
- - `foldAll()`
101
- - `unfoldAll()`
102
- - `openSearch()`
103
- - `closeSearch()`
104
- - `findNext()`
105
- - `findPrev()`
106
- - `replace(replacement: string)`
107
- - `replaceAll(replacement: string)`
108
- - `getValidationState()`
109
-
110
- ### 🧠 Format API (Callback-Based)
111
-
112
- ```tsx
113
- format(formatter: (value: string) => string): void
114
73
  ```
115
-
116
- - The editor passes the **current content**
117
- - Your formatter returns the **new formatted content**
118
- - The editor updates itself with the returned value
119
-
120
- ### Example
121
-
122
- ```tsx
123
- import { useRef } from 'react';
124
- import type { EditorController } from 'react-codemirror-editor';
125
-
126
- const controllerRef = useRef<EditorController | null>(null);
127
-
128
- <CodeEditor
129
- language="json"
130
- controllerRef={controllerRef}
131
- />;
132
-
133
- function formatJson(value: string) {
134
- try {
135
- return JSON.stringify(JSON.parse(value), null, 2);
136
- } catch {
137
- return value;
138
- }
139
- }
140
-
141
- <button onClick={() => controllerRef.current?.format(formatJson)}>Format</button>
142
- <button onClick={() => controllerRef.current?.copy()}>Copy</button>
143
- <button onClick={() => controllerRef.current?.foldAll()}>Fold All</button>
144
- <button onClick={() => controllerRef.current?.unfoldAll()}>Unfold All</button>
145
- <button onClick={() => controllerRef.current?.openSearch()}>Search</button>
146
- <button onClick={() => controllerRef.current?.closeSearch()}>Close Search</button>
74
+ copy()
75
+ format(formatter)
76
+ foldAll()
77
+ unfoldAll()
78
+ openSearch()
79
+ closeSearch()
80
+ findNext()
81
+ findPrev()
82
+ replace(string)
83
+ replaceAll(string)
84
+ getValidation()
85
+ getDiagnostics()
147
86
  ```
148
87
 
149
- - Works for **any language**
150
- - Supports **custom formatter functions**
151
- - Search UI is **optional** and can be enabled via props
152
-
153
- ### Example: Prettier Integration (Concept)
88
+ ### Formatting Example
154
89
 
155
90
  ```tsx
156
- controllerRef.current?.format((code) =>
157
- prettier.format(code, { parser: 'json' }),
91
+ controllerRef.current?.format((value) =>
92
+ JSON.stringify(JSON.parse(value), null, 2),
158
93
  );
159
94
  ```
160
95
 
161
- ### 📋 Why Callback-Based Formatting?
162
-
163
- - Keeps core editor **small**
164
- - Avoids hard dependency on Prettier
165
- - Supports **any language**
166
- - Lets consumers decide formatting rules
167
-
168
- This is a library-level design decision, not a limitation.
169
-
170
- ### 🔍 Search & Replace
96
+ - No built-in formatter
97
+ - Works with Prettier or custom logic
98
+ - Fully language-agnostic
171
99
 
172
- The editor includes **search & replace functionality** via a controller API:
173
-
174
- - `openSearch()` – Opens the search panel
175
- - `closeSearch()` – Closes the search panel
176
- - `findNext()` – Finds the next match
177
- - `findPrev()` – Finds the previous match
178
- - `replace(replacement: string)` – Replaces the current match
179
- - `replaceAll(replacement: string)` – Replaces all matches
100
+ ---
180
101
 
181
- You can pass **search configuration**:
102
+ ## Search
182
103
 
183
104
  ```tsx
184
105
  <CodeEditor
185
106
  language="json"
186
- searchOptions={{
187
- top: true,
188
- caseSensitive: false,
189
- }}
107
+ searchOptions={{ top: true, caseSensitive: false }}
190
108
  />
191
109
  ```
192
110
 
193
- ### ✅ Validation State
194
-
195
- ```ts
196
- const state: {
197
- is_valid: boolean;
198
- error_count: number;
199
- warning_count: number;
200
- } | null = controllerRef.current?.getValidationState();
201
-
202
- if (state) {
203
- const { is_valid, error_count, warning_count } = state;
204
- }
205
- ```
206
-
207
111
  ---
208
112
 
209
- ## 🌍 Languages
113
+ ## Validation & Diagnostics
210
114
 
211
- Languages are enabled explicitly using the `language` prop.
115
+ ```ts
116
+ const validation = controllerRef.current?.getValidation();
117
+ const diagnostics = controllerRef.current?.getDiagnostics();
118
+ ```
212
119
 
213
- ### Currently supported
120
+ JSON supports:
214
121
 
215
- - **JSON**
122
+ - Syntax errors
123
+ - Schema validation (if schema provided)
216
124
 
217
- Future support for:
125
+ Disable diagnostics:
218
126
 
219
- - JavaScript
220
- - TypeScript
221
- - Python
222
- - HTML / CSS
127
+ ```tsx
128
+ languageOptions={{ json: { diagnostics: false } }}
129
+ ```
223
130
 
224
131
  ---
225
132
 
226
- ## ⚙️ Language Configuration
133
+ ## Language Support
134
+
135
+ **Current:** `JSON`
136
+ **Planned:** `JavaScript`, `TypeScript`, `Python`, `HTML/CSS`
227
137
 
228
- Language-specific behavior is configured via `languageOptions`.
138
+ ### Configuration
229
139
 
230
140
  ```tsx
231
141
  <CodeEditor
232
142
  language="json"
233
143
  languageOptions={{
234
144
  json: {
235
- schema: myJsonSchema,
145
+ schema,
236
146
  diagnostics: true,
237
147
  completion: true,
238
148
  hover: true,
@@ -243,62 +153,30 @@ Language-specific behavior is configured via `languageOptions`.
243
153
 
244
154
  ### JSON Options
245
155
 
246
- | Option | Type | Default | Description |
247
- | -------------------- | ---------------------------- | ------------------------- | ------------------------------------------------------ |
248
- | `schema` | `object` | `undefined` | JSON Schema used for validation, completion, and hover |
249
- | `diagnostics` | `boolean` | `true` | Enables JSON syntax diagnostics |
250
- | `gutter` | `boolean` | `true` | Shows the diagnostics gutter (error markers) |
251
- | `schemaLint` | `boolean` | `true if schema provided` | Enables schema-based validation |
252
- | `hover` | `boolean` | `true if schema provided` | Enables hover tooltips from schema |
253
- | `autocomplete` | `boolean` | `true if schema provided` | Enables schema-based autocompletion |
254
- | `onValidationChange` | `(isValid: boolean) => void` | `undefined` | Callback called whenever JSON validity changes |
156
+ | Option | Type | Default | Description |
157
+ | -------------- | ------- | ---------------- | ---------------------------------------- |
158
+ | `schema` | object | `undefined` | Schema for validation, completion, hover |
159
+ | `diagnostics` | boolean | `true` | Enable syntax diagnostics |
160
+ | `gutter` | boolean | `true` | Show error gutter |
161
+ | `schemaLint` | boolean | `true` if schema | Enables schema-based validation |
162
+ | `hover` | boolean | `true` if schema | Enables hover tooltips from schema |
163
+ | `autocomplete` | boolean | `true` if schema | Enables schema-based autocompletion |
255
164
 
256
- > If no schema is provided, the editor still works normally with **syntax diagnostics only**.
165
+ > Without a schema, syntax diagnostics still work.
257
166
 
258
167
  ---
259
168
 
260
- ## 🧪 Diagnostics
261
-
262
- Diagnostics are **configurable per language**.
263
-
264
- ### JSON diagnostics include
265
-
266
- - Syntax errors
267
- - Schema validation errors (when schema is provided)
268
-
269
- Disable diagnostics:
270
-
271
- ```tsx
272
- languageOptions={{
273
- json: {
274
- diagnostics: false
275
- }
276
- }}
277
- ```
278
-
279
- ---
280
-
281
- ## 🔒 Read-Only Mode
169
+ ## Read Only
282
170
 
283
171
  ```tsx
284
172
  <CodeEditor language="json" value={json} readOnly={true} />
285
173
  ```
286
174
 
287
- **Notes:**
288
-
289
- - `readOnly` must be a boolean
290
- - Default is `false`
291
- - When enabled, the editor is non-editable but remains selectable and scrollable
292
-
293
175
  ---
294
176
 
295
- ## 📐 Layout & Sizing
177
+ ## Layout
296
178
 
297
- By default, CodeMirror sizes itself based on content height.
298
- This can result in a single-line editor when the value contains only one line.
299
-
300
- The editor is designed to expand and fill its container.
301
- To ensure a consistent height, define a height or `min-height` via CSS.
179
+ Set height via CSS:
302
180
 
303
181
  ```css
304
182
  .cm-editor-container {
@@ -312,79 +190,52 @@ To ensure a consistent height, define a height or `min-height` via CSS.
312
190
  }
313
191
  ```
314
192
 
315
- **Notes:**
316
-
317
- - The editor always fills the container height
318
- - Padding, borders, and background should be applied to the container
319
- - Provides full control over responsive layouts
320
-
321
193
  ---
322
194
 
323
- ## 🎨 Theming
195
+ ## Themes
324
196
 
325
197
  ```tsx
326
- <CodeEditor language="json" theme="dark" />
198
+ import { Themes } from 'react-code-editor';
199
+ <CodeEditor theme={Themes.dark} />;
327
200
  ```
328
201
 
329
- Both **light and dark themes** are supported, each with multiple variants.
330
-
331
- Available themes:
332
-
333
- Light themes:
334
-
335
- - light
336
- - ayu_light
337
- - clouds_light
338
- - espresso_light
339
- - noctis_lilac_light
340
- - rose_pine_dawn_light
341
- - smoothy_light
342
- - tomorrow_light
202
+ ### Available Themes
343
203
 
344
- Dark themes:
204
+ **Light:**
205
+ `light`, `ayu_light`, `clouds_light`, `espresso_light`, `noctis_lilac_light`, `rose_pine_dawn_light`, `smoothy_light`, `tomorrow_light`
345
206
 
346
- - dark
347
- - barf_dark
348
- - cobalt_dark
349
- - cool_glow_dark
350
- - dracula_dark
351
-
352
- Theme names are type-safe via the exported ThemeName union.
353
-
354
- ```tsx
355
- import type { ThemeName } from 'react-codemirror-editor';
356
- ```
207
+ **Dark:**
208
+ `dark`, `barf_dark`, `cobalt_dark`, `cool_glow_dark`, `dracula_dark`
357
209
 
358
210
  ---
359
211
 
360
- ## 🏗 Architecture Notes
212
+ ## Architecture
361
213
 
362
- - Built on **CodeMirror 6**
363
- - Language features are isolated and composable
364
- - Diagnostics, completion, hover, and search are opt-in
365
- - Clean separation between core editor, languages, and UI
366
- - Designed for long-term multi-language expansion
214
+ - Modular & composable
215
+ - Optional diagnostics, hover, completion, search
216
+ - Language extensions isolated per configuration
217
+ - Designed for extensibility
367
218
 
368
219
  ---
369
220
 
370
- ## 🛣 Roadmap
221
+ ## Roadmap
371
222
 
372
- - JavaScript / TypeScript language support
373
- - Python language support
374
- - Custom extension injection
375
- - Editor presets
376
- - Diff & read-only modes
223
+ - JavaScript / TypeScript support
224
+ - Python support
225
+ - Extension injection API
226
+ - Presets
227
+ - Diff mode
377
228
 
378
229
  ---
379
230
 
380
- ## 📜 License
231
+ ## License
381
232
 
382
233
  MIT License © 2025 Mihir Mistry
383
234
 
384
235
  ---
385
236
 
386
- ## 🙏 Credits
237
+ ## Acknowledgements
387
238
 
388
- Some themes in this library are inspired by
239
+ Some themes are inspired by
389
240
  [Thememirror](https://github.com/vadimdemedes/thememirror)
390
- by Vadim Demedes, licensed under the MIT License.
241
+ by Vadim Demedes (MIT License).
@@ -2,7 +2,7 @@ import { dispatchValidationState } from './';
2
2
  export const jsonValidationLinter = (linterFn) => (view) => {
3
3
  const diagnostics = linterFn(view);
4
4
  view.dispatch({
5
- effects: dispatchValidationState(diagnostics),
5
+ effects: dispatchValidationState(view.state, diagnostics),
6
6
  });
7
7
  return diagnostics;
8
8
  };
@@ -1,12 +1,8 @@
1
- import { StateEffect, StateField } from '@codemirror/state';
1
+ import { EditorState, StateEffect, StateField } from '@codemirror/state';
2
2
  import type { Diagnostic } from '@codemirror/lint';
3
- export interface ValidationState {
4
- is_valid: boolean;
5
- error_count: number;
6
- warning_count: number;
7
- }
3
+ import { ValidationState } from '../../../types/';
8
4
  export declare const setValidationState: import("@codemirror/state").StateEffectType<ValidationState>;
9
- export declare function computeValidationState(diagnostics: readonly Diagnostic[]): ValidationState;
10
- export declare function dispatchValidationState(diagnostics: readonly Diagnostic[]): StateEffect<ValidationState>;
5
+ export declare const computeValidationState: (state: EditorState, diagnostics: readonly Diagnostic[]) => ValidationState;
6
+ export declare function dispatchValidationState(state: EditorState, diagnostics: readonly Diagnostic[]): StateEffect<ValidationState>;
11
7
  export declare const jsonValidationState: StateField<ValidationState>;
12
8
  //# sourceMappingURL=jsonValidationState.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"jsonValidationState.d.ts","sourceRoot":"","sources":["../../../../src/core/diagnostics/json/jsonValidationState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,kBAAkB,8DAAwC,CAAC;AAExE,wBAAgB,sBAAsB,CAClC,WAAW,EAAE,SAAS,UAAU,EAAE,GACnC,eAAe,CAcjB;AAED,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,SAAS,UAAU,EAAE,gCAEzE;AAED,eAAO,MAAM,mBAAmB,6BAgB9B,CAAC"}
1
+ {"version":3,"file":"jsonValidationState.d.ts","sourceRoot":"","sources":["../../../../src/core/diagnostics/json/jsonValidationState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAmB,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEnE,eAAO,MAAM,kBAAkB,8DAAwC,CAAC;AAExE,eAAO,MAAM,sBAAsB,UACxB,WAAW,eACL,SAAS,UAAU,EAAE,KACnC,eAqCF,CAAC;AAEF,wBAAgB,uBAAuB,CACnC,KAAK,EAAE,WAAW,EAClB,WAAW,EAAE,SAAS,UAAU,EAAE,gCAGrC;AAED,eAAO,MAAM,mBAAmB,6BAsB9B,CAAC"}
@@ -1,29 +1,55 @@
1
1
  import { StateEffect, StateField } from '@codemirror/state';
2
2
  export const setValidationState = StateEffect.define();
3
- export function computeValidationState(diagnostics) {
4
- let error_count = 0;
5
- let warning_count = 0;
3
+ export const computeValidationState = (state, diagnostics) => {
4
+ let errorCount = 0;
5
+ let warningCount = 0;
6
+ const errors = [];
7
+ const warnings = [];
6
8
  for (const d of diagnostics) {
7
- if (d.severity === 'error')
8
- error_count++;
9
- else if (d.severity === 'warning')
10
- warning_count++;
9
+ const line = state.doc.lineAt(d.from);
10
+ const diagnosticEntry = {
11
+ line: line.number,
12
+ column: d.from - line.from + 1,
13
+ message: d.message,
14
+ };
15
+ switch (d.severity) {
16
+ case 'error':
17
+ errorCount++;
18
+ errors.push(diagnosticEntry);
19
+ break;
20
+ case 'warning':
21
+ warningCount++;
22
+ warnings.push(diagnosticEntry);
23
+ break;
24
+ }
11
25
  }
12
26
  return {
13
- is_valid: error_count === 0,
14
- error_count,
15
- warning_count,
27
+ diagnostics: {
28
+ errors,
29
+ warnings,
30
+ },
31
+ stats: {
32
+ isValid: errorCount === 0,
33
+ errorCount,
34
+ warningCount,
35
+ },
16
36
  };
17
- }
18
- export function dispatchValidationState(diagnostics) {
19
- return setValidationState.of(computeValidationState(diagnostics));
37
+ };
38
+ export function dispatchValidationState(state, diagnostics) {
39
+ return setValidationState.of(computeValidationState(state, diagnostics));
20
40
  }
21
41
  export const jsonValidationState = StateField.define({
22
42
  create() {
23
43
  return {
24
- is_valid: true,
25
- error_count: 0,
26
- warning_count: 0,
44
+ diagnostics: {
45
+ errors: [],
46
+ warnings: [],
47
+ },
48
+ stats: {
49
+ isValid: true,
50
+ errorCount: 0,
51
+ warningCount: 0,
52
+ },
27
53
  };
28
54
  },
29
55
  update(value, tr) {
@@ -1 +1 @@
1
- {"version":3,"file":"editorController.d.ts","sourceRoot":"","sources":["../../../src/core/editor/editorController.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,wBAAgB,sBAAsB,IAAI,gBAAgB,CAoDzD"}
1
+ {"version":3,"file":"editorController.d.ts","sourceRoot":"","sources":["../../../src/core/editor/editorController.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,wBAAgB,sBAAsB,IAAI,gBAAgB,CA8DzD"}
@@ -39,13 +39,21 @@ export function createEditorController() {
39
39
  replaceAll() {
40
40
  replaceAllOccurrences(view);
41
41
  },
42
- getValidationState() {
42
+ getValidation() {
43
43
  if (!view)
44
44
  return null;
45
- return (view.state.field(jsonValidationState, false) ?? {
46
- is_valid: true,
47
- error_count: 0,
48
- warning_count: 0,
45
+ return (view.state.field(jsonValidationState, false)?.stats ?? {
46
+ isValid: true,
47
+ errorCount: 0,
48
+ warningCount: 0,
49
+ });
50
+ },
51
+ getDiagnostics() {
52
+ if (!view)
53
+ return null;
54
+ return (view.state.field(jsonValidationState, false)?.diagnostics ?? {
55
+ errors: [],
56
+ warnings: [],
49
57
  });
50
58
  },
51
59
  };
@@ -1,9 +1,57 @@
1
1
  import { EditorView } from 'codemirror';
2
- export type ThemeName = 'light' | 'dark' | 'ayu_light' | 'clouds_light' | 'espresso_light' | 'noctis_lilac_light' | 'rose_pine_dawn_light' | 'smoothy_light' | 'tomorrow_light' | 'barf_dark' | 'cobalt_dark' | 'cool_glow_dark' | 'dracula_dark';
3
- export type EditorLanguage = keyof LanguageOptions;
2
+ export declare const Themes: {
3
+ readonly ayu_light: "ayu_light";
4
+ readonly barf_dark: "barf_dark";
5
+ readonly clouds_light: "clouds_light";
6
+ readonly cobalt_dark: "cobalt_dark";
7
+ readonly cool_glow_dark: "cool_glow_dark";
8
+ readonly dark: "dark";
9
+ readonly dracula_dark: "dracula_dark";
10
+ readonly espresso_light: "espresso_light";
11
+ readonly light: "light";
12
+ readonly noctis_lilac_light: "noctis_lilac_light";
13
+ readonly rose_pine_dawn_light: "rose_pine_dawn_light";
14
+ readonly smoothy_light: "smoothy_light";
15
+ readonly tomorrow_light: "tomorrow_light";
16
+ };
17
+ export type ThemeName = keyof typeof Themes;
18
+ export interface JsonEditorConfig {
19
+ diagnostics?: boolean;
20
+ gutter?: boolean;
21
+ schema?: Record<string, any>;
22
+ schemaLint?: boolean;
23
+ hover?: boolean;
24
+ autocomplete?: boolean;
25
+ }
4
26
  export interface LanguageOptions {
5
27
  json?: JsonEditorConfig;
6
28
  }
29
+ export type EditorLanguage = keyof LanguageOptions;
30
+ export interface DiagnosticEntry {
31
+ line: number;
32
+ column: number;
33
+ message: string;
34
+ }
35
+ export interface ValidationStats {
36
+ isValid: boolean;
37
+ errorCount: number;
38
+ warningCount: number;
39
+ }
40
+ export interface ValidationDiagnostic {
41
+ errors: DiagnosticEntry[];
42
+ warnings: DiagnosticEntry[];
43
+ }
44
+ export interface ValidationState {
45
+ diagnostics: ValidationDiagnostic;
46
+ stats: ValidationStats;
47
+ }
48
+ export interface SearchOptions {
49
+ enabled?: boolean;
50
+ top?: boolean;
51
+ caseSensitive?: boolean;
52
+ regexp?: boolean;
53
+ wholeWord?: boolean;
54
+ }
7
55
  export interface EditorController {
8
56
  getView(): EditorView | null;
9
57
  setView(view: EditorView | null): void;
@@ -17,11 +65,8 @@ export interface EditorController {
17
65
  searchPrevious(): void;
18
66
  replace(): void;
19
67
  replaceAll(): void;
20
- getValidationState(): {
21
- is_valid: boolean;
22
- error_count: number;
23
- warning_count: number;
24
- } | null;
68
+ getValidation(): ValidationStats | null;
69
+ getDiagnostics(): ValidationDiagnostic | null;
25
70
  }
26
71
  export interface CreateEditorOptions {
27
72
  parent: HTMLElement;
@@ -66,20 +111,5 @@ export interface ResolvedControlledInvariant {
66
111
  mode: 'controlled' | 'uncontrolled';
67
112
  value: string;
68
113
  }
69
- export interface JsonEditorConfig {
70
- diagnostics?: boolean;
71
- gutter?: boolean;
72
- schema?: Record<string, any>;
73
- schemaLint?: boolean;
74
- hover?: boolean;
75
- autocomplete?: boolean;
76
- }
77
- export interface SearchOptions {
78
- enabled?: boolean;
79
- top?: boolean;
80
- caseSensitive?: boolean;
81
- regexp?: boolean;
82
- wholeWord?: boolean;
83
- }
84
114
  export {};
85
115
  //# sourceMappingURL=editor.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../src/types/editor.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../src/types/editor.ts"],"names":[],"mappings":"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"}
@@ -1 +1,15 @@
1
- export {};
1
+ export const Themes = {
2
+ ayu_light: 'ayu_light',
3
+ barf_dark: 'barf_dark',
4
+ clouds_light: 'clouds_light',
5
+ cobalt_dark: 'cobalt_dark',
6
+ cool_glow_dark: 'cool_glow_dark',
7
+ dark: 'dark',
8
+ dracula_dark: 'dracula_dark',
9
+ espresso_light: 'espresso_light',
10
+ light: 'light',
11
+ noctis_lilac_light: 'noctis_lilac_light',
12
+ rose_pine_dawn_light: 'rose_pine_dawn_light',
13
+ smoothy_light: 'smoothy_light',
14
+ tomorrow_light: 'tomorrow_light',
15
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-codemirror-editor",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "private": false,
5
5
  "description": "A modular, extensible React code editor built on CodeMirror 6 with first-class JSON support.",
6
6
  "type": "module",