@mbs-dev/react-editor 1.0.8 → 1.2.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

@@ -46,6 +46,31 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+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);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+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];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -57,8 +82,147 @@ var ReactEditor = function (_a) {
     var onChange = _a.onChange, onBlur = _a.onBlur, value = _a.value, config = _a.config;
     return (react_1.default.createElement(jodit_react_1.default, { value: value, config: config, onBlur: onBlur, onChange: onChange }));
 };
-var uploaderConfig = function (apiUrl, imageUrl) { return ({
-    imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
+var isRecord = function (v) {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+};
+var toStringSafe = function (v) { return (typeof v === 'string' ? v : ''); };
+var isAbsoluteUrl = function (url) {
+    return /^https?:\/\//i.test(url) || /^\/\//.test(url);
+};
+var normalizeJoinUrl = function (base, path) {
+    if (!base)
+        return path;
+    if (!path)
+        return base;
+    if (isAbsoluteUrl(path))
+        return path;
+    return "".concat(base.replace(/\/+$/, ''), "/").concat(path.replace(/^\/+/, ''));
+};
+var getExtensionLower = function (filenameOrUrl) {
+    var clean = filenameOrUrl.split('?')[0].split('#')[0];
+    var lastDot = clean.lastIndexOf('.');
+    if (lastDot === -1)
+        return '';
+    return clean.slice(lastDot + 1).toLowerCase();
+};
+var escapeHtml = function (s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+};
+var DEFAULT_IMAGE_EXTENSIONS = [
+    'jpg',
+    'jpeg',
+    'png',
+    'gif',
+    'webp',
+    'avif',
+    'svg',
+];
+var DEFAULT_FILE_LINK_EXTENSIONS = [
+    'pdf',
+    'doc',
+    'docx',
+    'xls',
+    'xlsx',
+    'ppt',
+    'pptx',
+    'csv',
+    'txt',
+    '7z',
+];
+var asJoditLike = function (v) {
+    if (!isRecord(v))
+        return null;
+    return v;
+};
+var extractUploadedFiles = function (resp) {
+    if (!isRecord(resp))
+        return [];
+    var r = resp;
+    var data = isRecord(r.data) ? r.data : undefined;
+    var files1 = data === null || data === void 0 ? void 0 : data.files;
+    if (Array.isArray(files1))
+        return files1.map(toStringSafe).filter(Boolean);
+    if (typeof files1 === 'string')
+        return [files1];
+    var files2 = r.files;
+    if (Array.isArray(files2))
+        return files2.map(toStringSafe).filter(Boolean);
+    if (typeof files2 === 'string')
+        return [files2];
+    if (isRecord(r.data) && isRecord(r.data.data)) {
+        var d2 = r.data.data;
+        var f = d2.files;
+        if (Array.isArray(f))
+            return f.map(toStringSafe).filter(Boolean);
+        if (typeof f === 'string')
+            return [f];
+    }
+    return [];
+};
+var extractMessages = function (resp) {
+    if (!isRecord(resp))
+        return [];
+    var r = resp;
+    var data = isRecord(r.data) ? r.data : undefined;
+    var messages = data === null || data === void 0 ? void 0 : data.messages;
+    if (Array.isArray(messages))
+        return messages.map(toStringSafe).filter(Boolean);
+    if (typeof messages === 'string')
+        return [messages];
+    var msg1 = data === null || data === void 0 ? void 0 : data.msg;
+    if (typeof msg1 === 'string' && msg1.trim())
+        return [msg1];
+    var msg2 = r.msg;
+    if (typeof msg2 === 'string' && msg2.trim())
+        return [msg2];
+    return [];
+};
+var isSuccessResponse = function (resp) {
+    if (!isRecord(resp))
+        return false;
+    var r = resp;
+    if (r.success === true)
+        return true;
+    if (isRecord(r.data) && r.data.success === true)
+        return true;
+    if (isRecord(r.data) && r.data.error === 0)
+        return true;
+    if (r.error === 0)
+        return true;
+    var files = extractUploadedFiles(resp);
+    return files.length > 0;
+};
+var extractAssetsFromHtml = function (html, fileLinkExtensions) {
+    if (typeof document === 'undefined') {
+        return { images: new Set(), files: new Set() };
+    }
+    var container = document.createElement('div');
+    container.innerHTML = html || '';
+    var images = new Set();
+    var files = new Set();
+    Array.from(container.getElementsByTagName('img')).forEach(function (img) {
+        var src = img.getAttribute('src') || '';
+        if (src)
+            images.add(src);
+    });
+    Array.from(container.getElementsByTagName('a')).forEach(function (a) {
+        var href = a.getAttribute('href') || '';
+        if (!href)
+            return;
+        var ext = getExtensionLower(href);
+        if (ext && fileLinkExtensions.includes(ext))
+            files.add(href);
+    });
+    return { images: images, files: files };
+};
+var uploaderConfig = function (apiUrl, assetBaseUrl) { return ({
+    insertImageAsBase64URI: false,
+    imagesExtensions: __spreadArray([], __read(DEFAULT_IMAGE_EXTENSIONS), false),
     filesVariableName: function (t) {
         return 'files[' + t + ']';
     },
@@ -69,45 +233,69 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
     prepareData: function (formdata) {
         return formdata;
     },
-    isSuccess: function (e) {
-        var _a;
-        var fn = this.jodit;
-        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);
-                var src = imageUrl ? "".concat(imageUrl, "/").concat(filename) : filename;
-                elm.setAttribute('src', src);
-                fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
-            });
-        }
-        return !!(e === null || e === void 0 ? void 0 : e.success);
+    isSuccess: function (resp) {
+        return isSuccessResponse(resp);
     },
-    getMessage: function (e) {
-        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('')
-            : '';
+    getMessage: function (resp) {
+        var msgs = extractMessages(resp);
+        return msgs.length ? msgs.join(' ') : '';
     },
     process: function (resp) {
-        var files = [];
-        files.unshift(resp === null || resp === void 0 ? void 0 : resp.data);
+        var rawFiles = extractUploadedFiles(resp);
+        var files = rawFiles.map(function (filenameOrUrl) {
+            if (!assetBaseUrl)
+                return filenameOrUrl;
+            return normalizeJoinUrl(assetBaseUrl, filenameOrUrl);
+        });
+        var messages = extractMessages(resp);
         return {
-            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,
+            files: files,
+            path: '',
+            baseurl: '',
+            messages: messages,
+            msg: messages.join(' '),
         };
     },
+    defaultHandlerSuccess: function (data) {
+        var jodit = asJoditLike(this.jodit);
+        if (!jodit)
+            return;
+        var selection = jodit.s;
+        var creator = jodit.createInside;
+        var files = isRecord(data) && Array.isArray(data.files)
+            ? data.files.map(toStringSafe).filter(Boolean)
+            : [];
+        files.forEach(function (url) {
+            var _a, _b, _c, _d;
+            var ext = getExtensionLower(url);
+            var isImage = DEFAULT_IMAGE_EXTENSIONS.includes(ext);
+            if (isImage) {
+                if ((creator === null || creator === void 0 ? void 0 : creator.element) && (selection === null || selection === void 0 ? void 0 : selection.insertImage)) {
+                    var img = creator.element('img');
+                    img.setAttribute('src', url);
+                    selection.insertImage(img, null, (_a = jodit.o) === null || _a === void 0 ? void 0 : _a.imageDefaultWidth);
+                    return;
+                }
+                (_b = selection === null || selection === void 0 ? void 0 : selection.insertHTML) === null || _b === void 0 ? void 0 : _b.call(selection, "<img src=\"".concat(escapeHtml(url), "\" alt=\"\" />"));
+                return;
+            }
+            var label = escapeHtml((_c = url.split('/').pop()) !== null && _c !== void 0 ? _c : url);
+            var linkHtml = "<a href=\"".concat(escapeHtml(url), "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(label, "</a>");
+            (_d = selection === null || selection === void 0 ? void 0 : selection.insertHTML) === null || _d === void 0 ? void 0 : _d.call(selection, linkHtml);
+        });
+    },
     error: function (e) {
-        this.j.e.fire('errorMessage', e.message, 'error', 4000);
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.j) === null || _a === void 0 ? void 0 : _a.e) === null || _b === void 0 ? void 0 : _b.fire) === null || _c === void 0 ? void 0 : _c.call(_b, 'errorMessage', e.message, 'error', 4000);
     },
     defaultHandlerError: function (e) {
-        this.j.e.fire('errorMessage', (e === null || e === void 0 ? void 0 : e.message) || 'Upload error');
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.j) === null || _a === void 0 ? void 0 : _a.e) === null || _b === void 0 ? void 0 : _b.fire) === null || _c === void 0 ? void 0 : _c.call(_b, '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;
+    var _b = _a === void 0 ? {} : _a, includeUploader = _b.includeUploader, apiUrl = _b.apiUrl, imageUrl = _b.imageUrl, onDeleteImage = _b.onDeleteImage, onDeleteFile = _b.onDeleteFile, _c = _b.fileLinkExtensions, fileLinkExtensions = _c === void 0 ? DEFAULT_FILE_LINK_EXTENSIONS : _c;
     var base = {
         readonly: false,
         placeholder: 'Start typing...',
@@ -132,6 +320,7 @@ var config = function (_a) {
             'ol',
             '|',
             'image',
+            'file',
             '|',
             'video',
             '|',
@@ -156,33 +345,33 @@ var config = function (_a) {
     if (includeUploader) {
         base.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
     }
-    if (onDeleteImage) {
+    var hasDelete = Boolean(onDeleteImage || onDeleteFile);
+    if (hasDelete) {
         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);
+                var prevAssets = extractAssetsFromHtml(prevValue, fileLinkExtensions);
                 editor.events.on('change', function () { return __awaiter(_this, void 0, void 0, function () {
-                    var currentValue, currentSrcs;
+                    var currentValue, currentAssets;
                     return __generator(this, function (_a) {
                         currentValue = editor.value || '';
-                        currentSrcs = extractImageSrcs(currentValue);
-                        prevSrcs.forEach(function (src) {
-                            if (!currentSrcs.has(src)) {
+                        currentAssets = extractAssetsFromHtml(currentValue, fileLinkExtensions);
+                        prevAssets.images.forEach(function (src) {
+                            if (!currentAssets.images.has(src)) {
                                 if (!imageUrl || src.startsWith(imageUrl)) {
-                                    void onDeleteImage(src);
+                                    onDeleteImage === null || onDeleteImage === void 0 ? void 0 : onDeleteImage(src);
+                                }
+                            }
+                        });
+                        prevAssets.files.forEach(function (href) {
+                            if (!currentAssets.files.has(href)) {
+                                if (!imageUrl || href.startsWith(imageUrl)) {
+                                    onDeleteFile === null || onDeleteFile === void 0 ? void 0 : onDeleteFile(href);
                                 }
                             }
                         });
                         prevValue = currentValue;
-                        prevSrcs = currentSrcs;
+                        prevAssets = currentAssets;
                         return [2];
                     });
                 }); });

package/package.json

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

package/src/Editor.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import JoditEditor from 'jodit-react';
 import { EditorProps } from './Editor.types';
 
+/**
+ * Keep the component unchanged
+ */
 const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config }) => {
     return (
         <JoditEditor
@@ -13,61 +16,303 @@ const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config })
     );
 };
 
+type UnknownRecord = Record<string, unknown>;
+const isRecord = (v: unknown): v is UnknownRecord =>
+    typeof v === 'object' && v !== null && !Array.isArray(v);
+
+const toStringSafe = (v: unknown): string => (typeof v === 'string' ? v : '');
+
+const isAbsoluteUrl = (url: string): boolean =>
+    /^https?:\/\//i.test(url) || /^\/\//.test(url);
+
+const normalizeJoinUrl = (base: string, path: string): string => {
+    if (!base) return path;
+    if (!path) return base;
+    if (isAbsoluteUrl(path)) return path;
+    return `${base.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`;
+};
+
+const getExtensionLower = (filenameOrUrl: string): string => {
+    const clean = filenameOrUrl.split('?')[0].split('#')[0];
+    const lastDot = clean.lastIndexOf('.');
+    if (lastDot === -1) return '';
+    return clean.slice(lastDot + 1).toLowerCase();
+};
+
+const escapeHtml = (s: string): string =>
+    s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+
+const DEFAULT_IMAGE_EXTENSIONS: readonly string[] = [
+    'jpg',
+    'jpeg',
+    'png',
+    'gif',
+    'webp',
+    'avif',
+    'svg',
+];
+
+const DEFAULT_FILE_LINK_EXTENSIONS: readonly string[] = [
+    'pdf',
+    'doc',
+    'docx',
+    'xls',
+    'xlsx',
+    'ppt',
+    'pptx',
+    'csv',
+    'txt',
+    '7z',
+];
+
+type JoditSelectionLike = {
+    insertImage?: (img: HTMLImageElement, arg2?: unknown, width?: unknown) => void;
+    insertHTML?: (html: string) => void;
+};
+
+type JoditCreateInsideLike = {
+    element: (tag: string) => HTMLElement;
+};
+
+type JoditLike = {
+    createInside?: JoditCreateInsideLike;
+    s?: JoditSelectionLike;
+    o?: {
+        imageDefaultWidth?: unknown;
+    };
+    events?: {
+        on?: (eventName: string, cb: () => void) => void;
+    };
+    value?: string;
+};
+
+type UploaderThis = {
+    jodit?: unknown;
+    j?: {
+        e?: {
+            fire?: (...args: unknown[]) => void;
+        };
+    };
+};
+
+const asJoditLike = (v: unknown): JoditLike | null => {
+    if (!isRecord(v)) return null;
+    return v as unknown as JoditLike;
+};
+
+type UploadResponseShape = {
+    success?: unknown;
+    msg?: unknown;
+    data?: {
+        files?: unknown;
+        messages?: unknown;
+        error?: unknown;
+        msg?: unknown;
+    };
+    error?: unknown;
+    files?: unknown;
+};
+
+const extractUploadedFiles = (resp: unknown): string[] => {
+    if (!isRecord(resp)) return [];
+    const r = resp as UploadResponseShape;
+
+    // Common: axios => { data: <json> }, but here we already receive <json>
+    const data = isRecord(r.data) ? r.data : undefined;
+
+    const files1 = data?.files;
+    if (Array.isArray(files1)) return files1.map(toStringSafe).filter(Boolean);
+    if (typeof files1 === 'string') return [files1];
+
+    const files2 = r.files;
+    if (Array.isArray(files2)) return files2.map(toStringSafe).filter(Boolean);
+    if (typeof files2 === 'string') return [files2];
+
+    // Sometimes: resp = { data: { data: { files: [...] } } }
+    if (isRecord(r.data) && isRecord((r.data as UnknownRecord).data)) {
+        const d2 = (r.data as UnknownRecord).data as UnknownRecord;
+        const f = d2.files;
+        if (Array.isArray(f)) return f.map(toStringSafe).filter(Boolean);
+        if (typeof f === 'string') return [f];
+    }
+
+    return [];
+};
+
+const extractMessages = (resp: unknown): string[] => {
+    if (!isRecord(resp)) return [];
+    const r = resp as UploadResponseShape;
+
+    const data = isRecord(r.data) ? r.data : undefined;
+
+    const messages = data?.messages;
+    if (Array.isArray(messages)) return messages.map(toStringSafe).filter(Boolean);
+    if (typeof messages === 'string') return [messages];
+
+    const msg1 = data?.msg;
+    if (typeof msg1 === 'string' && msg1.trim()) return [msg1];
+
+    const msg2 = r.msg;
+    if (typeof msg2 === 'string' && msg2.trim()) return [msg2];
+
+    return [];
+};
+
+const isSuccessResponse = (resp: unknown): boolean => {
+    if (!isRecord(resp)) return false;
+    const r = resp as UploadResponseShape;
+
+    // success flag (if present)
+    if (r.success === true) return true;
+    if (isRecord(r.data) && (r.data as UnknownRecord).success === true) return true;
+
+    // Symfony-style: data.error === 0
+    if (isRecord(r.data) && (r.data as UnknownRecord).error === 0) return true;
+    if (r.error === 0) return true;
+
+    // fallback: if files exist, treat as success
+    const files = extractUploadedFiles(resp);
+    return files.length > 0;
+};
+
+const extractAssetsFromHtml = (
+    html: string,
+    fileLinkExtensions: readonly string[]
+): { images: Set<string>; files: Set<string> } => {
+    if (typeof document === 'undefined') {
+        return { images: new Set<string>(), files: new Set<string>() };
+    }
+
+    const container = document.createElement('div');
+    container.innerHTML = html || '';
+
+    const images = new Set<string>();
+    const files = new Set<string>();
+
+    Array.from(container.getElementsByTagName('img')).forEach((img) => {
+        const src = img.getAttribute('src') || '';
+        if (src) images.add(src);
+    });
+
+    Array.from(container.getElementsByTagName('a')).forEach((a) => {
+        const href = a.getAttribute('href') || '';
+        if (!href) return;
+
+        const ext = getExtensionLower(href);
+        if (ext && fileLinkExtensions.includes(ext)) files.add(href);
+    });
+
+    return { images, files };
+};
+
 /**
  * Uploader configuration for Jodit
- * Handles image upload + insertion in the editor
+ * Handles image + file upload + insertion in the editor
  */
-export const uploaderConfig = (
-    apiUrl?: string,
-    imageUrl?: string
-) => ({
-    imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
+export const uploaderConfig = (apiUrl?: string, assetBaseUrl?: string) => ({
+    insertImageAsBase64URI: false,
+
+    imagesExtensions: [...DEFAULT_IMAGE_EXTENSIONS],
+
     filesVariableName(t: number): string {
         return 'files[' + t + ']';
     },
+
     url: apiUrl,
     withCredentials: false,
     format: 'json',
     method: 'POST',
+
     prepareData(formdata: FormData): FormData {
         return formdata;
     },
-    isSuccess(this: any, e: any): boolean {
-        const fn = this.jodit;
-
-        if (e?.data?.files && e.data.files.length) {
-            const tagName = 'img';
-
-            e.data.files.forEach((filename: string) => {
-                const elm = fn.createInside.element(tagName);
-                const src = imageUrl ? `${imageUrl}/${filename}` : filename;
-                elm.setAttribute('src', src);
-                fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
-            });
-        }
 
-        return !!e?.success;
+    /**
+     * ✅ Robust success detection (supports: success=true OR data.error=0 OR files exist)
+     */
+    isSuccess(this: unknown, resp: unknown): boolean {
+        return isSuccessResponse(resp);
     },
-    getMessage(e: any): string {
-        return e?.data?.messages && Array.isArray(e.data.messages)
-            ? e.data.messages.join('')
-            : '';
+
+    getMessage(resp: unknown): string {
+        const msgs = extractMessages(resp);
+        return msgs.length ? msgs.join(' ') : '';
     },
-    process(resp: any): { files: any[]; error: string; msg: string } {
-        const files: any[] = [];
-        files.unshift(resp?.data);
 
+    /**
+     * ✅ Normalize backend response to the shape Jodit expects.
+     * Convert to absolute URLs (so editor can display immediately).
+     */
+    process(resp: unknown): { files: string[]; path: string; baseurl: string; messages?: string[]; msg?: string } {
+        const rawFiles = extractUploadedFiles(resp);
+
+        const files = rawFiles.map((filenameOrUrl) => {
+            if (!assetBaseUrl) return filenameOrUrl;
+            return normalizeJoinUrl(assetBaseUrl, filenameOrUrl);
+        });
+
+        const messages = extractMessages(resp);
         return {
-            files: resp?.data,
-            error: resp?.msg,
-            msg: resp?.msg,
+            files,
+            path: '',
+            baseurl: '',
+            messages,
+            msg: messages.join(' '),
         };
     },
+
+    /**
+     * ✅ Insert uploaded assets:
+     * - images => <img>
+     * - other files => <a href="...">filename</a>
+     */
+    defaultHandlerSuccess(this: UploaderThis, data: unknown): void {
+        const jodit = asJoditLike(this.jodit);
+        if (!jodit) return;
+
+        const selection = jodit.s;
+        const creator = jodit.createInside;
+
+        const files = isRecord(data) && Array.isArray((data as UnknownRecord).files)
+            ? ((data as UnknownRecord).files as unknown[]).map(toStringSafe).filter(Boolean)
+            : [];
+
+        files.forEach((url) => {
+            const ext = getExtensionLower(url);
+            const isImage = DEFAULT_IMAGE_EXTENSIONS.includes(ext);
+
+            if (isImage) {
+                // Prefer insertImage if available
+                if (creator?.element && selection?.insertImage) {
+                    const img = creator.element('img') as HTMLImageElement;
+                    img.setAttribute('src', url);
+                    selection.insertImage(img, null, jodit.o?.imageDefaultWidth);
+                    return;
+                }
+
+                // Fallback
+                selection?.insertHTML?.(`<img src="${escapeHtml(url)}" alt="" />`);
+                return;
+            }
+
+            // File link insertion
+            const label = escapeHtml(url.split('/').pop() ?? url);
+            const linkHtml = `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${label}</a>`;
+            selection?.insertHTML?.(linkHtml);
+        });
+    },
+
     error(this: any, e: Error): void {
-        this.j.e.fire('errorMessage', e.message, 'error', 4000);
+        this.j?.e?.fire?.('errorMessage', e.message, 'error', 4000);
     },
+
     defaultHandlerError(this: any, e: any): void {
-        this.j.e.fire('errorMessage', e?.message || 'Upload error');
+        this.j?.e?.fire?.('errorMessage', e?.message || 'Upload error');
     },
 });
 
@@ -75,11 +320,22 @@ type ConfigParams = {
     includeUploader?: boolean;
     apiUrl?: string;
     imageUrl?: string;
+
     /**
      * 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>;
+
+    /**
+     * ✅ Called when a tracked file link (<a href="...">) is removed.
+     */
+    onDeleteFile?: (fileHref: string) => void | Promise<void>;
+
+    /**
+     * ✅ Which file extensions to track for delete-sync when removed from content.
+     */
+    fileLinkExtensions?: readonly string[];
 };
 
 /**
@@ -90,6 +346,8 @@ export const config = ({
     apiUrl,
     imageUrl,
     onDeleteImage,
+    onDeleteFile,
+    fileLinkExtensions = DEFAULT_FILE_LINK_EXTENSIONS,
 }: ConfigParams = {}) => {
     const base: any = {
         readonly: false,
@@ -116,6 +374,7 @@ export const config = ({
             'ol',
             '|',
             'image',
+            'file', // ✅ added (file uploads)
             '|',
             'video',
             '|',
@@ -139,48 +398,49 @@ export const config = ({
     };
 
     if (includeUploader) {
+        // ✅ Use imageUrl as base for BOTH images + files (no new required props)
         base.uploader = uploaderConfig(apiUrl, imageUrl);
     }
 
-    if (onDeleteImage) {
+    const hasDelete = Boolean(onDeleteImage || onDeleteFile);
+
+    if (hasDelete) {
         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).
+             * Detect removed assets by diffing previous HTML vs current HTML.
+             * - removed <img src="..."> => onDeleteImage
+             * - removed <a href="..."> (matching fileLinkExtensions) => onDeleteFile
              */
             afterInit(editor: any) {
-                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);
+                let prevAssets = extractAssetsFromHtml(prevValue, fileLinkExtensions);
 
                 editor.events.on('change', async () => {
                     const currentValue: string = editor.value || '';
-                    const currentSrcs = extractImageSrcs(currentValue);
+                    const currentAssets = extractAssetsFromHtml(currentValue, fileLinkExtensions);
 
-                    // 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
+                    // Deleted images
+                    prevAssets.images.forEach((src) => {
+                        if (!currentAssets.images.has(src)) {
                             if (!imageUrl || src.startsWith(imageUrl)) {
-                                void onDeleteImage(src);
+                                onDeleteImage?.(src);
+                            }
+                        }
+                    });
+
+                    // Deleted files
+                    prevAssets.files.forEach((href) => {
+                        if (!currentAssets.files.has(href)) {
+                            if (!imageUrl || href.startsWith(imageUrl)) {
+                                onDeleteFile?.(href);
                             }
                         }
                     });
 
                     prevValue = currentValue;
-                    prevSrcs = currentSrcs;
+                    prevAssets = currentAssets;
                 });
             },
         };

package/src/Editor.types.ts

@@ -5,8 +5,9 @@ export interface EditorProps {
     useUploadImage?: boolean;
     apiUrl?: string;
     imageUrl?: string;
-    config?: any
+    config?: any;
     // ref?: any;
 }
 
-export type OnDeleteImage = (src: string) => void | Promise<void>;
+export type OnDeleteImage = (src: string) => void | Promise<void>;
+export type OnDeleteFile = (href: string) => void | Promise<void>;

package/types/Editor.d.ts

@@ -1,7 +1,16 @@
 import React from 'react';
 import { EditorProps } from './Editor.types';
 declare const ReactEditor: React.FC<EditorProps>;
-export declare const uploaderConfig: (apiUrl?: string, imageUrl?: string) => {
+type UploaderThis = {
+    jodit?: unknown;
+    j?: {
+        e?: {
+            fire?: (...args: unknown[]) => void;
+        };
+    };
+};
+export declare const uploaderConfig: (apiUrl?: string, assetBaseUrl?: string) => {
+    insertImageAsBase64URI: boolean;
     imagesExtensions: string[];
     filesVariableName(t: number): string;
     url: string | undefined;
@@ -9,13 +18,16 @@ export declare const uploaderConfig: (apiUrl?: string, imageUrl?: string) => {
     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;
+    isSuccess(this: unknown, resp: unknown): boolean;
+    getMessage(resp: unknown): string;
+    process(resp: unknown): {
+        files: string[];
+        path: string;
+        baseurl: string;
+        messages?: string[] | undefined;
+        msg?: string | undefined;
     };
+    defaultHandlerSuccess(this: UploaderThis, data: unknown): void;
     error(this: any, e: Error): void;
     defaultHandlerError(this: any, e: any): void;
 };
@@ -24,6 +36,8 @@ type ConfigParams = {
     apiUrl?: string;
     imageUrl?: string;
     onDeleteImage?: (imageUrl: string) => void | Promise<void>;
+    onDeleteFile?: (fileHref: string) => void | Promise<void>;
+    fileLinkExtensions?: readonly string[];
 };
-export declare const config: ({ includeUploader, apiUrl, imageUrl, onDeleteImage, }?: ConfigParams) => any;
+export declare const config: ({ includeUploader, apiUrl, imageUrl, onDeleteImage, onDeleteFile, fileLinkExtensions, }?: ConfigParams) => any;
 export default ReactEditor;

package/types/Editor.types.d.ts

@@ -8,3 +8,4 @@ export interface EditorProps {
     config?: any;
 }
 export type OnDeleteImage = (src: string) => void | Promise<void>;
+export type OnDeleteFile = (href: string) => void | Promise<void>;