@mbs-dev/react-editor 1.2.0 → 1.3.0

package/dist/Editor.js

@@ -46,31 +46,6 @@ 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 };
 };
@@ -82,147 +57,20 @@ 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 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 isImageByExtension = function (filename, imageExts) {
+    var _a, _b;
+    var clean = (_b = (_a = (filename || '').split('?')[0]) === null || _a === void 0 ? void 0 : _a.split('#')[0]) !== null && _b !== void 0 ? _b : '';
+    var ext = (clean.split('.').pop() || '').toLowerCase();
+    return !!ext && imageExts.includes(ext);
 };
-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 getDisplayNameFromPath = function (filename) {
+    var _a, _b;
+    var clean = (_b = (_a = (filename || '').split('?')[0]) === null || _a === void 0 ? void 0 : _a.split('#')[0]) !== null && _b !== void 0 ? _b : '';
+    var last = clean.split('/').pop();
+    return last ? decodeURIComponent(last) : filename;
 };
-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),
+var uploaderConfig = function (apiUrl, imageUrl) { return ({
+    imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
     filesVariableName: function (t) {
         return 'files[' + t + ']';
     },
@@ -233,69 +81,57 @@ var uploaderConfig = function (apiUrl, assetBaseUrl) { return ({
     prepareData: function (formdata) {
         return formdata;
     },
-    isSuccess: function (resp) {
-        return isSuccessResponse(resp);
+    isSuccess: function (e) {
+        var _this = this;
+        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) {
+            e.data.files.forEach(function (filename) {
+                var src = imageUrl ? "".concat(imageUrl, "/").concat(filename) : filename;
+                if (isImageByExtension(filename, _this.imagesExtensions || ['jpg', 'png', 'jpeg', 'gif', 'webp'])) {
+                    var tagName = 'img';
+                    var elm = fn.createInside.element(tagName);
+                    elm.setAttribute('src', src);
+                    fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
+                }
+                else {
+                    var tagName = 'a';
+                    var elm = fn.createInside.element(tagName);
+                    elm.setAttribute('href', src);
+                    elm.setAttribute('target', '_blank');
+                    elm.setAttribute('rel', 'noopener noreferrer');
+                    elm.textContent = getDisplayNameFromPath(filename);
+                    fn.s.insertNode(elm);
+                }
+            });
+        }
+        return !!(e === null || e === void 0 ? void 0 : e.success);
     },
-    getMessage: function (resp) {
-        var msgs = extractMessages(resp);
-        return msgs.length ? msgs.join(' ') : '';
+    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('')
+            : '';
     },
     process: function (resp) {
-        var rawFiles = extractUploadedFiles(resp);
-        var files = rawFiles.map(function (filenameOrUrl) {
-            if (!assetBaseUrl)
-                return filenameOrUrl;
-            return normalizeJoinUrl(assetBaseUrl, filenameOrUrl);
-        });
-        var messages = extractMessages(resp);
+        var files = [];
+        files.unshift(resp === null || resp === void 0 ? void 0 : resp.data);
         return {
-            files: files,
-            path: '',
-            baseurl: '',
-            messages: messages,
-            msg: messages.join(' '),
+            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,
         };
     },
-    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) {
-        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);
+        this.j.e.fire('errorMessage', e.message, 'error', 4000);
     },
     defaultHandlerError: function (e) {
-        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');
+        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, onDeleteFile = _b.onDeleteFile, _c = _b.fileLinkExtensions, fileLinkExtensions = _c === void 0 ? DEFAULT_FILE_LINK_EXTENSIONS : _c;
+    var _b = _a === void 0 ? {} : _a, includeUploader = _b.includeUploader, apiUrl = _b.apiUrl, imageUrl = _b.imageUrl, onDeleteImage = _b.onDeleteImage;
     var base = {
         readonly: false,
         placeholder: 'Start typing...',
@@ -320,7 +156,6 @@ var config = function (_a) {
             'ol',
             '|',
             'image',
-            'file',
             '|',
             'video',
             '|',
@@ -345,33 +180,33 @@ var config = function (_a) {
     if (includeUploader) {
         base.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
     }
-    var hasDelete = Boolean(onDeleteImage || onDeleteFile);
-    if (hasDelete) {
+    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 prevAssets = extractAssetsFromHtml(prevValue, fileLinkExtensions);
+                var prevSrcs = extractImageSrcs(prevValue);
                 editor.events.on('change', function () { return __awaiter(_this, void 0, void 0, function () {
-                    var currentValue, currentAssets;
+                    var currentValue, currentSrcs;
                     return __generator(this, function (_a) {
                         currentValue = editor.value || '';
-                        currentAssets = extractAssetsFromHtml(currentValue, fileLinkExtensions);
-                        prevAssets.images.forEach(function (src) {
-                            if (!currentAssets.images.has(src)) {
+                        currentSrcs = extractImageSrcs(currentValue);
+                        prevSrcs.forEach(function (src) {
+                            if (!currentSrcs.has(src)) {
                                 if (!imageUrl || src.startsWith(imageUrl)) {
-                                    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);
+                                    void onDeleteImage(src);
                                 }
                             }
                         });
                         prevValue = currentValue;
-                        prevAssets = currentAssets;
+                        prevSrcs = currentSrcs;
                         return [2];
                     });
                 }); });

package/package.json

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

package/src/Editor.tsx

@@ -2,9 +2,6 @@ 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
@@ -16,303 +13,84 @@ 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 isImageByExtension = (filename: string, imageExts: string[]): boolean => {
+    const clean = (filename || '').split('?')[0]?.split('#')[0] ?? '';
+    const ext = (clean.split('.').pop() || '').toLowerCase();
+    return !!ext && imageExts.includes(ext);
 };
 
-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 };
+const getDisplayNameFromPath = (filename: string): string => {
+    const clean = (filename || '').split('?')[0]?.split('#')[0] ?? '';
+    const last = clean.split('/').pop();
+    return last ? decodeURIComponent(last) : filename;
 };
 
 /**
  * Uploader configuration for Jodit
- * Handles image + file upload + insertion in the editor
+ * Handles image upload + insertion in the editor
  */
-export const uploaderConfig = (apiUrl?: string, assetBaseUrl?: string) => ({
-    insertImageAsBase64URI: false,
-
-    imagesExtensions: [...DEFAULT_IMAGE_EXTENSIONS],
-
+export const uploaderConfig = (
+    apiUrl?: string,
+    imageUrl?: string
+) => ({
+    imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
     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) {
+            e.data.files.forEach((filename: string) => {
+                const src = imageUrl ? `${imageUrl}/${filename}` : filename;
+
+                // ✅ If it's an image => insert <img>, otherwise insert <a href="...">
+                if (isImageByExtension(filename, this.imagesExtensions || ['jpg', 'png', 'jpeg', 'gif', 'webp'])) {
+                    const tagName = 'img';
+                    const elm = fn.createInside.element(tagName);
+                    elm.setAttribute('src', src);
+                    fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
+                } else {
+                    const tagName = 'a';
+                    const elm = fn.createInside.element(tagName);
+                    elm.setAttribute('href', src);
+                    elm.setAttribute('target', '_blank');
+                    elm.setAttribute('rel', 'noopener noreferrer');
+                    elm.textContent = getDisplayNameFromPath(filename);
+                    fn.s.insertNode(elm);
+                }
+            });
+        }
 
-    /**
-     * ✅ Robust success detection (supports: success=true OR data.error=0 OR files exist)
-     */
-    isSuccess(this: unknown, resp: unknown): boolean {
-        return isSuccessResponse(resp);
+        return !!e?.success;
     },
-
-    getMessage(resp: unknown): string {
-        const msgs = extractMessages(resp);
-        return msgs.length ? msgs.join(' ') : '';
+    getMessage(e: any): string {
+        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);
 
-    /**
-     * ✅ 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,
-            path: '',
-            baseurl: '',
-            messages,
-            msg: messages.join(' '),
+            files: resp?.data,
+            error: resp?.msg,
+            msg: resp?.msg,
         };
     },
-
-    /**
-     * ✅ 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');
     },
 });
 
@@ -320,22 +98,11 @@ 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[];
 };
 
 /**
@@ -346,8 +113,6 @@ export const config = ({
     apiUrl,
     imageUrl,
     onDeleteImage,
-    onDeleteFile,
-    fileLinkExtensions = DEFAULT_FILE_LINK_EXTENSIONS,
 }: ConfigParams = {}) => {
     const base: any = {
         readonly: false,
@@ -374,7 +139,6 @@ export const config = ({
             'ol',
             '|',
             'image',
-            'file', // ✅ added (file uploads)
             '|',
             'video',
             '|',
@@ -398,49 +162,48 @@ export const config = ({
     };
 
     if (includeUploader) {
-        // ✅ Use imageUrl as base for BOTH images + files (no new required props)
         base.uploader = uploaderConfig(apiUrl, imageUrl);
     }
 
-    const hasDelete = Boolean(onDeleteImage || onDeleteFile);
-
-    if (hasDelete) {
+    if (onDeleteImage) {
         base.events = {
             ...(base.events || {}),
-
             /**
-             * Detect removed assets by diffing previous HTML vs current HTML.
-             * - removed <img src="..."> => onDeleteImage
-             * - removed <a href="..."> (matching fileLinkExtensions) => onDeleteFile
+             * 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 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 prevAssets = extractAssetsFromHtml(prevValue, fileLinkExtensions);
+                let prevSrcs: Set<string> = extractImageSrcs(prevValue);
 
                 editor.events.on('change', async () => {
                     const currentValue: string = editor.value || '';
-                    const currentAssets = extractAssetsFromHtml(currentValue, fileLinkExtensions);
+                    const currentSrcs = extractImageSrcs(currentValue);
 
-                    // Deleted images
-                    prevAssets.images.forEach((src) => {
-                        if (!currentAssets.images.has(src)) {
+                    // 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)) {
-                                onDeleteImage?.(src);
-                            }
-                        }
-                    });
-
-                    // Deleted files
-                    prevAssets.files.forEach((href) => {
-                        if (!currentAssets.files.has(href)) {
-                            if (!imageUrl || href.startsWith(imageUrl)) {
-                                onDeleteFile?.(href);
+                                void onDeleteImage(src);
                             }
                         }
                     });
 
                     prevValue = currentValue;
-                    prevAssets = currentAssets;
+                    prevSrcs = currentSrcs;
                 });
             },
         };

package/src/Editor.types.ts

@@ -5,9 +5,8 @@ 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 OnDeleteFile = (href: string) => void | Promise<void>;
+export type OnDeleteImage = (src: string) => void | Promise<void>;

package/types/Editor.d.ts

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

package/types/Editor.types.d.ts

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