react-lite-rich-text-editor 1.1.6 โ 1.1.8
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 +48 -1
- package/dist/index.cjs.js +390 -244
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +7 -0
- package/dist/index.esm.js +390 -244
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -28,8 +28,13 @@ A **premium, zero-dependency**, and industry-standard rich text editor for React
|
|
|
28
28
|
- ๐ **Image Resizing**: Interactive 4-handle resizing system for uploaded images.
|
|
29
29
|
- ๐งฎ **Content Metrics**: Stealthy, professional footer showing real-time **Word and Character counts**.
|
|
30
30
|
- ๐ **Rich Formatting**: Bold, italic, underline, font sizes, colors, alignment, and lists.
|
|
31
|
+
- ๐ **Heading Styles**: Built-in dropdown for Paragraph, Heading 1, Heading 2, Heading 3, and Quote.
|
|
32
|
+
- ๐งน **Clear Formatting**: One-click button to remove styles, links, and reset text to a clean paragraph.
|
|
33
|
+
- โก **Markdown Shortcuts**: Type `#`, `##`, `###`, `>`, `-`, `*`, or `1.` then press Space to format instantly.
|
|
34
|
+
- ๐ฌ **Placeholder Support**: Show helpful hint text when the editor is empty.
|
|
31
35
|
- ๐ **Smart Links**: Automatic protocol handling and new window navigation.
|
|
32
36
|
- ๐จ **Premium UI**: Modern, glassmorphism-inspired design with a polished Look & Feel.
|
|
37
|
+
- โฟ **Accessible**: Editable region includes `role="textbox"` and `aria-label` support.
|
|
33
38
|
|
|
34
39
|
## Installation
|
|
35
40
|
|
|
@@ -59,6 +64,45 @@ function App() {
|
|
|
59
64
|
}
|
|
60
65
|
```
|
|
61
66
|
|
|
67
|
+
## Text Styles
|
|
68
|
+
|
|
69
|
+
Use the **Paragraph / Heading / Quote** dropdown in the toolbar to change block formatting:
|
|
70
|
+
|
|
71
|
+
| Style | Toolbar Option |
|
|
72
|
+
| :--- | :--- |
|
|
73
|
+
| Normal text | Paragraph |
|
|
74
|
+
| Large title | Heading 1 |
|
|
75
|
+
| Section title | Heading 2 |
|
|
76
|
+
| Subsection title | Heading 3 |
|
|
77
|
+
| Quoted text | Quote |
|
|
78
|
+
|
|
79
|
+
Use the **Tx** button to clear formatting from the current selection โ removes bold, italic, underline, colors, links, and resets the block to a paragraph.
|
|
80
|
+
|
|
81
|
+
## Markdown Shortcuts
|
|
82
|
+
|
|
83
|
+
Type these at the start of a line, then press **Space** to convert instantly:
|
|
84
|
+
|
|
85
|
+
| Shortcut | Result |
|
|
86
|
+
| :--- | :--- |
|
|
87
|
+
| `#` + Space | Heading 1 |
|
|
88
|
+
| `##` + Space | Heading 2 |
|
|
89
|
+
| `###` + Space | Heading 3 |
|
|
90
|
+
| `>` + Space | Quote |
|
|
91
|
+
| `-` or `*` + Space | Bullet list |
|
|
92
|
+
| `1.` + Space | Numbered list |
|
|
93
|
+
|
|
94
|
+
**Example:** Type `## My Title` and press Space โ it becomes a Heading 2.
|
|
95
|
+
|
|
96
|
+
## Keyboard Shortcuts
|
|
97
|
+
|
|
98
|
+
| Shortcut | Action |
|
|
99
|
+
| :--- | :--- |
|
|
100
|
+
| `Ctrl/Cmd + B` | Bold |
|
|
101
|
+
| `Ctrl/Cmd + I` | Italic |
|
|
102
|
+
| `Ctrl/Cmd + U` | Underline |
|
|
103
|
+
| `Enter` | New paragraph or list item |
|
|
104
|
+
| `Escape` | Close image zoom modal |
|
|
105
|
+
|
|
62
106
|
## Props
|
|
63
107
|
|
|
64
108
|
| Prop | Type | Default | Description |
|
|
@@ -67,9 +111,12 @@ function App() {
|
|
|
67
111
|
| `value` | `string` | `""` | The HTML content of the editor. |
|
|
68
112
|
| `onChange` | `function` | `undefined` | Callback function triggered on content change. |
|
|
69
113
|
| `placeholder` | `string` | `"Type here..."` | Placeholder text when empty. |
|
|
114
|
+
| `editable` | `boolean` | `true` | Whether the editor is editable. Set to `false` for a read-only viewer. |
|
|
70
115
|
| `disabled` | `boolean` | `false` | Disables the editor and hides the toolbar. |
|
|
71
116
|
| `showBorder` | `boolean` | `true` | Controls the visibility of the editor's border and shadow. |
|
|
72
|
-
| `
|
|
117
|
+
| `minHeight` | `string \| number` | `"150px"` | Minimum height of the editor content area. |
|
|
118
|
+
| `maxHeight` | `string \| number` | `"500px"` | Maximum height of the editor content area. |
|
|
119
|
+
| `onImageUpload` | `function` | `undefined` | Custom handler for image uploads. Should return a `Promise<string>` URL. |
|
|
73
120
|
|
|
74
121
|
## Development & Build
|
|
75
122
|
|