react-email-studio 3.3.0 → 3.4.0

package/dist/index.d.cts

@@ -96,59 +96,6 @@ type EmailHtmlOptions = {
     customCSS?: string;
 };
 
-/** Theme color tokens (subset used by the editor chrome). */
-type ThemeColors = (typeof THEMES)["light"];
-/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
-type ReactEmailEditorOptions = EmailHtmlOptions & {
-    appearance?: {
-        theme?: string;
-        /** Shallow merge over the active theme (e.g. accent border). */
-        colors?: Partial<ThemeColors>;
-        /** Extra named palettes; keys appear in Settings → Color scheme. */
-        customThemes?: Record<string, ThemeColors>;
-    };
-    locale?: string;
-    features?: {
-        autoSave?: {
-            enabled?: boolean;
-            interval?: number;
-        };
-    };
-    tools?: Record<string, {
-        enabled?: boolean;
-    }>;
-    /** Optional labels for block-library sections (row layouts + content blocks). */
-    blockLibrary?: {
-        groupHeadings?: {
-            blocks?: string;
-        };
-        /** Override default palette group titles (keys: text, structure, media, actions, widgets). */
-        paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
-    };
-};
-interface ReactEmailEditorRef {
-    loadJson(input: string | Record<string, unknown>): void;
-    /** Calls `cb` with the design as a JSON string (new `email_document` schema). */
-    exportJson(cb: (json: string) => void, pretty?: boolean): void;
-}
-type ReactEmailEditorProps = {
-    minHeight?: string;
-    editorId?: string;
-    options?: ReactEmailEditorOptions;
-    style?: CSSProperties;
-    onLoad?: (api: ReactEmailEditorRef) => void;
-    onReady?: (api: ReactEmailEditorRef) => void;
-    onUpload?: (file: File) => Promise<string>;
-    templates?: {
-        name: string;
-        design: unknown;
-        thumbnail?: string;
-    }[];
-    hideTemplates?: boolean;
-    children?: ReactNode;
-};
-declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>>;
-
 type Padding = {
     top?: number;
     right?: number;
@@ -286,6 +233,61 @@ type JsonToHtmlOptions = EmailHtmlOptions;
  */
 declare function jsonToHtml(designInput: unknown, opts?: JsonToHtmlOptions): string;
 
+/** Theme color tokens (subset used by the editor chrome). */
+type ThemeColors = (typeof THEMES)["light"];
+/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
+type ReactEmailEditorOptions = EmailHtmlOptions & {
+    appearance?: {
+        theme?: string;
+        /** Shallow merge over the active theme (e.g. accent border). */
+        colors?: Partial<ThemeColors>;
+        /** Extra named palettes; keys appear in Settings → Color scheme. */
+        customThemes?: Record<string, ThemeColors>;
+    };
+    locale?: string;
+    features?: {
+        autoSave?: {
+            enabled?: boolean;
+            interval?: number;
+        };
+    };
+    tools?: Record<string, {
+        enabled?: boolean;
+    }>;
+    /** Optional labels for block-library sections (row layouts + content blocks). */
+    blockLibrary?: {
+        groupHeadings?: {
+            blocks?: string;
+        };
+        /** Override default palette group titles (keys: text, structure, media, actions, widgets). */
+        paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
+    };
+};
+interface ReactEmailEditorRef {
+    loadJson(input: string | Record<string, unknown>): void;
+    /** Calls `cb` with the design as a JSON string (new `email_document` schema). */
+    exportJson(cb: (json: string) => void, pretty?: boolean): void;
+}
+type ReactEmailEditorProps = {
+    minHeight?: string;
+    editorId?: string;
+    options?: ReactEmailEditorOptions;
+    style?: CSSProperties;
+    onLoad?: (api: ReactEmailEditorRef) => void;
+    onReady?: (api: ReactEmailEditorRef) => void;
+    onUpload?: (file: File) => Promise<string>;
+    templates?: {
+        name: string;
+        design: unknown;
+        thumbnail?: string;
+    }[];
+    hideTemplates?: boolean;
+    children?: ReactNode;
+};
+declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>> & {
+    jsonToHtml: typeof jsonToHtml;
+};
+
 /**
  * Pull usable HTML from a full document (`<!DOCTYPE` / `<html>`) or a fragment string.
  */

package/dist/index.d.ts

@@ -96,59 +96,6 @@ type EmailHtmlOptions = {
     customCSS?: string;
 };
 
-/** Theme color tokens (subset used by the editor chrome). */
-type ThemeColors = (typeof THEMES)["light"];
-/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
-type ReactEmailEditorOptions = EmailHtmlOptions & {
-    appearance?: {
-        theme?: string;
-        /** Shallow merge over the active theme (e.g. accent border). */
-        colors?: Partial<ThemeColors>;
-        /** Extra named palettes; keys appear in Settings → Color scheme. */
-        customThemes?: Record<string, ThemeColors>;
-    };
-    locale?: string;
-    features?: {
-        autoSave?: {
-            enabled?: boolean;
-            interval?: number;
-        };
-    };
-    tools?: Record<string, {
-        enabled?: boolean;
-    }>;
-    /** Optional labels for block-library sections (row layouts + content blocks). */
-    blockLibrary?: {
-        groupHeadings?: {
-            blocks?: string;
-        };
-        /** Override default palette group titles (keys: text, structure, media, actions, widgets). */
-        paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
-    };
-};
-interface ReactEmailEditorRef {
-    loadJson(input: string | Record<string, unknown>): void;
-    /** Calls `cb` with the design as a JSON string (new `email_document` schema). */
-    exportJson(cb: (json: string) => void, pretty?: boolean): void;
-}
-type ReactEmailEditorProps = {
-    minHeight?: string;
-    editorId?: string;
-    options?: ReactEmailEditorOptions;
-    style?: CSSProperties;
-    onLoad?: (api: ReactEmailEditorRef) => void;
-    onReady?: (api: ReactEmailEditorRef) => void;
-    onUpload?: (file: File) => Promise<string>;
-    templates?: {
-        name: string;
-        design: unknown;
-        thumbnail?: string;
-    }[];
-    hideTemplates?: boolean;
-    children?: ReactNode;
-};
-declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>>;
-
 type Padding = {
     top?: number;
     right?: number;
@@ -286,6 +233,61 @@ type JsonToHtmlOptions = EmailHtmlOptions;
  */
 declare function jsonToHtml(designInput: unknown, opts?: JsonToHtmlOptions): string;
 
+/** Theme color tokens (subset used by the editor chrome). */
+type ThemeColors = (typeof THEMES)["light"];
+/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
+type ReactEmailEditorOptions = EmailHtmlOptions & {
+    appearance?: {
+        theme?: string;
+        /** Shallow merge over the active theme (e.g. accent border). */
+        colors?: Partial<ThemeColors>;
+        /** Extra named palettes; keys appear in Settings → Color scheme. */
+        customThemes?: Record<string, ThemeColors>;
+    };
+    locale?: string;
+    features?: {
+        autoSave?: {
+            enabled?: boolean;
+            interval?: number;
+        };
+    };
+    tools?: Record<string, {
+        enabled?: boolean;
+    }>;
+    /** Optional labels for block-library sections (row layouts + content blocks). */
+    blockLibrary?: {
+        groupHeadings?: {
+            blocks?: string;
+        };
+        /** Override default palette group titles (keys: text, structure, media, actions, widgets). */
+        paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
+    };
+};
+interface ReactEmailEditorRef {
+    loadJson(input: string | Record<string, unknown>): void;
+    /** Calls `cb` with the design as a JSON string (new `email_document` schema). */
+    exportJson(cb: (json: string) => void, pretty?: boolean): void;
+}
+type ReactEmailEditorProps = {
+    minHeight?: string;
+    editorId?: string;
+    options?: ReactEmailEditorOptions;
+    style?: CSSProperties;
+    onLoad?: (api: ReactEmailEditorRef) => void;
+    onReady?: (api: ReactEmailEditorRef) => void;
+    onUpload?: (file: File) => Promise<string>;
+    templates?: {
+        name: string;
+        design: unknown;
+        thumbnail?: string;
+    }[];
+    hideTemplates?: boolean;
+    children?: ReactNode;
+};
+declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>> & {
+    jsonToHtml: typeof jsonToHtml;
+};
+
 /**
  * Pull usable HTML from a full document (`<!DOCTYPE` / `<html>`) or a fragment string.
  */

package/dist/index.js

@@ -2210,7 +2210,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;
@@ -2570,7 +2570,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),
@@ -2800,10 +2800,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",
@@ -2816,12 +2815,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",
@@ -2830,7 +2831,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"
             },
@@ -2925,7 +2926,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),
@@ -6508,8 +6509,8 @@ import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-ru
 var RIGHT_RAIL_DEFAULT_W = 328;
 var RIGHT_RAIL_MIN_W = 260;
 var RIGHT_RAIL_MAX_W = 720;
-var ReactEmailEditor = forwardRef(
-  function ReactEmailEditor2({
+var ReactEmailEditorComponent = forwardRef(
+  function ReactEmailEditor({
     minHeight = "100vh",
     editorId = "email-editor",
     onLoad,
@@ -8161,6 +8162,7 @@ var ReactEmailEditor = forwardRef(
     );
   }
 );
+var ReactEmailEditor2 = Object.assign(ReactEmailEditorComponent, { jsonToHtml });
 
 // src/lib/htmlToEmailDesign.ts
 var pad = (n) => ({ top: n, right: n, bottom: n, left: n });
@@ -8229,7 +8231,7 @@ function htmlToEmailDesignTemplate(html) {
 }
 export {
   PreviewModal as EmailPreviewModal,
-  ReactEmailEditor,
+  ReactEmailEditor2 as ReactEmailEditor,
   base64ToUtf8,
   DEVICES as emailPreviewDevices,
   extractHtmlForDesign,