react-tailwind-email-editor 0.0.16 → 0.0.18

package/dist/index.mjs

@@ -4000,6 +4000,160 @@ var TabsContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TabsContent.displayName = TabsPrimitive.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,
@@ -4701,7 +4855,8 @@ var EmailEditor = ({
   showToolbox = true,
   darkMode = true,
   className,
-  style
+  style,
+  initialHtml
 }) => {
   var _a, _b, _c, _d;
   const mergedComponents = useMemo(() => {
@@ -4819,7 +4974,7 @@ var EmailEditor = ({
                       onClick: () => {
                         setActiveTab("properties");
                       },
-                      children: /* @__PURE__ */ jsx(Frame, { data: initialState, children: defaultEmailContent })
+                      children: /* @__PURE__ */ jsx("div", { className: "p-8", children: initialState ? /* @__PURE__ */ jsx(Frame, { data: initialState, children: defaultEmailContent }) : initialHtml ? /* @__PURE__ */ jsx(Frame, { data: importHtmlToState(initialHtml), children: defaultEmailContent }) : /* @__PURE__ */ jsx(Frame, { children: defaultContent || defaultEmailContent }) })
                     }
                   )
                 }