@parathantl/react-email-editor 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,515 @@
+import * as React$1 from 'react';
+import React__default, { ReactNode, ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _tiptap_core from '@tiptap/core';
+import { Editor, Node } from '@tiptap/core';
+import * as _tiptap_extension_underline from '@tiptap/extension-underline';
+
+type BlockType = 'text' | 'button' | 'image' | 'divider' | 'spacer' | 'social' | 'html' | 'video' | 'heading' | 'countdown' | 'menu' | 'hero';
+interface TextBlockProperties {
+    content: string;
+    fontFamily: string;
+    fontSize: string;
+    color: string;
+    lineHeight: string;
+    padding: string;
+    align: 'left' | 'center' | 'right' | 'justify';
+    fontWeight: string;
+    textTransform: string;
+    letterSpacing: string;
+}
+interface ButtonBlockProperties {
+    text: string;
+    href: string;
+    backgroundColor: string;
+    color: string;
+    fontFamily: string;
+    fontSize: string;
+    borderRadius: string;
+    padding: string;
+    innerPadding: string;
+    align: 'left' | 'center' | 'right';
+    width: string;
+    fontWeight: string;
+    textTransform: string;
+    letterSpacing: string;
+}
+interface ImageBlockProperties {
+    src: string;
+    alt: string;
+    href: string;
+    width: string;
+    height: string;
+    padding: string;
+    align: 'left' | 'center' | 'right';
+    fluidOnMobile: boolean;
+}
+interface DividerBlockProperties {
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: 'solid' | 'dashed' | 'dotted';
+    padding: string;
+    width: string;
+}
+interface SpacerBlockProperties {
+    height: string;
+}
+interface SocialElement {
+    name: string;
+    href: string;
+    src?: string;
+    content?: string;
+    backgroundColor?: string;
+    color?: string;
+}
+interface SocialBlockProperties {
+    elements: SocialElement[];
+    mode: 'horizontal' | 'vertical';
+    align: 'left' | 'center' | 'right';
+    iconSize: string;
+    iconPadding: string;
+    padding: string;
+    fontSize: string;
+    color: string;
+    borderRadius: string;
+}
+interface HtmlBlockProperties {
+    content: string;
+    padding: string;
+}
+interface VideoBlockProperties {
+    src: string;
+    thumbnailUrl: string;
+    alt: string;
+    padding: string;
+    align: 'left' | 'center' | 'right';
+}
+interface HeadingBlockProperties {
+    content: string;
+    level: 'h1' | 'h2' | 'h3' | 'h4';
+    fontFamily: string;
+    fontSize: string;
+    color: string;
+    lineHeight: string;
+    fontWeight: string;
+    padding: string;
+    align: 'left' | 'center' | 'right' | 'justify';
+    textTransform: string;
+    letterSpacing: string;
+}
+interface CountdownBlockProperties {
+    targetDate: string;
+    label: string;
+    digitBackgroundColor: string;
+    digitColor: string;
+    labelColor: string;
+    fontSize: string;
+    padding: string;
+    align: 'left' | 'center' | 'right';
+}
+interface MenuItem {
+    text: string;
+    href: string;
+}
+interface MenuBlockProperties {
+    items: MenuItem[];
+    align: 'left' | 'center' | 'right';
+    fontFamily: string;
+    fontSize: string;
+    color: string;
+    padding: string;
+    hamburger: boolean;
+    iconColor: string;
+}
+interface HeroBlockProperties {
+    heading: string;
+    subtext: string;
+    buttonText: string;
+    buttonHref: string;
+    headingColor: string;
+    headingFontSize: string;
+    subtextColor: string;
+    subtextFontSize: string;
+    buttonBackgroundColor: string;
+    buttonColor: string;
+    buttonBorderRadius: string;
+    align: 'left' | 'center' | 'right';
+    padding: string;
+}
+type BlockProperties = TextBlockProperties | ButtonBlockProperties | ImageBlockProperties | DividerBlockProperties | SpacerBlockProperties | SocialBlockProperties | HtmlBlockProperties | VideoBlockProperties | HeadingBlockProperties | CountdownBlockProperties | MenuBlockProperties | HeroBlockProperties;
+interface BlockPropertiesMap {
+    text: TextBlockProperties;
+    button: ButtonBlockProperties;
+    image: ImageBlockProperties;
+    divider: DividerBlockProperties;
+    spacer: SpacerBlockProperties;
+    social: SocialBlockProperties;
+    html: HtmlBlockProperties;
+    video: VideoBlockProperties;
+    heading: HeadingBlockProperties;
+    countdown: CountdownBlockProperties;
+    menu: MenuBlockProperties;
+    hero: HeroBlockProperties;
+}
+interface Block {
+    id: string;
+    type: BlockType;
+    properties: Record<string, any>;
+}
+interface Column {
+    id: string;
+    width: string;
+    blocks: Block[];
+}
+interface SectionProperties {
+    backgroundColor: string;
+    padding: string;
+    borderRadius: string;
+    fullWidth: boolean;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundRepeat?: string;
+}
+interface Section {
+    id: string;
+    columns: Column[];
+    properties: SectionProperties;
+}
+interface GlobalStyles {
+    backgroundColor: string;
+    width: number;
+    fontFamily: string;
+}
+interface HeadMetadata {
+    title: string;
+    previewText: string;
+    headStyles: string[];
+}
+interface EmailTemplate {
+    sections: Section[];
+    globalStyles: GlobalStyles;
+    headMetadata?: HeadMetadata;
+}
+interface Variable {
+    key: string;
+    icon?: string;
+    sample: string;
+    label?: string;
+    group?: string;
+}
+interface VariableChipStyle {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+    fontSize: string;
+    borderRadius: string;
+}
+interface PersistenceAdapter {
+    save(key: string, template: EmailTemplate): void;
+    load(key: string): EmailTemplate | null;
+    remove(key: string): void;
+}
+interface UploadOptions {
+    context: string;
+    blockId: string;
+    signal: AbortSignal;
+}
+interface UploadResult {
+    url: string;
+    width?: number;
+    height?: number;
+    alt?: string;
+}
+interface BrowseResult {
+    url: string;
+    width?: number;
+    height?: number;
+    alt?: string;
+}
+interface TransformOptions {
+    width: number;
+    height?: number;
+    fit: string;
+    format: string;
+    quality: number;
+}
+interface ImageUploadAdapter {
+    upload: (file: File, opts?: UploadOptions) => Promise<UploadResult>;
+    browse?: () => Promise<BrowseResult | null>;
+    delete?: (url: string) => Promise<void>;
+    validate?: (file: File) => string | null;
+    transform?: (url: string, opts: TransformOptions) => string;
+}
+type ActiveTab = 'visual' | 'source' | 'preview';
+interface SelectionState {
+    sectionId: string | null;
+    columnId: string | null;
+    blockId: string | null;
+}
+interface EditorState {
+    template: EmailTemplate;
+    selection: SelectionState;
+    activeTab: ActiveTab;
+    history: EmailTemplate[];
+    historyIndex: number;
+    isDirty: boolean;
+}
+type EditorAction = {
+    type: 'SET_TEMPLATE';
+    payload: EmailTemplate;
+} | {
+    type: 'ADD_SECTION';
+    payload: {
+        section: Section;
+        index?: number;
+    };
+} | {
+    type: 'REMOVE_SECTION';
+    payload: {
+        sectionId: string;
+    };
+} | {
+    type: 'MOVE_SECTION';
+    payload: {
+        sectionId: string;
+        toIndex: number;
+    };
+} | {
+    type: 'UPDATE_SECTION';
+    payload: {
+        sectionId: string;
+        properties: Partial<SectionProperties>;
+    };
+} | {
+    type: 'ADD_BLOCK';
+    payload: {
+        sectionId: string;
+        columnId: string;
+        block: Block;
+        index?: number;
+    };
+} | {
+    type: 'REMOVE_BLOCK';
+    payload: {
+        sectionId: string;
+        columnId: string;
+        blockId: string;
+    };
+} | {
+    type: 'MOVE_BLOCK';
+    payload: {
+        fromSectionId: string;
+        fromColumnId: string;
+        blockId: string;
+        toSectionId: string;
+        toColumnId: string;
+        toIndex: number;
+    };
+} | {
+    type: 'UPDATE_BLOCK';
+    payload: {
+        blockId: string;
+        properties: Partial<BlockProperties>;
+    };
+} | {
+    type: 'SELECT_BLOCK';
+    payload: {
+        sectionId: string;
+        columnId: string;
+        blockId: string;
+    } | null;
+} | {
+    type: 'SELECT_SECTION';
+    payload: {
+        sectionId: string;
+    } | null;
+} | {
+    type: 'SET_ACTIVE_TAB';
+    payload: ActiveTab;
+} | {
+    type: 'UPDATE_GLOBAL_STYLES';
+    payload: Partial<GlobalStyles>;
+} | {
+    type: 'UPDATE_HEAD_METADATA';
+    payload: Partial<HeadMetadata>;
+} | {
+    type: 'DUPLICATE_BLOCK';
+    payload: {
+        sectionId: string;
+        columnId: string;
+        blockId: string;
+    };
+} | {
+    type: 'DUPLICATE_SECTION';
+    payload: {
+        sectionId: string;
+    };
+} | {
+    type: 'UNDO';
+} | {
+    type: 'REDO';
+};
+interface EmailEditorProps {
+    initialTemplate?: EmailTemplate;
+    initialMJML?: string;
+    variables?: Variable[];
+    imageUploadAdapter?: ImageUploadAdapter;
+    onChange?: (template: EmailTemplate) => void;
+    onSave?: (mjml: string, html: string) => void;
+    onReady?: () => void;
+    /** Custom font family options for the rich text toolbar. Falls back to FONT_OPTIONS constant. */
+    fontFamilies?: string[];
+    /** Custom font size options for the rich text toolbar (e.g. ['12px', '14px', '16px']). Falls back to DEFAULT_FONT_SIZES constant. */
+    fontSizes?: string[];
+    /** Key for auto-persisting the template. Different keys allow multiple editor instances to coexist. */
+    persistenceKey?: string;
+    /** Custom persistence adapter. Defaults to localStorage when persistenceKey is set. */
+    persistenceAdapter?: PersistenceAdapter;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface EmailEditorRef {
+    getMJML: () => string;
+    getHTML: () => Promise<string>;
+    getJSON: () => EmailTemplate;
+    loadMJML: (source: string) => void;
+    loadJSON: (template: EmailTemplate) => void;
+    insertBlock: (type: BlockType, sectionIdx?: number) => void;
+    getVariables: () => string[];
+    undo: () => void;
+    redo: () => void;
+    reset: () => void;
+    exportPDF: () => Promise<void>;
+    /** Remove persisted template data for the current persistenceKey. No-op if no key is set. */
+    clearPersisted: () => void;
+}
+
+declare const EmailEditor: React$1.ForwardRefExoticComponent<EmailEditorProps & React$1.RefAttributes<EmailEditorRef>>;
+
+interface EditorContextValue {
+    state: EditorState;
+    dispatch: React__default.Dispatch<EditorAction>;
+    /** All variables: pre-defined (props) + custom (user-created) */
+    variables: Variable[];
+    /** Pre-defined variables from props (read-only) */
+    predefinedVariables: Variable[];
+    /** User-created custom variables */
+    customVariables: Variable[];
+    imageUploadAdapter?: ImageUploadAdapter;
+    setActiveEditor: (editor: Editor | null) => void;
+    getActiveEditor: () => Editor | null;
+    insertVariable: (key: string) => boolean;
+    addCustomVariable: (variable: Variable) => void;
+    removeCustomVariable: (key: string) => void;
+    variableChipStyle: VariableChipStyle;
+    updateVariableChipStyle: (style: Partial<VariableChipStyle>) => void;
+    /** Font family options for the rich text toolbar */
+    fontFamilies: string[];
+    /** Font size options for the rich text toolbar */
+    fontSizes: string[];
+    /** Remove persisted template for the current key. No-op if no persistenceKey. */
+    clearPersisted: () => void;
+}
+declare function useEditor(): EditorContextValue;
+declare function useEditorState(): EditorState;
+declare function useEditorDispatch(): React__default.Dispatch<EditorAction>;
+declare function useSelectedBlock(): Block | null;
+declare function useSelectedSection(): Section | null;
+interface EditorProviderProps {
+    children: ReactNode;
+    initialTemplate?: EmailTemplate;
+    variables?: Variable[];
+    imageUploadAdapter?: ImageUploadAdapter;
+    onChange?: (template: EmailTemplate) => void;
+    fontFamilies?: string[];
+    fontSizes?: string[];
+    persistenceKey?: string;
+    persistenceAdapter?: PersistenceAdapter;
+}
+declare function EditorProvider({ children, initialTemplate, variables: predefinedVariables, imageUploadAdapter, onChange, fontFamilies: fontFamiliesProp, fontSizes: fontSizesProp, persistenceKey, persistenceAdapter, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function parseMJML(mjmlString: string): EmailTemplate;
+
+declare function generateMJML(template: EmailTemplate): string;
+
+interface CompileResult {
+    html: string;
+    errors: CompileError[];
+}
+interface CompileError {
+    line: number;
+    message: string;
+    tagName: string;
+}
+declare function compileMJMLToHTML(mjmlString: string): Promise<CompileResult>;
+
+declare function getExtensions(placeholder?: string): (_tiptap_core.Node<any, any> | _tiptap_core.Extension<any, any> | _tiptap_core.Mark<_tiptap_extension_underline.UnderlineOptions, any>)[];
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        variableNode: {
+            insertVariable: (key: string) => ReturnType;
+        };
+    }
+}
+declare const VariableNode: Node<any, any>;
+
+declare function generateId(prefix?: string): string;
+declare function generateBlockId(): string;
+declare function generateSectionId(): string;
+declare function generateColumnId(): string;
+
+declare function extractVariableKeys(text: string): string[];
+declare function replaceVariables(text: string, variables: Variable[], useSample?: boolean): string;
+declare function groupVariables(variables: Variable[]): Map<string, Variable[]>;
+
+declare function sanitizeHTML(html: string): string;
+declare function escapeHTML(str: string): string;
+
+/**
+ * Default persistence adapter using localStorage.
+ * All operations are wrapped in try/catch to handle quota errors,
+ * private browsing restrictions, and SSR environments.
+ */
+declare const localStorageAdapter: PersistenceAdapter;
+
+/**
+ * Block type registries — single source of truth for mapping block types
+ * to their renderers, property panels, generators, and parsers.
+ *
+ * Adding a new block type requires only adding entries here (Open/Closed Principle).
+ */
+
+declare function registerBlockRenderer(type: BlockType, component: ComponentType<{
+    block: Block;
+}>): void;
+declare function registerBlockProperties(type: BlockType, component: ComponentType<{
+    block: Block;
+}>): void;
+declare function registerBlockGenerator(type: BlockType, generator: (block: Block, indent: string) => string): void;
+declare function registerBlockParser(mjmlTag: string, parser: (el: Element) => Block): void;
+
+declare const DEFAULT_SOCIAL_PROPERTIES: SocialBlockProperties;
+declare const DEFAULT_BLOCK_PROPERTIES: {
+    [K in BlockType]: BlockPropertiesMap[K];
+};
+declare const DEFAULT_SECTION_PROPERTIES: SectionProperties;
+declare const DEFAULT_HEAD_METADATA: HeadMetadata;
+declare const DEFAULT_GLOBAL_STYLES: GlobalStyles;
+declare const DEFAULT_VARIABLE_CHIP_STYLE: VariableChipStyle;
+interface BlockDefinition {
+    type: BlockType;
+    label: string;
+    icon: string;
+    description: string;
+}
+declare const BLOCK_DEFINITIONS: BlockDefinition[];
+declare const DEFAULT_FONT_SIZES: string[];
+declare const FONT_OPTIONS: string[];
+declare const COLOR_PRESETS: string[];
+declare const COLUMN_LAYOUTS: {
+    label: string;
+    widths: string[];
+}[];
+
+export { type ActiveTab, BLOCK_DEFINITIONS, type Block, type BlockProperties, type BlockPropertiesMap, type BlockType, type BrowseResult, type ButtonBlockProperties, COLOR_PRESETS, COLUMN_LAYOUTS, type Column, type CountdownBlockProperties, DEFAULT_BLOCK_PROPERTIES, DEFAULT_FONT_SIZES, DEFAULT_GLOBAL_STYLES, DEFAULT_HEAD_METADATA, DEFAULT_SECTION_PROPERTIES, DEFAULT_SOCIAL_PROPERTIES, DEFAULT_VARIABLE_CHIP_STYLE, type DividerBlockProperties, type EditorAction, EditorProvider, type EditorState, EmailEditor, type EmailEditorProps, type EmailEditorRef, type EmailTemplate, FONT_OPTIONS, type GlobalStyles, type HeadMetadata, type HeroBlockProperties, type ImageBlockProperties, type ImageUploadAdapter, type MenuBlockProperties, type MenuItem, type PersistenceAdapter, type Section, type SectionProperties, type SelectionState, type SocialBlockProperties, type SocialElement, type SpacerBlockProperties, type TextBlockProperties, type TransformOptions, type UploadOptions, type UploadResult, type Variable, type VariableChipStyle, VariableNode, compileMJMLToHTML, escapeHTML, extractVariableKeys, generateBlockId, generateColumnId, generateId, generateMJML, generateSectionId, getExtensions, groupVariables, localStorageAdapter, parseMJML, registerBlockGenerator, registerBlockParser, registerBlockProperties, registerBlockRenderer, replaceVariables, sanitizeHTML, useEditor, useEditorDispatch, useEditorState, useSelectedBlock, useSelectedSection };