@emailmaker/emailmaker 1.1.64 → 1.1.69

package/file-manager/file-manager-PixieEditor-BRUKJkjp.js

@@ -0,0 +1,597 @@
+import { A as e, C as t, J as n, P as r, R as i, S as a, U as o, X as s, ct as c, et as l, f as u, h as d, j as f, x as p } from "./file-manager-hooks-aNT0w8kI.js";
+import { i as m, t as ee } from "./file-manager-urls-DN9gaYil.js";
+import h from "react";
+import { Button as g, Modal as te } from "antd";
+import { jsx as _, jsxs as ne } from "react/jsx-runtime";
+import { CloseOutlined as re, HistoryOutlined as ie } from "@ant-design/icons";
+import { Pixie as v } from "pixie";
+//#region packages/file-manager/src/components/PixieEditor/backgroundColor.ts
+function y(e, t, n, r, i, a) {
+	if (t.type === "linear") {
+		let i = e.createLinearGradient(n + t.coords.x1, r + t.coords.y1, n + t.coords.x2, r + t.coords.y2);
+		return t.colorStops.forEach((e) => i.addColorStop(e.offset, e.color)), i;
+	}
+	if (t.type === "radial") {
+		let i = e.createRadialGradient(n + t.coords.x1, r + t.coords.y1, t.coords.r1 ?? 0, n + t.coords.x2, r + t.coords.y2, t.coords.r2 ?? 0);
+		return t.colorStops.forEach((e) => i.addColorStop(e.offset, e.color)), i;
+	}
+	throw Error("Unknown gradient type");
+}
+function b(e) {
+	if (!this.backgroundColor) return;
+	let t = this._getNonTransformedDimensions(), n = -t.x / 2, r = -t.y / 2, i = t.x, a = t.y, o = this.backgroundColor;
+	if (typeof o == "string" || o instanceof CanvasGradient || o instanceof CanvasPattern) e.fillStyle = o, e.fillRect(n, r, i, a);
+	else if (typeof o == "object" && "type" in o && (o.type === "linear" || o.type === "radial")) e.fillStyle = y(e, o, n, r, i, a), e.fillRect(n, r, i, a);
+	else if ("source" in o && (o.source instanceof HTMLImageElement || o.source instanceof HTMLCanvasElement)) if (o.repeat) {
+		let t = e.createPattern(o.source, o.repeat);
+		t && (e.fillStyle = t, e.fillRect(n, r, i, a));
+	} else e.drawImage(o.source, n, r, i, a);
+	this._removeShadow(e);
+}
+function x(e) {
+	if (!e.fabric) {
+		console.warn("Pixie fabric instance is not available");
+		return;
+	}
+	e.fabric.on("object:added", (e) => {
+		let t = e.target;
+		t && t.name === "text" && (t._renderBackground = b);
+	});
+}
+//#endregion
+//#region packages/file-manager/src/components/PixieEditor/PixieController.tsx
+var S = "fm-pixie-editor", C = new class {
+	constructor() {
+		this._container = document.createElement("div"), this._instance = null, this._container.classList.add(S), this._container.style.width = "100%", this._container.style.height = "85vh", this._container.style.minHeight = "400px";
+	}
+	get className() {
+		return `.${S}`;
+	}
+	get canvas() {
+		return this._instance?.state.canvasRef?.current;
+	}
+	get tools() {
+		return this._instance?.tools;
+	}
+	isLoaded() {
+		return !!this._instance;
+	}
+	async _setConfig(e) {
+		this._instance ? await this._instance.resetEditor(e) : this._instance = await v.init({
+			...e,
+			selector: this.className
+		}), x(this._instance);
+	}
+	async show(e, t, n = t.firstChild) {
+		t.insertBefore(this._container, n), await this._setConfig(e), this._instance.open();
+	}
+	close() {
+		this._container.parentNode?.removeChild(this._container);
+	}
+}(), w = (e, t = "image/png") => fetch(`data:${t};base64,${e}`).then((e) => e.blob());
+function ae(e, t) {
+	if (e === "json") return new Blob([t], { type: "application/json" });
+	if (e === "svg") return new Blob([t], { type: "image/svg+xml" });
+	let r = `image/${e}`;
+	if (t.startsWith("data:")) {
+		let e = n(t);
+		return e && e.startsWith("image/") && (r = e), w(t.replace(/data:image\/[^;]+;base64,/, ""), s(r));
+	}
+	return w(t, s(r));
+}
+function oe(e) {
+	return new Promise((t, n) => {
+		let r = new FileReader();
+		r.onload = () => t(r.result), r.onerror = () => n(r.error ?? /* @__PURE__ */ Error("Failed to convert blob to data URL")), r.readAsDataURL(e);
+	});
+}
+var T = ({ visible: n, onClose: v, file: y, onSave: b, onSaveCopy: x }) => {
+	let { t: S } = o(), w = h.useRef(null), T = r(), se = u(), { options: E, actions: ce } = i(), { i18n: D } = o(), { config: O } = E, { setCurrentMenuFile: k } = ce, { getFileData: A, resolveFileForEditByUrl: j } = se, [M, N] = h.useState(!1), [P, F] = h.useState(null), [I, L] = h.useState(""), [R, z] = h.useState(!1), [B, V] = h.useState(!1), [H, U] = h.useState(null), W = h.useRef(!1), G = h.useRef(void 0), K = h.useRef(void 0), q = h.useRef("saveCopy"), J = h.useRef(void 0);
+	G.current = b, K.current = x, h.useEffect(() => {
+		y && !W.current && (async () => {
+			if (J.current !== y) {
+				if (typeof y == "object") {
+					U(y);
+					return;
+				}
+				J.current = y, N(!0);
+				try {
+					if (y.startsWith("data:")) U({
+						thumbnail: y,
+						saveWithoutFolder: !0
+					});
+					else {
+						let e = await j(y);
+						J.current === y && U(e);
+					}
+				} catch (e) {
+					console.error("Failed to load file for editor:", e), J.current === y && (J.current = null), v?.();
+				} finally {
+					N(!1);
+				}
+			}
+		})();
+	}, [
+		y,
+		v,
+		j
+	]);
+	let Y = h.useCallback(async (e) => {
+		try {
+			if (typeof e.thumbnail == "string" && e.thumbnail.startsWith("data:")) return e.thumbnail;
+			let t = await A(e.id, !0);
+			if (!t) throw Error(S("Error loading image"));
+			return new Promise((e) => {
+				let n = new FileReader();
+				n.onload = () => e(n.result), n.readAsDataURL(t);
+			});
+		} catch (e) {
+			throw console.error("Error getting the image data:", e), e;
+		}
+	}, [A, S]);
+	h.useEffect(() => {
+		if (!P && n && H) {
+			let e = !1;
+			return (async () => {
+				N(!0);
+				try {
+					let t = await Y(H);
+					if (!t || typeof t != "string" || t.trim() === "") throw Error("Invalid image data: empty or null");
+					if (!t.startsWith("data:")) throw Error("Invalid image data: not a valid data URL");
+					let n = t.match(/^data:([^;]+);base64,(.+)$/);
+					if (!n) throw Error("Invalid image data: malformed data URL format");
+					let [, r, i] = n;
+					if (!r.startsWith("image/")) throw Error(`Invalid image data: unsupported MIME type ${r}`);
+					if (i.length < 10) throw Error("Invalid image data: base64 content too short");
+					if (!/^[A-Za-z0-9+/]+=*$/.test(i)) throw Error("Invalid image data: corrupted base64 content");
+					if (!e) {
+						F(t);
+						let e = a(H, "image/png");
+						L(e.mimeType);
+					}
+				} catch (t) {
+					e || (T.error({
+						id: "IMAGE_DOWNLOAD_FAILED",
+						innerException: t,
+						message: S("Error loading image"),
+						placement: "bottomRight",
+						data: {
+							itemId: H?.id ?? void 0,
+							itemName: H?.name ?? void 0,
+							folderId: H?.folderId ?? null,
+							thumbnail: H?.thumbnail
+						}
+					}), v?.());
+				} finally {
+					N(!1);
+				}
+			})(), () => {
+				e = !0;
+			};
+		}
+	}, [
+		H,
+		Y,
+		P,
+		v,
+		S,
+		n
+	]);
+	let X = h.useCallback(async (e, n, r) => {
+		let i = await ae(r, e), a = s(i.type || `image/${r}`), o = O?.compessorUrl ?? O?.compressorUrl;
+		if (a.startsWith("image/")) try {
+			let e = await d(new File([i], n, { type: a }), {
+				maxSizeMB: O?.compressMaxSize,
+				maxWidthOrHeight: O?.compressMaxWidthOrHeight,
+				mimeType: a,
+				fileName: n,
+				libURL: o,
+				enableCompression: t(O, a)
+			});
+			i = e, a = e.type;
+		} catch (e) {
+			console.warn("Image preparation failed, using original:", e);
+		}
+		return {
+			blob: i,
+			mimeType: a,
+			thumbnailDataUrl: await oe(i)
+		};
+	}, [O]), Z = h.useCallback(async (t, n, r, i) => {
+		let a = i === "save" ? G.current : K.current;
+		if (!H || !a) return;
+		let o = typeof H == "object" && H ? H : null, s = null;
+		try {
+			N(!0);
+			let { blob: e, mimeType: o, thumbnailDataUrl: c } = await X(t, n, r), l = {
+				...H,
+				thumbnail: c,
+				size: e.size,
+				date: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+				type: o,
+				folderId: H.folderId || "",
+				name: H.name || n,
+				extension: H.extension || (H.name || n).split(".").pop()?.toLowerCase() || ""
+			};
+			s = l;
+			let u = await a(l, {
+				blob: e,
+				mimeType: o,
+				thumbnail: c,
+				mode: i
+			});
+			if (u) return N(!1), u;
+			throw Error(S(i === "saveCopy" ? "Failed to save image copy" : "Failed to save changes"));
+		} catch (t) {
+			console.error("Error saving:", t);
+			let r = s ?? o;
+			if (!t?.notificationShown) {
+				let a = e(t), o = f(a?.code, S) ?? a?.message ?? S(i === "saveCopy" ? "Failed to save image copy" : "Error saving image");
+				T.error({
+					id: i === "saveCopy" ? "IMAGE_SAVE_COPY_FAILED" : "IMAGE_SAVE_FAILED",
+					message: o,
+					placement: "bottomRight",
+					data: {
+						itemId: r?.id ?? void 0,
+						itemName: r?.name ?? n,
+						folderId: r?.folderId ?? null,
+						thumbnail: r?.thumbnail
+					},
+					innerException: t
+				});
+			}
+			N(!1);
+		}
+	}, [
+		H,
+		T,
+		X,
+		S
+	]), Q = h.useCallback(async (e) => {
+		if (!C.isLoaded() || !H) {
+			console.error("❌ Pixie instance or file is missing");
+			return;
+		}
+		q.current = e;
+		let t = H.name || "edited-image", n = a(H, I);
+		try {
+			await C.tools?.export.save(t.replace(/\.[^/.]+$/, ""), n.pixieFormat, p.QUALITY);
+		} catch (r) {
+			console.error("🎨 Error saving through the button:", r);
+			try {
+				let r = C.canvas, i = r ? r.toDataURL(n.mimeType) : null;
+				i && await Z(i, t, n.extension, e);
+			} catch (e) {
+				console.error("🎨 Alternative method also did not work:", e);
+			}
+		}
+	}, [
+		H,
+		I,
+		Z
+	]), $ = h.useCallback(async () => {
+		if (!(!P || !n || !R || W.current)) try {
+			W.current = !0;
+			let e = w.current, t = 0;
+			for (; t < 20 && (e.clientWidth === 0 || e.clientHeight === 0);) await new Promise((e) => setTimeout(e, 50)), t++;
+			let n = O?.locale ? O?.locale.replace("_", "-") : "en", r = matchMedia("(prefers-color-scheme: dark)").matches ? l : c, i = O?.theme === "system" ? r : O?.theme, o = (O?.locale || D.language || "en").split("-")[0].split("_")[0], s = (D.getResourceBundle(o, "translation") || {}).pixie || {}, u = (e) => e.split(" ").map((e) => e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()).join(" "), d = {};
+			Object.entries(s).forEach(([e, t]) => {
+				let n = u(e);
+				d[n] = t, d[e] = t;
+			});
+			let f = { [n]: d }, m = a(H, I), h = {
+				selector: "#pixie-editor",
+				baseUrl: ee(O?.baseUrl || "", O?.assetsUrl || "assets/image-editor"),
+				image: P,
+				activeLanguage: n,
+				languages: f,
+				ui: {
+					activeTheme: i,
+					mode: "inline",
+					forceOverlayModeOnMobile: !1,
+					visible: !0,
+					menubar: {
+						replaceDefaultItems: !0,
+						position: "top",
+						items: [
+							{
+								type: "undoWidget",
+								align: "left"
+							},
+							{
+								type: "zoomWidget",
+								align: "center",
+								desktopOnly: !0
+							},
+							{
+								type: "button",
+								align: "right",
+								desktopOnly: !0,
+								icon: () => /* @__PURE__ */ _(ie, { style: { fontSize: 20 } }),
+								action: (e) => {
+									e.togglePanel("history");
+								}
+							},
+							{
+								type: "button",
+								icon: () => /* @__PURE__ */ _(re, { style: { fontSize: 20 } }),
+								align: "right",
+								desktopOnly: !0,
+								action: v
+							}
+						]
+					},
+					nav: { position: "top" }
+				},
+				tools: {
+					export: {
+						defaultFormat: m.pixieFormat,
+						defaultQuality: p.QUALITY,
+						defaultName: H?.name?.replace(/\.[^/.]+$/, "") || "image"
+					},
+					text: {
+						replaceDefaultItems: !0,
+						defaultText: "Handwriting",
+						items: [
+							{
+								family: "Inter",
+								src: "fonts/inter-v20-cyrillic_latin-regular.woff2"
+							},
+							{
+								family: "Commissioner",
+								src: "fonts/commissioner-v24-cyrillic_latin-regular.woff2"
+							},
+							{
+								family: "Montserrat Light",
+								src: "fonts/Montserrat-Light.woff2"
+							},
+							{
+								family: "Montserrat Regular",
+								src: "fonts/Montserrat-Regular.woff2"
+							},
+							{
+								family: "Montserrat Bold",
+								src: "fonts/Montserrat-Bold.woff2"
+							},
+							{
+								family: "Montserrat Black",
+								src: "fonts/Montserrat-Black.woff2"
+							},
+							{
+								family: "Roboto Light",
+								src: "fonts/Roboto-Light.woff2"
+							},
+							{
+								family: "Roboto Regular",
+								src: "fonts/Roboto-Regular.woff2"
+							},
+							{
+								family: "Roboto Bold",
+								src: "fonts/Roboto-Bold.woff2"
+							},
+							{
+								family: "Roboto Black",
+								src: "fonts/Roboto-Black.woff2"
+							},
+							{
+								family: "Lato Light",
+								src: "fonts/Lato-Light.woff2"
+							},
+							{
+								family: "Lato Regular",
+								src: "fonts/Lato-Regular.woff2"
+							},
+							{
+								family: "Lato Bold",
+								src: "fonts/Lato-Bold.woff2"
+							},
+							{
+								family: "Lato Black",
+								src: "fonts/Lato-Black.woff2"
+							},
+							{
+								family: "Rubik Light",
+								src: "fonts/Rubik-Light.woff2"
+							},
+							{
+								family: "Rubik Regular",
+								src: "fonts/Rubik-Regular.woff2"
+							},
+							{
+								family: "Rubik Bold",
+								src: "fonts/Rubik-Bold.woff2"
+							},
+							{
+								family: "Rubik Black",
+								src: "fonts/Rubik-Black.woff2"
+							},
+							{
+								family: "Bebas Neue Light",
+								src: "fonts/BebasNeueLight.woff2"
+							},
+							{
+								family: "Bebas Neue Regular",
+								src: "fonts/BebasNeueRegular.woff2"
+							},
+							{
+								family: "Bebas Neue Book",
+								src: "fonts/BebasNeueBook.woff2"
+							},
+							{
+								family: "Bebas Neue Bold",
+								src: "fonts/BebasNeueBold.woff2"
+							},
+							{
+								family: "Fira Sans",
+								src: "fonts/fira-sans-v11-latin-ext_latin_cyrillic-regular.woff2"
+							},
+							{
+								family: "Lobster",
+								src: "fonts/Lobster.woff2"
+							},
+							{
+								family: "Pacifico",
+								src: "fonts/pacifico-v23-cyrillic_latin-regular.woff2"
+							},
+							{
+								family: "Playfair Display",
+								src: "fonts/playfair-display-v40-cyrillic_latin-regular.woff2"
+							},
+							{
+								family: "Oswald",
+								src: "fonts/oswald-v57-cyrillic_latin-regular.woff2"
+							},
+							{
+								family: "Caveat",
+								src: "fonts/caveat-v23-cyrillic_latin-regular.woff2"
+							}
+						]
+					}
+				},
+				onSave: async function(e, t, n) {
+					try {
+						return N(!0), await Z(e, t, n, q.current);
+					} catch (e) {
+						throw console.error("🎨 PIXIE onSave ERROR:", e), N(!1), e;
+					}
+				}
+			};
+			try {
+				V(!1), await C.show(h, w.current);
+				let e = C.canvas;
+				e && e.focus(), V(!0), N(!1);
+			} catch (e) {
+				console.error("init pixie failed:", e);
+			}
+		} catch (e) {
+			console.error("Error initializing Pixie:", e), T.error({
+				id: "EDITOR_INIT_FAILED",
+				message: S("Error initializing editor"),
+				placement: "bottomRight",
+				innerException: e
+			}), W.current = !1, v?.();
+		}
+	}, [
+		H,
+		I,
+		P,
+		n,
+		R,
+		O?.locale,
+		O?.theme,
+		O?.baseUrl,
+		O?.assetsUrl,
+		v,
+		Z,
+		T,
+		D,
+		S
+	]);
+	h.useEffect(() => {
+		n && P && R && $();
+	}, [
+		n,
+		P,
+		R,
+		$
+	]), h.useEffect(() => {
+		if (!n) {
+			try {
+				C.close();
+			} catch (e) {
+				console.warn("Error closing Pixie:", e);
+			}
+			N(!1), F(null), L(""), W.current = !1, z(!1), V(!1);
+		}
+		return () => {
+			try {
+				C.close();
+			} catch (e) {
+				console.warn("Error closing Pixie when unmounting:", e);
+			}
+		};
+	}, [n]);
+	let le = !!H?.id && O?.features?.enableUpdateFile !== !1;
+	return /* @__PURE__ */ _(te, {
+		title: H?.name ? S("Editing: {{name}}", { name: H.name }) : S("Editing image"),
+		open: n,
+		closeIcon: null,
+		onCancel: v,
+		afterOpenChange: (e) => z(e),
+		forceRender: !0,
+		width: "100vw",
+		getContainer: E.getModalContainer,
+		style: {
+			top: 0,
+			height: "100vh",
+			maxWidth: "none",
+			padding: 10
+		},
+		styles: { body: {
+			height: "85vh",
+			padding: 0
+		} },
+		footer: [
+			/* @__PURE__ */ _(g, {
+				onClick: v,
+				disabled: !R || M,
+				children: S("Cancel")
+			}, "cancel"),
+			/* @__PURE__ */ _(g, {
+				type: "primary",
+				onClick: () => Q("saveCopy"),
+				loading: M,
+				children: S("Save as copy and choose")
+			}, "save-copy"),
+			...le ? [/* @__PURE__ */ _(g, {
+				type: "primary",
+				onClick: () => Q("save"),
+				loading: M,
+				children: S("Save and choose")
+			}, "save")] : []
+		],
+		mask: { closable: !1 },
+		destroyOnHidden: !1,
+		afterClose: () => {
+			k && k("");
+		},
+		children: /* @__PURE__ */ ne("div", {
+			ref: w,
+			style: {
+				position: "relative",
+				width: "100%",
+				height: "100%"
+			},
+			children: [n && !B ? /* @__PURE__ */ _("div", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					background: "rgba(255,255,255,0.45)",
+					backdropFilter: "blur(1px)",
+					pointerEvents: "all",
+					zIndex: 10
+				},
+				children: /* @__PURE__ */ _("span", {
+					style: {
+						fontSize: 14,
+						color: "#555"
+					},
+					children: S("Loading editor...")
+				})
+			}) : null, M && B && /* @__PURE__ */ _(m, { style: {
+				position: "absolute",
+				top: 0,
+				background: "var(--em-colorBgLayout)",
+				zIndex: 100,
+				opacity: .7
+			} })]
+		})
+	});
+};
+//#endregion
+export { T as PixieEditor };
+
+//# sourceMappingURL=file-manager-PixieEditor-BRUKJkjp.js.map