@mbs-dev/react-editor 1.0.5 → 1.0.7

package/dist/Editor.js

@@ -1,4 +1,29 @@
 "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);
+        }
+        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 };
 };
@@ -26,7 +51,7 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
         var fn = this.jodit;
         if (e.data.files && e.data.files.length) {
             var tagName_1 = 'img';
-            e.data.files.forEach(function (filename, index) {
+            e.data.files.forEach(function (filename) {
                 var elm = fn.createInside.element(tagName_1);
                 elm.setAttribute('src', "".concat(imageUrl, "/").concat(filename));
                 fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
@@ -56,51 +81,86 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
     },
 }); };
 exports.uploaderConfig = uploaderConfig;
-var config = function (includeUploader, apiUrl, imageUrl) { return ({
-    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 ? (0, exports.uploaderConfig)(apiUrl, imageUrl) : undefined,
-}); };
+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,
+        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 ? (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.5",
+  "version": "1.0.7",
   "description": "react editor",
   "main": "dist/index.js",
   "types": "types/index.d.ts",

package/src/Editor.tsx

@@ -1,13 +1,11 @@
+// Editor.tsx
 import React from 'react';
-import JoditEditor from "jodit-react";
-import { EditorProps } from './Editor.types';
+import JoditEditor from 'jodit-react';
+import { EditorProps, OnDeleteImage } from './Editor.types';
 
 const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config }) => {
-    // const editor = useRef(null);
-
     return (
         <JoditEditor
-            // ref={ref}
             value={value}
             config={config}
             onBlur={onBlur}
@@ -16,25 +14,25 @@ const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config })
     );
 };
 
-
-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 {
-        const fn = this.jodit
+    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, index: number) => {
+
+            e.data.files.forEach((filename: string) => {
                 const elm = fn.createInside.element(tagName);
                 elm.setAttribute('src', `${imageUrl}/${filename}`);
                 fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
@@ -43,37 +41,47 @@ export const uploaderConfig = (apiUrl: string | undefined, imageUrl: string | un
 
         return e.success;
     },
-    getMessage: function (e: any): string {
+    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);
     },
 });
 
+type ConfigParams = {
+    includeUploader?: boolean;
+    apiUrl?: string;
+    imageUrl?: string;
+    onDeleteImage?: OnDeleteImage;
+};
 
-export const config = (includeUploader?: boolean | undefined, apiUrl?: string | undefined, imageUrl?: string | undefined) => ({
+export const config = ({
+    includeUploader,
+    apiUrl,
+    imageUrl,
+    onDeleteImage,
+}: ConfigParams = {}) => ({
     readonly: false,
     placeholder: 'Start typing...',
     toolbarAdaptive: false,
     useSearch: false,
-    language: "en",
+    language: 'en',
     allowResizeX: false,
     allowResizeY: false,
     height: 400,
@@ -93,7 +101,6 @@ export const config = (includeUploader?: boolean | undefined, apiUrl?: string |
         'ol',
         '|',
         'image',
-        // 'file',
         '|',
         'video',
         '|',
@@ -114,7 +121,52 @@ export const config = (includeUploader?: boolean | undefined, apiUrl?: string |
         'table',
         'fullsize',
     ],
+
     uploader: includeUploader ? uploaderConfig(apiUrl, imageUrl) : undefined,
-})
 
-export default ReactEditor
+    // 👇 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,25 +1,31 @@
 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;
 };
-export declare const config: (includeUploader?: boolean | undefined, apiUrl?: string | undefined, imageUrl?: string | undefined) => {
+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;
@@ -35,21 +41,24 @@ export declare const config: (includeUploader?: boolean | undefined, apiUrl?: st
     buttons: string[];
     uploader: {
         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;
+    } | undefined;
+    events: {
+        afterInit(editor: any): void;
     } | undefined;
 };
 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>;