react-email-studio 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.4.0] - 2026-05-08
+
+### Added
+
+- **`ReactEmailEditor.jsonToHtml(json, opts?)`**: static method on the component for converting a saved design (object or JSON string) to a full HTML email document — same implementation as the standalone `jsonToHtml` export, no extra setup needed.
+
+### Changed
+
+- **Empty cell drop affordance**: the "Drop here" strip is now a fixed **45px** tall row (top-level + nested columns) instead of a tall column, making compact layouts easier to scan and drop into.
+
 ## [3.1.1] - 2026-04-30
 
 ### Added

package/dist/index.cjs

@@ -31,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   EmailPreviewModal: () => PreviewModal,
-  ReactEmailEditor: () => ReactEmailEditor,
+  ReactEmailEditor: () => ReactEmailEditor2,
   base64ToUtf8: () => base64ToUtf8,
   emailPreviewDevices: () => DEVICES,
   extractHtmlForDesign: () => extractHtmlForDesign,
@@ -2244,7 +2244,7 @@ function layoutSplitChromeBorder(_C, preview) {
   };
 }
 var CONTENT_BLOCK_HOVER_BORDER = "1px dotted rgba(148, 163, 184, 0.5)";
-var EMPTY_CELL_COLUMN_MIN_H = "min(320px, 42vh)";
+var DROP_HERE_HEIGHT_PX = 45;
 function blockLinkCaptureHandler(preview, e) {
   if (preview) return;
   const t = e.target;
@@ -2604,7 +2604,7 @@ function NestedRowBlock({
             style: {
               flex: p.ratios?.[ici] ?? 1,
               minWidth: 0,
-              minHeight: preview ? void 0 : EMPTY_CELL_COLUMN_MIN_H,
+              minHeight: preview ? void 0 : DROP_HERE_HEIGHT_PX,
               display: "flex",
               flexDirection: "column",
               ...layoutSplitChromeBorder(C, preview),
@@ -2834,10 +2834,9 @@ function Cell({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       style: {
-        flex: cellEmpty ? 1 : void 0,
         display: "flex",
         flexDirection: "column",
-        minHeight: preview ? void 0 : cellEmpty ? 0 : 44,
+        minHeight: preview ? void 0 : cellEmpty ? DROP_HERE_HEIGHT_PX : 44,
         borderRadius: 4,
         ...preview ? {} : insertAt !== null && !cellEmpty ? { border: `1px dotted ${C.accent}`, background: `${C.accent}0a` } : {},
         background: insertAt !== null && !cellEmpty ? `${C.accent}0a` : "transparent",
@@ -2850,12 +2849,14 @@ function Cell({
           "div",
           {
             style: {
-              flex: 1,
+              height: DROP_HERE_HEIGHT_PX,
+              minHeight: DROP_HERE_HEIGHT_PX,
+              maxHeight: DROP_HERE_HEIGHT_PX,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              margin: 4,
-              borderRadius: 8,
+              margin: 0,
+              borderRadius: 6,
               boxSizing: "border-box",
               textAlign: "center",
               userSelect: "none",
@@ -2864,7 +2865,7 @@ function Cell({
               background: insertAt !== null ? `${C.accent}14` : `${C.canvas}`,
               boxShadow: insertAt !== null ? `inset 0 0 0 1px ${C.accent}22` : `inset 0 0 0 1px ${C.border}99`,
               color: insertAt !== null ? C.accent2 : C.muted,
-              fontSize: 11,
+              fontSize: 10,
               fontWeight: insertAt !== null ? 700 : 500,
               letterSpacing: "0.02em"
             },
@@ -2959,7 +2960,7 @@ function LayoutRow({
             id: editorId ? `${editorId}-col-${row.id}-${ci}` : void 0,
             style: {
               flex: row.ratios[ci] ?? 1,
-              minHeight: preview ? 50 : EMPTY_CELL_COLUMN_MIN_H,
+              minHeight: preview ? 50 : DROP_HERE_HEIGHT_PX,
               display: "flex",
               flexDirection: "column",
               ...backgroundLayerStyle(cS),
@@ -6495,8 +6496,8 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var RIGHT_RAIL_DEFAULT_W = 328;
 var RIGHT_RAIL_MIN_W = 260;
 var RIGHT_RAIL_MAX_W = 720;
-var ReactEmailEditor = (0, import_react8.forwardRef)(
-  function ReactEmailEditor2({
+var ReactEmailEditorComponent = (0, import_react8.forwardRef)(
+  function ReactEmailEditor({
     minHeight = "100vh",
     editorId = "email-editor",
     onLoad,
@@ -8148,6 +8149,7 @@ var ReactEmailEditor = (0, import_react8.forwardRef)(
     );
   }
 );
+var ReactEmailEditor2 = Object.assign(ReactEmailEditorComponent, { jsonToHtml });
 
 // src/lib/htmlToEmailDesign.ts
 var pad = (n) => ({ top: n, right: n, bottom: n, left: n });