@mbs-dev/react-editor 1.1.0 → 1.3.0

package/dist/Editor.js

@@ -57,6 +57,18 @@ var ReactEditor = function (_a) {
     var onChange = _a.onChange, onBlur = _a.onBlur, value = _a.value, config = _a.config;
     return (react_1.default.createElement(jodit_react_1.default, { value: value, config: config, onBlur: onBlur, onChange: onChange }));
 };
+var isImageByExtension = function (filename, imageExts) {
+    var _a, _b;
+    var clean = (_b = (_a = (filename || '').split('?')[0]) === null || _a === void 0 ? void 0 : _a.split('#')[0]) !== null && _b !== void 0 ? _b : '';
+    var ext = (clean.split('.').pop() || '').toLowerCase();
+    return !!ext && imageExts.includes(ext);
+};
+var getDisplayNameFromPath = function (filename) {
+    var _a, _b;
+    var clean = (_b = (_a = (filename || '').split('?')[0]) === null || _a === void 0 ? void 0 : _a.split('#')[0]) !== null && _b !== void 0 ? _b : '';
+    var last = clean.split('/').pop();
+    return last ? decodeURIComponent(last) : filename;
+};
 var uploaderConfig = function (apiUrl, imageUrl) { return ({
     imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'webp'],
     filesVariableName: function (t) {
@@ -70,15 +82,27 @@ var uploaderConfig = function (apiUrl, imageUrl) { return ({
         return formdata;
     },
     isSuccess: function (e) {
+        var _this = this;
         var _a;
         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) {
-            var tagName_1 = 'img';
             e.data.files.forEach(function (filename) {
-                var elm = fn.createInside.element(tagName_1);
                 var src = imageUrl ? "".concat(imageUrl, "/").concat(filename) : filename;
-                elm.setAttribute('src', src);
-                fn.s.insertImage(elm, null, fn.o.imageDefaultWidth);
+                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);
+                }
+                else {
+                    var tagName = 'a';
+                    var elm = fn.createInside.element(tagName);
+                    elm.setAttribute('href', src);
+                    elm.setAttribute('target', '_blank');
+                    elm.setAttribute('rel', 'noopener noreferrer');
+                    elm.textContent = getDisplayNameFromPath(filename);
+                    fn.s.insertNode(elm);
+                }
             });
         }
         return !!(e === null || e === void 0 ? void 0 : e.success);

package/package.json

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

package/src/Editor.tsx

@@ -13,6 +13,18 @@ const ReactEditor: React.FC<EditorProps> = ({ onChange, onBlur, value, config })
     );
 };
 
+const isImageByExtension = (filename: string, imageExts: string[]): boolean => {
+    const clean = (filename || '').split('?')[0]?.split('#')[0] ?? '';
+    const ext = (clean.split('.').pop() || '').toLowerCase();
+    return !!ext && imageExts.includes(ext);
+};
+
+const getDisplayNameFromPath = (filename: string): string => {
+    const clean = (filename || '').split('?')[0]?.split('#')[0] ?? '';
+    const last = clean.split('/').pop();
+    return last ? decodeURIComponent(last) : filename;
+};
+
 /**
  * Uploader configuration for Jodit
  * Handles image upload + insertion in the editor
@@ -36,13 +48,24 @@ export const uploaderConfig = (
         const fn = this.jodit;
 
         if (e?.data?.files && e.data.files.length) {
-            const tagName = 'img';
-
             e.data.files.forEach((filename: string) => {
-                const elm = fn.createInside.element(tagName);
                 const src = imageUrl ? `${imageUrl}/${filename}` : filename;
-                elm.setAttribute('src', src);
-                fn.s.insertImage(elm as HTMLImageElement, null, fn.o.imageDefaultWidth);
+
+                // ✅ 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 {
+                    const tagName = 'a';
+                    const elm = fn.createInside.element(tagName);
+                    elm.setAttribute('href', src);
+                    elm.setAttribute('target', '_blank');
+                    elm.setAttribute('rel', 'noopener noreferrer');
+                    elm.textContent = getDisplayNameFromPath(filename);
+                    fn.s.insertNode(elm);
+                }
             });
         }