@kgalexander/mcreate 1.0.2 → 1.0.4

package/dist/{chunk-G7F7GRJC.mjs → chunk-RSM3GOFU.mjs}

@@ -815,15 +815,15 @@ function propertyCardTripleMockMjml(block, context) {
     ${responsiveStyles}
     <mj-table align="center" width="${width}" padding="0" css-class="${trackingClasses}">
       <tr class="property-triple-row-${uniqueId}">
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
           ${cards[0] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"  ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[1] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px" ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[2] || ""}
         </th>
       </tr>

package/dist/{core-P3XCQRWR.mjs → core-HSOSY6BB.mjs}

@@ -5,7 +5,7 @@ import {
   MAILLOW_EMAIL_EDITOR_VERSION,
   Preview,
   useEditorStore
-} from "./chunk-G7F7GRJC.mjs";
+} from "./chunk-RSM3GOFU.mjs";
 export {
   Editor,
   History,

package/dist/index.d.mts

@@ -287,7 +287,7 @@ interface MergeField {
     label: string;
     value: string;
 }
-type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+type OnSaveCallback = (templateId: string, template: TemplateJSON, capturedImage?: string) => void | Promise<void>;
 type OnExitCallback = () => void;
 type OnImageUploadCallback = (file: File) => Promise<ImageData>;
 type OnDuplicateCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;

package/dist/index.d.ts

@@ -287,7 +287,7 @@ interface MergeField {
     label: string;
     value: string;
 }
-type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+type OnSaveCallback = (templateId: string, template: TemplateJSON, capturedImage?: string) => void | Promise<void>;
 type OnExitCallback = () => void;
 type OnImageUploadCallback = (file: File) => Promise<ImageData>;
 type OnDuplicateCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;

package/dist/index.js

@@ -890,15 +890,15 @@ function propertyCardTripleMockMjml(block, context) {
     ${responsiveStyles}
     <mj-table align="center" width="${width}" padding="0" css-class="${trackingClasses}">
       <tr class="property-triple-row-${uniqueId}">
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
           ${cards[0] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px"  ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[1] || ""}
         </th>
         <th class="property-triple-spacer-${uniqueId}" style="font-size:0px;line-height:16px;font-weight:normal;width:4px; height:4px">&nbsp;</th>
-        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px" ">
+        <th class="property-triple-card-wrapper-${uniqueId}" valign="top" align="center" width="100px">
             ${cards[2] || ""}
         </th>
       </tr>
@@ -16967,6 +16967,46 @@ function TemplateNameDialog() {
 
 // src/core/editor/components/email-template-v2/header.tsx
 init_editor();
+
+// src/core/editor/utils/capture-template.ts
+var import_html_to_image = require("html-to-image");
+var CAPTURE_WIDTH = 600;
+async function captureTemplateImage(compiledHtml) {
+  const container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.top = "0";
+  container.style.left = "0";
+  container.style.zIndex = "99999";
+  container.style.width = `${CAPTURE_WIDTH}px`;
+  container.style.backgroundColor = "#FFFFFF00";
+  container.style.overflow = "hidden";
+  container.style.maxHeight = "100vh";
+  container.style.opacity = "0";
+  container.innerHTML = compiledHtml;
+  document.body.appendChild(container);
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  try {
+    const dataUrl = await (0, import_html_to_image.toPng)(container, {
+      width: CAPTURE_WIDTH,
+      quality: 0.1,
+      pixelRatio: 1,
+      cacheBust: true,
+      imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==",
+      backgroundColor: "#ffffff",
+      fetchRequestInit: { mode: "cors" },
+      skipFonts: true,
+      // Override opacity on the cloned node (real element is opacity:0 to stay invisible)
+      style: { opacity: "1" }
+    });
+    return dataUrl;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
+// src/core/editor/components/email-template-v2/header.tsx
+init_json2mjml();
 init_core();
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function TemplateHeader() {
@@ -16980,14 +17020,22 @@ function TemplateHeader() {
   const onDelete = useEditorStore((s) => s.onDelete);
   const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
-    console.log("handleExit - templateId:", templateId);
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
-      await onSave(templateId, useEditorStore.getState().template);
+      const template = useEditorStore.getState().template;
+      let capturedImage;
+      try {
+        const { default: mjml2html } = await import("mjml-browser");
+        const mjmlString = json2mjml(template, "editing");
+        const result = mjml2html(mjmlString);
+        capturedImage = await captureTemplateImage(result.html);
+      } catch (err) {
+        console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+      }
+      await onSave(templateId, template, capturedImage);
       markAsSaved();
       onExit?.();
-      console.log("handleExit - onExit called");
     } catch (error) {
       console.error("Failed to save:", error);
     } finally {

package/dist/index.mjs

@@ -60,7 +60,7 @@ import {
   setupDragImage,
   useEditorStore,
   useSidebarContext
-} from "./chunk-G7F7GRJC.mjs";
+} from "./chunk-RSM3GOFU.mjs";
 
 // src/core/editor/components/email-template-v2/header.tsx
 import { ArrowLeftIcon, CopyIcon, MegaphoneIcon, MoreHorizontalIcon, PencilIcon, SendIcon, TrashIcon } from "lucide-react";
@@ -203,6 +203,43 @@ function TemplateNameDialog() {
   ] });
 }
 
+// src/core/editor/utils/capture-template.ts
+import { toPng } from "html-to-image";
+var CAPTURE_WIDTH = 600;
+async function captureTemplateImage(compiledHtml) {
+  const container = document.createElement("div");
+  container.style.position = "fixed";
+  container.style.top = "0";
+  container.style.left = "0";
+  container.style.zIndex = "99999";
+  container.style.width = `${CAPTURE_WIDTH}px`;
+  container.style.backgroundColor = "#FFFFFF00";
+  container.style.overflow = "hidden";
+  container.style.maxHeight = "100vh";
+  container.style.opacity = "0";
+  container.innerHTML = compiledHtml;
+  document.body.appendChild(container);
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  try {
+    const dataUrl = await toPng(container, {
+      width: CAPTURE_WIDTH,
+      quality: 0.1,
+      pixelRatio: 1,
+      cacheBust: true,
+      imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88P/BfwAJhAPkD+pMGAAAAABJRU5ErkJggg==",
+      backgroundColor: "#ffffff",
+      fetchRequestInit: { mode: "cors" },
+      skipFonts: true,
+      // Override opacity on the cloned node (real element is opacity:0 to stay invisible)
+      style: { opacity: "1" }
+    });
+    return dataUrl;
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
 // src/core/editor/components/email-template-v2/header.tsx
 import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
 function TemplateHeader() {
@@ -216,14 +253,22 @@ function TemplateHeader() {
   const onDelete = useEditorStore((s) => s.onDelete);
   const templateName = useEditorStore((s) => s.template?.name);
   const handleExit = async () => {
-    console.log("handleExit - templateId:", templateId);
     if (isSaving || !templateId || !onSave) return;
     setIsSaving(true);
     try {
-      await onSave(templateId, useEditorStore.getState().template);
+      const template = useEditorStore.getState().template;
+      let capturedImage;
+      try {
+        const { default: mjml2html } = await import("mjml-browser");
+        const mjmlString = json2mjml(template, "editing");
+        const result = mjml2html(mjmlString);
+        capturedImage = await captureTemplateImage(result.html);
+      } catch (err) {
+        console.error("[TemplateCapture] Failed:", err?.message || JSON.stringify(err) || err, err?.stack || "");
+      }
+      await onSave(templateId, template, capturedImage);
       markAsSaved();
       onExit?.();
-      console.log("handleExit - onExit called");
     } catch (error) {
       console.error("Failed to save:", error);
     } finally {
@@ -11663,7 +11708,7 @@ function useAutoSave() {
 // src/core/editor/components/email-template-v2/template-page.tsx
 import "react-json-view-lite/dist/index.css";
 import { jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
-var Editor2 = lazy(() => import("./core-P3XCQRWR.mjs").then((module) => ({
+var Editor2 = lazy(() => import("./core-HSOSY6BB.mjs").then((module) => ({
   default: module.Editor
 })));
 function TemplatePage({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kgalexander/mcreate",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Maillow email template editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",