react-tailwind-email-editor 0.0.5 → 0.0.7

package/README.md

@@ -1,6 +1,6 @@
 # React Email Editor
 
-A professional, fully customizable drag-and-drop email template editor built with React, Craft.js, Tailwind CSS, and shadcn/ui.
+A professional, fully customizable drag-and-drop email template editor built with React, Craft.js, Tailwind CSS.
 
 <p align="center">
   <img src="https://github.com/hemanth-user13/Email-Editor-Npm/blob/master/src/assets/emailEditor1.png" width="900"/>
@@ -23,11 +23,8 @@ A professional, fully customizable drag-and-drop email template editor built wit
 
 ## Installation
 
-```bash
-# Copy the src/components/editor directory into your project
-cp -r src/components/editor your-project/src/components/editor
-cp src/lib/htmlExporter.ts your-project/src/lib/htmlExporter.ts
-```
+````bash
+
 
 ### Peer Dependencies
 
@@ -35,7 +32,7 @@ Ensure your project has these installed:
 
 ```bash
 npm install @craftjs/core react react-dom lucide-react tailwindcss tailwind-merge clsx class-variance-authority
-```
+````
 
 Also requires [shadcn/ui](https://ui.shadcn.com/) components: `button`, `scroll-area`, `tabs`, `accordion`, `dialog`, `dropdown-menu`, `popover`, `label`, `separator`.
 
@@ -59,7 +56,7 @@ export default {
 ### Basic
 
 ```tsx
-import { EmailEditor } from "@/components/editor";
+import { EmailEditor } from "react-tailwind-email-editor";
 
 function App() {
   return <EmailEditor />;
@@ -69,7 +66,7 @@ function App() {
 ### With Custom Components
 
 ```tsx
-import { EmailEditor } from "@/components/editor";
+import { EmailEditor } from "react-tailwind-email-editor";
 import { MyCustomBlock } from "./MyCustomBlock";
 import { Puzzle } from "lucide-react";
 
@@ -93,7 +90,7 @@ function App() {
 ### Full Customization
 
 ```tsx
-import { EmailEditor } from "@/components/editor";
+import { EmailEditor } from "react-tailwind-email-editor";
 
 function App() {
   return (

package/dist/index.d.cts

@@ -4,74 +4,45 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SerializedNodes } from '@craftjs/core';
 
 interface EditorComponentConfig {
-    /** The React component to render in the editor canvas */
     component: React.ComponentType<any>;
-    /** Display name in the toolbox */
     label: string;
-    /** Short description shown below the label */
     description?: string;
-    /** Lucide icon or custom icon component */
     icon?: LucideIcon | React.ComponentType<{
         className?: string;
     }>;
-    /** Category grouping in the toolbox */
     category?: string;
-    /** Default element to create when dragged (JSX element). If not provided, creates <Component /> */
     createElement?: () => React.ReactElement;
 }
 type ComponentRegistry = Record<string, EditorComponentConfig>;
 interface EditorThemeColors {
-    /** Primary accent color */
     primary?: string;
-    /** Primary foreground (text on primary) */
     primaryForeground?: string;
-    /** Background color of sidebars and panels */
     panelBackground?: string;
-    /** Canvas/workspace background */
     canvasBackground?: string;
-    /** Border color for panels and components */
     border?: string;
-    /** Muted background for inactive elements */
     muted?: string;
-    /** Text color for muted/secondary text */
     mutedForeground?: string;
-    /** Destructive/delete action color */
     destructive?: string;
-    /** Foreground/text color */
     foreground?: string;
-    /** Background color */
     background?: string;
 }
 interface EditorTheme {
-    /** Custom color overrides */
     colors?: EditorThemeColors;
-    /** Border radius for UI elements */
     borderRadius?: number;
-    /** Font family for editor UI */
     fontFamily?: string;
-    /** Paper/canvas width in pixels */
     paperWidth?: number;
-    /** Paper minimum height in pixels */
     paperMinHeight?: number;
-    /** Paper default background */
     paperBackground?: string;
 }
 interface EditorSlots {
-    /** Custom toolbar component (replaces the entire top bar) */
     toolbar?: React.ComponentType<ToolbarSlotProps>;
-    /** Custom toolbox/sidebar component */
     toolbox?: React.ComponentType<ToolboxSlotProps>;
-    /** Custom settings panel component */
     settingsPanel?: React.ComponentType<SettingsPanelSlotProps>;
-    /** Custom empty state for settings panel when nothing is selected */
     settingsEmptyState?: React.ComponentType;
-    /** Custom render node wrapper */
     renderNode?: React.ComponentType<{
         render: React.ReactNode;
     }>;
-    /** Custom export dialog content */
     exportDialog?: React.ComponentType<ExportDialogSlotProps>;
-    /** Custom preview dialog content */
     previewDialog?: React.ComponentType<PreviewDialogSlotProps>;
 }
 interface ToolbarSlotProps {
@@ -103,60 +74,38 @@ interface PreviewDialogSlotProps {
     onClose: () => void;
 }
 interface EmailTemplate {
-    /** Unique template identifier */
     id: string;
-    /** Display name */
     name: string;
-    /** Template description */
     description?: string;
-    /** Lucide icon */
     icon?: LucideIcon;
-    /** Serialized Craft.js JSON state */
     data: string;
 }
 interface EditorCallbacks {
-    /** Called when HTML is exported */
     onExport?: (html: string) => void;
-    /** Called when the editor state changes */
     onChange?: (serializedState: string) => void;
-    /** Called when a template is loaded */
     onTemplateLoad?: (templateId: string) => void;
-    /** Called when canvas is cleared */
     onClear?: () => void;
+    /** Called when theme color changes via the built-in color picker */
+    onColorChange?: (primaryHsl: string) => void;
 }
 type HtmlRenderer = (typeName: string, props: Record<string, unknown>, childrenHtml: string, linkedNodes?: Record<string, string>) => string | null;
 interface EmailEditorProps {
-    /** Additional components to register (merged with built-ins) */
     components?: ComponentRegistry;
-    /** Replace ALL built-in components (use only your own) */
     replaceBuiltins?: boolean;
-    /** Theme customization */
     theme?: EditorTheme;
-    /** Slot overrides for UI sections */
     slots?: EditorSlots;
-    /** Pre-defined templates */
     templates?: EmailTemplate[];
-    /** Event callbacks */
     callbacks?: EditorCallbacks;
-    /** Initial serialized state to load */
     initialState?: string;
-    /** Default content to show (JSX children for the Frame) */
     defaultContent?: React.ReactNode;
-    /** Editor title displayed in the toolbar */
     title?: string;
-    /** Logo element for the toolbar */
     logo?: React.ReactNode;
-    /** Custom HTML renderers for export (keyed by component resolved name) */
     htmlRenderers?: Record<string, HtmlRenderer>;
-    /** Whether to show the toolbar */
     showToolbar?: boolean;
-    /** Whether to show the left toolbox sidebar */
     showToolbox?: boolean;
-    /** Whether to show the right settings panel */
-    showSettingsPanel?: boolean;
-    /** Custom class name for the editor root */
+    /** Enable dark mode (applies `dark` class to editor root). Default: true */
+    darkMode?: boolean;
     className?: string;
-    /** Custom inline styles for the editor root */
     style?: React.CSSProperties;
 }
 
@@ -173,12 +122,12 @@ interface EditorContextValue {
     logo?: React.ReactNode;
     showToolbar: boolean;
     showToolbox: boolean;
-    showSettingsPanel: boolean;
+    showSettingsPanel?: boolean;
 }
 declare const useEditorConfig: () => EditorContextValue;
 interface EditorProviderProps {
     children: React.ReactNode;
-    value: Omit<EditorContextValue, 'theme'> & {
+    value: Omit<EditorContextValue, "theme"> & {
         theme: EditorTheme;
     };
 }

package/dist/index.d.ts

@@ -4,74 +4,45 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SerializedNodes } from '@craftjs/core';
 
 interface EditorComponentConfig {
-    /** The React component to render in the editor canvas */
     component: React.ComponentType<any>;
-    /** Display name in the toolbox */
     label: string;
-    /** Short description shown below the label */
     description?: string;
-    /** Lucide icon or custom icon component */
     icon?: LucideIcon | React.ComponentType<{
         className?: string;
     }>;
-    /** Category grouping in the toolbox */
     category?: string;
-    /** Default element to create when dragged (JSX element). If not provided, creates <Component /> */
     createElement?: () => React.ReactElement;
 }
 type ComponentRegistry = Record<string, EditorComponentConfig>;
 interface EditorThemeColors {
-    /** Primary accent color */
     primary?: string;
-    /** Primary foreground (text on primary) */
     primaryForeground?: string;
-    /** Background color of sidebars and panels */
     panelBackground?: string;
-    /** Canvas/workspace background */
     canvasBackground?: string;
-    /** Border color for panels and components */
     border?: string;
-    /** Muted background for inactive elements */
     muted?: string;
-    /** Text color for muted/secondary text */
     mutedForeground?: string;
-    /** Destructive/delete action color */
     destructive?: string;
-    /** Foreground/text color */
     foreground?: string;
-    /** Background color */
     background?: string;
 }
 interface EditorTheme {
-    /** Custom color overrides */
     colors?: EditorThemeColors;
-    /** Border radius for UI elements */
     borderRadius?: number;
-    /** Font family for editor UI */
     fontFamily?: string;
-    /** Paper/canvas width in pixels */
     paperWidth?: number;
-    /** Paper minimum height in pixels */
     paperMinHeight?: number;
-    /** Paper default background */
     paperBackground?: string;
 }
 interface EditorSlots {
-    /** Custom toolbar component (replaces the entire top bar) */
     toolbar?: React.ComponentType<ToolbarSlotProps>;
-    /** Custom toolbox/sidebar component */
     toolbox?: React.ComponentType<ToolboxSlotProps>;
-    /** Custom settings panel component */
     settingsPanel?: React.ComponentType<SettingsPanelSlotProps>;
-    /** Custom empty state for settings panel when nothing is selected */
     settingsEmptyState?: React.ComponentType;
-    /** Custom render node wrapper */
     renderNode?: React.ComponentType<{
         render: React.ReactNode;
     }>;
-    /** Custom export dialog content */
     exportDialog?: React.ComponentType<ExportDialogSlotProps>;
-    /** Custom preview dialog content */
     previewDialog?: React.ComponentType<PreviewDialogSlotProps>;
 }
 interface ToolbarSlotProps {
@@ -103,60 +74,38 @@ interface PreviewDialogSlotProps {
     onClose: () => void;
 }
 interface EmailTemplate {
-    /** Unique template identifier */
     id: string;
-    /** Display name */
     name: string;
-    /** Template description */
     description?: string;
-    /** Lucide icon */
     icon?: LucideIcon;
-    /** Serialized Craft.js JSON state */
     data: string;
 }
 interface EditorCallbacks {
-    /** Called when HTML is exported */
     onExport?: (html: string) => void;
-    /** Called when the editor state changes */
     onChange?: (serializedState: string) => void;
-    /** Called when a template is loaded */
     onTemplateLoad?: (templateId: string) => void;
-    /** Called when canvas is cleared */
     onClear?: () => void;
+    /** Called when theme color changes via the built-in color picker */
+    onColorChange?: (primaryHsl: string) => void;
 }
 type HtmlRenderer = (typeName: string, props: Record<string, unknown>, childrenHtml: string, linkedNodes?: Record<string, string>) => string | null;
 interface EmailEditorProps {
-    /** Additional components to register (merged with built-ins) */
     components?: ComponentRegistry;
-    /** Replace ALL built-in components (use only your own) */
     replaceBuiltins?: boolean;
-    /** Theme customization */
     theme?: EditorTheme;
-    /** Slot overrides for UI sections */
     slots?: EditorSlots;
-    /** Pre-defined templates */
     templates?: EmailTemplate[];
-    /** Event callbacks */
     callbacks?: EditorCallbacks;
-    /** Initial serialized state to load */
     initialState?: string;
-    /** Default content to show (JSX children for the Frame) */
     defaultContent?: React.ReactNode;
-    /** Editor title displayed in the toolbar */
     title?: string;
-    /** Logo element for the toolbar */
     logo?: React.ReactNode;
-    /** Custom HTML renderers for export (keyed by component resolved name) */
     htmlRenderers?: Record<string, HtmlRenderer>;
-    /** Whether to show the toolbar */
     showToolbar?: boolean;
-    /** Whether to show the left toolbox sidebar */
     showToolbox?: boolean;
-    /** Whether to show the right settings panel */
-    showSettingsPanel?: boolean;
-    /** Custom class name for the editor root */
+    /** Enable dark mode (applies `dark` class to editor root). Default: true */
+    darkMode?: boolean;
     className?: string;
-    /** Custom inline styles for the editor root */
     style?: React.CSSProperties;
 }
 
@@ -173,12 +122,12 @@ interface EditorContextValue {
     logo?: React.ReactNode;
     showToolbar: boolean;
     showToolbox: boolean;
-    showSettingsPanel: boolean;
+    showSettingsPanel?: boolean;
 }
 declare const useEditorConfig: () => EditorContextValue;
 interface EditorProviderProps {
     children: React.ReactNode;
-    value: Omit<EditorContextValue, 'theme'> & {
+    value: Omit<EditorContextValue, "theme"> & {
         theme: EditorTheme;
     };
 }