react-codemirror-editor 0.1.0 → 0.1.2

package/README.md

@@ -1,6 +1,6 @@
 # React Code Editor
 
-A modern, extensible **CodeMirror 6–based React code editor** with 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, and optional diagnostics.
 
 This library is designed to scale from a simple embedded editor to a **multi-language, schema-aware editing platform**.
 
@@ -32,10 +32,10 @@ npm install react-code-editor
 npm install react react-dom
 ```
 
-### JSON language support (optional but recommended)
+### JSON language support (optional, but recommended)
 
 ```bash
-npm install @codemirror/lang-json codemirrorirror-json-schema ajv
+npm install @codemirror/lang-json codemirror-json-schema ajv
 ```
 
 > `ajv` is used internally by `codemirror-json-schema` for JSON Schema validation.
@@ -48,7 +48,7 @@ npm install @codemirror/lang-json codemirrorirror-json-schema ajv
 import { CodeEditor } from 'react-code-editor';
 
 export function Example() {
-  return <CodeEditor language="json" defaultValue="{}" />;
+    return <CodeEditor language="json" defaultValue="{}" />;
 }
 ```
 
@@ -61,10 +61,7 @@ This creates an **uncontrolled JSON editor** with default configuration.
 ### Uncontrolled Editor
 
 ```tsx
-<CodeEditor
-  language="json"
-  defaultValue='{ "name": "John" }'
-/>
+<CodeEditor language="json" defaultValue='{ "name": "John" }' />
 ```
 
 ### Controlled Editor
@@ -72,11 +69,7 @@ This creates an **uncontrolled JSON editor** with default configuration.
 ```tsx
 const [value, setValue] = useState('{}');
 
-<CodeEditor
-  language="json"
-  value={value}
-  onChange={setValue}
-/>;
+<CodeEditor language="json" value={value} onChange={setValue} />;
 ```
 
 > ⚠️ Do not pass both `value` and `defaultValue`.
@@ -88,9 +81,11 @@ const [value, setValue] = useState('{}');
 Languages are enabled explicitly using the `language` prop.
 
 ### Currently supported
+
 - **JSON**
 
 The architecture is designed to support additional languages such as:
+
 - JavaScript
 - TypeScript
 - Python
@@ -106,15 +101,15 @@ Language-specific behavior is configured via `languageOptions`.
 
 ```tsx
 <CodeEditor
-  language="json"
-  languageOptions={{
-    json: {
-      schema: myJsonSchema,
-      diagnostics: true,
-      completion: true,
-      hover: true
-    }
-  }}
+    language="json"
+    languageOptions={{
+        json: {
+            schema: myJsonSchema,
+            diagnostics: true,
+            completion: true,
+            hover: true,
+        },
+    }}
 />
 ```
 
@@ -122,12 +117,12 @@ 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        | 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`      |
 
 > If no schema is provided, the editor still works normally with **syntax diagnostics only**.
 
@@ -138,6 +133,7 @@ Language-specific behavior is configured via `languageOptions`.
 Diagnostics are **configurable per language**.
 
 ### JSON diagnostics include:
+
 - Syntax errors
 - Schema validation errors (when schema is provided)
 
@@ -156,25 +152,79 @@ languageOptions={{
 ## 🔒 Read-Only Mode
 
 ```tsx
-<CodeEditor
-  language="json"
-  value={json}
-  readOnly
-/>
+<CodeEditor language="json" value={json} readOnly={true} />
 ```
 
+**Notes:**
+
+- `readOnly` must be a boolean
+- Default is `false`
+- When enabled, the editor is non-editable but remains selectable and scrollable
+
+---
+
+## 📐 Layout & Sizing
+
+By default, CodeMirror sizes itself based on content height.
+This can result in a single-line editor when the value contains only one line.
+
+The editor is designed to expand and fill its container.
+To ensure a consistent height, define a height or `min-height` via CSS.
+
+```css
+.cm-editor-container {
+    min-height: 200px;
+}
+
+.cm-editor-container,
+.cm-editor-container .cm-editor {
+    width: 100%;
+    height: 100%;
+}
+```
+
+**Notes:**
+
+- 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
+
 ---
 
 ## 🎨 Theming
 
 ```tsx
-<CodeEditor
-  language="json"
-  theme="dark"
-/>
+<CodeEditor language="json" theme="dark" />
 ```
 
-Both **light and dark themes** are supported, with multiple variants included.
+Both **light and dark themes** are supported, each with multiple variants.
+
+Available themes:
+
+Light themes:
+
+- light
+- ayu_light
+- clouds_light
+- espresso_light
+- noctis_lilac_light
+- rose_pine_dawn_light
+- smoothy_light
+- tomorrow_light
+
+Dark themes:
+
+- dark
+- barf_dark
+- cobalt_dark
+- cool_glow_dark
+- dracula_dark
+
+Theme names are type-safe via the exported ThemeName union.
+
+```tsx
+import type { ThemeName } from 'react-codemirror-editor';
+```
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-codemirror-editor",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "private": false,
     "description": "A modular, extensible React code editor built on CodeMirror 6 with first-class JSON support.",
     "type": "module",
@@ -43,11 +43,13 @@
     },
     "keywords": [
         "react",
-        "code-editor",
         "codemirror",
-        "json-editor",
-        "schema-validation",
-        "react-library"
+        "codemirror6",
+        "editor",
+        "code-editor",
+        "react-editor",
+        "react-codemirror",
+        "ide"
     ],
     "license": "MIT"
-}
+}