react-tailwind-email-editor 0.0.15 → 0.0.17

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>
@@ -146,6 +154,7 @@ function App() {
 | `templates`       | `EmailTemplate[]`              | `[]`             | Pre-defined templates                              |
 | `callbacks`       | `EditorCallbacks`              | `{}`             | Event handlers (onExport, onChange, etc.)          |
 | `initialState`    | `string`                       | —                | Serialized Craft.js state to restore               |
+| `initialHtml`     | `string`                       | —                | HTML string to parse and load into the editor      |
 | `defaultContent`  | `ReactNode`                    | —                | Default JSX content for the canvas                 |
 | `title`           | `string`                       | `'Email Editor'` | Toolbar title                                      |
 | `logo`            | `ReactNode`                    | —                | Custom logo element                                |

package/dist/index.d.cts

@@ -97,6 +97,8 @@ interface EmailEditorProps {
     templates?: EmailTemplate[];
     callbacks?: EditorCallbacks;
     initialState?: string;
+    /** HTML string to parse and load into the editor on mount */
+    initialHtml?: string;
     defaultContent?: React.ReactNode;
     title?: string;
     logo?: React.ReactNode;

package/dist/index.d.ts

@@ -97,6 +97,8 @@ interface EmailEditorProps {
     templates?: EmailTemplate[];
     callbacks?: EditorCallbacks;
     initialState?: string;
+    /** HTML string to parse and load into the editor on mount */
+    initialHtml?: string;
     defaultContent?: React.ReactNode;
     title?: string;
     logo?: React.ReactNode;

package/dist/index.js

@@ -4024,6 +4024,160 @@ var TabsContent = React9__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+
+// src/lib/htmlImporter.ts
+var nodeCounter = 0;
+var generateNodeId = () => {
+  nodeCounter++;
+  return `imported_${nodeCounter}_${Math.random().toString(36).slice(2, 8)}`;
+};
+var decodeProps = (encoded) => {
+  try {
+    const json = atob(encoded);
+    const parsed = JSON.parse(json);
+    const { _type, ...props } = parsed;
+    return props;
+  } catch (e) {
+    return null;
+  }
+};
+var importHtmlToState = (html) => {
+  nodeCounter = 0;
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  const componentEls = doc.querySelectorAll("[data-component]");
+  const nodes = {};
+  const childNodeIds = [];
+  const topLevelComponents = [];
+  componentEls.forEach((el) => {
+    let parent = el.parentElement;
+    let isNested = false;
+    while (parent) {
+      if (parent.hasAttribute("data-component")) {
+        isNested = true;
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    if (!isNested) {
+      topLevelComponents.push(el);
+    }
+  });
+  if (topLevelComponents.length === 0) {
+    const rawNodeId = generateNodeId();
+    nodes[rawNodeId] = {
+      type: { resolvedName: "RawHtml" },
+      isCanvas: false,
+      props: { html, padding: 0 },
+      displayName: "RawHtml",
+      custom: {},
+      hidden: false,
+      nodes: [],
+      linkedNodes: {},
+      parent: "ROOT"
+    };
+    childNodeIds.push(rawNodeId);
+  } else {
+    for (const el of topLevelComponents) {
+      const typeName = el.getAttribute("data-component") || "RawHtml";
+      const encodedProps = el.getAttribute("data-props") || "";
+      const props = decodeProps(encodedProps);
+      if (!props) continue;
+      const nodeId = generateNodeId();
+      const isCanvas = typeName === "Container" || typeName === "Paper";
+      const nestedChildren = [];
+      const nestedLinkedNodes = {};
+      if (typeName === "Container") {
+        const nestedEls = el.querySelectorAll(":scope > div > [data-component], :scope [data-component]");
+        nestedEls.forEach((nestedEl) => {
+          let nestedParent = nestedEl.parentElement;
+          let belongsToThis = false;
+          while (nestedParent && nestedParent !== el) {
+            if (nestedParent.hasAttribute("data-component") && nestedParent !== el) {
+              break;
+            }
+            if (nestedParent === el) {
+              belongsToThis = true;
+            }
+            nestedParent = nestedParent.parentElement;
+          }
+          if (nestedParent === el) belongsToThis = true;
+          if (belongsToThis) {
+            const nestedType = nestedEl.getAttribute("data-component") || "RawHtml";
+            const nestedEncoded = nestedEl.getAttribute("data-props") || "";
+            const nestedProps = decodeProps(nestedEncoded);
+            if (nestedProps) {
+              const childId = generateNodeId();
+              nodes[childId] = {
+                type: { resolvedName: nestedType },
+                isCanvas: false,
+                props: nestedProps,
+                displayName: nestedType,
+                custom: {},
+                hidden: false,
+                nodes: [],
+                linkedNodes: {},
+                parent: nodeId
+              };
+              nestedChildren.push(childId);
+            }
+          }
+        });
+      }
+      if (typeName === "TwoColumn") {
+        const leftId = generateNodeId();
+        const rightId = generateNodeId();
+        nodes[leftId] = {
+          type: { resolvedName: "Container" },
+          isCanvas: true,
+          props: { background: "#f9f9f9", padding: 10 },
+          displayName: "Container",
+          custom: {},
+          hidden: false,
+          nodes: [],
+          linkedNodes: {},
+          parent: nodeId
+        };
+        nodes[rightId] = {
+          type: { resolvedName: "Container" },
+          isCanvas: true,
+          props: { background: "#f9f9f9", padding: 10 },
+          displayName: "Container",
+          custom: {},
+          hidden: false,
+          nodes: [],
+          linkedNodes: {},
+          parent: nodeId
+        };
+        nestedLinkedNodes["left-column"] = leftId;
+        nestedLinkedNodes["right-column"] = rightId;
+      }
+      nodes[nodeId] = {
+        type: { resolvedName: typeName },
+        isCanvas,
+        props,
+        displayName: typeName,
+        custom: {},
+        hidden: false,
+        nodes: nestedChildren,
+        linkedNodes: nestedLinkedNodes,
+        parent: "ROOT"
+      };
+      childNodeIds.push(nodeId);
+    }
+  }
+  nodes["ROOT"] = {
+    type: { resolvedName: "Paper" },
+    isCanvas: true,
+    props: { background: "#ffffff" },
+    displayName: "Paper",
+    custom: {},
+    hidden: false,
+    nodes: childNodeIds,
+    linkedNodes: {}
+  };
+  return JSON.stringify(nodes);
+};
 var Modal = ({
   open,
   onClose,
@@ -4725,7 +4879,8 @@ var EmailEditor = ({
   showToolbox = true,
   darkMode = true,
   className,
-  style
+  style,
+  initialHtml
 }) => {
   var _a, _b, _c, _d;
   const mergedComponents = React9.useMemo(() => {
@@ -4843,7 +4998,7 @@ var EmailEditor = ({
                       onClick: () => {
                         setActiveTab("properties");
                       },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(core.Frame, { data: initialState, children: defaultEmailContent })
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8", children: initialState ? /* @__PURE__ */ jsxRuntime.jsx(core.Frame, { data: initialState, children: defaultEmailContent }) : initialHtml ? /* @__PURE__ */ jsxRuntime.jsx(core.Frame, { data: importHtmlToState(initialHtml), children: defaultEmailContent }) : /* @__PURE__ */ jsxRuntime.jsx(core.Frame, { children: defaultContent || defaultEmailContent }) })
                     }
                   )
                 }