@griddo/ax 11.15.4-rc.0 → 11.15.5

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.15.4-rc.0",
+	"version": "11.15.5",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "05aa8d8834e9691c0c6294abf95cb6edd013920f"
+	"gitHead": "bd040f49a71fc8eb3ced92dd17cd3e27bb885b36"
 }

package/src/components/Fields/Wysiwyg/config.tsx

@@ -121,6 +121,11 @@ FroalaEditor.DefineIcon("langIcon", {
 	template: "svg",
 });
 
+Object.assign(FroalaEditor.POPUP_TEMPLATES, {
+	"image.uploading": '[_CUSTOM_LAYER_]',
+	"image.uploadError": '[_CUSTOM_LAYER_]'
+});
+
 FroalaEditor.RegisterCommand("langDropdown", {
 	title: "Language",
 	type: "dropdown",

package/src/components/Fields/Wysiwyg/index.tsx

@@ -51,7 +51,7 @@ const Wysiwyg = (props: IWysiwygProps) => {
 		toolbarButtons: inline ? inlineToolbar() : full ? buttonsFull() : buttons(),
 		toolbarInline: inline,
 		charCounterCount: !inline,
-		imageUpload: !!(full && !inline),
+		imageUpload: false,
 		multiLine: !inline,
 		enter: inline ? FroalaEditor.ENTER_BR : FroalaEditor.ENTER_P,
 		requestHeaders: {
@@ -64,17 +64,81 @@ const Wysiwyg = (props: IWysiwygProps) => {
 				if (disabled) {
 					this.edit.off();
 				}
-			},
-			"image.beforeUpload": async function (this: any, images: FileList) {
-				try {
-					const result = await uploadImage(images[0], imageSite);
-					if (result) {
-						this.image.insert(result.url, true, null, this.image.get(), null);
+
+				if (full && !inline) {
+					const editorEl = this.$el?.get?.(0) || this.el;
+					if (editorEl) {
+						const getPopupPosition = () => {
+							const editorRect = editorEl.getBoundingClientRect?.();
+							return {
+								x: editorRect ? editorRect.left + editorRect.width / 2 - 100 : window.innerWidth / 2 - 100,
+								y: editorRect ? editorRect.top + 50 : 50,
+							};
+						};
+
+						const showPopup = (name: string, template: any, keepVisible = false) => {
+							this.popups.create(name, template);
+							if (!keepVisible) {
+								this.popups.onHide(name, () => false);
+							}
+							const pos = getPopupPosition();
+							this.popups.show(name, pos.x, pos.y, 50);
+						};
+
+						const showErrorPopup = () => {
+							const errorPopupTemplate = {
+								custom_layer:
+									'<div style="padding: 15px 30px; text-align: center; color: #d32f2f;">Upload failed</div>',
+							};
+							showPopup("image.uploadError", errorPopupTemplate);
+							setTimeout(() => this.popups.hide("image.uploadError"), 3000);
+						};
+
+						editorEl.addEventListener("drop", async (e: DragEvent) => {
+							e.preventDefault();
+							const files = e.dataTransfer?.files;
+							if (files && files.length > 0) {
+								const imageFile = files[0];
+								if (imageFile.type.startsWith("image/")) {
+									let isUploading = true;
+									const uploadingTemplate = {
+										custom_layer:
+											'<div style="padding: 15px 30px; text-align: center; white-space: nowrap;">Image uploading...</div>',
+									};
+									this.popups.create("image.uploading", uploadingTemplate);
+									this.popups.onHide("image.uploading", () => {
+										if (isUploading) {
+											setTimeout(() => {
+												if (isUploading) {
+													const pos = getPopupPosition();
+													this.popups.show("image.uploading", pos.x, pos.y, 50);
+												}
+											}, 0);
+										}
+									});
+									const pos = getPopupPosition();
+									this.popups.show("image.uploading", pos.x, pos.y, 50);
+
+									try {
+										const result = await uploadImage(imageFile, imageSite);
+										isUploading = false;
+										this.popups.hide("image.uploading");
+										if (result) {
+											this.image.insert(result.url, true, null, this.image.get(), null);
+										} else {
+											showErrorPopup();
+										}
+									} catch (error) {
+										isUploading = false;
+										this.popups.hide("image.uploading");
+										showErrorPopup();
+										console.error("Upload failed:", error);
+									}
+								}
+							}
+						});
 					}
-				} catch {
-					this.popups.hideAll();
 				}
-				return false;
 			},
 			blur: function (this: any) {
 				const html = this.html.get();