@mbs-dev/react-editor 1.0.8 → 1.1.0

package/README.md

@@ -1,13 +1,13 @@
-
 # @mbs-dev/react-editor
 
-A lightweight, typed React wrapper around **Jodit** rich-text editor, designed for real-world CRUD forms (blogs, products, CMS pages, etc.).
+A lightweight, typed React wrapper around **Jodit** rich‑text editor, designed for real‑world CRUD forms (blogs, products, CMS pages, etc.).
 
 It provides:
 
 - A **simple React component** `<ReactEditor />`
 - A reusable **`config()` helper** for configuration
-- An optional **`uploaderConfig()` helper** to handle image uploads and automatic insertion into the editor
+- A reusable **`uploaderConfig()` helper**
+- A new **`onDeleteImage` callback** to delete images on server when removed from editor
 
 ---
 
@@ -19,11 +19,12 @@ It provides:
 
 ## ✨ Features
 
-- 🧩 **Simple React API**: controlled `value` + `onChange`
-- ⚙️ **Helper config**: `config()` to quickly build configuration
-- 🖼️ **Image upload integration**: optional `uploaderConfig()` for file uploading + auto-insert `<img />`
-- 🧪 **TypeScript-ready**: ships with types & TSX-friendly usage
-- 🧱 **Library-friendly**: minimal surface area, built to be reused across apps
+- 🧩 Simple React API
+- ⚙️ Powerful config builder (`config()`)
+- 🖼️ Image upload support
+- 🗑️ **New: Server‑side image delete support (`onDeleteImage`)**
+- 🔥 Fully typed (TS/TSX)
+- 📦 Built for npm libraries
 
 ---
 
@@ -38,19 +39,19 @@ npm install @mbs-dev/react-editor
 ## 🚀 Quick Start
 
 ```tsx
-import React, { useMemo, useState } from 'react';
-import ReactEditor, { config } from '@mbs-dev/react-editor';
+import React, { useMemo, useState } from "react";
+import ReactEditor, { config } from "@mbs-dev/react-editor";
 
 const MyPage = () => {
-  const [content, setContent] = useState('');
+  const [content, setContent] = useState("");
 
-  const editorConfig = useMemo(() => config(false), []);
+  const editorConfig = useMemo(() => config({}), []);
 
   return (
     <ReactEditor
       config={editorConfig}
       value={content}
-      onChange={(value) => setContent(value)}
+      onChange={setContent}
     />
   );
 };
@@ -58,82 +59,235 @@ const MyPage = () => {
 
 ---
 
-## 🔧 Configuration Helpers
+# 🔧 Configuration (Full API)
 
-### `config(includeUploader?: boolean, apiUrl?: string, imageUrl?: string)`
+## `config(params: ConfigParams)`
 
-### `uploaderConfig(apiUrl?: string, imageUrl?: string)`
+```ts
+type ConfigParams = {
+  includeUploader?: boolean;
+  apiUrl?: string;
+  imageUrl?: string;
+  onDeleteImage?: (imageUrl: string) => void | Promise<void>;
+};
+```
 
-Both helpers simplify setting up configuration and upload support.
+### Example
+
+```tsx
+const editorConfig = useMemo(
+  () =>
+    config({
+      includeUploader: true,
+      apiUrl: `${apiUrl}/upload`,
+      imageUrl: blogPostImgUrl,
+      onDeleteImage: handleDeleteImage,
+    }),
+  []
+);
+```
 
 ---
 
-## 🧩 Symfony API Platform Example (Recommended Integration)
+# 🖼️ Image Uploading
+
+The backend must return:
+
+```json
+{
+  "success": true,
+  "data": {
+    "files": ["uploaded.webp"],
+    "messages": []
+  },
+  "msg": "Upload successful"
+}
+```
+
+Images get inserted automatically:
+
+```html
+<img src="https://domain.com/uploads/images/filename.webp" />
+```
+
+---
 
-If your backend is **Symfony + API Platform**, here is the **most common real‑world setup**:
+# 🗑️ NEW — Image Delete (Server Sync)
 
-### **📌 1. Expose your upload endpoint**
+The editor detects removed `<img>` tags and calls your function:
 
-In your Symfony API (`config/routes.yaml`):
+### **TSX Implementation**
+
+```tsx
+const handleDeleteImage = async (imageSrc: string) => {
+  const filename = imageSrc.split("/").pop();
+  if (!filename) return;
+
+  await axios.delete(`${apiUrl}/delete/${filename}`);
+};
+```
+
+---
+
+# 🧩 Full TSX Example (Add Blog)
+
+```tsx
+const AddBlog = () => {
+  const [description, setDescription] = useState("");
+
+  const handleDeleteImage = async (imageSrc: string) => {
+    const filename = imageSrc.split("/").pop();
+    if (!filename) return;
+    await axios.delete(`${apiUrl}/delete/${filename}`);
+  };
+
+  const editorConfig = useMemo(
+    () =>
+      config({
+        includeUploader: true,
+        apiUrl: `${apiUrl}/upload`,
+        imageUrl: blogPostImgUrl,
+        onDeleteImage: handleDeleteImage,
+      }),
+    []
+  );
+
+  return (
+    <ReactEditor
+      config={editorConfig}
+      value={description}
+      onChange={setDescription}
+    />
+  );
+};
+```
+
+---
+
+# 🧩 Symfony API Platform Full Example
+
+## **1. Upload base directory**
+
+`config/services.yaml`
 
 ```yaml
-upload_image:
-  path: /upload
-  controller: App\Controller\ImageUploadController
-  methods: [POST]
+parameters:
+    blog_post_images: '%kernel.project_dir%/public/uploads/images_dir'
 ```
 
-### **📌 2. Store uploaded images in `/public/uploads/images`**
+---
+
+## **2. Symfony Upload & Delete Service**
 
 ```php
-// App/Controller/ImageUploadController.php
+<?php
 
-public function __invoke(Request $request): JsonResponse
+final class UploaderService
 {
-    $files = $request->files->get('files');
-    $storedFiles = [];
+    public function __construct(
+        private readonly EntityManagerInterface $entityManager,
+        private readonly ParameterBagInterface $params
+    ) {}
+
+    public function uploadBlogPostImages(array $uploadedFiles): array
+    {
+        if ($uploadedFiles === []) {
+            throw new BadRequestHttpException('Les fichiers sont requis.');
+        }
+
+        $uploadedFileNames = [];
+
+        foreach ($uploadedFiles as $file) {
+            if (!$file instanceof UploadedFile) {
+                continue;
+            }
+
+            $image = new BlogPostImages();
+            $image->setImageFile($file);
+
+            $this->entityManager->persist($image);
+            $uploadedFileNames[] = $image->getImage();
+        }
+
+        if ($uploadedFileNames === []) {
+            throw new BadRequestHttpException('Aucun fichier valide n’a été fourni.');
+        }
+
+        $this->entityManager->flush();
+
+        return $uploadedFileNames;
+    }
+
+    public function deleteBlogPostImage(string $filename): void
+    {
+        $cleanName = basename($filename);
+
+        $imageEntity = $this->entityManager
+            ->getRepository(BlogPostImages::class)
+            ->findOneBy(['image' => $cleanName]);
+
+        if (!$imageEntity) {
+            throw new NotFoundHttpException("L'image demandée n'existe pas.");
+        }
+
+        $fileDir = str_replace('\\', '/', $this->params->get('blog_post_images'));
+        $filePath = rtrim($fileDir, '/') . '/' . $cleanName;
+
+        if (is_file($filePath)) {
+            unlink($filePath);
+        }
 
-    foreach ($files as $file) {
-        $newName = uniqid().'.'.$file->guessExtension();
-        $file->move($this->getParameter('kernel.project_dir').'/public/uploads/images', $newName);
-        $storedFiles[] = $newName;
+        $this->entityManager->remove($imageEntity);
+        $this->entityManager->flush();
     }
+}
+```
+
+---
+
+## **3. Delete endpoint**
+
+```php
+public function deleteImage(string $filename): JsonResponse
+{
+    $this->uploaderService->deleteBlogPostImage($filename);
 
     return new JsonResponse([
         'success' => true,
-        'data' => [
-            'files' => $storedFiles,
-            'messages' => [],
-        ],
-        'msg' => 'Upload successful'
+        'message' => "L'image a été supprimée avec succès.",
     ]);
 }
 ```
 
-### **📌 3. Front-end React configuration**
+---
+
+## **4. React Integration**
 
 ```ts
-export const uploadUrl = `${apiUrl}/upload`;
-export const blogPostImgUrl = `${uploadUrl}/images`;
+export const blogPostImgUrl = `${apiUrl}/uploads/post`;
+```
 
-const editorConfig = useMemo(
-  () => config(
-    true,                                 // enable uploader
-    `${apiUrl}/upload`,                   // Symfony upload endpoint
-    blogPostImgUrl                        // URL to access public images
-  ),
-  []
-);
+```tsx
+const handleDeleteImage = async (src: string) => {
+  const filename = src.split("/").pop();
+  if (filename)
+    await axios.delete(`${apiUrl}/post/delete/${filename}`);
+};
 ```
 
-This will automatically insert images as:
+---
 
-```html
-<img src="https://your-domain.com/uploads/images/filename.webp" />
-```
+# 📘 API Summary
+
+| Feature            | Supported |
+|-------------------|-----------|
+| Image upload       | ✅ |
+| Image delete sync  | ✅ |
+| TypeScript ready   | ✅ |
+| Config builder     | ✅ |
 
 ---
 
-## 📝 License
+# 📝 License
 
-MIT — feel free to use it in commercial and private applications.
+MIT — free for commercial and private use.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mbs-dev/react-editor",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "react editor",
   "main": "dist/index.js",
   "types": "types/index.d.ts",