@abduljebar/text-editor 2.2.2 → 2.2.3
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 +16 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
```tsx
|
|
2
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
3
|
+
import { TextEditor } from "@abduljebar/text-editor";
|
|
4
|
+
```
|
|
5
|
+
|
|
1
6
|
# @abduljebar/text-editor
|
|
2
7
|
|
|
3
8
|
A modern, feature-rich React text editor component with beautiful styling and extensive customization options. Perfect for blogs, content management systems, and any application requiring rich text editing capabilities.
|
|
@@ -46,6 +51,7 @@ pnpm add @abduljebar/text-editor
|
|
|
46
51
|
## 🚀 Quick Start
|
|
47
52
|
|
|
48
53
|
```tsx
|
|
54
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
49
55
|
import { TextEditor } from "@abduljebar/text-editor";
|
|
50
56
|
|
|
51
57
|
function App() {
|
|
@@ -68,6 +74,7 @@ function App() {
|
|
|
68
74
|
### Simple Implementation
|
|
69
75
|
|
|
70
76
|
```tsx
|
|
77
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
71
78
|
import { TextEditor } from "@abduljebar/text-editor";
|
|
72
79
|
|
|
73
80
|
function MyEditor() {
|
|
@@ -105,6 +112,9 @@ function MyEditor() {
|
|
|
105
112
|
### Read-only Mode
|
|
106
113
|
|
|
107
114
|
```tsx
|
|
115
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
116
|
+
import { TextEditor } from "@abduljebar/text-editor";
|
|
117
|
+
|
|
108
118
|
function ReadOnlyView() {
|
|
109
119
|
return (
|
|
110
120
|
<TextEditor
|
|
@@ -137,6 +147,7 @@ function ReadOnlyView() {
|
|
|
137
147
|
For advanced usage and custom implementations:
|
|
138
148
|
|
|
139
149
|
```tsx
|
|
150
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
140
151
|
import { useTextEditor } from "@abduljebar/text-editor";
|
|
141
152
|
|
|
142
153
|
function CustomEditor() {
|
|
@@ -205,6 +216,9 @@ The editor comes with beautiful default styling using Tailwind CSS classes:
|
|
|
205
216
|
You can override the default styles by targeting the editor's CSS classes or using the `className` prop:
|
|
206
217
|
|
|
207
218
|
```tsx
|
|
219
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
220
|
+
import { TextEditor } from "@abduljebar/text-editor";
|
|
221
|
+
|
|
208
222
|
<TextEditor
|
|
209
223
|
className="custom-editor-styles"
|
|
210
224
|
// ... other props
|
|
@@ -226,6 +240,7 @@ You can override the default styles by targeting the editor's CSS classes or usi
|
|
|
226
240
|
### Integration with Form Libraries
|
|
227
241
|
|
|
228
242
|
```tsx
|
|
243
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
229
244
|
import { useForm } from 'react-hook-form';
|
|
230
245
|
import { TextEditor } from "@abduljebar/text-editor";
|
|
231
246
|
|
|
@@ -256,6 +271,7 @@ function ArticleForm() {
|
|
|
256
271
|
### Custom Toolbar Implementation
|
|
257
272
|
|
|
258
273
|
```tsx
|
|
274
|
+
import '@abduljebar/text-editor/dist/index.css';
|
|
259
275
|
import { useTextEditor } from "@abduljebar/text-editor";
|
|
260
276
|
|
|
261
277
|
function CustomToolbarEditor() {
|