@pexelize/react-editor 1.0.5 → 2.1.0

package/dist/index.d.ts

@@ -1,264 +1,300 @@
 import React from 'react';
 
 /**
- * Pexelize Editor React Component
- *
- * A React wrapper for the Pexelize Editor SDK.
- * SDK is loaded from jsDelivr CDN automatically.
+ * Pexelize React Editor Types
+ * Minimal type definitions for the React wrapper
  */
-
+type EditorMode = "email" | "web" | "popup" | "document";
+type ThemeMode = "light" | "dark" | "auto" | "pexelize-light" | "pexelize-dark";
+type ViewMode = "desktop" | "tablet" | "mobile";
 interface DesignJson {
     body: {
-        rows: any[];
-        values: Record<string, any>;
+        rows: RowData[];
+        values: BodyValues;
     };
     schemaVersion?: number;
 }
-interface ExportHtmlData {
-    html: string;
-    design: DesignJson;
-    chunks?: {
-        css: string;
-        js: string;
-        body: string;
+interface BodyValues {
+    backgroundColor?: string;
+    contentWidth?: string;
+    textColor?: string;
+    fontFamily?: {
+        label: string;
+        value: string;
     };
+    linkStyle?: LinkStyle;
+    preheaderText?: string;
+    [key: string]: unknown;
+}
+interface RowData {
+    cells: number[];
+    columns: ColumnData[];
+    values: RowValues;
+}
+interface RowValues {
+    padding?: string;
+    backgroundColor?: string;
+    [key: string]: unknown;
+}
+interface ColumnData {
+    contents: ContentData[];
+    values: ColumnValues;
+}
+interface ColumnValues {
+    backgroundColor?: string;
+    padding?: string;
+    [key: string]: unknown;
+}
+interface ContentData {
+    type: string;
+    values: Record<string, unknown>;
+}
+interface LinkStyle {
+    body?: boolean;
+    inherit?: boolean;
+    linkColor?: string;
+    linkHoverColor?: string;
+    linkUnderline?: boolean;
+    linkHoverUnderline?: boolean;
+}
+interface ModuleData {
+    cells: number[];
+    columns: ColumnData[];
+    values: Record<string, unknown>;
+}
+interface Module {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Category for grouping */
+    category: string;
+    /** Module mode - "email" or "web" (editor compatibility) */
+    mode: "email" | "web";
+    /** Module type - "standard" or "synced" (sync behavior) */
+    type: "standard" | "synced";
+    /** Module thumbnail URL */
+    thumbnail?: string | null;
+    /** Module data (row structure) */
+    data?: ModuleData | Record<string, unknown>;
 }
 interface MergeTag {
     name: string;
     value: string;
     sample?: string;
 }
-interface DisplayCondition {
-    id: string;
-    label: string;
-    description?: string;
-    condition: Record<string, any>;
+interface MergeTagGroup {
+    name: string;
+    mergeTags: (MergeTag | MergeTagGroup)[];
+}
+interface SpecialLink {
+    name: string;
+    href: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+}
+interface SpecialLinkGroup {
+    name: string;
+    specialLinks: SpecialLink[];
 }
 interface AppearanceConfig {
-    theme?: 'light' | 'dark' | 'pexelize-light' | 'pexelize-dark';
-    panels?: {
-        tools?: {
-            dock?: 'left' | 'right';
-            collapsible?: boolean;
-        };
-        properties?: {
-            dock?: 'left' | 'right';
-            collapsible?: boolean;
+    theme?: ThemeMode | object;
+    accentColor?: string;
+    sidePanel?: {
+        tabs?: {
+            content?: {
+                visible?: boolean;
+            };
+            modules?: {
+                visible?: boolean;
+            };
+            styles?: {
+                visible?: boolean;
+            };
         };
+        dock?: "left" | "right";
+        width?: number;
+        collapsible?: boolean;
     };
-    features?: Record<string, boolean>;
 }
 interface ToolsConfig {
-    enabled?: string[];
-    disabled?: string[];
+    [toolName: string]: {
+        enabled?: boolean;
+        position?: number;
+        properties?: Record<string, {
+            value?: unknown;
+            editable?: boolean;
+        }>;
+    } | undefined;
+}
+interface ModuleFeaturesConfig {
+    /** Enable save row as module button */
+    saveRowAsModule?: boolean;
 }
 interface FeaturesConfig {
     preview?: boolean;
     undoRedo?: boolean;
+    responsiveDesign?: boolean;
     imageEditor?: boolean;
-    userUploads?: boolean;
     stockImages?: boolean;
+    userUploads?: boolean;
+    /** Module features configuration */
+    modules?: boolean | ModuleFeaturesConfig;
 }
-interface UserInfo {
-    id?: string;
-    name?: string;
-    email?: string;
-}
-interface SecurityConfig {
-    allowedOrigins?: string[];
+interface AIConfig {
+    mode?: "pexelize" | "external" | "disabled";
+    features?: {
+        imageGeneration?: {
+            enabled?: boolean;
+        };
+        altText?: {
+            enabled?: boolean;
+        };
+        smartHeading?: {
+            enabled?: boolean;
+        };
+        smartText?: {
+            enabled?: boolean;
+        };
+        smartButton?: {
+            enabled?: boolean;
+        };
+        imageSearch?: {
+            enabled?: boolean;
+        };
+        copilot?: {
+            enabled?: boolean;
+        };
+    };
 }
-interface EditorState {
-    isReady: boolean;
-    isDirty: boolean;
-    canUndo: boolean;
-    canRedo: boolean;
+interface ExportHtmlData {
+    html: string;
+    design: DesignJson;
+    chunks?: {
+        css: string;
+        js: string;
+        body: string;
+    };
 }
-type DisplayMode = 'email' | 'web' | 'popup' | 'document';
-type ThemeMode = 'light' | 'dark' | 'pexelize-light' | 'pexelize-dark';
 type ImageUploadCallback = (file: File, done: (result: {
-    progress: number;
     url?: string;
+    error?: string;
 }) => void) => void;
-type LinkClickCallback = (data: {
-    link: string;
-    type: string;
-}, done: (result: {
-    link: string;
-}) => void) => void;
-type SaveCallback = (design: DesignJson, done: (result: {
+interface ModuleSaveData {
+    /** Module name (entered by user) */
+    name: string;
+    /** Module category (entered by user) */
+    category: string;
+    /** Module type - "standard" or "synced" (selected by user) */
+    type: "standard" | "synced";
+    /** Module mode - "email" or "web" (determined by editor mode) */
+    mode: "email" | "web";
+    /** The nested row JSON data with columns and contents */
+    data: unknown;
+    /** Pre-rendered HTML content */
+    html: string;
+    /** Schema version of the design */
+    schemaVersion: number;
+}
+interface ModuleSaveResult {
+    /** Whether the save was successful */
     success: boolean;
-}) => void) => void;
-/**
- * Props for the PexelizeEditor component
- */
-interface PexelizeEditorProps {
-    /** Editor display mode */
-    displayMode?: DisplayMode;
-    /** Also accepts editorMode for compatibility */
-    editorMode?: DisplayMode;
-    /** Project identifier */
-    projectId?: number | string;
-    /** UI language */
+    /** Error message if save failed */
+    error?: string;
+    /** The saved module ID (if applicable) */
+    moduleId?: string;
+}
+type ModuleSaveCallback = (data: ModuleSaveData, done?: (result: ModuleSaveResult) => void) => void;
+type EditorEventName = "editor:ready" | "design:loaded" | "design:updated" | "design:saved" | "content:modified" | "content:added" | "content:deleted" | "row:selected" | "row:unselected" | "column:selected" | "column:unselected" | "content:selected" | "content:unselected" | "preview:shown" | "preview:hidden" | "image:uploaded" | "image:error" | "save";
+interface PexelizeConfig {
+    containerId: string;
+    editorId: number | string;
+    apiKey: string;
+    templateId?: string;
+    design?: DesignJson | null;
+    editorMode?: EditorMode;
     locale?: string;
-    /** Visual customization */
+    mergeTags?: (MergeTag | MergeTagGroup)[];
+    specialLinks?: (SpecialLink | SpecialLinkGroup)[];
     appearance?: AppearanceConfig;
-    /** Enable/disable tools */
     tools?: ToolsConfig;
-    /** Feature toggles */
     features?: FeaturesConfig;
-    /** User information */
-    user?: UserInfo;
-    /** Security settings */
-    security?: SecurityConfig;
-    /** Editor source URL (overrides CDN default) */
-    editorUrl?: string;
-    /** SDK CDN URL (overrides default) */
-    sdkUrl?: string;
-    /** Minimum height for the editor */
-    minHeight?: string | number;
-    /** Initial design to load */
-    design?: DesignJson;
-    /** Merge tags for personalization */
-    mergeTags?: MergeTag[];
-    /** Display conditions for dynamic content */
-    displayConditions?: DisplayCondition[];
-    /** Custom CSS class name */
+    ai?: AIConfig;
+    /** Modules to display in the modules panel */
+    modules?: Module[];
+    editor?: {
+        contentType?: "page" | "module";
+        minRows?: number;
+        maxRows?: number | null;
+    };
+    callbacks?: {
+        image?: ImageUploadCallback;
+        onModuleSave?: ModuleSaveCallback;
+    };
+}
+interface PexelizeSDK {
+    init(config: PexelizeConfig): void;
+    destroy(): void;
+    isReady(): boolean;
+    loadDesign(design: DesignJson, options?: {
+        preserveHistory?: boolean;
+    }): void;
+    loadBlank(): void;
+    saveDesign(callback: (design: DesignJson) => void): void;
+    getDesign(): Promise<DesignJson>;
+    exportHtml(callback: (data: ExportHtmlData) => void): void;
+    exportHtmlAsync(): Promise<ExportHtmlData>;
+    setMergeTags(tags: (MergeTag | MergeTagGroup)[]): void;
+    setAppearance(config: AppearanceConfig): void;
+    undo(): void;
+    redo(): void;
+    showPreview(): void;
+    hidePreview(): void;
+    addEventListener<T = unknown>(event: EditorEventName, callback: (data: T) => void): () => void;
+    removeEventListener<T = unknown>(event: EditorEventName, callback: (data: T) => void): void;
+}
+
+/**
+ * @pexelize/react-editor
+ * React wrapper for the Pexelize Editor SDK
+ */
+
+declare global {
+    interface Window {
+        pexelize?: PexelizeSDK;
+    }
+}
+interface PexelizeEditorRef {
+    editor: PexelizeSDK | null;
+    isReady: () => boolean;
+}
+type EditorContentType = "page" | "module";
+interface PexelizeEditorProps {
+    editorId: number | string;
+    apiKey: string;
+    templateId?: string;
+    design?: DesignJson | ModuleData | null;
+    editorMode?: EditorMode;
+    contentType?: EditorContentType;
+    ai?: PexelizeConfig["ai"];
+    height?: string | number;
+    options?: Omit<PexelizeConfig, "containerId" | "editorId" | "apiKey">;
     className?: string;
-    /** Inline styles */
     style?: React.CSSProperties;
-    /** Height of the editor */
-    height?: string | number;
-    /** Called when the editor is ready */
-    onReady?: () => void;
-    /** Called when the design is loaded */
-    onLoad?: (data: {
-        design: DesignJson;
-    }) => void;
-    /** Called when the design changes */
+    minHeight?: string | number;
+    onReady?: (editor: PexelizeSDK) => void;
+    onLoad?: () => void;
     onChange?: (data: {
         design: DesignJson;
-        changes?: unknown;
-    }) => void;
-    /** Called when content is modified */
-    onContentModified?: (data: {
         type: string;
-        value: unknown;
-        element: unknown;
     }) => void;
-    /** Called when an element is selected */
-    onSelect?: (data: {
-        element: unknown;
-        type: string;
-    }) => void;
-    /** Called when an element is deselected */
-    onDeselect?: () => void;
-    /** Image upload handler */
-    onImage?: ImageUploadCallback;
-    /** Link click handler */
-    onLinkClick?: LinkClickCallback;
-    /** Save handler */
-    onSave?: SaveCallback;
+    onError?: (error: Error) => void;
 }
-/**
- * Ref handle for the PexelizeEditor component
- */
-interface PexelizeEditorRef {
-    /** Load a design */
-    loadDesign: (design: DesignJson) => void;
-    /** Load a blank design */
-    loadBlank: () => void;
-    /** Save/get the current design */
-    saveDesign: (callback: (design: DesignJson) => void) => void;
-    /** Get the current design (Promise-based) */
-    getDesign: () => Promise<DesignJson>;
-    /** Export as HTML */
-    exportHtml: (callback: (data: ExportHtmlData) => void) => void;
-    /** Export as HTML (Promise-based) */
-    exportHtmlAsync: () => Promise<ExportHtmlData>;
-    /** Trigger save */
-    save: () => void;
-    /** Perform undo */
-    undo: () => void;
-    /** Perform redo */
-    redo: () => void;
-    /** Get editor state */
-    getState: () => Promise<EditorState>;
-    /** Check if editor is ready */
-    isReady: () => boolean;
-    /** Access the raw SDK instance */
-    getSdk: () => any;
-}
-/**
- * PexelizeEditor React Component
- *
- * @example
- * ```tsx
- * import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';
- *
- * function MyEditor() {
- *   const editorRef = useRef<PexelizeEditorRef>(null);
- *
- *   const handleSave = () => {
- *     editorRef.current?.saveDesign((design) => {
- *       console.log('Design:', design);
- *     });
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={handleSave}>Save</button>
- *       <PexelizeEditor
- *         ref={editorRef}
- *         editorMode="email"
- *         onReady={() => console.log('Ready!')}
- *         onChange={({ design }) => console.log('Changed:', design)}
- *       />
- *     </div>
- *   );
- * }
- * ```
- */
 declare const PexelizeEditor: React.ForwardRefExoticComponent<PexelizeEditorProps & React.RefAttributes<PexelizeEditorRef>>;
-interface UsePexelizeSDKConfig {
-    containerId: string;
-    editorMode?: DisplayMode;
-    displayMode?: DisplayMode;
-    [key: string]: any;
-}
-/**
- * Hook to use the Pexelize SDK directly
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { sdk, isReady, error } = usePexelizeSDK({
- *     containerId: 'my-editor',
- *     editorMode: 'email',
- *   });
- *
- *   const handleExport = () => {
- *     if (isReady && sdk) {
- *       sdk.exportHtml((data) => console.log(data.html));
- *     }
- *   };
- *
- *   return (
- *     <div>
- *       <div id="my-editor" style={{ height: '600px' }} />
- *       <button onClick={handleExport} disabled={!isReady}>Export</button>
- *     </div>
- *   );
- * }
- * ```
- */
-declare function usePexelizeSDK(config: UsePexelizeSDKConfig): {
-    sdk: any;
+declare function usePexelizeEditor(): {
+    ref: React.RefObject<PexelizeEditorRef>;
+    editor: PexelizeSDK | null;
     isReady: boolean;
-    isLoading: boolean;
-    error: string | null;
 };
 
-declare const PEXELIZE_SDK_CDN = "https://sdk.pexelize.com/latest/pexelize-sdk.min.js";
-
-export { PEXELIZE_SDK_CDN, PexelizeEditor, PexelizeEditor as default, usePexelizeSDK };
-export type { AppearanceConfig, DesignJson, DisplayCondition, DisplayMode, EditorState, ExportHtmlData, FeaturesConfig, ImageUploadCallback, LinkClickCallback, MergeTag, PexelizeEditorProps, PexelizeEditorRef, SaveCallback, SecurityConfig, ThemeMode, ToolsConfig, UsePexelizeSDKConfig, UserInfo };
+export { PexelizeEditor, PexelizeEditor as default, usePexelizeEditor };
+export type { AIConfig, AppearanceConfig, BodyValues, ColumnData, ColumnValues, ContentData, DesignJson, EditorContentType, EditorEventName, EditorMode, ExportHtmlData, FeaturesConfig, ImageUploadCallback, LinkStyle, MergeTag, MergeTagGroup, Module, ModuleData, ModuleFeaturesConfig, ModuleSaveCallback, ModuleSaveData, ModuleSaveResult, PexelizeConfig, PexelizeEditorProps, PexelizeEditorRef, PexelizeSDK, RowData, RowValues, SpecialLink, SpecialLinkGroup, ThemeMode, ToolsConfig, ViewMode };