@mbs-dev/react-editor 1.6.0 → 1.8.0

package/dist/Editor.js

@@ -76,7 +76,7 @@ var getDisplayNameFromPath = function (filename) {
     }
     return noExt;
 };
-var uploaderConfig = function (apiUrl, imageUrl) { return ({
+var uploaderConfig = function (apiUrl, imageUrl, selectionRef) { return ({
     imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
     filesVariableName: function (t) {
         return 'files[' + t + ']';
@@ -92,26 +92,51 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
         var _this = this;
         var _a;
         var fn = this.jodit;
+        var restoreToLastCaret = function () {
+            var _a, _b;
+            var saved = selectionRef === null || selectionRef === void 0 ? void 0 : selectionRef.current;
+            if (saved) {
+                try {
+                    fn.s.selectRange(saved, true);
+                    return;
+                }
+                catch (_c) {
+                }
+            }
+            if ((_a = fn === null || fn === void 0 ? void 0 : fn.s) === null || _a === void 0 ? void 0 : _a.focus)
+                fn.s.focus();
+            if ((_b = fn === null || fn === void 0 ? void 0 : fn.s) === null || _b === void 0 ? void 0 : _b.restore) {
+                try {
+                    fn.s.restore();
+                }
+                catch (_d) {
+                }
+            }
+        };
+        var refreshSavedRange = function () {
+            if (!selectionRef)
+                return;
+            try {
+                var r = fn.s.range;
+                selectionRef.current = r ? r.cloneRange() : null;
+            }
+            catch (_a) {
+                selectionRef.current = null;
+            }
+        };
         if (((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.files) && e.data.files.length) {
             e.data.files.forEach(function (filename) {
-                var _a, _b, _c;
+                var _a;
                 var src = imageUrl ? "".concat(imageUrl, "/").concat(filename) : filename;
+                restoreToLastCaret();
                 if (isImageByExtension(filename, _this.imagesExtensions || ['jpg', 'png', 'jpeg', 'gif', 'webp'])) {
                     var tagName = 'img';
                     var elm = fn.createInside.element(tagName);
                     elm.setAttribute('src', src);
                     fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
+                    refreshSavedRange();
                 }
                 else {
-                    if ((_a = fn === null || fn === void 0 ? void 0 : fn.s) === null || _a === void 0 ? void 0 : _a.focus)
-                        fn.s.focus();
-                    if ((_b = fn === null || fn === void 0 ? void 0 : fn.s) === null || _b === void 0 ? void 0 : _b.restore) {
-                        try {
-                            fn.s.restore();
-                        }
-                        catch (_d) {
-                        }
-                    }
                     var tagName = 'a';
                     var elm = fn.createInside.element(tagName);
                     elm.setAttribute('href', src);
@@ -119,13 +144,14 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
                     elm.setAttribute('rel', 'noopener noreferrer');
                     elm.textContent = getDisplayNameFromPath(filename);
                     fn.s.insertNode(elm);
-                    if ((_c = fn === null || fn === void 0 ? void 0 : fn.s) === null || _c === void 0 ? void 0 : _c.setCursorAfter) {
+                    if ((_a = fn === null || fn === void 0 ? void 0 : fn.s) === null || _a === void 0 ? void 0 : _a.setCursorAfter) {
                         try {
                             fn.s.setCursorAfter(elm);
                         }
-                        catch (_e) {
+                        catch (_b) {
                         }
                     }
+                    refreshSavedRange();
                 }
             });
         }
@@ -154,6 +180,7 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
 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 selectionRef = { current: null };
     var base = {
         readonly: false,
         placeholder: 'Start typing...',
@@ -167,6 +194,7 @@ var config = function (_a) {
         showCharsCounter: true,
         showWordsCounter: true,
         showXPathInStatusbar: false,
+        saveSelectionOnBlur: true,
         buttons: [
             'source',
             '|',
@@ -200,38 +228,95 @@ var config = function (_a) {
             'fullsize',
         ],
     };
+    var composeAfterInit = function (a, b) {
+        return function (editor) {
+            if (a)
+                a(editor);
+            if (b)
+                b(editor);
+        };
+    };
     if (includeUploader) {
-        base.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
+        base.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl, selectionRef);
+        var selectionCaptureAfterInit = function (editor) {
+            var _a, _b, _c, _d;
+            var capture = function () {
+                try {
+                    var r = editor.s.range;
+                    selectionRef.current = r ? r.cloneRange() : null;
+                }
+                catch (_a) {
+                    selectionRef.current = null;
+                }
+            };
+            var editorEl = (_a = editor === null || editor === void 0 ? void 0 : editor.editor) !== null && _a !== void 0 ? _a : null;
+            var onMouseUp = function () { return capture(); };
+            var onKeyUp = function () { return capture(); };
+            var onTouchEnd = function () { return capture(); };
+            if (editorEl) {
+                editorEl.addEventListener('mouseup', onMouseUp);
+                editorEl.addEventListener('keyup', onKeyUp);
+                editorEl.addEventListener('touchend', onTouchEnd);
+            }
+            var toolbarEl = (_b = editor === null || editor === void 0 ? void 0 : editor.toolbarContainer) !== null && _b !== void 0 ? _b : null;
+            var onToolbarMouseDownCapture = function (ev) {
+                var target = ev.target;
+                if (!target)
+                    return;
+                var isFileBtn = !!target.closest('[data-ref="file"]') ||
+                    !!target.closest('[data-name="file"]') ||
+                    !!target.closest('.jodit-toolbar-button_file');
+                if (isFileBtn) {
+                    capture();
+                }
+            };
+            if (toolbarEl) {
+                toolbarEl.addEventListener('mousedown', onToolbarMouseDownCapture, true);
+            }
+            (_d = (_c = editor === null || editor === void 0 ? void 0 : editor.e) === null || _c === void 0 ? void 0 : _c.on) === null || _d === void 0 ? void 0 : _d.call(_c, 'beforeDestruct', function () {
+                if (editorEl) {
+                    editorEl.removeEventListener('mouseup', onMouseUp);
+                    editorEl.removeEventListener('keyup', onKeyUp);
+                    editorEl.removeEventListener('touchend', onTouchEnd);
+                }
+                if (toolbarEl) {
+                    toolbarEl.removeEventListener('mousedown', onToolbarMouseDownCapture, true);
+                }
+            });
+        };
+        base.events = __assign({}, (base.events || {}));
+        base.events.afterInit = composeAfterInit(base.events.afterInit, selectionCaptureAfterInit);
     }
     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);
-                                }
+        base.events = __assign({}, (base.events || {}));
+        var deleteImageAfterInit = function (editor) {
+            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(void 0, 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];
+                        }
                     });
-                }); });
-            } });
+                    prevValue = currentValue;
+                    prevSrcs = currentSrcs;
+                    return [2];
+                });
+            }); });
+        };
+        base.events.afterInit = composeAfterInit(base.events.afterInit, deleteImageAfterInit);
     }
     return base;
 };

package/package.json

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

package/src/Editor.tsx

@@ -37,11 +37,13 @@ const getDisplayNameFromPath = (filename: string): string => {
     return noExt;
 };
 
+type SelectionRef = { current: Range | null };
+
 /**
  * Uploader configuration for Jodit
  * Handles image upload + insertion in the editor
  */
-export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
+export const uploaderConfig = (apiUrl?: string, imageUrl?: string, selectionRef?: SelectionRef) => ({
     imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
     filesVariableName(t: number): string {
         return 'files[' + t + ']';
@@ -56,27 +58,55 @@ export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
     isSuccess(this: any, e: any): boolean {
         const fn = this.jodit;
 
+        const restoreToLastCaret = () => {
+            const saved = selectionRef?.current;
+
+            if (saved) {
+                try {
+                    fn.s.selectRange(saved, true);
+                    return;
+                } catch {
+                    // ignore and fallback
+                }
+            }
+
+            // fallback: jodit internal save/restore
+            if (fn?.s?.focus) fn.s.focus();
+            if (fn?.s?.restore) {
+                try {
+                    fn.s.restore();
+                } catch {
+                    // ignore
+                }
+            }
+        };
+
+        const refreshSavedRange = () => {
+            if (!selectionRef) return;
+
+            try {
+                const r: Range = fn.s.range;
+                selectionRef.current = r ? r.cloneRange() : null;
+            } catch {
+                selectionRef.current = null;
+            }
+        };
+
         if (e?.data?.files && e.data.files.length) {
             e.data.files.forEach((filename: string) => {
                 const src = imageUrl ? `${imageUrl}/${filename}` : filename;
 
+                // ✅ Restore caret BEFORE inserting anything (image or file)
+                restoreToLastCaret();
+
                 // ✅ If it's an image => insert <img>, otherwise insert <a href="...">
                 if (isImageByExtension(filename, this.imagesExtensions || ['jpg', 'png', 'jpeg', 'gif', 'webp'])) {
                     const tagName = 'img';
                     const elm = fn.createInside.element(tagName);
                     elm.setAttribute('src', src);
                     fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
+                    refreshSavedRange();
                 } else {
-                    // ✅ FIX: restore caret/selection before inserting file link
-                    if (fn?.s?.focus) fn.s.focus();
-                    if (fn?.s?.restore) {
-                        try {
-                            fn.s.restore();
-                        } catch {
-                            // ignore
-                        }
-                    }
-
                     const tagName = 'a';
                     const elm = fn.createInside.element(tagName);
                     elm.setAttribute('href', src);
@@ -93,6 +123,8 @@ export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
                             // ignore
                         }
                     }
+
+                    refreshSavedRange();
                 }
             });
         }
@@ -135,6 +167,8 @@ type ConfigParams = {
  * Build Jodit config for ReactEditor
  */
 export const config = ({ includeUploader, apiUrl, imageUrl, onDeleteImage }: ConfigParams = {}) => {
+    const selectionRef: SelectionRef = { current: null };
+
     const base: any = {
         readonly: false,
         placeholder: 'Start typing...',
@@ -149,6 +183,9 @@ export const config = ({ includeUploader, apiUrl, imageUrl, onDeleteImage }: Con
         showWordsCounter: true,
         showXPathInStatusbar: false,
 
+        // ✅ Helps preserve selection when editor loses focus (e.g., file dialog)
+        saveSelectionOnBlur: true,
+
         buttons: [
             'source',
             '|',
@@ -183,48 +220,115 @@ export const config = ({ includeUploader, apiUrl, imageUrl, onDeleteImage }: Con
         ],
     };
 
+    const composeAfterInit =
+        (a?: (editor: any) => void, b?: (editor: any) => void) =>
+            (editor: any) => {
+                if (a) a(editor);
+                if (b) b(editor);
+            };
+
     if (includeUploader) {
-        base.uploader = uploaderConfig(apiUrl, imageUrl);
+        base.uploader = uploaderConfig(apiUrl, imageUrl, selectionRef);
+
+        const selectionCaptureAfterInit = (editor: any) => {
+            const capture = () => {
+                try {
+                    const r: Range = editor.s.range;
+                    selectionRef.current = r ? r.cloneRange() : null;
+                } catch {
+                    selectionRef.current = null;
+                }
+            };
+
+            // Capture during normal editing (helps even without toolbar click)
+            const editorEl: HTMLElement | null = editor?.editor ?? null;
+            const onMouseUp = () => capture();
+            const onKeyUp = () => capture();
+            const onTouchEnd = () => capture();
+
+            if (editorEl) {
+                editorEl.addEventListener('mouseup', onMouseUp);
+                editorEl.addEventListener('keyup', onKeyUp);
+                editorEl.addEventListener('touchend', onTouchEnd);
+            }
+
+            // ✅ IMPORTANT: capture BEFORE toolbar steals focus.
+            // We listen on toolbar mousedown in CAPTURE phase.
+            const toolbarEl: HTMLElement | null = editor?.toolbarContainer ?? null;
+            const onToolbarMouseDownCapture = (ev: MouseEvent) => {
+                const target = ev.target as HTMLElement | null;
+                if (!target) return;
+
+                const isFileBtn =
+                    !!target.closest('[data-ref="file"]') ||
+                    !!target.closest('[data-name="file"]') ||
+                    !!target.closest('.jodit-toolbar-button_file');
+
+                if (isFileBtn) {
+                    capture();
+                }
+            };
+
+            if (toolbarEl) {
+                toolbarEl.addEventListener('mousedown', onToolbarMouseDownCapture, true);
+            }
+
+            // cleanup
+            editor?.e?.on?.('beforeDestruct', () => {
+                if (editorEl) {
+                    editorEl.removeEventListener('mouseup', onMouseUp);
+                    editorEl.removeEventListener('keyup', onKeyUp);
+                    editorEl.removeEventListener('touchend', onTouchEnd);
+                }
+                if (toolbarEl) {
+                    toolbarEl.removeEventListener('mousedown', onToolbarMouseDownCapture, true);
+                }
+            });
+        };
+
+        base.events = {
+            ...(base.events || {}),
+        };
+        base.events.afterInit = composeAfterInit(base.events.afterInit, selectionCaptureAfterInit);
     }
 
     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 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);
-                            }
-                        }
-                    });
+        };
+
+        const deleteImageAfterInit = (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);
 
-                    prevValue = currentValue;
-                    prevSrcs = currentSrcs;
+            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;
+            });
         };
+
+        base.events.afterInit = composeAfterInit(base.events.afterInit, deleteImageAfterInit);
     }
 
     return base;

package/types/Editor.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { EditorProps } from './Editor.types';
 declare const ReactEditor: React.FC<EditorProps>;
-export declare const uploaderConfig: (apiUrl?: string, imageUrl?: string) => {
+type SelectionRef = {
+    current: Range | null;
+};
+export declare const uploaderConfig: (apiUrl?: string, imageUrl?: string, selectionRef?: SelectionRef) => {
     imagesExtensions: string[];
     filesVariableName(t: number): string;
     url: string | undefined;