@kgalexander/mcreate 0.0.17 → 1.0.1

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

@@ -215,6 +215,7 @@ function formatOpenHouseTime(time24) {
 // src/core/editor/constant/configuration.ts
 import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Heading1Icon, Heading2Icon, Heading3Icon, LinkIcon, ListIcon, ListOrderedIcon, MailIcon, PhoneIcon, Pilcrow } from "lucide-react";
 var MAX_TEMPLATE_SIZE = 50 * 1024;
+var SIZE_TRACKING_THRESHOLD = 40 * 1024;
 var BUTTON_ALIGNMENTS = ["left", "center", "right"];
 var ALIGNMENT_ICONS = {
   left: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-left.svg",
@@ -472,8 +473,8 @@ function propertyCardMockMjml(block, context) {
                         ${isBrokerage ? brokerageHtml : ""}
                         ${isDescription && description ? `
                         <tr>
-                          <td style="padding: 0px 0px 0px 0px; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor};">
-                            ${description}
+                          <td style="padding: 0px 0px 0px 0px; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor}; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">
+                            ${description.length > 200 ? description.slice(0, 200) + "..." : description}
                           </td>
                         </tr>
                         ` : ""}
@@ -592,8 +593,8 @@ function propertyCardSingleTwoMockMjml(block, context) {
       ` : "";
   const descriptionHtml = description ? `
         <tr>
-          <td style="padding: 0px 0px 0px 0px; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor};">
-            ${description}
+          <td style="padding: 0px 0px 0px 0px; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left; color: ${textColor}; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">
+            ${description.length > 200 ? description.slice(0, 200) + "..." : description}
           </td>
         </tr>
       ` : "";
@@ -727,7 +728,7 @@ function renderCard(child, childIdx, context, uniqueId, borderRadius, imageHeigh
                           <span style="color:#d1d1d5">|</span>
                           <b>${sqft}</b>&nbsp;<abbr title="square feet" style="text-decoration:none">sqft</abbr>
                         </p>
-                        <p style="font-family:${fontFamily};font-size:12px;line-height:16px;font-weight:400;color:${textColor};font-style:normal;margin:0;padding:0">${city}</p>
+                        <p class="property-triple-city-${uniqueId}" style="width: 140px; font-family:${fontFamily};font-size:12px;line-height:16px;font-weight:400;color:${textColor};font-style:normal;margin:0;padding:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${city}</p>
                       </td>
                     </tr>
                   </tbody>
@@ -803,6 +804,9 @@ function propertyCardTripleMockMjml(block, context) {
           .property-triple-section-column {
             width: 100% !important;
           }
+          .property-triple-city-${uniqueId} {
+            width: 135px !important;
+          }
         }
       </style>
     </mj-raw>
@@ -1817,6 +1821,8 @@ var useEditorStore = create()(
       onToast: null,
       onExit: null,
       onImageUpload: null,
+      onDuplicate: null,
+      onDelete: null,
       previewMode: false,
       focusIdx: null,
       hoverIdx: null,
@@ -1831,6 +1837,7 @@ var useEditorStore = create()(
       tiptapEditor: null,
       templateSize: calculateTemplateSize(defaultTemplate),
       isAtSizeLimit: false,
+      sizeTrackingMode: calculateTemplateSize(defaultTemplate) >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling",
       // Undo/Redo history
       history: [],
       historyIndex: -1,
@@ -1847,8 +1854,16 @@ var useEditorStore = create()(
       mergeFields: [],
       // Render sync
       renderSyncNeeded: 0,
+      // Unconditionally recalculate template size and update tracking mode
+      recheckTemplateSize: () => {
+        set((state) => {
+          state.templateSize = calculateTemplateSize(state.template);
+          state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
+        });
+      },
       // Initialize store with external template (for npm package usage)
-      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload) => {
+      initializeWithTemplate: (templateId, template, onSave, onToast, data, onExit, onImageUpload, onDuplicate, onDelete) => {
         set((state) => {
           state.templateId = templateId;
           state.template = template;
@@ -1856,6 +1871,8 @@ var useEditorStore = create()(
           state.onToast = onToast ?? null;
           state.onExit = onExit ?? null;
           state.onImageUpload = onImageUpload ?? null;
+          state.onDuplicate = onDuplicate ?? null;
+          state.onDelete = onDelete ?? null;
           state.isPaidLevel = data?.isPaidLevel ?? 0;
           state.images = data?.images ?? [];
           state.userData = data?.userData ?? null;
@@ -1865,6 +1882,7 @@ var useEditorStore = create()(
           }));
           state.templateSize = calculateTemplateSize(template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           state.history = [cloneDeep(template)];
           state.historyIndex = 0;
           state.focusIdx = null;
@@ -2031,6 +2049,7 @@ var useEditorStore = create()(
           children.splice(positionIndex, 0, newElement);
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           if (type !== "text") {
             state.focusIdx = `${parentIdx}.children.[${positionIndex}]`;
           }
@@ -2070,6 +2089,7 @@ var useEditorStore = create()(
           children.splice(sectionPositionIndex, 0, newSection);
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           if (type !== "text") {
             state.focusIdx = `${pageIdx}.children.[${sectionPositionIndex}].children.[0].children.[0]`;
           }
@@ -2151,8 +2171,11 @@ var useEditorStore = create()(
       updateElementContent: (contentIdx, content) => {
         set((state) => {
           setValueAtPath(state.template, contentIdx, content);
-          state.templateSize = calculateTemplateSize(state.template);
-          state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          if (state.sizeTrackingMode === "realtime") {
+            state.templateSize = calculateTemplateSize(state.template);
+            state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+            state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
+          }
         });
       },
       // Delete element
@@ -2298,8 +2321,11 @@ var useEditorStore = create()(
               state.focusIdx = null;
             }
           }
-          state.templateSize = calculateTemplateSize(state.template);
-          state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          if (state.sizeTrackingMode === "realtime") {
+            state.templateSize = calculateTemplateSize(state.template);
+            state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+            state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
+          }
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2324,6 +2350,7 @@ var useEditorStore = create()(
           children.splice(sourceIndex + 1, 0, clonedElement);
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
           state.focusIdx = `${parentIdx}.children.[${sourceIndex + 1}]`;
         });
         useEditorStore.getState().pushHistory();
@@ -2511,6 +2538,7 @@ var useEditorStore = create()(
           state.focusIdx = `${parentIdx}.children.[${adjustedIndex + 1}]`;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2617,6 +2645,7 @@ var useEditorStore = create()(
           state.focusIdx = `${pageIdx}.children.[${adjustedSectionIndex + 1}]`;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2705,6 +2734,7 @@ var useEditorStore = create()(
           }
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2793,6 +2823,7 @@ var useEditorStore = create()(
           }
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         useEditorStore.getState().pushHistory();
       },
@@ -2956,6 +2987,7 @@ var useEditorStore = create()(
           state.textEditing = null;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         setTimeout(() => {
           set((state) => {
@@ -2975,6 +3007,7 @@ var useEditorStore = create()(
           state.textEditing = null;
           state.templateSize = calculateTemplateSize(state.template);
           state.isAtSizeLimit = state.templateSize >= MAX_TEMPLATE_SIZE;
+          state.sizeTrackingMode = state.templateSize >= SIZE_TRACKING_THRESHOLD ? "realtime" : "polling";
         });
         setTimeout(() => {
           set((state) => {
@@ -11697,6 +11730,27 @@ function focusAdjacentElement(adjacentIdx, storeRefs) {
     storeRefs.setFocusIdx.current(adjacentIdx);
   }
 }
+var SHADOW_INNER_DIV = ":scope > div";
+function syncShadowHeight(shadowEl, heightPx) {
+  shadowEl.style.height = heightPx;
+  shadowEl.style.minHeight = heightPx;
+  shadowEl.style.overflow = "hidden";
+  const inner = shadowEl.querySelector(SHADOW_INNER_DIV);
+  if (inner) {
+    inner.style.height = heightPx;
+    inner.style.minHeight = "0";
+  }
+}
+function clearShadowHeight(shadowEl) {
+  shadowEl.style.height = "";
+  shadowEl.style.minHeight = "";
+  shadowEl.style.overflow = "";
+  const inner = shadowEl.querySelector(SHADOW_INNER_DIV);
+  if (inner) {
+    inner.style.height = "";
+    inner.style.minHeight = "";
+  }
+}
 function handleDeleteEntireElement(currentElementIdx, storeRefs, event, skipAutoFocus) {
   event.preventDefault();
   const parentIdx = getParentIdx(currentElementIdx);
@@ -11833,19 +11887,27 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
     if (!container) return;
     const observer = new ResizeObserver(() => {
       const shadowEl = getShadowElement();
-      if (shadowEl) {
-        shadowEl.style.height = `${container.offsetHeight}px`;
-      }
+      if (shadowEl) syncShadowHeight(shadowEl, `${container.offsetHeight}px`);
     });
     observer.observe(container);
     return () => {
       observer.disconnect();
       const shadowEl = getShadowElement();
-      if (shadowEl) {
-        shadowEl.style.height = "";
-      }
+      if (shadowEl) clearShadowHeight(shadowEl);
     };
   }, [getShadowElement]);
+  const contentAtIdx = useEditorStore((s) => {
+    const el = getValueByIdx(s.template, idx);
+    return el?.data?.value?.content ?? "";
+  });
+  useEffect6(() => {
+    const raf = requestAnimationFrame(() => {
+      const container = containerRef.current;
+      const shadowEl = getShadowElement();
+      if (container && shadowEl) syncShadowHeight(shadowEl, `${container.offsetHeight}px`);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [contentAtIdx, getShadowElement]);
   const cleanedContent = useMemo4(() => {
     return content.replace(NBSP_P_CONTENT_REGEX, "<p$1></p>").replace(IS_EMPTY_P_CLASS_REGEX, "").replace(IS_EMPTY_HEADING_CLASS_REGEX, "");
   }, [content]);
@@ -12013,6 +12075,7 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
           }
           return true;
         }
+        requestAnimationFrame(() => useEditorStore.getState().recheckTemplateSize());
         return false;
       }
     },
@@ -12133,7 +12196,9 @@ var TiptapOverlayContent = ({ idx, getReferenceRect, getShadowElement, initialWi
       style: {
         ...floatingStyles,
         width: initialWidth,
-        minHeight: initialHeight,
+        // Do not use minHeight: initialHeight — it prevents the container from shrinking when
+        // line spacing (or content) is reduced while editing; height only updated on exit otherwise.
+        minHeight: 0,
         zIndex: 50,
         // Apply all container styles for exact matching
         fontFamily: styles.fontFamily,

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

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

package/dist/index.d.mts

@@ -290,6 +290,8 @@ interface MergeField {
 type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
 type OnExitCallback = () => void;
 type OnImageUploadCallback = (file: File) => Promise<ImageData>;
+type OnDuplicateCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+type OnDeleteCallback = (templateId: string) => void | Promise<void>;
 type PaidLevel = 0 | 1 | 2 | 3;
 
 interface EditorProps {
@@ -298,13 +300,15 @@ interface EditorProps {
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, data, }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, onDuplicate, onDelete, data, }: {
     templateId: string;
     initialTemplate: TemplateJSON;
     onSave?: OnSaveCallback;
     onToast?: OnToastCallback;
     onExit?: OnExitCallback;
     onImageUpload?: OnImageUploadCallback;
+    onDuplicate?: OnDuplicateCallback;
+    onDelete?: OnDeleteCallback;
     data?: {
         isPaidLevel?: PaidLevel;
         images?: ImageData[];
@@ -333,4 +337,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };
+export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };

package/dist/index.d.ts

@@ -290,6 +290,8 @@ interface MergeField {
 type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
 type OnExitCallback = () => void;
 type OnImageUploadCallback = (file: File) => Promise<ImageData>;
+type OnDuplicateCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
+type OnDeleteCallback = (templateId: string) => void | Promise<void>;
 type PaidLevel = 0 | 1 | 2 | 3;
 
 interface EditorProps {
@@ -298,13 +300,15 @@ interface EditorProps {
 }
 declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
 
-declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, data, }: {
+declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, onExit, onImageUpload, onDuplicate, onDelete, data, }: {
     templateId: string;
     initialTemplate: TemplateJSON;
     onSave?: OnSaveCallback;
     onToast?: OnToastCallback;
     onExit?: OnExitCallback;
     onImageUpload?: OnImageUploadCallback;
+    onDuplicate?: OnDuplicateCallback;
+    onDelete?: OnDeleteCallback;
     data?: {
         isPaidLevel?: PaidLevel;
         images?: ImageData[];
@@ -333,4 +337,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };
+export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };