@maildeno/editor 0.1.0

package/dist/composables/emailBuilder/core/useEmailBuilderDefault.d.ts

@@ -0,0 +1,507 @@
+export declare const useEmailBuilderDefaults: () => {
+    defaultProps: {
+        paragraph: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            content: string;
+            fontSize: number;
+            lineHeight: number;
+            color: string;
+            fontWeight: string;
+            fontFamily: string;
+            fontStyle: string;
+            letterSpacing: number;
+            backgroundColor: string;
+            backgroundGradient: {
+                useGradient: boolean;
+                solid: string;
+                gradient: {
+                    type: "linear";
+                    direction: string;
+                    colors: {
+                        color: string;
+                        position: number;
+                    }[];
+                };
+            };
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            textTransform: string;
+            textDecoration: string;
+            align: string;
+            mobile: {
+                fontSize: null;
+                lineHeight: null;
+                color: null;
+                fontWeight: null;
+                fontFamily: null;
+                fontStyle: null;
+                letterSpacing: null;
+                backgroundColor: null;
+                backgroundGradient: null;
+                textTransform: null;
+                textDecoration: null;
+                align: null;
+                margin: null;
+                padding: null;
+            };
+        };
+        heading: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            content: string;
+            level: string;
+            fontSize: number;
+            lineHeight: number;
+            color: string;
+            fontWeight: string;
+            fontFamily: string;
+            letterSpacing: number;
+            backgroundColor: string;
+            backgroundGradient: {
+                useGradient: boolean;
+                solid: string;
+                gradient: {
+                    type: "linear";
+                    direction: string;
+                    colors: {
+                        color: string;
+                        position: number;
+                    }[];
+                };
+            };
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            textTransform: string;
+            textDecoration: string;
+            align: string;
+            mobile: {
+                fontSize: null;
+                lineHeight: null;
+                color: null;
+                fontWeight: null;
+                fontFamily: null;
+                letterSpacing: null;
+                backgroundColor: null;
+                backgroundGradient: null;
+                textTransform: null;
+                textDecoration: null;
+                align: null;
+                margin: null;
+                padding: null;
+            };
+        };
+        image: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            src: string;
+            alt: string;
+            width: number;
+            height: string;
+            align: string;
+            link: string;
+            enabled: boolean;
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            borderRadius: number;
+            border: {
+                width: number;
+                color: string;
+                style: string;
+            };
+            mobile: {
+                width: null;
+                height: null;
+                align: null;
+                margin: null;
+                padding: null;
+                borderRadius: null;
+                border: null;
+            };
+        };
+        video: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            fallbackLink: string;
+            src: string;
+            coverImage: string;
+            alt: string;
+            width: number;
+            height: string;
+            align: string;
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            borderRadius: number;
+            border: {
+                width: number;
+                color: string;
+                style: string;
+            };
+            mobile: {
+                width: null;
+                height: null;
+                align: null;
+                margin: null;
+                padding: null;
+                borderRadius: null;
+                border: null;
+            };
+        };
+        list: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            content: string;
+            fontSize: number;
+            lineHeight: number;
+            fontFamily: string;
+            letterSpacing: number;
+            color: string;
+            backgroundColor: string;
+            backgroundGradient: {
+                useGradient: boolean;
+                solid: string;
+                gradient: {
+                    type: "linear";
+                    direction: string;
+                    colors: {
+                        color: string;
+                        position: number;
+                    }[];
+                };
+            };
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            itemSpacing: number;
+            mobile: {
+                fontSize: null;
+                lineHeight: null;
+                fontFamily: null;
+                letterSpacing: null;
+                color: null;
+                backgroundColor: null;
+                backgroundGradient: null;
+                margin: null;
+                padding: null;
+                itemSpacing: null;
+            };
+        };
+        button: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            text: string;
+            link: string;
+            backgroundColor: string;
+            backgroundGradient: {
+                useGradient: boolean;
+                solid: string;
+                gradient: {
+                    type: "linear";
+                    direction: string;
+                    colors: {
+                        color: string;
+                        position: number;
+                    }[];
+                };
+            };
+            color: string;
+            fontSize: number;
+            fontWeight: string;
+            fontFamily: string;
+            letterSpacing: number;
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            borderRadius: number;
+            border: {
+                width: number;
+                color: string;
+                style: string;
+            };
+            align: string;
+            icon: string;
+            iconAlt: string;
+            iconPosition: string;
+            iconSize: number;
+            iconGap: number;
+            mobile: {
+                fontSize: null;
+                fontWeight: null;
+                fontFamily: null;
+                letterSpacing: null;
+                backgroundColor: null;
+                backgroundGradient: null;
+                color: null;
+                padding: null;
+                margin: null;
+                borderRadius: null;
+                border: null;
+                align: null;
+            };
+        };
+        anchor: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            text: string;
+            link: string;
+            color: string;
+            fontSize: number;
+            fontWeight: string;
+            fontFamily: string;
+            letterSpacing: number;
+            textDecoration: string;
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            align: string;
+            mobile: {
+                fontSize: null;
+                fontWeight: null;
+                fontFamily: null;
+                letterSpacing: null;
+                color: null;
+                textDecoration: null;
+                margin: null;
+                padding: null;
+                align: null;
+            };
+        };
+        divider: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            backgroundColor: string;
+            backgroundGradient: {
+                useGradient: boolean;
+                solid: string;
+                gradient: {
+                    type: "linear";
+                    direction: string;
+                    colors: {
+                        color: string;
+                        position: number;
+                    }[];
+                };
+            };
+            height: number;
+            width: number;
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            align: string;
+            mobile: {
+                backgroundColor: null;
+                backgroundGradient: null;
+                height: null;
+                width: null;
+                margin: null;
+                padding: null;
+                align: null;
+            };
+        };
+        spacer: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            height: number;
+            backgroundColor: string;
+            backgroundGradient: {
+                useGradient: boolean;
+                solid: string;
+                gradient: {
+                    type: "linear";
+                    direction: string;
+                    colors: {
+                        color: string;
+                        position: number;
+                    }[];
+                };
+            };
+            mobile: {
+                height: null;
+                backgroundColor: null;
+                backgroundGradient: null;
+            };
+        };
+        menu: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            items: {
+                label: string;
+                link: string;
+                enabled: boolean;
+            }[];
+            fontSize: number;
+            lineHeight: number;
+            fontWeight: string;
+            fontFamily: string;
+            fontStyle: string;
+            letterSpacing: number;
+            color: string;
+            textTransform: string;
+            textDecoration: string;
+            backgroundColor: string;
+            backgroundGradient: {
+                useGradient: boolean;
+                solid: string;
+                gradient: {
+                    type: "linear";
+                    direction: string;
+                    colors: {
+                        color: string;
+                        position: number;
+                    }[];
+                };
+            };
+            spacing: number;
+            align: string;
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            mobileStack: boolean;
+            mobile: {
+                fontSize: null;
+                lineHeight: null;
+                fontWeight: null;
+                fontFamily: null;
+                fontStyle: null;
+                letterSpacing: null;
+                color: null;
+                textTransform: null;
+                textDecoration: null;
+                backgroundColor: null;
+                backgroundGradient: null;
+                spacing: null;
+                align: null;
+                margin: null;
+                padding: null;
+            };
+        };
+        socials: {
+            visibility: import('./config/componentConfig').VisibilityConfig;
+            desktopHide: boolean;
+            mobileHide: boolean;
+            platforms: {
+                name: string;
+                link: string;
+                enabled: boolean;
+                icon: string;
+            }[];
+            iconSize: number;
+            spacing: number;
+            align: string;
+            margin: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            padding: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            mobile: {
+                iconSize: null;
+                spacing: null;
+                align: null;
+                margin: null;
+                padding: null;
+            };
+        };
+    };
+};

package/dist/composables/emailBuilder/core/useEmailBuilderOperations.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Converts a human-readable label to a snake_case name.
+ * e.g. "Hero Home Section" → "hero_home_section"
+ */
+export declare const toRowName: (label: string) => string;
+/**
+ * Converts a snake_case row name to a human-readable display name.
+ * e.g. "hero_home_section" → "Hero Home Section"
+ */
+export declare const displayName: (name: string) => string;
+export declare const useEmailBuilderOperations: (rows: any, selectedId: any, defaultProps: any, saveToHistoryFn: (action: string) => void, saveToHistoryDebouncedFn?: (action: string) => void) => {
+    addRow: (layout: number | number[], silent?: boolean) => void;
+    addNestedRow: (parentRowId: any, columnId: string, layout: number | number[], insertIndex?: number) => void;
+    findRow: (id: any) => any;
+    deleteRow: (id: any) => void;
+    moveRow: (rowId: any, direction: "up" | "down") => void;
+    moveNestedRow: (rowId: any, targetRowId: any, targetColumnId: string | null, targetIndex: number) => void;
+    reorderRows: (fromIndex: any, toIndex: any, silent?: boolean) => void;
+    addSpacer: (silent?: boolean) => void;
+    duplicateRow: (rowId: any) => void;
+    duplicateRowSpacer: (spacerId: any) => void;
+    addComponent: (rowId: any, columnId: string, type: string) => void;
+    addComponentAtIndex: (rowId: any, columnId: string, type: string, index: any) => void;
+    deleteComponent: (id: any) => void;
+    moveComponent: (componentId: any, direction: "up" | "down") => void;
+    moveComponentBetweenColumns: (componentId: any, targetRowId: any, targetColumnId: string, targetIndex: any) => void;
+    findComponent: (id: any) => any;
+    updateComponent: (id: any, props: any) => void;
+    duplicateComponent: (componentId: any) => void;
+    rebuildIdRegistry: () => void;
+};

package/dist/composables/emailBuilder/core/useEmailBuilderVisibility.d.ts

@@ -0,0 +1,31 @@
+export type VisibilityOperator = "==" | "!=" | "contains" | "not_contains" | "starts_with" | "ends_with" | "in" | "not_in" | ">" | "<" | ">=" | "<=" | "is_empty" | "is_not_empty" | "date_before" | "date_after" | "date_on";
+export type VisibilityRule = {
+    tag: string;
+    operator: VisibilityOperator;
+    value: string;
+};
+export type VisibilityGroup = {
+    match: "all" | "any";
+    rules: VisibilityRule[];
+};
+export type VisibilityConfig = {
+    enabled: boolean;
+    match: "all" | "any";
+    rules: VisibilityRule[];
+    groups?: VisibilityGroup[];
+};
+export declare const VALUELESS_OPERATORS: VisibilityOperator[];
+export declare const LIST_OPERATORS: VisibilityOperator[];
+export declare const NUMERIC_OPERATORS: VisibilityOperator[];
+export declare const DATE_OPERATORS: VisibilityOperator[];
+export declare const OPERATOR_OPTIONS: {
+    label: string;
+    value: VisibilityOperator;
+}[];
+export declare const evaluateRule: (rule: VisibilityRule, context: Record<string, string>) => boolean;
+export declare const evaluateGroup: (group: VisibilityGroup, context: Record<string, string>) => boolean;
+export declare const useEmailBuilderVisibility: () => {
+    evaluateVisibility: (visibility: VisibilityConfig | undefined, context: Record<string, string>) => boolean;
+    evaluateRule: (rule: VisibilityRule, context: Record<string, string>) => boolean;
+    evaluateGroup: (group: VisibilityGroup, context: Record<string, string>) => boolean;
+};

package/dist/composables/emailBuilder/export/actions/download.d.ts

@@ -0,0 +1,24 @@
+export type DownloadMimeType = "text/html" | "text/plain" | "application/json";
+interface DownloadOptions {
+    content: string;
+    filename: string;
+    mimeType: DownloadMimeType;
+}
+/**
+ * Triggers a browser file download with the given content.
+ * Uses a short-lived object URL which is immediately revoked after the
+ * anchor click to avoid memory leaks.
+ */
+export declare const downloadFile: ({ content, filename, mimeType, }: DownloadOptions) => void;
+/**
+ * Derives a safe kebab-case filename stem from a template name.
+ * e.g. "My Template Name" → "my-template-name"
+ */
+export declare const toFileStem: (templateName: string) => string;
+/**
+ * Appends the export mode suffix to a filename stem.
+ * "wrap" mode files are "master" templates for the ESP;
+ * "prune" mode files are "snapshot" outputs for a specific audience.
+ */
+export declare const withModeSuffix: (stem: string, mode: "prune" | "wrap") => string;
+export {};

package/dist/composables/emailBuilder/export/generators/html.d.ts

@@ -0,0 +1,3 @@
+export declare const htmlGenerator: () => {
+    generateHTMLComponent: (comp: any) => string;
+};

package/dist/composables/emailBuilder/export/generators/mjml.d.ts

@@ -0,0 +1,6 @@
+export declare const mjmlGenerator: () => {
+    generateMJMLComponent: (comp: any) => string;
+    assembleMJML: (templateName: string, rowsMjml: string, canvasStyles: any, googleFontUrl: string, mobileOverridesCss: string, mobileBreakpoint?: number, backgroundStylesCss?: string) => string;
+    resolveSolidColor: (bgGradient: any, bgColorFallback: string) => string;
+    padAttr: (padding?: any) => string;
+};

package/dist/composables/emailBuilder/export/generators/react-email.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Normalize self-closing `<br>` to `<br />` for JSX compatibility.
+ * Handles: <br>, <br/>, <br  /> → all become <br />
+ */
+export declare const normalizeBrTags: (html: string) => string;
+/**
+ * Normalize font-family CSS values by stripping wrapping single quotes
+ * from individual font names.
+ *
+ * Examples:
+ *   "'Roboto', Arial"           → "Roboto, Arial"
+ *   "'Open Sans', 'Helvetica'"  → "Open Sans, Helvetica"
+ *   "Arial, sans-serif"         → "Arial, sans-serif"  (unchanged)
+ *
+ * The pattern targets a single quote that either:
+ *   - immediately follows a colon+optional-space (start of value), OR
+ *   - immediately follows a comma+optional-space (subsequent font name)
+ *   - immediately precedes a comma, OR
+ *   - is the last character before the end of the string / semicolon
+ */
+export declare const normalizeFontFamily: (value: string) => string;
+/**
+ * Apply all normalizations to a raw CSS string or inline style value.
+ * Call this on any style attribute value before writing it to JSX output.
+ *
+ * Currently applies:
+ *   - normalizeFontFamily  (strips wrapping quotes from font-family tokens)
+ *
+ * Note: normalizeBrTags is applied on the final HTML string, not per-style.
+ */
+export declare const normalizeStyleValue: (style: string) => string;
+/**
+ * Normalize all HTML inline `style="..."` attributes inside a rich-text HTML
+ * string to JSX `style={{ ... }}` object syntax.
+ *
+ * This is required because content from the rich-text editor is emitted with
+ * plain HTML style strings (e.g. `<span style="color: rgb(87, 84, 78);">`),
+ * which are invalid in JSX. This normalizer rewrites every such attribute to
+ * the React object form (e.g. `<span style={{ color: "rgb(87, 84, 78)" }}`).
+ *
+ * Additionally applies:
+ *   - normalizeBrTags  — <br> → <br />
+ *   - normalizeAttributesToReact — converts React-incompatible attributes
+ *   - normalizeStyleValue per declaration (font-family quote stripping, etc.)
+ *
+ * Safe to call on strings that have already been br-normalized or that contain
+ * no inline style attributes — both cases are handled without mutation.
+ *
+ * @param html  Raw HTML string from the rich-text editor
+ * @returns     HTML string with all style attributes rewritten for JSX
+ *
+ * @example
+ * normalizeInlineStylesToReact(
+ *   '<span style="color: rgb(87, 84, 78); font-size: 14px;">Hello</span>'
+ * )
+ * // → '<span style={{ color: "rgb(87, 84, 78)", fontSize: "14px" }}>Hello</span>'
+ */
+export declare const normalizeInlineStylesToReact: (html: string) => string;
+export declare const reactEmailGenerator: () => {
+    generateReactEmailComponent: (comp: any) => string;
+};