@mbs-dev/react-editor 1.6.0 → 1.7.0

package/dist/Editor.js

@@ -94,7 +94,7 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
         var fn = this.jodit;
         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, _b, _c, _d;
                 var src = imageUrl ? "".concat(imageUrl, "/").concat(filename) : filename;
                 if (isImageByExtension(filename, _this.imagesExtensions || ['jpg', 'png', 'jpeg', 'gif', 'webp'])) {
                     var tagName = 'img';
@@ -105,11 +105,19 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
                 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) {
+                    var savedRange = fn && fn.__mbs_lastRange;
+                    if (savedRange && ((_b = fn === null || fn === void 0 ? void 0 : fn.s) === null || _b === void 0 ? void 0 : _b.selectRange)) {
+                        try {
+                            fn.s.selectRange(savedRange, true);
+                        }
+                        catch (_e) {
+                        }
+                    }
+                    else if ((_c = fn === null || fn === void 0 ? void 0 : fn.s) === null || _c === void 0 ? void 0 : _c.restore) {
                         try {
                             fn.s.restore();
                         }
-                        catch (_d) {
+                        catch (_f) {
                         }
                     }
                     var tagName = 'a';
@@ -119,11 +127,11 @@ 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 ((_d = fn === null || fn === void 0 ? void 0 : fn.s) === null || _d === void 0 ? void 0 : _d.setCursorAfter) {
                         try {
                             fn.s.setCursorAfter(elm);
                         }
-                        catch (_e) {
+                        catch (_g) {
                         }
                     }
                 }
@@ -133,7 +141,9 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
     },
     getMessage: function (e) {
         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('') : '';
+        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 = [];
@@ -153,7 +163,8 @@ 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 _b;
+    var _c = _a === void 0 ? {} : _a, includeUploader = _c.includeUploader, apiUrl = _c.apiUrl, imageUrl = _c.imageUrl, onDeleteImage = _c.onDeleteImage;
     var base = {
         readonly: false,
         placeholder: 'Start typing...',
@@ -203,14 +214,37 @@ var config = function (_a) {
     if (includeUploader) {
         base.uploader = (0, exports.uploaderConfig)(apiUrl, imageUrl);
     }
+    base.events = __assign(__assign({}, (base.events || {})), { afterInit: function (editor) {
+            var saveRange = function () {
+                var _a;
+                try {
+                    if ((_a = editor === null || editor === void 0 ? void 0 : editor.s) === null || _a === void 0 ? void 0 : _a.range) {
+                        editor.__mbs_lastRange = editor.s.range.cloneRange();
+                    }
+                }
+                catch (_b) {
+                }
+            };
+            saveRange();
+            editor.events.on('mouseup', saveRange);
+            editor.events.on('keyup', saveRange);
+            editor.events.on('focus', saveRange);
+            editor.events.on('change', saveRange);
+        } });
     if (onDeleteImage) {
+        var prevAfterInit_1 = (_b = base.events) === null || _b === void 0 ? void 0 : _b.afterInit;
         base.events = __assign(__assign({}, (base.events || {})), { afterInit: function (editor) {
                 var _this = this;
+                if (typeof prevAfterInit_1 === 'function') {
+                    prevAfterInit_1(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; }));
+                    return new Set(imgs
+                        .map(function (img) { return img.getAttribute('src') || ''; })
+                        .filter(function (src) { return !!src; }));
                 };
                 var prevValue = editor.value || '';
                 var prevSrcs = extractImageSrcs(prevValue);

package/package.json

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

package/src/Editor.tsx

@@ -19,16 +19,16 @@ const isImageByExtension = (filename: string, imageExts: string[]): boolean => {
     return !!ext && imageExts.includes(ext);
 };
 
+// display name without extension and without last "-..."
+// Example: recu-202600004-2-69956651a3b98099024323.pdf -> recu-202600004-2
 const getDisplayNameFromPath = (filename: string): string => {
     const clean = (filename || '').split('?')[0]?.split('#')[0] ?? '';
     const last = clean.split('/').pop();
     const base = last ? decodeURIComponent(last) : filename;
 
-    // remove extension
     const dotIndex = base.lastIndexOf('.');
     const noExt = dotIndex > 0 ? base.slice(0, dotIndex) : base;
 
-    // remove last "-..." suffix
     const dashIndex = noExt.lastIndexOf('-');
     if (dashIndex > 0) {
         return noExt.slice(0, dashIndex);
@@ -60,16 +60,24 @@ export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
             e.data.files.forEach((filename: string) => {
                 const src = imageUrl ? `${imageUrl}/${filename}` : filename;
 
-                // ✅ If it's an image => insert <img>, otherwise insert <a href="...">
+                // 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);
                 } else {
-                    // ✅ FIX: restore caret/selection before inserting file link
+                    // ✅ FIX: restore the last known caret/selection inside the editor (works in table cells)
                     if (fn?.s?.focus) fn.s.focus();
-                    if (fn?.s?.restore) {
+
+                    const savedRange = fn && (fn as any).__mbs_lastRange;
+                    if (savedRange && fn?.s?.selectRange) {
+                        try {
+                            fn.s.selectRange(savedRange, true);
+                        } catch {
+                            // ignore
+                        }
+                    } else if (fn?.s?.restore) {
                         try {
                             fn.s.restore();
                         } catch {
@@ -100,7 +108,9 @@ export const uploaderConfig = (apiUrl?: string, imageUrl?: string) => ({
         return !!e?.success;
     },
     getMessage(e: any): string {
-        return e?.data?.messages && Array.isArray(e.data.messages) ? e.data.messages.join('') : '';
+        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[] = [];
@@ -131,10 +141,12 @@ type ConfigParams = {
     onDeleteImage?: (imageUrl: string) => void | Promise<void>;
 };
 
-/**
- * Build Jodit config for ReactEditor
- */
-export const config = ({ includeUploader, apiUrl, imageUrl, onDeleteImage }: ConfigParams = {}) => {
+export const config = ({
+    includeUploader,
+    apiUrl,
+    imageUrl,
+    onDeleteImage,
+}: ConfigParams = {}) => {
     const base: any = {
         readonly: false,
         placeholder: 'Start typing...',
@@ -187,20 +199,50 @@ export const config = ({ includeUploader, apiUrl, imageUrl, onDeleteImage }: Con
         base.uploader = uploaderConfig(apiUrl, imageUrl);
     }
 
+    // ✅ Always keep last caret/selection (needed for file uploads to insert in the right cell)
+    base.events = {
+        ...(base.events || {}),
+        afterInit(editor: any) {
+            const saveRange = () => {
+                try {
+                    if (editor?.s?.range) {
+                        (editor as any).__mbs_lastRange = editor.s.range.cloneRange();
+                    }
+                } catch {
+                    // ignore
+                }
+            };
+
+            // initial + common interactions
+            saveRange();
+            editor.events.on('mouseup', saveRange);
+            editor.events.on('keyup', saveRange);
+            editor.events.on('focus', saveRange);
+            editor.events.on('change', saveRange);
+        },
+    };
+
     if (onDeleteImage) {
+        const prevAfterInit = base.events?.afterInit;
+
         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) {
+                // keep existing selection saver
+                if (typeof prevAfterInit === 'function') {
+                    prevAfterInit(editor);
+                }
+
                 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));
+                    return new Set(
+                        imgs
+                            .map((img) => img.getAttribute('src') || '')
+                            .filter((src) => !!src)
+                    );
                 };
 
                 let prevValue: string = editor.value || '';
@@ -210,10 +252,8 @@ export const config = ({ includeUploader, apiUrl, imageUrl, onDeleteImage }: Con
                     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);
                             }

package/types/Editor.d.ts

@@ -25,5 +25,5 @@ type ConfigParams = {
     imageUrl?: string;
     onDeleteImage?: (imageUrl: string) => void | Promise<void>;
 };
-export declare const config: ({ includeUploader, apiUrl, imageUrl, onDeleteImage }?: ConfigParams) => any;
+export declare const config: ({ includeUploader, apiUrl, imageUrl, onDeleteImage, }?: ConfigParams) => any;
 export default ReactEditor;