@mbs-dev/react-editor 1.0.2 β 1.0.4
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 +139 -1
- package/dist/Editor.js +1 -0
- package/package.json +1 -1
- package/src/Editor.tsx +1 -1
package/README.md
CHANGED
|
@@ -1 +1,139 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
# @mbs-dev/react-editor
|
|
3
|
+
|
|
4
|
+
A lightweight, typed React wrapper around **Jodit** rich-text editor, designed for real-world CRUD forms (blogs, products, CMS pages, etc.).
|
|
5
|
+
|
|
6
|
+
It provides:
|
|
7
|
+
|
|
8
|
+
- A **simple React component** `<ReactEditor />`
|
|
9
|
+
- A reusable **`config()` helper** for configuration
|
|
10
|
+
- An optional **`uploaderConfig()` helper** to handle image uploads and automatic insertion into the editor
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
[](https://www.npmjs.com/package/@mbs-dev/react-editor)
|
|
15
|
+
[](https://www.npmjs.com/package/@mbs-dev/react-editor)
|
|
16
|
+
[](https://bundlephobia.com/package/@mbs-dev/react-editor)
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## β¨ Features
|
|
21
|
+
|
|
22
|
+
- 𧩠**Simple React API**: controlled `value` + `onChange`
|
|
23
|
+
- βοΈ **Helper config**: `config()` to quickly build configuration
|
|
24
|
+
- πΌοΈ **Image upload integration**: optional `uploaderConfig()` for file uploading + auto-insert `<img />`
|
|
25
|
+
- π§ͺ **TypeScript-ready**: ships with types & TSX-friendly usage
|
|
26
|
+
- 𧱠**Library-friendly**: minimal surface area, built to be reused across apps
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## π¦ Installation
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm install @mbs-dev/react-editor
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## π Quick Start
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import React, { useMemo, useState } from 'react';
|
|
42
|
+
import ReactEditor, { config } from '@mbs-dev/react-editor';
|
|
43
|
+
|
|
44
|
+
const MyPage = () => {
|
|
45
|
+
const [content, setContent] = useState('');
|
|
46
|
+
|
|
47
|
+
const editorConfig = useMemo(() => config(false), []);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<ReactEditor
|
|
51
|
+
config={editorConfig}
|
|
52
|
+
value={content}
|
|
53
|
+
onChange={(value) => setContent(value)}
|
|
54
|
+
/>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## π§ Configuration Helpers
|
|
62
|
+
|
|
63
|
+
### `config(includeUploader?: boolean, apiUrl?: string, imageUrl?: string)`
|
|
64
|
+
|
|
65
|
+
### `uploaderConfig(apiUrl?: string, imageUrl?: string)`
|
|
66
|
+
|
|
67
|
+
Both helpers simplify setting up configuration and upload support.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## 𧩠Symfony API Platform Example (Recommended Integration)
|
|
72
|
+
|
|
73
|
+
If your backend is **Symfony + API Platform**, here is the **most common realβworld setup**:
|
|
74
|
+
|
|
75
|
+
### **π 1. Expose your upload endpoint**
|
|
76
|
+
|
|
77
|
+
In your Symfony API (`config/routes.yaml`):
|
|
78
|
+
|
|
79
|
+
```yaml
|
|
80
|
+
upload_image:
|
|
81
|
+
path: /upload
|
|
82
|
+
controller: App\Controller\ImageUploadController
|
|
83
|
+
methods: [POST]
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### **π 2. Store uploaded images in `/public/uploads/images`**
|
|
87
|
+
|
|
88
|
+
```php
|
|
89
|
+
// App/Controller/ImageUploadController.php
|
|
90
|
+
|
|
91
|
+
public function __invoke(Request $request): JsonResponse
|
|
92
|
+
{
|
|
93
|
+
$files = $request->files->get('files');
|
|
94
|
+
$storedFiles = [];
|
|
95
|
+
|
|
96
|
+
foreach ($files as $file) {
|
|
97
|
+
$newName = uniqid().'.'.$file->guessExtension();
|
|
98
|
+
$file->move($this->getParameter('kernel.project_dir').'/public/uploads/images', $newName);
|
|
99
|
+
$storedFiles[] = $newName;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return new JsonResponse([
|
|
103
|
+
'success' => true,
|
|
104
|
+
'data' => [
|
|
105
|
+
'files' => $storedFiles,
|
|
106
|
+
'messages' => [],
|
|
107
|
+
],
|
|
108
|
+
'msg' => 'Upload successful'
|
|
109
|
+
]);
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### **π 3. Front-end React configuration**
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
export const uploadUrl = `${apiUrl}/upload`;
|
|
117
|
+
export const blogPostImgUrl = `${uploadUrl}/images`;
|
|
118
|
+
|
|
119
|
+
const editorConfig = useMemo(
|
|
120
|
+
() => config(
|
|
121
|
+
true, // enable uploader
|
|
122
|
+
`${apiUrl}/upload`, // Symfony upload endpoint
|
|
123
|
+
blogPostImgUrl // URL to access public images
|
|
124
|
+
),
|
|
125
|
+
[]
|
|
126
|
+
);
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
This will automatically insert images as:
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
<img src="https://your-domain.com/uploads/images/filename.webp" />
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## π License
|
|
138
|
+
|
|
139
|
+
MIT β feel free to use it in commercial and private applications.
|
package/dist/Editor.js
CHANGED
package/package.json
CHANGED