@mbs-dev/react-editor 1.0.7 → 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/dist/Editor.js

@@ -1,28 +1,50 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
-    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -48,42 +70,45 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
         return formdata;
     },
     isSuccess: function (e) {
+        var _a;
         var fn = this.jodit;
-        if (e.data.files && e.data.files.length) {
+        if (((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.files) && e.data.files.length) {
             var tagName_1 = 'img';
             e.data.files.forEach(function (filename) {
                 var elm = fn.createInside.element(tagName_1);
-                elm.setAttribute('src', "".concat(imageUrl, "/").concat(filename));
+                var src = imageUrl ? "".concat(imageUrl, "/").concat(filename) : filename;
+                elm.setAttribute('src', src);
                 fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
             });
         }
-        return e.success;
+        return !!(e === null || e === void 0 ? void 0 : e.success);
     },
     getMessage: function (e) {
-        return e.data.messages && Array.isArray(e.data.messages)
+        var _a;
+        return ((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.messages) && Array.isArray(e.data.messages)
             ? e.data.messages.join('')
             : '';
     },
     process: function (resp) {
         var files = [];
-        files.unshift(resp.data);
+        files.unshift(resp === null || resp === void 0 ? void 0 : resp.data);
         return {
-            files: resp.data,
-            error: resp.msg,
-            msg: resp.msg,
+            files: resp === null || resp === void 0 ? void 0 : resp.data,
+            error: resp === null || resp === void 0 ? void 0 : resp.msg,
+            msg: resp === null || resp === void 0 ? void 0 : resp.msg,
         };
     },
     error: function (e) {
         this.j.e.fire('errorMessage', e.message, 'error', 4000);
     },
     defaultHandlerError: function (e) {
-        this.j.e.fire('errorMessage', e.message);
+        this.j.e.fire('errorMessage', (e === null || e === void 0 ? void 0 : e.message) || 'Upload error');
     },
 }); };
 exports.uploaderConfig = uploaderConfig;
 var config = function (_a) {
     var _b = _a === void 0 ? {} : _a, includeUploader = _b.includeUploader, apiUrl = _b.apiUrl, imageUrl = _b.imageUrl, onDeleteImage = _b.onDeleteImage;
-    return ({
+    var base = {
         readonly: false,
         placeholder: 'Start typing...',
         toolbarAdaptive: false,
@@ -127,40 +152,43 @@ var config = function (_a) {
             'table',
             'fullsize',
         ],
-        uploader: includeUploader ? (0, exports.uploaderConfig)(apiUrl, imageUrl) : undefined,
-        events: onDeleteImage
-            ? {
-                afterInit: function (editor) {
-                    var root = editor.editor;
-                    var observer = new MutationObserver(function (mutations) {
-                        mutations.forEach(function (mutation) {
-                            mutation.removedNodes.forEach(function (node) {
-                                if (node.nodeType !== Node.ELEMENT_NODE)
-                                    return;
-                                var el = node;
-                                var imgs = __spreadArray(__spreadArray([], __read((el.matches('img') ? [el] : [])), false), __read(Array.from(el.querySelectorAll('img'))), false);
-                                imgs.forEach(function (img) {
-                                    var src = img.getAttribute('src');
-                                    if (!src)
-                                        return;
-                                    if (imageUrl && !src.startsWith(imageUrl))
-                                        return;
-                                    onDeleteImage(src);
-                                });
-                            });
+    };
+    if (includeUploader) {
+        base.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
+    }
+    if (onDeleteImage) {
+        base.events = __assign(__assign({}, (base.events || {})), { afterInit: function (editor) {
+                var _this = this;
+                var extractImageSrcs = function (html) {
+                    var container = document.createElement('div');
+                    container.innerHTML = html || '';
+                    var imgs = Array.from(container.getElementsByTagName('img'));
+                    return new Set(imgs
+                        .map(function (img) { return img.getAttribute('src') || ''; })
+                        .filter(function (src) { return !!src; }));
+                };
+                var prevValue = editor.value || '';
+                var prevSrcs = extractImageSrcs(prevValue);
+                editor.events.on('change', function () { return __awaiter(_this, void 0, void 0, function () {
+                    var currentValue, currentSrcs;
+                    return __generator(this, function (_a) {
+                        currentValue = editor.value || '';
+                        currentSrcs = extractImageSrcs(currentValue);
+                        prevSrcs.forEach(function (src) {
+                            if (!currentSrcs.has(src)) {
+                                if (!imageUrl || src.startsWith(imageUrl)) {
+                                    void onDeleteImage(src);
+                                }
+                            }
                         });
+                        prevValue = currentValue;
+                        prevSrcs = currentSrcs;
+                        return [2];
                     });
-                    observer.observe(root, {
-                        childList: true,
-                        subtree: true,
-                    });
-                    editor.events.on('beforeDestruct', function () {
-                        observer.disconnect();
-                    });
-                },
-            }
-            : undefined,
-    });
+                }); });
+            } });
+    }
+    return base;
 };
 exports.config = config;
 exports.default = ReactEditor;

package/package.json

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

package/src/Editor.tsx

@@ -1,7 +1,6 @@
-// Editor.tsx
 import React from 'react';
 import JoditEditor from 'jodit-react';
-import { EditorProps, OnDeleteImage } from './Editor.types';
+import { EditorProps } from './Editor.types';
 
 const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config }) => {
     return (
@@ -14,7 +13,14 @@ const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config })
     );
 };
 
-export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
+/**
+ * Uploader configuration for Jodit
+ * Handles image upload + insertion in the editor
+ */
+export const uploaderConfig = (
+    apiUrl?: string,
+    imageUrl?: string
+) => ({
     imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
     filesVariableName(t: number): string {
         return 'files[' + t + ']';
@@ -29,38 +35,39 @@ export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
     isSuccess(this: any, e: any): boolean {
         const fn = this.jodit;
 
-        if (e.data.files && e.data.files.length) {
+        if (e?.data?.files && e.data.files.length) {
             const tagName = 'img';
 
             e.data.files.forEach((filename: string) => {
                 const elm = fn.createInside.element(tagName);
-                elm.setAttribute('src', `${imageUrl}/${filename}`);
+                const src = imageUrl ? `${imageUrl}/${filename}` : filename;
+                elm.setAttribute('src', src);
                 fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
             });
         }
 
-        return e.success;
+        return !!e?.success;
     },
     getMessage(e: any): string {
-        return e.data.messages && Array.isArray(e.data.messages)
+        return e?.data?.messages && Array.isArray(e.data.messages)
             ? e.data.messages.join('')
             : '';
     },
     process(resp: any): { files: any[]; error: string; msg: string } {
         const files: any[] = [];
-        files.unshift(resp.data);
+        files.unshift(resp?.data);
 
         return {
-            files: resp.data,
-            error: resp.msg,
-            msg: resp.msg,
+            files: resp?.data,
+            error: resp?.msg,
+            msg: resp?.msg,
         };
     },
     error(this: any, e: Error): void {
         this.j.e.fire('errorMessage', e.message, 'error', 4000);
     },
     defaultHandlerError(this: any, e: any): void {
-        this.j.e.fire('errorMessage', e.message);
+        this.j.e.fire('errorMessage', e?.message || 'Upload error');
     },
 });
 
@@ -68,105 +75,118 @@ type ConfigParams = {
     includeUploader?: boolean;
     apiUrl?: string;
     imageUrl?: string;
-    onDeleteImage?: OnDeleteImage;
+    /**
+     * Called when an image is really removed from the editor content.
+     * You receive the image src URL and can call your API to delete it on server.
+     */
+    onDeleteImage?: (imageUrl: string) => void | Promise<void>;
 };
 
+/**
+ * Build Jodit config for ReactEditor
+ */
 export const config = ({
     includeUploader,
     apiUrl,
     imageUrl,
     onDeleteImage,
-}: ConfigParams = {}) => ({
-    readonly: false,
-    placeholder: 'Start typing...',
-    toolbarAdaptive: false,
-    useSearch: false,
-    language: 'en',
-    allowResizeX: false,
-    allowResizeY: false,
-    height: 400,
-    enableDragAndDropFileToEditor: true,
-    showCharsCounter: true,
-    showWordsCounter: true,
-    showXPathInStatusbar: false,
-
-    buttons: [
-        'source',
-        '|',
-        'bold',
-        'italic',
-        'underline',
-        '|',
-        'ul',
-        'ol',
-        '|',
-        'image',
-        '|',
-        'video',
-        '|',
-        'link',
-        '|',
-        'undo',
-        'redo',
-        '|',
-        'hr',
-        '|',
-        'eraser',
-        '|',
-        'font',
-        'fontsize',
-        'paragraph',
-        'brush',
-        '|',
-        'table',
-        'fullsize',
-    ],
-
-    uploader: includeUploader ? uploaderConfig(apiUrl, imageUrl) : undefined,
-
-    // 👇 This part ensures delete callback runs when image is removed
-    events: onDeleteImage
-        ? {
+}: ConfigParams = {}) => {
+    const base: any = {
+        readonly: false,
+        placeholder: 'Start typing...',
+        toolbarAdaptive: false,
+        useSearch: false,
+        language: 'en',
+        allowResizeX: false,
+        allowResizeY: false,
+        height: 400,
+        enableDragAndDropFileToEditor: true,
+        showCharsCounter: true,
+        showWordsCounter: true,
+        showXPathInStatusbar: false,
+
+        buttons: [
+            'source',
+            '|',
+            'bold',
+            'italic',
+            'underline',
+            '|',
+            'ul',
+            'ol',
+            '|',
+            'image',
+            '|',
+            'video',
+            '|',
+            'link',
+            '|',
+            'undo',
+            'redo',
+            '|',
+            'hr',
+            '|',
+            'eraser',
+            '|',
+            'font',
+            'fontsize',
+            'paragraph',
+            'brush',
+            '|',
+            'table',
+            'fullsize',
+        ],
+    };
+
+    if (includeUploader) {
+        base.uploader = uploaderConfig(apiUrl, imageUrl);
+    }
+
+    if (onDeleteImage) {
+        base.events = {
+            ...(base.events || {}),
+            /**
+             * We use the value diff to detect removed <img> src.
+             * This avoids false calls during upload (where DOM nodes can be replaced).
+             */
             afterInit(editor: any) {
-                const root: HTMLElement = editor.editor;
-
-                const observer = new MutationObserver((mutations) => {
-                    mutations.forEach((mutation) => {
-                        mutation.removedNodes.forEach((node) => {
-                            if (node.nodeType !== Node.ELEMENT_NODE) return;
-
-                            const el = node as HTMLElement;
-
-                            const imgs: HTMLImageElement[] = [
-                                ...(el.matches('img') ? [el as HTMLImageElement] : []),
-                                ...Array.from(el.querySelectorAll('img')),
-                            ];
-
-                            imgs.forEach((img) => {
-                                const src = img.getAttribute('src');
-                                if (!src) return;
-
-                                // Optionally restrict to your image base URL
-                                if (imageUrl && !src.startsWith(imageUrl)) return;
-
-                                onDeleteImage(src);
-                            });
-                        });
+                const extractImageSrcs = (html: string): Set<string> => {
+                    const container = document.createElement('div');
+                    container.innerHTML = html || '';
+                    const imgs = Array.from(container.getElementsByTagName('img')) as HTMLImageElement[];
+
+                    return new Set(
+                        imgs
+                            .map((img) => img.getAttribute('src') || '')
+                            .filter((src) => !!src)
+                    );
+                };
+
+                let prevValue: string = editor.value || '';
+                let prevSrcs: Set<string> = extractImageSrcs(prevValue);
+
+                editor.events.on('change', async () => {
+                    const currentValue: string = editor.value || '';
+                    const currentSrcs = extractImageSrcs(currentValue);
+
+                    // src present before, not present now -> deleted
+                    prevSrcs.forEach((src) => {
+                        if (!currentSrcs.has(src)) {
+                            // If imageUrl is defined, you can filter to only your own assets
+                            if (!imageUrl || src.startsWith(imageUrl)) {
+                                void onDeleteImage(src);
+                            }
+                        }
                     });
-                });
 
-                observer.observe(root, {
-                    childList: true,
-                    subtree: true,
-                });
-
-                // Cleanup when editor is destroyed
-                editor.events.on('beforeDestruct', () => {
-                    observer.disconnect();
+                    prevValue = currentValue;
+                    prevSrcs = currentSrcs;
                 });
             },
-        }
-        : undefined,
-});
+        };
+    }
+
+    return base;
+};
 
 export default ReactEditor;

package/types/Editor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EditorProps, OnDeleteImage } from './Editor.types';
+import { EditorProps } from './Editor.types';
 declare const ReactEditor: React.FC<EditorProps>;
 export declare const uploaderConfig: (apiUrl?: string, imageUrl?: string) => {
     imagesExtensions: string[];
@@ -23,42 +23,7 @@ type ConfigParams = {
     includeUploader?: boolean;
     apiUrl?: string;
     imageUrl?: string;
-    onDeleteImage?: OnDeleteImage;
-};
-export declare const config: ({ includeUploader, apiUrl, imageUrl, onDeleteImage, }?: ConfigParams) => {
-    readonly: boolean;
-    placeholder: string;
-    toolbarAdaptive: boolean;
-    useSearch: boolean;
-    language: string;
-    allowResizeX: boolean;
-    allowResizeY: boolean;
-    height: number;
-    enableDragAndDropFileToEditor: boolean;
-    showCharsCounter: boolean;
-    showWordsCounter: boolean;
-    showXPathInStatusbar: boolean;
-    buttons: string[];
-    uploader: {
-        imagesExtensions: string[];
-        filesVariableName(t: number): string;
-        url: string | undefined;
-        withCredentials: boolean;
-        format: string;
-        method: string;
-        prepareData(formdata: FormData): FormData;
-        isSuccess(this: any, e: any): boolean;
-        getMessage(e: any): string;
-        process(resp: any): {
-            files: any[];
-            error: string;
-            msg: string;
-        };
-        error(this: any, e: Error): void;
-        defaultHandlerError(this: any, e: any): void;
-    } | undefined;
-    events: {
-        afterInit(editor: any): void;
-    } | undefined;
+    onDeleteImage?: (imageUrl: string) => void | Promise<void>;
 };
+export declare const config: ({ includeUploader, apiUrl, imageUrl, onDeleteImage, }?: ConfigParams) => any;
 export default ReactEditor;