@mbs-dev/react-editor 1.0.7 → 1.0.8

package/dist/Editor.js

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

package/package.json

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

package/src/Editor.tsx

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

package/types/Editor.d.ts

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