@pexelize/react-editor 1.0.0

package/README.md

@@ -0,0 +1,206 @@
+# @pexelize/react-editor
+
+React wrapper component for the **Pexelize Email Editor**. The SDK is automatically loaded from jsDelivr CDN - no npm SDK dependency required.
+
+## 🚀 Installation
+
+```bash
+npm install @pexelize/react-editor
+```
+
+## 📖 Usage
+
+```tsx
+import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';
+import { useRef } from 'react';
+
+function EmailBuilder() {
+  const editorRef = useRef<PexelizeEditorRef>(null);
+
+  const handleSave = () => {
+    editorRef.current?.saveDesign((design) => {
+      console.log('Saved:', design);
+    });
+  };
+
+  const handleExport = () => {
+    editorRef.current?.exportHtml((data) => {
+      console.log('HTML:', data.html);
+    });
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '10px' }}>
+        <button onClick={handleSave}>Save</button>
+        <button onClick={handleExport}>Export HTML</button>
+      </div>
+      
+      <PexelizeEditor
+        ref={editorRef}
+        editorMode="email"
+        height="600px"
+        onReady={() => console.log('Editor ready!')}
+        onChange={({ design }) => console.log('Changed:', design)}
+      />
+    </div>
+  );
+}
+```
+
+## 🔧 Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `editorMode` | `'email' \| 'web' \| 'popup'` | `'email'` | Editor mode |
+| `height` | `string \| number` | `'600px'` | Editor height |
+| `design` | `DesignJson` | - | Initial design to load |
+| `mergeTags` | `MergeTag[]` | - | Merge tags for personalization |
+| `appearance` | `AppearanceConfig` | - | Visual customization |
+| `onReady` | `() => void` | - | Called when editor is ready |
+| `onChange` | `(data) => void` | - | Called when design changes |
+| `onLoad` | `(data) => void` | - | Called when design is loaded |
+| `onImage` | `ImageUploadCallback` | - | Image upload handler |
+| `onSave` | `SaveCallback` | - | Save handler |
+
+## 📚 Ref Methods
+
+Access editor methods via ref:
+
+```tsx
+const editorRef = useRef<PexelizeEditorRef>(null);
+
+// Load a design
+editorRef.current?.loadDesign(myDesign);
+
+// Load blank
+editorRef.current?.loadBlank();
+
+// Get design
+const design = await editorRef.current?.getDesign();
+
+// Save design (callback)
+editorRef.current?.saveDesign((design) => console.log(design));
+
+// Export HTML
+editorRef.current?.exportHtml((data) => console.log(data.html));
+
+// Export HTML (async)
+const { html, design } = await editorRef.current?.exportHtmlAsync();
+
+// Undo/Redo
+editorRef.current?.undo();
+editorRef.current?.redo();
+
+// Check if ready
+const ready = editorRef.current?.isReady();
+```
+
+## 🪝 Hook: usePexelizeSDK
+
+For more control, use the hook directly:
+
+```tsx
+import { usePexelizeSDK } from '@pexelize/react-editor';
+
+function MyComponent() {
+  const { sdk, isReady, isLoading, error } = usePexelizeSDK({
+    containerId: 'my-editor',
+    editorMode: 'email',
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return (
+    <div>
+      <div id="my-editor" style={{ height: '600px' }} />
+      <button 
+        disabled={!isReady}
+        onClick={() => sdk?.exportHtml((d) => console.log(d.html))}
+      >
+        Export
+      </button>
+    </div>
+  );
+}
+```
+
+## 🌐 CDN Architecture
+
+This package automatically loads the Pexelize SDK from jsDelivr CDN:
+
+```
+https://cdn.jsdelivr.net/gh/Zaman-Meer/pexelize-sdk@dev/dist/pexelize-sdk.min.js
+```
+
+**Benefits:**
+- ✅ Smaller bundle size (SDK loaded separately)
+- ✅ SDK cached by browser across sites
+- ✅ Always get latest SDK updates
+- ✅ No npm dependency conflicts
+
+## 📦 Publishing to npm
+
+### 1. Setup npm account
+
+```bash
+# Login to npm (create account at npmjs.com if needed)
+npm login
+```
+
+### 2. Build the package
+
+```bash
+cd pexelize-react
+npm install
+npm run build
+```
+
+### 3. Publish
+
+```bash
+# For scoped package (@pexelize/react-editor)
+npm publish --access public
+
+# For unscoped package
+npm publish
+```
+
+### 4. Update version for future releases
+
+```bash
+# Patch version (1.0.0 -> 1.0.1)
+npm version patch
+
+# Minor version (1.0.0 -> 1.1.0)
+npm version minor
+
+# Major version (1.0.0 -> 2.0.0)
+npm version major
+
+# Then publish
+npm publish --access public
+```
+
+## ❓ FAQ
+
+### Is the CDN publicly available?
+
+**Yes!** The SDK is hosted on jsDelivr which serves files directly from our public GitHub repository. Anyone can access it:
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/Zaman-Meer/pexelize-sdk@dev/dist/pexelize-sdk.min.js"></script>
+```
+
+### Can I use a different SDK version?
+
+Yes, change the CDN URL by forking and modifying `SDK_CDN_URL` in the source, or use the hook to initialize manually.
+
+### Does this work with SSR (Next.js)?
+
+Yes! The SDK is loaded client-side only using `useEffect`. The component shows a loading state until the SDK is ready.
+
+## 📄 License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,264 @@
+import React from 'react';
+
+/**
+ * Pexelize Editor React Component
+ *
+ * A React wrapper for the Pexelize Editor SDK.
+ * SDK is loaded from jsDelivr CDN automatically.
+ */
+
+interface DesignJson {
+    body: {
+        rows: any[];
+        values: Record<string, any>;
+    };
+    schemaVersion?: number;
+}
+interface ExportHtmlData {
+    html: string;
+    design: DesignJson;
+    chunks?: {
+        css: string;
+        js: string;
+        body: string;
+    };
+}
+interface MergeTag {
+    name: string;
+    value: string;
+    sample?: string;
+}
+interface DisplayCondition {
+    id: string;
+    label: string;
+    description?: string;
+    condition: Record<string, any>;
+}
+interface AppearanceConfig {
+    theme?: 'light' | 'dark' | 'pexelize-light' | 'pexelize-dark';
+    panels?: {
+        tools?: {
+            dock?: 'left' | 'right';
+            collapsible?: boolean;
+        };
+        properties?: {
+            dock?: 'left' | 'right';
+            collapsible?: boolean;
+        };
+    };
+    features?: Record<string, boolean>;
+}
+interface ToolsConfig {
+    enabled?: string[];
+    disabled?: string[];
+}
+interface FeaturesConfig {
+    preview?: boolean;
+    undoRedo?: boolean;
+    imageEditor?: boolean;
+    userUploads?: boolean;
+    stockImages?: boolean;
+}
+interface UserInfo {
+    id?: string;
+    name?: string;
+    email?: string;
+}
+interface SecurityConfig {
+    allowedOrigins?: string[];
+}
+interface EditorState {
+    isReady: boolean;
+    isDirty: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+type DisplayMode = 'email' | 'web' | 'popup' | 'document';
+type ThemeMode = 'light' | 'dark' | 'pexelize-light' | 'pexelize-dark';
+type ImageUploadCallback = (file: File, done: (result: {
+    progress: number;
+    url?: string;
+}) => void) => void;
+type LinkClickCallback = (data: {
+    link: string;
+    type: string;
+}, done: (result: {
+    link: string;
+}) => void) => void;
+type SaveCallback = (design: DesignJson, done: (result: {
+    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 */
+    locale?: string;
+    /** Visual customization */
+    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 */
+    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 */
+    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;
+}
+/**
+ * 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;
+    isReady: boolean;
+    isLoading: boolean;
+    error: string | null;
+};
+
+declare const PEXELIZE_SDK_CDN = "https://cdn.jsdelivr.net/gh/Zaman-Meer/pexelize-sdk@dev/dist/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 };

package/dist/index.esm.js

@@ -0,0 +1,311 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useImperativeHandle } from 'react';
+
+// ============================================================================
+// SDK CDN Configuration
+// ============================================================================
+const SDK_CDN_URL = 'https://cdn.jsdelivr.net/gh/Zaman-Meer/pexelize-sdk@dev/dist/pexelize-sdk.min.js';
+// Global SDK reference (loaded from CDN)
+let sdkLoadPromise = null;
+/**
+ * Load SDK from CDN (singleton pattern - loads only once)
+ */
+function loadSDKFromCDN() {
+    if (sdkLoadPromise) {
+        return sdkLoadPromise;
+    }
+    // Check if already loaded
+    if (window.pexelize) {
+        return Promise.resolve();
+    }
+    sdkLoadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = SDK_CDN_URL;
+        script.async = true;
+        script.onload = () => {
+            if (window.pexelize) {
+                console.log('[Pexelize React] SDK loaded from CDN');
+                resolve();
+            }
+            else {
+                reject(new Error('SDK loaded but pexelize global not found'));
+            }
+        };
+        script.onerror = () => {
+            sdkLoadPromise = null;
+            reject(new Error(`Failed to load Pexelize SDK from ${SDK_CDN_URL}`));
+        };
+        document.head.appendChild(script);
+    });
+    return sdkLoadPromise;
+}
+/**
+ * Get SDK instance from global
+ */
+function getSDK() {
+    return window.pexelize;
+}
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+const PexelizeEditor = forwardRef((props, ref) => {
+    const { design, mergeTags, displayConditions, className, style, height = '600px', displayMode, editorMode, onReady, onLoad, onChange, onContentModified, onSelect, onDeselect, onImage, onLinkClick, onSave, ...config } = props;
+    const containerRef = useRef(null);
+    const sdkRef = useRef(null);
+    const containerId = useRef(`pexelize-editor-${Math.random().toString(36).substr(2, 9)}`);
+    const [isEditorReady, setIsEditorReady] = useState(false);
+    const [sdkLoaded, setSdkLoaded] = useState(false);
+    const [error, setError] = useState(null);
+    // Load SDK from CDN
+    useEffect(() => {
+        loadSDKFromCDN()
+            .then(() => setSdkLoaded(true))
+            .catch((err) => setError(err.message));
+    }, []);
+    // Initialize SDK once loaded
+    useEffect(() => {
+        if (!sdkLoaded || !containerRef.current)
+            return;
+        const pexelize = getSDK();
+        if (!pexelize) {
+            setError('Pexelize SDK not found after loading');
+            return;
+        }
+        // Store SDK reference
+        sdkRef.current = pexelize;
+        // Initialize
+        pexelize.init({
+            id: containerId.current,
+            editorMode: editorMode || displayMode || 'email',
+            ...config,
+        });
+        // Clean up on unmount
+        return () => {
+            pexelize.destroy();
+            sdkRef.current = null;
+            setIsEditorReady(false);
+        };
+    }, [sdkLoaded]);
+    // Handle ready event
+    useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk)
+            return;
+        const handleReady = () => {
+            setIsEditorReady(true);
+            // Set merge tags if provided
+            if (mergeTags) {
+                sdk.setMergeTags(mergeTags);
+            }
+            // Set display conditions if provided
+            if (displayConditions) {
+                sdk.setDisplayConditions(displayConditions);
+            }
+            // Load initial design if provided
+            if (design) {
+                sdk.loadDesign(design);
+            }
+            // Call onReady callback
+            onReady?.();
+        };
+        const unsubscribe = sdk.addEventListener('editor:ready', handleReady);
+        return unsubscribe;
+    }, [sdkLoaded, design, mergeTags, displayConditions, onReady]);
+    // Handle design loaded event
+    useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onLoad)
+            return;
+        const unsubscribe = sdk.addEventListener('design:loaded', onLoad);
+        return unsubscribe;
+    }, [sdkLoaded, onLoad]);
+    // Handle design updated event
+    useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onChange)
+            return;
+        const unsubscribe = sdk.addEventListener('design:updated', onChange);
+        return unsubscribe;
+    }, [sdkLoaded, onChange]);
+    // Handle content modified event
+    useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onContentModified)
+            return;
+        const unsubscribe = sdk.addEventListener('content:modified', onContentModified);
+        return unsubscribe;
+    }, [sdkLoaded, onContentModified]);
+    // Handle element selected event
+    useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onSelect)
+            return;
+        const unsubscribe = sdk.addEventListener('element:selected', onSelect);
+        return unsubscribe;
+    }, [sdkLoaded, onSelect]);
+    // Handle element deselected event
+    useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onDeselect)
+            return;
+        const unsubscribe = sdk.addEventListener('element:deselected', onDeselect);
+        return unsubscribe;
+    }, [sdkLoaded, onDeselect]);
+    // Register callbacks
+    useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk)
+            return;
+        if (onImage) {
+            sdk.registerCallback('image', onImage);
+        }
+        if (onLinkClick) {
+            sdk.registerCallback('linkClick', onLinkClick);
+        }
+        if (onSave) {
+            sdk.registerCallback('save', onSave);
+        }
+        return () => {
+            if (sdk.unregisterCallback) {
+                sdk.unregisterCallback('image');
+                sdk.unregisterCallback('linkClick');
+                sdk.unregisterCallback('save');
+            }
+        };
+    }, [sdkLoaded, onImage, onLinkClick, onSave]);
+    // Expose SDK methods via ref
+    useImperativeHandle(ref, () => ({
+        loadDesign: (design) => sdkRef.current?.loadDesign(design),
+        loadBlank: () => sdkRef.current?.loadBlank(),
+        saveDesign: (callback) => sdkRef.current?.saveDesign(callback),
+        getDesign: () => sdkRef.current?.getDesign(),
+        exportHtml: (callback) => sdkRef.current?.exportHtml(callback),
+        exportHtmlAsync: () => sdkRef.current?.exportHtmlAsync(),
+        save: () => sdkRef.current?.save(),
+        undo: () => sdkRef.current?.undo(),
+        redo: () => sdkRef.current?.redo(),
+        getState: () => sdkRef.current?.getState(),
+        isReady: () => isEditorReady,
+        getSdk: () => sdkRef.current,
+    }), [isEditorReady, sdkLoaded]);
+    // Compute styles
+    const containerStyle = {
+        width: '100%',
+        height: typeof height === 'number' ? `${height}px` : height,
+        ...style,
+    };
+    // Show error state
+    if (error) {
+        return (jsx("div", { style: { ...containerStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fee', color: '#c00' }, children: jsxs("div", { style: { textAlign: 'center' }, children: [jsx("div", { style: { fontSize: '24px', marginBottom: '8px' }, children: "\u26A0\uFE0F" }), jsx("div", { children: "Failed to load Pexelize Editor" }), jsx("div", { style: { fontSize: '12px', marginTop: '4px' }, children: error })] }) }));
+    }
+    // Show loading state
+    if (!sdkLoaded) {
+        return (jsx("div", { style: { ...containerStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f5' }, children: jsxs("div", { style: { textAlign: 'center' }, children: [jsx("div", { style: { fontSize: '24px', marginBottom: '8px' }, children: "\u23F3" }), jsx("div", { children: "Loading Pexelize Editor..." })] }) }));
+    }
+    return (jsx("div", { id: containerId.current, ref: containerRef, className: className, style: containerStyle }));
+});
+PexelizeEditor.displayName = 'PexelizeEditor';
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+function usePexelizeSDK(config) {
+    const sdkRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    const [sdkLoaded, setSdkLoaded] = useState(false);
+    const [error, setError] = useState(null);
+    // Load SDK from CDN
+    useEffect(() => {
+        loadSDKFromCDN()
+            .then(() => setSdkLoaded(true))
+            .catch((err) => setError(err.message));
+    }, []);
+    // Initialize SDK
+    useEffect(() => {
+        if (!sdkLoaded)
+            return;
+        const pexelize = getSDK();
+        if (!pexelize) {
+            setError('Pexelize SDK not found');
+            return;
+        }
+        sdkRef.current = pexelize;
+        pexelize.init({
+            id: config.containerId,
+            editorMode: config.editorMode || config.displayMode || 'email',
+            ...config,
+        });
+        const unsubscribe = pexelize.addEventListener('editor:ready', () => {
+            setIsReady(true);
+        });
+        return () => {
+            unsubscribe();
+            pexelize.destroy();
+            sdkRef.current = null;
+            setIsReady(false);
+        };
+    }, [sdkLoaded, config.containerId]);
+    return {
+        sdk: sdkRef.current,
+        isReady,
+        isLoading: !sdkLoaded && !error,
+        error,
+    };
+}
+// Export SDK CDN URL for reference
+const PEXELIZE_SDK_CDN = SDK_CDN_URL;
+
+export { PEXELIZE_SDK_CDN, PexelizeEditor, PexelizeEditor as default, usePexelizeSDK };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,318 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+// ============================================================================
+// SDK CDN Configuration
+// ============================================================================
+const SDK_CDN_URL = 'https://cdn.jsdelivr.net/gh/Zaman-Meer/pexelize-sdk@dev/dist/pexelize-sdk.min.js';
+// Global SDK reference (loaded from CDN)
+let sdkLoadPromise = null;
+/**
+ * Load SDK from CDN (singleton pattern - loads only once)
+ */
+function loadSDKFromCDN() {
+    if (sdkLoadPromise) {
+        return sdkLoadPromise;
+    }
+    // Check if already loaded
+    if (window.pexelize) {
+        return Promise.resolve();
+    }
+    sdkLoadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = SDK_CDN_URL;
+        script.async = true;
+        script.onload = () => {
+            if (window.pexelize) {
+                console.log('[Pexelize React] SDK loaded from CDN');
+                resolve();
+            }
+            else {
+                reject(new Error('SDK loaded but pexelize global not found'));
+            }
+        };
+        script.onerror = () => {
+            sdkLoadPromise = null;
+            reject(new Error(`Failed to load Pexelize SDK from ${SDK_CDN_URL}`));
+        };
+        document.head.appendChild(script);
+    });
+    return sdkLoadPromise;
+}
+/**
+ * Get SDK instance from global
+ */
+function getSDK() {
+    return window.pexelize;
+}
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+const PexelizeEditor = react.forwardRef((props, ref) => {
+    const { design, mergeTags, displayConditions, className, style, height = '600px', displayMode, editorMode, onReady, onLoad, onChange, onContentModified, onSelect, onDeselect, onImage, onLinkClick, onSave, ...config } = props;
+    const containerRef = react.useRef(null);
+    const sdkRef = react.useRef(null);
+    const containerId = react.useRef(`pexelize-editor-${Math.random().toString(36).substr(2, 9)}`);
+    const [isEditorReady, setIsEditorReady] = react.useState(false);
+    const [sdkLoaded, setSdkLoaded] = react.useState(false);
+    const [error, setError] = react.useState(null);
+    // Load SDK from CDN
+    react.useEffect(() => {
+        loadSDKFromCDN()
+            .then(() => setSdkLoaded(true))
+            .catch((err) => setError(err.message));
+    }, []);
+    // Initialize SDK once loaded
+    react.useEffect(() => {
+        if (!sdkLoaded || !containerRef.current)
+            return;
+        const pexelize = getSDK();
+        if (!pexelize) {
+            setError('Pexelize SDK not found after loading');
+            return;
+        }
+        // Store SDK reference
+        sdkRef.current = pexelize;
+        // Initialize
+        pexelize.init({
+            id: containerId.current,
+            editorMode: editorMode || displayMode || 'email',
+            ...config,
+        });
+        // Clean up on unmount
+        return () => {
+            pexelize.destroy();
+            sdkRef.current = null;
+            setIsEditorReady(false);
+        };
+    }, [sdkLoaded]);
+    // Handle ready event
+    react.useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk)
+            return;
+        const handleReady = () => {
+            setIsEditorReady(true);
+            // Set merge tags if provided
+            if (mergeTags) {
+                sdk.setMergeTags(mergeTags);
+            }
+            // Set display conditions if provided
+            if (displayConditions) {
+                sdk.setDisplayConditions(displayConditions);
+            }
+            // Load initial design if provided
+            if (design) {
+                sdk.loadDesign(design);
+            }
+            // Call onReady callback
+            onReady?.();
+        };
+        const unsubscribe = sdk.addEventListener('editor:ready', handleReady);
+        return unsubscribe;
+    }, [sdkLoaded, design, mergeTags, displayConditions, onReady]);
+    // Handle design loaded event
+    react.useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onLoad)
+            return;
+        const unsubscribe = sdk.addEventListener('design:loaded', onLoad);
+        return unsubscribe;
+    }, [sdkLoaded, onLoad]);
+    // Handle design updated event
+    react.useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onChange)
+            return;
+        const unsubscribe = sdk.addEventListener('design:updated', onChange);
+        return unsubscribe;
+    }, [sdkLoaded, onChange]);
+    // Handle content modified event
+    react.useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onContentModified)
+            return;
+        const unsubscribe = sdk.addEventListener('content:modified', onContentModified);
+        return unsubscribe;
+    }, [sdkLoaded, onContentModified]);
+    // Handle element selected event
+    react.useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onSelect)
+            return;
+        const unsubscribe = sdk.addEventListener('element:selected', onSelect);
+        return unsubscribe;
+    }, [sdkLoaded, onSelect]);
+    // Handle element deselected event
+    react.useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk || !onDeselect)
+            return;
+        const unsubscribe = sdk.addEventListener('element:deselected', onDeselect);
+        return unsubscribe;
+    }, [sdkLoaded, onDeselect]);
+    // Register callbacks
+    react.useEffect(() => {
+        const sdk = sdkRef.current;
+        if (!sdk)
+            return;
+        if (onImage) {
+            sdk.registerCallback('image', onImage);
+        }
+        if (onLinkClick) {
+            sdk.registerCallback('linkClick', onLinkClick);
+        }
+        if (onSave) {
+            sdk.registerCallback('save', onSave);
+        }
+        return () => {
+            if (sdk.unregisterCallback) {
+                sdk.unregisterCallback('image');
+                sdk.unregisterCallback('linkClick');
+                sdk.unregisterCallback('save');
+            }
+        };
+    }, [sdkLoaded, onImage, onLinkClick, onSave]);
+    // Expose SDK methods via ref
+    react.useImperativeHandle(ref, () => ({
+        loadDesign: (design) => sdkRef.current?.loadDesign(design),
+        loadBlank: () => sdkRef.current?.loadBlank(),
+        saveDesign: (callback) => sdkRef.current?.saveDesign(callback),
+        getDesign: () => sdkRef.current?.getDesign(),
+        exportHtml: (callback) => sdkRef.current?.exportHtml(callback),
+        exportHtmlAsync: () => sdkRef.current?.exportHtmlAsync(),
+        save: () => sdkRef.current?.save(),
+        undo: () => sdkRef.current?.undo(),
+        redo: () => sdkRef.current?.redo(),
+        getState: () => sdkRef.current?.getState(),
+        isReady: () => isEditorReady,
+        getSdk: () => sdkRef.current,
+    }), [isEditorReady, sdkLoaded]);
+    // Compute styles
+    const containerStyle = {
+        width: '100%',
+        height: typeof height === 'number' ? `${height}px` : height,
+        ...style,
+    };
+    // Show error state
+    if (error) {
+        return (jsxRuntime.jsx("div", { style: { ...containerStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fee', color: '#c00' }, children: jsxRuntime.jsxs("div", { style: { textAlign: 'center' }, children: [jsxRuntime.jsx("div", { style: { fontSize: '24px', marginBottom: '8px' }, children: "\u26A0\uFE0F" }), jsxRuntime.jsx("div", { children: "Failed to load Pexelize Editor" }), jsxRuntime.jsx("div", { style: { fontSize: '12px', marginTop: '4px' }, children: error })] }) }));
+    }
+    // Show loading state
+    if (!sdkLoaded) {
+        return (jsxRuntime.jsx("div", { style: { ...containerStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f5' }, children: jsxRuntime.jsxs("div", { style: { textAlign: 'center' }, children: [jsxRuntime.jsx("div", { style: { fontSize: '24px', marginBottom: '8px' }, children: "\u23F3" }), jsxRuntime.jsx("div", { children: "Loading Pexelize Editor..." })] }) }));
+    }
+    return (jsxRuntime.jsx("div", { id: containerId.current, ref: containerRef, className: className, style: containerStyle }));
+});
+PexelizeEditor.displayName = 'PexelizeEditor';
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+function usePexelizeSDK(config) {
+    const sdkRef = react.useRef(null);
+    const [isReady, setIsReady] = react.useState(false);
+    const [sdkLoaded, setSdkLoaded] = react.useState(false);
+    const [error, setError] = react.useState(null);
+    // Load SDK from CDN
+    react.useEffect(() => {
+        loadSDKFromCDN()
+            .then(() => setSdkLoaded(true))
+            .catch((err) => setError(err.message));
+    }, []);
+    // Initialize SDK
+    react.useEffect(() => {
+        if (!sdkLoaded)
+            return;
+        const pexelize = getSDK();
+        if (!pexelize) {
+            setError('Pexelize SDK not found');
+            return;
+        }
+        sdkRef.current = pexelize;
+        pexelize.init({
+            id: config.containerId,
+            editorMode: config.editorMode || config.displayMode || 'email',
+            ...config,
+        });
+        const unsubscribe = pexelize.addEventListener('editor:ready', () => {
+            setIsReady(true);
+        });
+        return () => {
+            unsubscribe();
+            pexelize.destroy();
+            sdkRef.current = null;
+            setIsReady(false);
+        };
+    }, [sdkLoaded, config.containerId]);
+    return {
+        sdk: sdkRef.current,
+        isReady,
+        isLoading: !sdkLoaded && !error,
+        error,
+    };
+}
+// Export SDK CDN URL for reference
+const PEXELIZE_SDK_CDN = SDK_CDN_URL;
+
+exports.PEXELIZE_SDK_CDN = PEXELIZE_SDK_CDN;
+exports.PexelizeEditor = PexelizeEditor;
+exports.default = PexelizeEditor;
+exports.usePexelizeSDK = usePexelizeSDK;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":[null],"names":["forwardRef","useRef","useState","useEffect","useImperativeHandle","_jsx","_jsxs"],"mappings":"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"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@pexelize/react-editor",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React wrapper component for the Pexelize Editor - SDK loaded via CDN",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "dev": "rollup -c -w",
+    "test": "vitest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "pexelize",
+    "editor",
+    "email-editor",
+    "react",
+    "react-component",
+    "template-editor",
+    "wysiwyg",
+    "cdn"
+  ],
+  "author": "Pexelize",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Zaman-Meer/pexelize-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Zaman-Meer/pexelize-react/issues"
+  },
+  "homepage": "https://github.com/Zaman-Meer/pexelize-react#readme",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "eslint": "^8.55.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.4"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}