@mbs-dev/react-editor 1.0.6 → 1.0.8

package/dist/Editor.js

@@ -10,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -36,41 +72,43 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
     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 (((_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) {
         var _a;
-        return ((_a = e.data) === null || _a === void 0 ? void 0 : _a.messages) && Array.isArray(e.data.messages)
+        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 (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;
+    var base = {
         readonly: false,
         placeholder: 'Start typing...',
         toolbarAdaptive: false,
@@ -116,17 +154,41 @@ var config = function (includeUploader, apiUrl, imageUrl, onDeleteImage) {
         ],
     };
     if (includeUploader) {
-        baseConfig.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
+        base.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);
-                }
+        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];
+                    });
+                }); });
             } });
     }
-    return baseConfig;
+    return base;
 };
 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.8",
   "description": "react editor",
   "main": "dist/index.js",
   "types": "types/index.d.ts",

package/src/Editor.tsx

@@ -18,73 +18,80 @@ const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config })
  * Handles image upload + insertion in the editor
  */
 export const uploaderConfig = (
-    apiUrl: string | undefined,
-    imageUrl: string | undefined
+    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}`);
+                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: 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[] = [];
-        files.unshift(resp.data);
+    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,
+            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 {
-        this.j.e.fire('errorMessage', e.message);
+    defaultHandlerError(this: any, e: any): void {
+        this.j.e.fire('errorMessage', e?.message || 'Upload error');
     },
 });
 
+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>;
+};
+
 /**
- * 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
+ * Build Jodit config for ReactEditor
  */
-export const config = (
-    includeUploader?: boolean,
-    apiUrl?: string,
-    imageUrl?: string,
-    onDeleteImage?: (imageUrl: string) => void
-) => {
-    const baseConfig: any = {
+export const config = ({
+    includeUploader,
+    apiUrl,
+    imageUrl,
+    onDeleteImage,
+}: ConfigParams = {}) => {
+    const base: any = {
         readonly: false,
         placeholder: 'Start typing...',
         toolbarAdaptive: false,
@@ -131,28 +138,55 @@ export const config = (
         ],
     };
 
-    // Attach uploader config if requested
     if (includeUploader) {
-        baseConfig.uploader = uploaderConfig(apiUrl, imageUrl);
+        base.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);
-                }
+        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 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);
+                            }
+                        }
+                    });
+
+                    prevValue = currentValue;
+                    prevSrcs = currentSrcs;
+                });
             },
         };
     }
 
-    return baseConfig;
+    return base;
 };
 
 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,29 @@
 import React from 'react';
 import { EditorProps } 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, apiUrl?: string, imageUrl?: string, onDeleteImage?: ((imageUrl: string) => void) | undefined) => any;
+type ConfigParams = {
+    includeUploader?: boolean;
+    apiUrl?: string;
+    imageUrl?: string;
+    onDeleteImage?: (imageUrl: string) => void | Promise<void>;
+};
+export declare const config: ({ includeUploader, apiUrl, imageUrl, onDeleteImage, }?: ConfigParams) => 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>;