react-lite-rich-text-editor 1.1.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.
- package/README.md +69 -0
- package/dist/index.cjs.js +2016 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +80 -0
- package/dist/index.esm.js +2014 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# React Lite Rich Text
|
|
2
|
+
|
|
3
|
+
A premium, lightweight, and highly customizable rich text editor for React.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- ✨ **Premium UI**: Modern, glassmorphism-inspired design with smooth transitions.
|
|
10
|
+
- 📝 **Rich Formatting**: Bold, italic, underline, font sizes, colors, and line heights.
|
|
11
|
+
- 🔗 **Smart Links**: Automatic protocol handling (prepends `https://`) and new window navigation.
|
|
12
|
+
- 🖼️ **Image Support**: Easy image uploads with delete functionality.
|
|
13
|
+
- 🎨 **Vanilla CSS**: Premium, dependency-free styling with a modern aesthetic.
|
|
14
|
+
- ⚡ **Lightweight**: Zero-dependency core (except for React and Lucide-style icons).
|
|
15
|
+
- 🔍 **HTML Preview**: Real-time access to the underlying HTML content.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install react-lite-rich-text-editor
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Basic Usage
|
|
24
|
+
|
|
25
|
+
```jsx
|
|
26
|
+
import React, { useState } from 'react';
|
|
27
|
+
import { RichTextEditor } from 'react-lite-rich-text-editor';
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
const [content, setContent] = useState('');
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<div className="p-8">
|
|
34
|
+
<RichTextEditor
|
|
35
|
+
label="Biography"
|
|
36
|
+
value={content}
|
|
37
|
+
onChange={(value) => setContent(value)}
|
|
38
|
+
placeholder="Tell us your story..."
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Props
|
|
46
|
+
|
|
47
|
+
| Prop | Type | Default | Description |
|
|
48
|
+
| :--- | :--- | :--- | :--- |
|
|
49
|
+
| `label` | `string` | `""` | Label displayed above the editor. |
|
|
50
|
+
| `value` | `string` | `""` | The HTML content of the editor. |
|
|
51
|
+
| `onChange` | `function` | `undefined` | Callback function triggered on content change. |
|
|
52
|
+
| `placeholder` | `string` | `"Type here..."` | Placeholder text when empty. |
|
|
53
|
+
| `disabled` | `boolean` | `false` | Disables the editor and hides the toolbar. |
|
|
54
|
+
| `showBorder` | `boolean` | `true` | Controls the visibility of the editor's border and shadow. |
|
|
55
|
+
| `onImageUpload` | `function` | `undefined` | Custom handler for image uploads. |
|
|
56
|
+
|
|
57
|
+
## Development & Build
|
|
58
|
+
|
|
59
|
+
To build the project for production:
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
npm run build
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
The output will be generated in the `dist/` directory.
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
MIT © [Elango](https://github.com/Elango-P)
|