@mbs-dev/react-editor 1.0.6 → 1.0.7

package/dist/Editor.js

@@ -1,14 +1,28 @@
 "use strict";
-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];
+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);
         }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+        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 };
@@ -34,9 +48,8 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
         return formdata;
     },
     isSuccess: function (e) {
-        var _a;
         var fn = this.jodit;
-        if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.files) && e.data.files.length) {
+        if (e.data.files && e.data.files.length) {
             var tagName_1 = 'img';
             e.data.files.forEach(function (filename) {
                 var elm = fn.createInside.element(tagName_1);
@@ -47,8 +60,7 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
         return e.success;
     },
     getMessage: function (e) {
-        var _a;
-        return ((_a = e.data) === null || _a === void 0 ? void 0 : _a.messages) && Array.isArray(e.data.messages)
+        return e.data.messages && Array.isArray(e.data.messages)
             ? e.data.messages.join('')
             : '';
     },
@@ -69,8 +81,9 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
     },
 }); };
 exports.uploaderConfig = uploaderConfig;
-var config = function (includeUploader, apiUrl, imageUrl, onDeleteImage) {
-    var baseConfig = {
+var config = function (_a) {
+    var _b = _a === void 0 ? {} : _a, includeUploader = _b.includeUploader, apiUrl = _b.apiUrl, imageUrl = _b.imageUrl, onDeleteImage = _b.onDeleteImage;
+    return ({
         readonly: false,
         placeholder: 'Start typing...',
         toolbarAdaptive: false,
@@ -114,19 +127,40 @@ var config = function (includeUploader, apiUrl, imageUrl, onDeleteImage) {
             'table',
             'fullsize',
         ],
-    };
-    if (includeUploader) {
-        baseConfig.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
-    }
-    if (onDeleteImage) {
-        baseConfig.events = __assign(__assign({}, (baseConfig.events || {})), { afterRemoveImage: function (image) {
-                var src = image.getAttribute('src');
-                if (src) {
-                    onDeleteImage(src);
-                }
-            } });
-    }
-    return baseConfig;
+        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);
+                                });
+                            });
+                        });
+                    });
+                    observer.observe(root, {
+                        childList: true,
+                        subtree: true,
+                    });
+                    editor.events.on('beforeDestruct', function () {
+                        observer.disconnect();
+                    });
+                },
+            }
+            : undefined,
+    });
 };
 exports.config = config;
 exports.default = ReactEditor;

package/package.json

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

package/src/Editor.tsx

@@ -1,6 +1,7 @@
+// Editor.tsx
 import React from 'react';
 import JoditEditor from 'jodit-react';
-import { EditorProps } from './Editor.types';
+import { EditorProps, OnDeleteImage } from './Editor.types';
 
 const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config }) => {
     return (
@@ -13,30 +14,24 @@ const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config })
     );
 };
 
-/**
- * Uploader configuration for Jodit
- * Handles image upload + insertion in the editor
- */
-export const uploaderConfig = (
-    apiUrl: string | undefined,
-    imageUrl: string | undefined
-) => ({
+export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
     imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
-    filesVariableName: function (t: number): string {
+    filesVariableName(t: number): string {
         return 'files[' + t + ']';
     },
     url: apiUrl,
     withCredentials: false,
     format: 'json',
     method: 'POST',
-    prepareData: function (formdata: FormData): FormData {
+    prepareData(formdata: FormData): FormData {
         return formdata;
     },
-    isSuccess: function (this: any, e: any): boolean {
+    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}`);
@@ -46,113 +41,132 @@ export const uploaderConfig = (
 
         return e.success;
     },
-    getMessage: function (e: any): string {
-        return e.data?.messages && Array.isArray(e.data.messages)
+    getMessage(e: any): string {
+        return e.data.messages && Array.isArray(e.data.messages)
             ? e.data.messages.join('')
             : '';
     },
-    process: function (resp: any): { files: any[]; error: string; msg: string } {
-        let files: any[] = [];
+    process(resp: any): { files: any[]; error: string; msg: string } {
+        const files: any[] = [];
         files.unshift(resp.data);
+
         return {
             files: resp.data,
             error: resp.msg,
             msg: resp.msg,
         };
     },
-
-    error: function (this: any, e: Error): void {
+    error(this: any, e: Error): void {
         this.j.e.fire('errorMessage', e.message, 'error', 4000);
     },
-
-    defaultHandlerError: function (this: any, e: any): void {
+    defaultHandlerError(this: any, e: any): void {
         this.j.e.fire('errorMessage', e.message);
     },
 });
 
-/**
- * Global editor config
- * - includeUploader: enable/disable upload integration
- * - apiUrl: upload endpoint
- * - imageUrl: base URL for stored images
- * - onDeleteImage: callback called when an image is removed from the editor
- *                  receives the image src URL so you can call your API to delete it on server
- */
-export const config = (
-    includeUploader?: boolean,
-    apiUrl?: string,
-    imageUrl?: string,
-    onDeleteImage?: (imageUrl: string) => void
-) => {
-    const baseConfig: 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',
-        ],
-    };
-
-    // Attach uploader config if requested
-    if (includeUploader) {
-        baseConfig.uploader = uploaderConfig(apiUrl, imageUrl);
-    }
-
-    // Handle delete image: when an image is removed in the editor,
-    // we call the provided callback with the image src URL.
-    if (onDeleteImage) {
-        baseConfig.events = {
-            ...(baseConfig.events || {}),
-            // Depending on Jodit version, this event name may vary; this
-            // handler is intended to be called when an image is removed.
-            afterRemoveImage: function (this: any, image: HTMLImageElement) {
-                const src = image.getAttribute('src');
-                if (src) {
-                    onDeleteImage(src);
-                }
-            },
-        };
-    }
-
-    return baseConfig;
+type ConfigParams = {
+    includeUploader?: boolean;
+    apiUrl?: string;
+    imageUrl?: string;
+    onDeleteImage?: OnDeleteImage;
 };
 
+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
+        ? {
+            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);
+                            });
+                        });
+                    });
+                });
+
+                observer.observe(root, {
+                    childList: true,
+                    subtree: true,
+                });
+
+                // Cleanup when editor is destroyed
+                editor.events.on('beforeDestruct', () => {
+                    observer.disconnect();
+                });
+            },
+        }
+        : undefined,
+});
+
 export default ReactEditor;

package/src/Editor.types.ts

@@ -7,4 +7,6 @@ export interface EditorProps {
     imageUrl?: string;
     config?: any
     // ref?: any;
-}
+}
+
+export type OnDeleteImage = (src: string) => void | Promise<void>;

package/types/Editor.d.ts

@@ -1,23 +1,64 @@
 import React from 'react';
-import { EditorProps } from './Editor.types';
+import { EditorProps, OnDeleteImage } from './Editor.types';
 declare const ReactEditor: React.FC<EditorProps>;
-export declare const uploaderConfig: (apiUrl: string | undefined, imageUrl: string | undefined) => {
+export declare const uploaderConfig: (apiUrl?: string, imageUrl?: string) => {
     imagesExtensions: string[];
-    filesVariableName: (t: number) => 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) => {
+    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;
+    error(this: any, e: Error): void;
+    defaultHandlerError(this: any, e: any): void;
+};
+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;
 };
-export declare const config: (includeUploader?: boolean, apiUrl?: string, imageUrl?: string, onDeleteImage?: ((imageUrl: string) => void) | undefined) => any;
 export default ReactEditor;

package/types/Editor.types.d.ts

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