npm - react-email-studio - Versions diffs - 2.0.0 - Mend

react-email-studio 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/index.d.cts ADDED Viewed

@@ -0,0 +1,407 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+declare const THEMES: {
+    /** White chrome, dark type */
+    light: {
+        bg: string;
+        sidebar: string;
+        canvas: string;
+        surface: string;
+        border: string;
+        accent: string;
+        accent2: string;
+        text: string;
+        muted: string;
+        danger: string;
+        success: string;
+        warn: string;
+        inputBg: string;
+        toolbarBg: string;
+    };
+    /** Dark chrome, light type */
+    dark: {
+        bg: string;
+        sidebar: string;
+        canvas: string;
+        surface: string;
+        border: string;
+        accent: string;
+        accent2: string;
+        text: string;
+        muted: string;
+        danger: string;
+        success: string;
+        warn: string;
+        inputBg: string;
+        toolbarBg: string;
+    };
+    /** @deprecated aliases — same palette family */
+    modern_light: {
+        bg: string;
+        sidebar: string;
+        canvas: string;
+        surface: string;
+        border: string;
+        accent: string;
+        accent2: string;
+        text: string;
+        muted: string;
+        danger: string;
+        success: string;
+        warn: string;
+        inputBg: string;
+        toolbarBg: string;
+    };
+    modern_dark: {
+        bg: string;
+        sidebar: string;
+        canvas: string;
+        surface: string;
+        border: string;
+        accent: string;
+        accent2: string;
+        text: string;
+        muted: string;
+        danger: string;
+        success: string;
+        warn: string;
+        inputBg: string;
+        toolbarBg: string;
+    };
+};
+/** Sidebar palette groups: order = top to bottom. Each block uses `paletteGroup` + `paletteOrder` (ascending within group). */
+declare const BLOCK_PALETTE_GROUPS: readonly [{
+    readonly key: "text";
+    readonly labelKey: "blockPaletteGroupText";
+}, {
+    readonly key: "structure";
+    readonly labelKey: "blockPaletteGroupStructure";
+}, {
+    readonly key: "media";
+    readonly labelKey: "blockPaletteGroupMedia";
+}, {
+    readonly key: "actions";
+    readonly labelKey: "blockPaletteGroupActions";
+}, {
+    readonly key: "widgets";
+    readonly labelKey: "blockPaletteGroupWidgets";
+}];
+type BlockPaletteGroupKey = (typeof BLOCK_PALETTE_GROUPS)[number]["key"];
+/** Options passed to {@link designToHtml} and {@link jsonToHtml} (from `emailDesignJson`). */
+type EmailHtmlOptions = {
+    /** Injected as a `<style>` block in the document `<head>`. */
+    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;
+    mergeTags?: {
+        name: string;
+        value: 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;
+    bottom?: number;
+    left?: number;
+};
+type EmailDocumentSettings = {
+    width?: number;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundRepeat?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    /** 3-stop linear gradient (editor-specific extension). */
+    backgroundGradient?: {
+        angle?: number;
+        colors?: [string, string, string];
+        stops?: [number, number, number];
+    };
+    contentBackgroundColor?: string;
+    contentBackgroundImage?: string;
+    contentBackgroundRepeat?: string;
+    contentBackgroundSize?: string;
+    contentBackgroundPosition?: string;
+    /** 3-stop linear gradient (editor-specific extension). */
+    contentBackgroundGradient?: {
+        angle?: number;
+        colors?: [string, string, string];
+        stops?: [number, number, number];
+    };
+    fontFamily?: string;
+    lineHeightBase?: number;
+    color?: string;
+    responsive?: boolean;
+    rtl?: boolean;
+};
+type RowLayout = {
+    columns?: number;
+    gap?: number;
+    stackOnMobile?: boolean;
+    align?: "left" | "center" | "right";
+};
+type RowStyles = {
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundRepeat?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    /** 3-stop linear gradient (editor-specific extension). */
+    backgroundGradient?: {
+        angle?: number;
+        colors?: [string, string, string];
+        stops?: [number, number, number];
+    };
+    padding?: Padding;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    textAlign?: "left" | "center" | "right" | "justify";
+};
+type ColumnLayout = {
+    width?: string;
+    verticalAlign?: "top" | "middle" | "bottom";
+    mobileWidth?: string;
+};
+type ColumnBorderRadius = number | {
+    tl?: number;
+    tr?: number;
+    br?: number;
+    bl?: number;
+};
+type ColumnStyles = {
+    padding?: Padding;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundRepeat?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    /** 3-stop linear gradient (editor-specific extension). */
+    backgroundGradient?: {
+        angle?: number;
+        colors?: [string, string, string];
+        stops?: [number, number, number];
+    };
+    /** Uniform px or per-corner (matches block border radius in the editor). */
+    borderRadius?: ColumnBorderRadius;
+};
+type BlockBase = {
+    id?: string;
+    type: string;
+    content?: Record<string, unknown>;
+    styles?: Record<string, unknown>;
+    behavior?: Record<string, unknown>;
+    responsive?: Record<string, unknown>;
+};
+type EmailDocumentColumn = {
+    id?: string;
+    layout?: ColumnLayout;
+    styles?: ColumnStyles;
+    blocks?: BlockBase[];
+};
+type EmailDocumentRow = {
+    id?: string;
+    type?: "row";
+    layout?: RowLayout;
+    styles?: RowStyles;
+    columns?: EmailDocumentColumn[];
+};
+type EmailDocument = {
+    type: "email_document";
+    settings?: EmailDocumentSettings;
+    rows?: EmailDocumentRow[];
+    globalStyles?: Record<string, unknown>;
+    responsive?: Record<string, unknown>;
+};
+/** Re-export for consumers typing `jsonToHtml` options. */
+type JsonToHtmlOptions = EmailHtmlOptions;
+/**
+ * Design object or JSON string → full HTML email document (preview / send).
+ * Strings are parsed with `JSON.parse` then normalized; invalid JSON returns `""`.
+ */
+declare function jsonToHtml(designInput: unknown, opts?: JsonToHtmlOptions): string;
+declare function utf8ToBase64(raw: string): string;
+declare function base64ToUtf8(b64: string): string;
+type MobilePreviewVariant = "iphone" | "android";
+type EmailPreviewModalProps = {
+    html: string;
+    contentWidth?: number;
+    rowCount?: number;
+    blockCount?: number;
+    editorZoom?: number;
+    locale?: string;
+    initialDevice?: string;
+    /** Phone shell in mobile / split view: iPhone vs Android frame + viewport width. */
+    initialMobileVariant?: MobilePreviewVariant;
+    onClose: () => void;
+    C: Record<string, string>;
+    /** Shown as the header line (e.g. email subject). */
+    title?: string;
+    secondaryActionLabel?: string;
+    onSecondaryAction?: () => void;
+};
+declare const DEVICES: ({
+    key: string;
+    label: string;
+    maxW: number;
+    screenW: null;
+    screenH: null;
+    frame: null;
+    chrome?: undefined;
+} | {
+    key: string;
+    label: string;
+    maxW: number;
+    screenW: number;
+    screenH: number;
+    chrome: {
+        body: {
+            width: number;
+            borderRadius: number;
+            background: string;
+            padding: string;
+            boxShadow: string;
+        };
+        topBar: {
+            height: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            marginBottom: number;
+            paddingTop?: undefined;
+        };
+        topBarInner: {
+            width: number;
+            height: number;
+            borderRadius: number;
+            background: string;
+        };
+        bottomBar: {
+            height: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            marginTop: number;
+        };
+        homeIndicator: {
+            width: number;
+            height: number;
+            borderRadius: number;
+            background: string;
+        };
+        screen: {
+            borderRadius: number;
+            overflow: string;
+            border: string;
+        };
+        notch?: undefined;
+        sideButtons?: undefined;
+    };
+    frame?: undefined;
+} | {
+    key: string;
+    label: string;
+    maxW: number;
+    screenW: number;
+    screenH: number;
+    chrome: {
+        body: {
+            width: number;
+            borderRadius: number;
+            background: string;
+            padding: string;
+            boxShadow: string;
+        };
+        notch: boolean;
+        sideButtons: boolean;
+        topBar: {
+            height: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            paddingTop: number;
+            marginBottom: number;
+        };
+        topBarInner: null;
+        bottomBar: {
+            height: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            marginTop: number;
+        };
+        homeIndicator: {
+            width: number;
+            height: number;
+            borderRadius: number;
+            background: string;
+        };
+        screen: {
+            borderRadius: number;
+            overflow: string;
+            border: string;
+        };
+    };
+    frame?: undefined;
+})[];
+declare function PreviewModal({ html, contentWidth, rowCount, blockCount, editorZoom, locale, initialDevice, initialMobileVariant, onClose, C, title, secondaryActionLabel, onSecondaryAction, }: EmailPreviewModalProps): react_jsx_runtime.JSX.Element;
+export { type BlockBase, type EmailDocument, type EmailDocumentColumn, type EmailDocumentRow, type EmailDocumentSettings, type EmailHtmlOptions, PreviewModal as EmailPreviewModal, type EmailPreviewModalProps, type JsonToHtmlOptions, type MobilePreviewVariant, ReactEmailEditor, type ReactEmailEditorOptions, type ReactEmailEditorProps, type ReactEmailEditorRef, base64ToUtf8, DEVICES as emailPreviewDevices, jsonToHtml, utf8ToBase64 };