@mbs-dev/react-editor 1.1.0 → 1.2.0

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.1.0",
+  "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>;