react-tailwind-email-editor 0.0.14 → 0.0.16

package/README.md

@@ -1,11 +1,19 @@
 # React Email Editor
 
-A professional, fully customizable drag-and-drop email template editor built with React, Craft.js, Tailwind CSS.
+Design professional email marketing templates on the fly with a powerful drag-and-drop editor.
+
+A fully customizable email template builder built with React, Craft.js, and Tailwind CSS that allows developers to visually design responsive email layouts and export production-ready HTML compatible with major email clients.
+
+Ideal for building marketing campaigns, newsletters, promotional emails, transactional emails, and invoice templates quickly without writing complex table-based email HTML.
 
 <p align="center">
   <img src="https://github.com/hemanth-user13/Email-Editor-Npm/blob/master/src/assets/emailEditor1.png" width="900"/>
 </p>
 
+<p align="center">
+  <img src="https://github.com/hemanth-user13/Email-Editor-Npm/blob/master/src/assets/emailEditor3.png" width="900"/>
+</p>
+
 <p align="center">
   <img src="https://github.com/hemanth-user13/Email-Editor-Npm/blob/master/src/assets/emailEditor2.png" width="900"/>
 </p>
@@ -53,10 +61,19 @@ export default {
 
 ## Usage
 
+> [!IMPORTANT]
+> You must import the stylesheet for the editor to display correctly:
+>
+> ```tsx
+> import "react-tailwind-email-editor/dist/style.css";
+> `
+> ```
+
 ### Basic
 
 ```tsx
 import { EmailEditor } from "react-tailwind-email-editor";
+import "react-tailwind-email-editor/dist/style.css";
 
 function App() {
   return <EmailEditor />;
@@ -67,6 +84,7 @@ function App() {
 
 ```tsx
 import { EmailEditor } from "react-tailwind-email-editor";
+import "react-tailwind-email-editor/dist/style.css";
 import { MyCustomBlock } from "./MyCustomBlock";
 import { Puzzle } from "lucide-react";
 

package/dist/index.d.cts

@@ -388,28 +388,6 @@ declare const SocialLinks: {
     };
 };
 
-interface TwoColumnProps {
-    leftWidth?: number;
-    gap?: number;
-    padding?: number;
-    backgroundColor?: string;
-    children?: React.ReactNode;
-}
-declare const TwoColumn: {
-    ({ leftWidth, gap, padding, backgroundColor, }: TwoColumnProps): react_jsx_runtime.JSX.Element;
-    craft: {
-        props: {
-            leftWidth: number;
-            gap: number;
-            padding: number;
-            backgroundColor: string;
-        };
-        related: {
-            settings: () => react_jsx_runtime.JSX.Element;
-        };
-    };
-};
-
 interface CountdownProps {
     title?: string;
     days?: number;
@@ -640,4 +618,4 @@ declare const RenderNode: ({ render }: {
 
 declare const generateEmailHtml: (nodes: SerializedNodes, customRenderers?: Record<string, HtmlRenderer>) => string;
 
-export { AVAILABLE_VARIABLES, type ComponentRegistry, Container, Countdown, DEFAULT_COMPONENTS, Divider, type EditorCallbacks, type EditorComponentConfig, EditorProvider, type EditorSlots, type EditorTheme, type EditorThemeColors, EmailButton, EmailEditor, type EmailEditorProps, EmailFooter, EmailHeader, type EmailTemplate, type ExportDialogSlotProps, type HtmlRenderer, IconList, ImageBlock, InvoiceTable, Paper, type PreviewDialogSlotProps, PromoCode, RenderNode, SettingsPanel, type SettingsPanelSlotProps, SocialLinks, Spacer, Testimonial, TextBlock, type ToolbarSlotProps, Toolbox, type ToolboxSlotProps, TwoColumn, VariableText, VideoPlaceholder, buildResolver, generateEmailHtml, getCategories, useEditorConfig };
+export { AVAILABLE_VARIABLES, type ComponentRegistry, Container, Countdown, DEFAULT_COMPONENTS, Divider, type EditorCallbacks, type EditorComponentConfig, EditorProvider, type EditorSlots, type EditorTheme, type EditorThemeColors, EmailButton, EmailEditor, type EmailEditorProps, EmailFooter, EmailHeader, type EmailTemplate, type ExportDialogSlotProps, type HtmlRenderer, IconList, ImageBlock, InvoiceTable, Paper, type PreviewDialogSlotProps, PromoCode, RenderNode, SettingsPanel, type SettingsPanelSlotProps, SocialLinks, Spacer, Testimonial, TextBlock, type ToolbarSlotProps, Toolbox, type ToolboxSlotProps, VariableText, VideoPlaceholder, buildResolver, generateEmailHtml, getCategories, useEditorConfig };

package/dist/index.d.ts

@@ -388,28 +388,6 @@ declare const SocialLinks: {
     };
 };
 
-interface TwoColumnProps {
-    leftWidth?: number;
-    gap?: number;
-    padding?: number;
-    backgroundColor?: string;
-    children?: React.ReactNode;
-}
-declare const TwoColumn: {
-    ({ leftWidth, gap, padding, backgroundColor, }: TwoColumnProps): react_jsx_runtime.JSX.Element;
-    craft: {
-        props: {
-            leftWidth: number;
-            gap: number;
-            padding: number;
-            backgroundColor: string;
-        };
-        related: {
-            settings: () => react_jsx_runtime.JSX.Element;
-        };
-    };
-};
-
 interface CountdownProps {
     title?: string;
     days?: number;
@@ -640,4 +618,4 @@ declare const RenderNode: ({ render }: {
 
 declare const generateEmailHtml: (nodes: SerializedNodes, customRenderers?: Record<string, HtmlRenderer>) => string;
 
-export { AVAILABLE_VARIABLES, type ComponentRegistry, Container, Countdown, DEFAULT_COMPONENTS, Divider, type EditorCallbacks, type EditorComponentConfig, EditorProvider, type EditorSlots, type EditorTheme, type EditorThemeColors, EmailButton, EmailEditor, type EmailEditorProps, EmailFooter, EmailHeader, type EmailTemplate, type ExportDialogSlotProps, type HtmlRenderer, IconList, ImageBlock, InvoiceTable, Paper, type PreviewDialogSlotProps, PromoCode, RenderNode, SettingsPanel, type SettingsPanelSlotProps, SocialLinks, Spacer, Testimonial, TextBlock, type ToolbarSlotProps, Toolbox, type ToolboxSlotProps, TwoColumn, VariableText, VideoPlaceholder, buildResolver, generateEmailHtml, getCategories, useEditorConfig };
+export { AVAILABLE_VARIABLES, type ComponentRegistry, Container, Countdown, DEFAULT_COMPONENTS, Divider, type EditorCallbacks, type EditorComponentConfig, EditorProvider, type EditorSlots, type EditorTheme, type EditorThemeColors, EmailButton, EmailEditor, type EmailEditorProps, EmailFooter, EmailHeader, type EmailTemplate, type ExportDialogSlotProps, type HtmlRenderer, IconList, ImageBlock, InvoiceTable, Paper, type PreviewDialogSlotProps, PromoCode, RenderNode, SettingsPanel, type SettingsPanelSlotProps, SocialLinks, Spacer, Testimonial, TextBlock, type ToolbarSlotProps, Toolbox, type ToolboxSlotProps, VariableText, VideoPlaceholder, buildResolver, generateEmailHtml, getCategories, useEditorConfig };