react-codemirror-editor 0.1.2 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # React Code Editor
 
-A modern, extensible **CodeMirror 6–based React code editor** featuring first-class TypeScript support, language-aware configuration, and optional diagnostics.
+A modern, extensible **CodeMirror 6–based React code editor** featuring first-class TypeScript support, language-aware configuration, optional diagnostics, and search/validation support.
 
 This library is designed to scale from a simple embedded editor to a **multi-language, schema-aware editing platform**.
 
@@ -14,6 +14,8 @@ This library is designed to scale from a simple embedded editor to a **multi-lan
 - Optional diagnostics, completion, and hover
 - JSON Schema validation support
 - Light & dark themes
+- Search & Replace support
+- Validation state callback
 - Designed for future multi-language support
 
 ---
@@ -76,6 +78,140 @@ const [value, setValue] = useState('{}');
 
 ---
 
+## 🎮 Editor Controller API
+
+The editor exposes a controller API that allows you to trigger actions programmatically.
+
+### ⚠️ Important design choice
+
+This library does **not** impose formatting logic.
+Instead, you **pass a callback function** that receives the current editor value and returns the formatted result.
+
+This keeps the editor **language-agnostic** and flexible.
+
+### Available Controller Actions
+
+- `copy()`
+- `format(formatter)`
+- `foldAll()`
+- `unfoldAll()`
+- `openSearch()`
+- `closeSearch()`
+- `findNext()`
+- `findPrev()`
+- `replace(replacement: string)`
+- `replaceAll(replacement: string)`
+
+### 🧠 Format API (Callback-Based)
+
+```tsx
+format(formatter: (value: string) => string): void
+```
+
+- The editor passes the **current content**
+- Your formatter returns the **new formatted content**
+- The editor updates itself with the returned value
+
+### Example
+
+```tsx
+import { useRef } from 'react';
+import type { EditorController } from 'react-codemirror-editor';
+
+const controllerRef = useRef<EditorController | null>(null);
+
+<CodeEditor
+  language="json"
+  controllerRef={controllerRef}
+/>;
+
+function formatJson(value: string) {
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2);
+  } catch {
+    return value;
+  }
+}
+
+<button onClick={() => controllerRef.current?.format(formatJson)}>Format</button>
+<button onClick={() => controllerRef.current?.copy()}>Copy</button>
+<button onClick={() => controllerRef.current?.foldAll()}>Fold All</button>
+<button onClick={() => controllerRef.current?.unfoldAll()}>Unfold All</button>
+<button onClick={() => controllerRef.current?.openSearch()}>Search</button>
+<button onClick={() => controllerRef.current?.closeSearch()}>Close Search</button>
+```
+
+- Works for **any language**
+- Supports **custom formatter functions**
+- Search UI is **optional** and can be enabled via props
+
+### Example: Prettier Integration (Concept)
+
+```tsx
+controllerRef.current?.format((code) =>
+    prettier.format(code, { parser: 'json' }),
+);
+```
+
+---
+
+## 📋 Why Callback-Based Formatting?
+
+- Keeps core editor **small**
+- Avoids hard dependency on Prettier
+- Supports **any language**
+- Lets consumers decide formatting rules
+
+This is a library-level design decision, not a limitation.
+
+---
+
+## 🔍 Search & Replace
+
+The editor includes **search & replace functionality** via a controller API:
+
+- `openSearch()` – Opens the search panel
+- `closeSearch()` – Closes the search panel
+- `findNext()` – Finds the next match
+- `findPrev()` – Finds the previous match
+- `replace(replacement: string)` – Replaces the current match
+- `replaceAll(replacement: string)` – Replaces all matches
+
+You can pass **search configuration**:
+
+```tsx
+<CodeEditor
+    language="json"
+    searchOptions={{
+        top: true,
+        caseSensitive: false,
+    }}
+/>
+```
+
+---
+
+## ✅ JSON Validation State
+
+You can track JSON validity and react to changes in real-time via `onValidationChange`:
+
+```tsx
+<CodeEditor
+    language="json"
+    languageOptions={{
+        json: {
+            schema: myJsonSchema,
+            onValidationChange: (isValid) => console.log('Valid:', isValid),
+        },
+    }}
+/>
+```
+
+- `isValid` is `true` if there are no syntax or schema errors
+- Useful for enabling/disabling Save buttons or warnings in your UI
+
+---
+
 ## 🌍 Languages
 
 Languages are enabled explicitly using the `language` prop.
@@ -84,7 +220,7 @@ Languages are enabled explicitly using the `language` prop.
 
 - **JSON**
 
-The architecture is designed to support additional languages such as:
+Future support for:
 
 - JavaScript
 - TypeScript
@@ -97,8 +233,6 @@ The architecture is designed to support additional languages such as:
 
 Language-specific behavior is configured via `languageOptions`.
 
-### JSON Configuration Example
-
 ```tsx
 <CodeEditor
     language="json"
@@ -113,16 +247,17 @@ Language-specific behavior is configured via `languageOptions`.
 />
 ```
 
----
-
 ### JSON Options
 
-| Option        | Description                        | Default     |
-| ------------- | ---------------------------------- | ----------- |
-| **`schema`**      | JSON Schema object for validation  | `undefined` |
-| **`diagnostics`** | Enable JSON linting                | `true`      |
-| **`completion`**  | Enable schema-based autocompletion | `true`      |
-| **`hover`**       | Enable schema hover tooltips       | `true`      |
+| Option               | Type                         | Default                   | Description                                            |
+| -------------------- | ---------------------------- | ------------------------- | ------------------------------------------------------ |
+| `schema`             | `object`                     | `undefined`               | JSON Schema used for validation, completion, and hover |
+| `diagnostics`        | `boolean`                    | `true`                    | Enables JSON syntax diagnostics                        |
+| `gutter`             | `boolean`                    | `true`                    | Shows the diagnostics gutter (error markers)           |
+| `schemaLint`         | `boolean`                    | `true if schema provided` | Enables schema-based validation                        |
+| `hover`              | `boolean`                    | `true if schema provided` | Enables hover tooltips from schema                     |
+| `autocomplete`       | `boolean`                    | `true if schema provided` | Enables schema-based autocompletion                    |
+| `onValidationChange` | `(isValid: boolean) => void` | `undefined`               | Callback called whenever JSON validity changes         |
 
 > If no schema is provided, the editor still works normally with **syntax diagnostics only**.
 
@@ -132,12 +267,12 @@ Language-specific behavior is configured via `languageOptions`.
 
 Diagnostics are **configurable per language**.
 
-### JSON diagnostics include:
+### JSON diagnostics include
 
 - Syntax errors
 - Schema validation errors (when schema is provided)
 
-You may disable diagnostics entirely:
+Disable diagnostics:
 
 ```tsx
 languageOptions={{
@@ -187,7 +322,7 @@ To ensure a consistent height, define a height or `min-height` via CSS.
 
 - The editor always fills the container height
 - Padding, borders, and background should be applied to the container
-- This approach provides full control over responsive layouts
+- Provides full control over responsive layouts
 
 ---
 
@@ -232,7 +367,7 @@ import type { ThemeName } from 'react-codemirror-editor';
 
 - Built on **CodeMirror 6**
 - Language features are isolated and composable
-- Diagnostics, completion, and hover are opt-in
+- Diagnostics, completion, hover, and search are opt-in
 - Clean separation between core editor, languages, and UI
 - Designed for long-term multi-language expansion
 

package/dist/core/diagnostics/json/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/diagnostics/json/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/core/diagnostics/{jsonDiagnostics.d.ts → json/jsonDiagnostics.d.ts}

@@ -1,4 +1,4 @@
 import { Extension } from '@codemirror/state';
-import { JsonEditorConfig } from '../../types';
+import { JsonEditorConfig } from '../../../types';
 export declare const jsonDiagnosticsExtension: (options?: JsonEditorConfig) => Extension;
 //# sourceMappingURL=jsonDiagnostics.d.ts.map

package/dist/core/diagnostics/json/jsonDiagnostics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonDiagnostics.d.ts","sourceRoot":"","sources":["../../../../src/core/diagnostics/json/jsonDiagnostics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAa9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,wBAAwB,aACxB,gBAAgB,KAC1B,SA4CF,CAAC"}

package/dist/core/diagnostics/json/jsonDiagnostics.js

@@ -0,0 +1,32 @@
+import { hoverTooltip } from '@codemirror/view';
+import { linter, lintGutter } from '@codemirror/lint';
+import { autocompletion } from '@codemirror/autocomplete';
+import { jsonSchemaLinter, jsonSchemaHover, stateExtensions, } from 'codemirror-json-schema';
+import { validation } from './jsonValidation';
+import { jsonLinter } from './jsonLinter';
+import { safeJsonCompletion } from './safeJsonCompletion';
+export const jsonDiagnosticsExtension = (options = {}) => {
+    const { diagnostics = true, gutter = true, schema, schemaLint = !!schema, hover = !!schema, autocomplete = !!schema, onValidationChange, } = options;
+    const extensions = [];
+    if (diagnostics) {
+        extensions.push(linter(validation(jsonLinter, onValidationChange)));
+        if (gutter) {
+            extensions.push(lintGutter());
+        }
+    }
+    if (schema) {
+        extensions.push(stateExtensions(schema));
+        if (schemaLint) {
+            extensions.push(linter(validation(jsonSchemaLinter(schema), onValidationChange)));
+        }
+        if (hover) {
+            extensions.push(hoverTooltip(jsonSchemaHover(schema)));
+        }
+        if (autocomplete) {
+            extensions.push(autocompletion({
+                override: [safeJsonCompletion(schema)],
+            }));
+        }
+    }
+    return extensions;
+};

package/dist/core/diagnostics/json/jsonLinter.d.ts

@@ -0,0 +1,4 @@
+import { EditorView } from '@codemirror/view';
+import { Diagnostic } from '@codemirror/lint';
+export declare const jsonLinter: (view: EditorView) => Diagnostic[];
+//# sourceMappingURL=jsonLinter.d.ts.map

package/dist/core/diagnostics/json/jsonLinter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonLinter.d.ts","sourceRoot":"","sources":["../../../../src/core/diagnostics/json/jsonLinter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA+B9C,eAAO,MAAM,UAAU,SAAU,UAAU,KAAG,UAAU,EAsBvD,CAAC"}

package/dist/core/diagnostics/json/jsonLinter.js

@@ -0,0 +1,42 @@
+import { syntaxTree } from '@codemirror/language';
+const getErrorMessage = (view, from) => {
+    const doc = view.state.doc;
+    const charBefore = from > 0 ? doc.sliceString(from - 1, from) : '';
+    const charAfter = doc.sliceString(from, from + 1);
+    if (charBefore === ',') {
+        return 'Trailing comma is not allowed in JSON';
+    }
+    if (charAfter === '}' || charAfter === ']') {
+        return 'Missing value before closing bracket';
+    }
+    if (charAfter === ':') {
+        return 'Missing value after ":"';
+    }
+    if (charBefore === ':') {
+        return 'Missing value after ":"';
+    }
+    if (!charAfter) {
+        return 'Unexpected end of JSON input';
+    }
+    return 'Invalid JSON syntax';
+};
+export const jsonLinter = (view) => {
+    const diagnostics = [];
+    const tree = syntaxTree(view.state);
+    const docLength = view.state.doc.length;
+    tree.iterate({
+        enter(node) {
+            if (!node.type.isError)
+                return;
+            const from = node.from;
+            const to = Math.min(node.to, docLength);
+            diagnostics.push({
+                from,
+                to: from === to ? from + 1 : to,
+                severity: 'error',
+                message: getErrorMessage(view, from),
+            });
+        },
+    });
+    return diagnostics;
+};

package/dist/core/diagnostics/json/jsonValidation.d.ts

@@ -0,0 +1,4 @@
+import { EditorView } from '@codemirror/view';
+import { Diagnostic } from '@codemirror/lint';
+export declare const validation: (linterFn: (view: EditorView) => Diagnostic[], onValidationChange?: (isValid: boolean) => void) => (view: EditorView) => Diagnostic[];
+//# sourceMappingURL=jsonValidation.d.ts.map

package/dist/core/diagnostics/json/jsonValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonValidation.d.ts","sourceRoot":"","sources":["../../../../src/core/diagnostics/json/jsonValidation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,eAAO,MAAM,UAAU,aAEL,CAAC,IAAI,EAAE,UAAU,KAAK,UAAU,EAAE,uBACvB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,YAE5C,UAAU,KAAG,UAAU,EAS7B,CAAC"}

package/dist/core/diagnostics/json/jsonValidation.js

@@ -0,0 +1,8 @@
+export const validation = (linterFn, onValidationChange) => (view) => {
+    const diagnostics = linterFn(view);
+    if (onValidationChange) {
+        const isValid = diagnostics.every((d) => d.severity !== 'error');
+        onValidationChange(isValid);
+    }
+    return diagnostics;
+};

package/dist/core/diagnostics/json/safeJsonCompletion.d.ts

@@ -0,0 +1,3 @@
+import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
+export declare const safeJsonCompletion: (schema: Record<string, any>) => (ctx: CompletionContext) => CompletionResult | null;
+//# sourceMappingURL=safeJsonCompletion.d.ts.map

package/dist/core/diagnostics/json/safeJsonCompletion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"safeJsonCompletion.d.ts","sourceRoot":"","sources":["../../../../src/core/diagnostics/json/safeJsonCompletion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG/E,eAAO,MAAM,kBAAkB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,WAG7C,iBAAiB,KAAG,gBAAgB,GAAG,IAIvD,CAAC"}

package/dist/core/diagnostics/json/safeJsonCompletion.js

@@ -0,0 +1,8 @@
+import { jsonCompletion } from 'codemirror-json-schema';
+export const safeJsonCompletion = (schema) => {
+    const source = jsonCompletion(schema);
+    return (ctx) => {
+        const result = source(ctx);
+        return Array.isArray(result) ? null : result;
+    };
+};

package/dist/core/editor/createEditor.d.ts

@@ -1,4 +1,4 @@
 import { EditorView } from '@codemirror/view';
 import { CreateEditorOptions } from '../../types';
-export declare const createEditor: ({ value, parent, theme, readOnly, language, languageOptions, onChange, }: CreateEditorOptions) => EditorView;
+export declare const createEditor: ({ value, parent, theme, readOnly, language, languageOptions, search, onChange, }: CreateEditorOptions) => EditorView;
 //# sourceMappingURL=createEditor.d.ts.map

package/dist/core/editor/createEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createEditor.d.ts","sourceRoot":"","sources":["../../../src/core/editor/createEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,YAAY,6EAQtB,mBAAmB,eAoBrB,CAAC"}
+{"version":3,"file":"createEditor.d.ts","sourceRoot":"","sources":["../../../src/core/editor/createEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,YAAY,qFAStB,mBAAmB,eAqBrB,CAAC"}

package/dist/core/editor/createEditor.js

@@ -1,10 +1,10 @@
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { basicSetup } from 'codemirror';
-import { readOnlyExtension } from '../extensions';
+import { readOnlyExtension, searchExtensions } from '../extensions';
 import { buildLanguageExtensions } from '../languages';
 import { getThemeExtension } from '../themes';
-export const createEditor = ({ value, parent, theme, readOnly = false, language, languageOptions, onChange, }) => {
+export const createEditor = ({ value, parent, theme, readOnly = false, language, languageOptions, search, onChange, }) => {
     const state = EditorState.create({
         doc: value,
         extensions: [
@@ -12,6 +12,7 @@ export const createEditor = ({ value, parent, theme, readOnly = false, language,
             ...buildLanguageExtensions(language, languageOptions),
             getThemeExtension(theme),
             readOnlyExtension(readOnly),
+            searchExtensions(search),
             EditorView.updateListener.of((update) => {
                 if (update.docChanged) {
                     onChange?.(update.state.doc.toString());

package/dist/core/editor/editorController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editorController.d.ts","sourceRoot":"","sources":["../../../src/core/editor/editorController.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,wBAAgB,sBAAsB,IAAI,gBAAgB,CAuBzD"}
+{"version":3,"file":"editorController.d.ts","sourceRoot":"","sources":["../../../src/core/editor/editorController.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,wBAAgB,sBAAsB,IAAI,gBAAgB,CAyCzD"}

package/dist/core/editor/editorController.js

@@ -1,4 +1,4 @@
-import { copyToClipboard, foldAllCode, unfoldAllCode, formatCode, } from '../extensions';
+import { copyToClipboard, foldAllCode, unfoldAllCode, formatCode, openSearch, closeSearch, replace, replaceAllOccurrences, searchNext, searchPrevious, } from '../extensions';
 export function createEditorController() {
     let view = null;
     return {
@@ -20,5 +20,23 @@ export function createEditorController() {
         format(formatter) {
             return formatCode(view, formatter);
         },
+        openSearch() {
+            openSearch(view);
+        },
+        closeSearch() {
+            closeSearch(view);
+        },
+        searchNext() {
+            searchNext(view);
+        },
+        searchPrevious() {
+            searchPrevious(view);
+        },
+        replace() {
+            replace(view);
+        },
+        replaceAll() {
+            replaceAllOccurrences(view);
+        },
     };
 }

package/dist/core/extensions/fold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fold.d.ts","sourceRoot":"","sources":["../../../src/core/extensions/fold.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,eAAO,MAAM,WAAW,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,YAI9D,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,YAIhE,CAAC"}
+{"version":3,"file":"fold.d.ts","sourceRoot":"","sources":["../../../src/core/extensions/fold.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,eAAO,MAAM,WAAW,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,YAmB9D,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,YAIhE,CAAC"}

package/dist/core/extensions/fold.js

@@ -1,8 +1,20 @@
-import { foldAll, unfoldAll } from '@codemirror/language';
+import { syntaxTree, foldable, foldEffect, unfoldAll, } from '@codemirror/language';
 export const foldAllCode = (view) => {
     if (!view)
         return false;
-    return foldAll(view);
+    const effects = [];
+    syntaxTree(view.state).iterate({
+        enter(node) {
+            const range = foldable(view.state, node.from, node.to);
+            if (range) {
+                effects.push(foldEffect.of(range));
+            }
+        },
+    });
+    if (!effects.length)
+        return false;
+    view.dispatch({ effects });
+    return true;
 };
 export const unfoldAllCode = (view) => {
     if (!view)

package/dist/core/extensions/index.d.ts

@@ -2,4 +2,5 @@ export { copyToClipboard } from './copy';
 export { foldAllCode, unfoldAllCode } from './fold';
 export { formatCode } from './format';
 export { readOnlyExtension } from './readOnly';
+export { openSearch, closeSearch, searchExtensions, searchNext, searchPrevious, replace, replaceAllOccurrences, } from './search';
 //# sourceMappingURL=index.d.ts.map

package/dist/core/extensions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/extensions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/extensions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EACH,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACP,qBAAqB,GACxB,MAAM,UAAU,CAAC"}

package/dist/core/extensions/index.js

@@ -2,3 +2,4 @@ export { copyToClipboard } from './copy';
 export { foldAllCode, unfoldAllCode } from './fold';
 export { formatCode } from './format';
 export { readOnlyExtension } from './readOnly';
+export { openSearch, closeSearch, searchExtensions, searchNext, searchPrevious, replace, replaceAllOccurrences, } from './search';

package/dist/core/extensions/search.d.ts

@@ -0,0 +1,11 @@
+import type { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { SearchOptions } from '../../types';
+export declare const openSearch: (view: EditorView | null | undefined) => void;
+export declare const closeSearch: (view: EditorView | null | undefined) => void;
+export declare const searchNext: (view: EditorView | null | undefined) => void;
+export declare const searchPrevious: (view: EditorView | null | undefined) => void;
+export declare const replace: (view: EditorView | null | undefined) => void;
+export declare const replaceAllOccurrences: (view: EditorView | null | undefined) => void;
+export declare const searchExtensions: (searchConfig?: boolean | SearchOptions) => Extension;
+//# sourceMappingURL=search.d.ts.map

package/dist/core/extensions/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/core/extensions/search.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAUnD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,eAAO,MAAM,UAAU,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,SAI7D,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,SAI9D,CAAC;AAEF,eAAO,MAAM,UAAU,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,SAI7D,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,SAIjE,CAAC;AAEF,eAAO,MAAM,OAAO,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,SAI1D,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,UAAU,GAAG,IAAI,GAAG,SAAS,SAIxE,CAAC;AAeF,eAAO,MAAM,gBAAgB,kBACX,OAAO,GAAG,aAAa,KACtC,SAkBF,CAAC"}

package/dist/core/extensions/search.js

@@ -0,0 +1,54 @@
+import { openSearchPanel, closeSearchPanel, search, findPrevious, findNext, replaceNext, replaceAll, } from '@codemirror/search';
+export const openSearch = (view) => {
+    if (!view)
+        return;
+    openSearchPanel(view);
+};
+export const closeSearch = (view) => {
+    if (!view)
+        return;
+    closeSearchPanel(view);
+};
+export const searchNext = (view) => {
+    if (!view)
+        return;
+    findNext(view);
+};
+export const searchPrevious = (view) => {
+    if (!view)
+        return;
+    findPrevious(view);
+};
+export const replace = (view) => {
+    if (!view)
+        return;
+    replaceNext(view);
+};
+export const replaceAllOccurrences = (view) => {
+    if (!view)
+        return;
+    replaceAll(view);
+};
+const resolveSearch = (search) => {
+    if (!search)
+        return { enabled: false };
+    if (search === true) {
+        return { enabled: true };
+    }
+    return {
+        enabled: search.enabled ?? true,
+        ...search,
+    };
+};
+export const searchExtensions = (searchConfig = {}) => {
+    const options = resolveSearch(searchConfig);
+    if (!options.enabled)
+        return [];
+    const { top = true, caseSensitive = false, regexp = false, wholeWord = false, } = options ?? {};
+    return search({
+        top,
+        caseSensitive,
+        regexp,
+        wholeWord,
+    });
+};

package/dist/core/languages/buildExtensions.js

@@ -1,5 +1,5 @@
 import { jsonLanguage } from '.';
-import { jsonDiagnosticsExtension } from '../diagnostics';
+import { jsonDiagnosticsExtension } from '../diagnostics/json';
 export const buildLanguageExtensions = (language, options) => {
     switch (language) {
         case 'json':

package/dist/types/editor.d.ts

@@ -11,6 +11,12 @@ export interface EditorController {
     foldAll(): boolean;
     unfoldAll(): boolean;
     format(formatter: (code: string) => string): boolean;
+    openSearch(): void;
+    closeSearch(): void;
+    searchNext(): void;
+    searchPrevious(): void;
+    replace(): void;
+    replaceAll(): void;
 }
 export interface CreateEditorOptions {
     parent: HTMLElement;
@@ -19,6 +25,7 @@ export interface CreateEditorOptions {
     readOnly?: boolean;
     language: EditorLanguage;
     languageOptions?: LanguageOptions;
+    search?: boolean | SearchOptions;
     onChange?: (value: string) => void;
 }
 export interface EditorContainerProps {
@@ -28,6 +35,7 @@ export interface EditorContainerProps {
     readOnly?: boolean;
     language: EditorLanguage;
     languageOptions?: LanguageOptions;
+    search?: boolean | SearchOptions;
     onChange?: (value: string) => void;
 }
 interface BaseCodeEditorProps {
@@ -35,6 +43,7 @@ interface BaseCodeEditorProps {
     readOnly?: boolean;
     language: EditorLanguage;
     languageOptions?: LanguageOptions;
+    search?: boolean | SearchOptions;
     onReady?: (controller: EditorController) => void;
 }
 interface ControlledCodeEditorProps {
@@ -59,6 +68,14 @@ export interface JsonEditorConfig {
     schemaLint?: boolean;
     hover?: boolean;
     autocomplete?: boolean;
+    onValidationChange?: (isValid: boolean) => void;
+}
+export interface SearchOptions {
+    enabled?: boolean;
+    top?: boolean;
+    caseSensitive?: boolean;
+    regexp?: boolean;
+    wholeWord?: boolean;
 }
 export {};
 //# sourceMappingURL=editor.d.ts.map

package/dist/types/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../src/types/editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,MAAM,SAAS,GACf,OAAO,GACP,MAAM,GACN,WAAW,GACX,cAAc,GACd,gBAAgB,GAChB,oBAAoB,GACpB,sBAAsB,GACtB,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,gBAAgB,GAChB,cAAc,CAAC;AAErB,MAAM,MAAM,cAAc,GAAG,MAAM,eAAe,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC;CAQ3B;AAED,MAAM,WAAW,gBAAgB;IAC7B,OAAO,IAAI,UAAU,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;IACvC,IAAI,IAAI,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACrC,OAAO,IAAI,OAAO,CAAC;IACnB,SAAS,IAAI,OAAO,CAAC;IACrB,MAAM,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC;CACxD;AAED,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,gBAAgB,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,UAAU,mBAAmB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACpD;AAED,UAAU,yBAAyB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB;AAED,UAAU,2BAA2B;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GACrB,CAAC,mBAAmB,GAAG,yBAAyB,CAAC,GACjD,CAAC,mBAAmB,GAAG,2BAA2B,CAAC,CAAC;AAE1D,MAAM,WAAW,2BAA2B;IACxC,IAAI,EAAE,YAAY,GAAG,cAAc,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../src/types/editor.ts"],"names":[],"mappings":"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"}

package/dist/ui/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/ui/CodeEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkChD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/ui/CodeEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0ChD,CAAC"}

package/dist/ui/CodeEditor.js

@@ -4,7 +4,7 @@ import { createEditorController } from '../core/editor';
 import { resolveControlledInvariant } from '../core/invariants';
 import { EditorContainer } from './';
 export const CodeEditor = (props) => {
-    const { theme, readOnly, language, languageOptions, onChange, onReady } = props;
+    const { theme, readOnly, language, languageOptions, search, onChange, onReady, } = props;
     const { mode, value: resolvedContent } = resolveControlledInvariant(props);
     const [internalContent, setInternalContent] = useState(resolvedContent);
     const controller = useMemo(() => createEditorController(), []);
@@ -17,5 +17,5 @@ export const CodeEditor = (props) => {
     useEffect(() => {
         onReady?.(controller);
     }, [controller, onReady]);
-    return (_jsx(EditorContainer, { value: mode === 'controlled' ? resolvedContent : internalContent, theme: theme, readOnly: readOnly, language: language, languageOptions: languageOptions, onChange: handleEditorChange, controller: controller }));
+    return (_jsx(EditorContainer, { value: mode === 'controlled' ? resolvedContent : internalContent, theme: theme, readOnly: readOnly, language: language, languageOptions: languageOptions, search: search, onChange: handleEditorChange, controller: controller }));
 };

package/dist/ui/EditorContainer.d.ts

@@ -1,3 +1,3 @@
 import { EditorContainerProps } from '../types';
-export declare const EditorContainer: ({ value, theme, readOnly, language, languageOptions, controller, onChange, }: EditorContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorContainer: ({ value, theme, readOnly, language, languageOptions, search, controller, onChange, }: EditorContainerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditorContainer.d.ts.map

package/dist/ui/EditorContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorContainer.d.ts","sourceRoot":"","sources":["../../src/ui/EditorContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,eAAe,iFAQzB,oBAAoB,4CA0CtB,CAAC"}
+{"version":3,"file":"EditorContainer.d.ts","sourceRoot":"","sources":["../../src/ui/EditorContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,eAAe,yFASzB,oBAAoB,4CA2CtB,CAAC"}

package/dist/ui/EditorContainer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { createEditor } from '../core/editor';
-export const EditorContainer = ({ value, theme, readOnly, language, languageOptions, controller, onChange, }) => {
+export const EditorContainer = ({ value, theme, readOnly, language, languageOptions, search, controller, onChange, }) => {
     const editorRef = useRef(null);
     useEffect(() => {
         const editor = editorRef.current;
@@ -14,6 +14,7 @@ export const EditorContainer = ({ value, theme, readOnly, language, languageOpti
             readOnly,
             language,
             languageOptions,
+            search,
             onChange,
         });
         controller.setView(view);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-codemirror-editor",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "private": false,
     "description": "A modular, extensible React code editor built on CodeMirror 6 with first-class JSON support.",
     "type": "module",

package/dist/core/diagnostics/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/diagnostics/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/core/diagnostics/jsonDiagnostics.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"jsonDiagnostics.d.ts","sourceRoot":"","sources":["../../../src/core/diagnostics/jsonDiagnostics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAS9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAsE/C,eAAO,MAAM,wBAAwB,aACxB,gBAAgB,KAC1B,SAuCF,CAAC"}

package/dist/core/diagnostics/jsonDiagnostics.js

@@ -1,78 +0,0 @@
-import { hoverTooltip } from '@codemirror/view';
-import { linter, lintGutter } from '@codemirror/lint';
-import { autocompletion, } from '@codemirror/autocomplete';
-import { syntaxTree } from '@codemirror/language';
-import { jsonSchemaLinter, jsonSchemaHover, jsonCompletion, stateExtensions, } from 'codemirror-json-schema';
-const getErrorMessage = (view, from) => {
-    const doc = view.state.doc;
-    const charBefore = from > 0 ? doc.sliceString(from - 1, from) : '';
-    const charAfter = doc.sliceString(from, from + 1);
-    if (charBefore === ',') {
-        return 'Trailing comma is not allowed in JSON';
-    }
-    if (charAfter === '}' || charAfter === ']') {
-        return 'Missing value before closing bracket';
-    }
-    if (charAfter === ':') {
-        return 'Missing value after ":"';
-    }
-    if (charBefore === ':') {
-        return 'Missing value after ":"';
-    }
-    if (!charAfter) {
-        return 'Unexpected end of JSON input';
-    }
-    return 'Invalid JSON syntax';
-};
-const jsonLinter = (view) => {
-    const diagnostics = [];
-    const tree = syntaxTree(view.state);
-    const docLength = view.state.doc.length;
-    tree.iterate({
-        enter(node) {
-            if (!node.type.isError)
-                return;
-            const from = node.from;
-            const to = Math.min(node.to, docLength);
-            diagnostics.push({
-                from,
-                to: from === to ? from + 1 : to,
-                severity: 'error',
-                message: getErrorMessage(view, from),
-            });
-        },
-    });
-    return diagnostics;
-};
-const safeJsonCompletion = (schema) => {
-    const source = jsonCompletion(schema);
-    return (ctx) => {
-        const result = source(ctx);
-        return Array.isArray(result) ? null : result;
-    };
-};
-export const jsonDiagnosticsExtension = (options = {}) => {
-    const { diagnostics = true, gutter = true, schema, schemaLint = !!schema, hover = !!schema, autocomplete = !!schema, } = options;
-    const extensions = [];
-    if (diagnostics) {
-        extensions.push(linter(jsonLinter));
-        if (gutter) {
-            extensions.push(lintGutter());
-        }
-    }
-    if (schema) {
-        extensions.push(stateExtensions(schema));
-        if (schemaLint) {
-            extensions.push(linter(jsonSchemaLinter(schema)));
-        }
-        if (hover) {
-            extensions.push(hoverTooltip(jsonSchemaHover(schema)));
-        }
-        if (autocomplete) {
-            extensions.push(autocompletion({
-                override: [safeJsonCompletion(schema)],
-            }));
-        }
-    }
-    return extensions;
-};