easy-email-extensions 4.7.2 → 4.9.0

package/lib/AttributePanel/components/attributes/index.d.ts

@@ -4,6 +4,7 @@ export { Height } from './Height';
 export { TextAlign } from './TextAlign';
 export { AttributesPanelWrapper } from './AttributesPanelWrapper';
 export { CollapseWrapper } from './CollapseWrapper';
+export { Condition } from './Condition';
 export { ContainerBackgroundColor } from './ContainerBackgroundColor';
 export { LetterSpacing } from './LetterSpacing';
 export { TextDecoration } from './TextDecoration';

package/lib/index.d.ts

@@ -13,3 +13,4 @@ export * from './components/Form';
 export { getContextMergeTags } from './utils/getContextMergeTags';
 export { getIconNameByBlockType } from './utils/getIconNameByBlockType';
 export { getBlockTitle } from './utils/getBlockTitle';
+export { MjmlToJson } from './utils/MjmlToJson';

package/lib/index.js

@@ -1,7 +1,8 @@
-export { e as Align, A as AttributePanel, f as AttributesPanelWrapper, a7 as AutoCompleteField, k as Background, n as BackgroundColor, d as BlockAttributeConfigurationManager, B as BlockLayer, E as BlockMarketManager, G as BlockMaskWrapper, q as Border, r as BorderColor, u as BorderStyle, w as BorderWidth, aa as CheckboxField, z as ClassName, h as CollapseWrapper, C as Color, ae as ColorPickerField, i as ContainerBackgroundColor, D as Decoration, P as DefaultPageConfigPanel, o as Direction, ac as EditGridTabField, ab as EditTabField, R as ExtensionContext, U as ExtensionProvider, F as FontFamily, s as FontSize, v as FontStyle, x as FontWeight, H as Height, a4 as ImageUploaderField, ad as InlineTextField, _ as InputWithUnitField, J as InteractivePrompt, L as LetterSpacing, l as LineHeight, p as Link, M as Margin, Q as MergeTagBadgePrompt, t as MergeTags, N as NavbarLinkPadding, a1 as NumberField, y as Padding, Y as RICH_TEXT_TOOL_BAR, a8 as RadioGroupField, ag as RichTextField, $ as SearchField, a5 as SelectField, S as ShortcutToolbar, K as SimpleLayout, a2 as SliderField, I as SourceCodePanel, O as StandardLayout, a9 as SwitchField, T as TextAlign, a0 as TextAreaField, j as TextDecoration, Z as TextField, m as TextTransform, a6 as TreeSelectField, a3 as UploadField, V as VerticalAlign, W as Width, af as enhancer, b as getBlockTitle, g as getContextMergeTags, a as getIconNameByBlockType, X as useExtensionProps } from "./index2.js";
+export { e as Align, A as AttributePanel, f as AttributesPanelWrapper, a9 as AutoCompleteField, l as Background, o as BackgroundColor, d as BlockAttributeConfigurationManager, B as BlockLayer, I as BlockMarketManager, J as BlockMaskWrapper, r as Border, t as BorderColor, w as BorderStyle, y as BorderWidth, ac as CheckboxField, G as ClassName, h as CollapseWrapper, C as Color, ag as ColorPickerField, i as Condition, j as ContainerBackgroundColor, D as Decoration, P as DefaultPageConfigPanel, p as Direction, ae as EditGridTabField, ad as EditTabField, X as ExtensionContext, Y as ExtensionProvider, F as FontFamily, u as FontSize, x as FontStyle, z as FontWeight, H as Height, a6 as ImageUploaderField, af as InlineTextField, a0 as InputWithUnitField, O as InteractivePrompt, L as LetterSpacing, m as LineHeight, q as Link, s as Margin, U as MergeTagBadgePrompt, v as MergeTags, M as MjmlToJson, N as NavbarLinkPadding, a3 as NumberField, E as Padding, _ as RICH_TEXT_TOOL_BAR, aa as RadioGroupField, ai as RichTextField, a1 as SearchField, a7 as SelectField, S as ShortcutToolbar, Q as SimpleLayout, a4 as SliderField, K as SourceCodePanel, R as StandardLayout, ab as SwitchField, T as TextAlign, a2 as TextAreaField, k as TextDecoration, $ as TextField, n as TextTransform, a8 as TreeSelectField, a5 as UploadField, V as VerticalAlign, W as Width, ah as enhancer, b as getBlockTitle, g as getContextMergeTags, a as getIconNameByBlockType, Z as useExtensionProps } from "./index2.js";
 import "react";
 import "easy-email-editor";
 import "easy-email-core";
 import "react-dom";
 import "react-final-form";
+import "mjml-browser";
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/lib/index2.js

@@ -57,9 +57,10 @@ var __async = (__this, __arguments, generator) => {
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, useImperativeHandle, PureComponent, useCallback, useReducer, createRef, Fragment, createElement, Suspense } from "react";
 import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, DATA_CONTENT_EDITABLE_IDX, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
-import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
+import { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, createPortal } from "react-dom";
 import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState } from "react-final-form";
+import mjml from "mjml-browser";
 var index$2 = "";
 const title = "_title_1f523_1";
 var styles$a = {
@@ -39942,6 +39943,183 @@ function ShortcutToolbar() {
     }
   }));
 }
+const domParser = new DOMParser();
+function parseXMLtoBlock(text) {
+  const dom = domParser.parseFromString(text, "text/xml");
+  const root2 = dom.firstChild;
+  if (!(dom.firstChild instanceof Element)) {
+    throw new Error("Invalid content");
+  }
+  if (root2.tagName === "mjml") {
+    const { json } = mjml(text, {
+      validationLevel: "soft"
+    });
+    const parseValue2 = MjmlToJson(json);
+    return parseValue2;
+  }
+  const transform = (node) => {
+    var _a;
+    if (node.tagName === "parsererror") {
+      throw new Error("Invalid content");
+    }
+    const attributes = {};
+    node.getAttributeNames().forEach((name2) => {
+      attributes[name2] = node.getAttribute(name2);
+    });
+    const type = node.tagName.replace("mj-", "");
+    if (!BlockManager.getBlockByType(type)) {
+      if (!node.parentElement || node.parentElement.tagName !== "mj-text")
+        throw new Error("Invalid content");
+    }
+    const block2 = {
+      type,
+      attributes,
+      data: {
+        value: {
+          content: (_a = node.textContent) == null ? void 0 : _a.trim()
+        }
+      },
+      children: [...node.children].filter((item2) => item2 instanceof Element).map(transform)
+    };
+    switch (type) {
+      case BasicType.TEXT:
+        block2.data.value.content = node.innerHTML;
+        block2.children = [];
+    }
+    return block2;
+  };
+  return transform(root2);
+}
+function MjmlToJson(data) {
+  if (lodash.exports.isString(data))
+    return parseXMLtoBlock(data);
+  const transform = (item2) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    const attributes = item2.attributes;
+    switch (item2.tagName) {
+      case "mjml":
+        const body = (_a = item2.children) == null ? void 0 : _a.find((item22) => item22.tagName === "mj-body");
+        const head = (_b = item2.children) == null ? void 0 : _b.find((item22) => item22.tagName === "mj-head");
+        const metaData = getMetaDataFromMjml(head);
+        const fonts = ((_c = head == null ? void 0 : head.children) == null ? void 0 : _c.filter((child) => child.tagName === "mj-font").map((child) => ({
+          name: child.attributes.name,
+          href: child.attributes.href
+        }))) || [];
+        const mjAttributes = ((_e = (_d = head == null ? void 0 : head.children) == null ? void 0 : _d.find((item22) => item22.tagName === "mj-attributes")) == null ? void 0 : _e.children) || [];
+        const headStyles = (_f = head == null ? void 0 : head.children) == null ? void 0 : _f.filter((item22) => item22.tagName === "mj-style").map((item22) => ({ content: item22.content, inline: item22.inline }));
+        const headAttributes = [
+          ...new Set(mjAttributes.filter((item22) => {
+            const isFontFamily = item22.tagName === "mj-all" && item22.attributes["font-family"] === metaData["font-family"];
+            const isTextColor = item22.tagName === "mj-text" && item22.attributes["color"] === metaData["text-color"];
+            const isContentColor = ["mj-wrapper", "mj-section"].includes(item22.tagName) && item22.attributes["background-color"] === metaData["content-background-color"];
+            return !isFontFamily && !isTextColor && !isContentColor;
+          }).map((item22) => `<${item22.tagName} ${Object.keys(item22.attributes).map((key) => `${key}="${item22.attributes[key]}"`).join(" ")} />`))
+        ].join("\n");
+        const breakpoint = (_g = head == null ? void 0 : head.children) == null ? void 0 : _g.find((item22) => item22.tagName === "mj-breakpoint");
+        return BlockManager.getBlockByType(BasicType.PAGE).create({
+          attributes: body.attributes,
+          children: (_h = body.children) == null ? void 0 : _h.map(transform),
+          data: {
+            value: __spreadValues({
+              headAttributes,
+              headStyles,
+              fonts,
+              breakpoint: breakpoint == null ? void 0 : breakpoint.attributes.breakpoint
+            }, metaData)
+          }
+        });
+      default:
+        const tag = item2.tagName.replace("mj-", "").toLowerCase();
+        const block2 = BlockManager.getBlockByType(tag);
+        if (!block2) {
+          throw new Error(`${tag} block no found `);
+        }
+        const payload = {
+          type: block2.type,
+          attributes,
+          data: {
+            value: {}
+          },
+          children: []
+        };
+        if (item2.content) {
+          payload.data.value.content = item2.content;
+        }
+        if (block2.type === BasicType.CAROUSEL) {
+          payload.data.value.images = ((_i = item2.children) == null ? void 0 : _i.map((child) => {
+            return child.attributes;
+          })) || [];
+          payload.children = [];
+        } else if (block2.type === BasicType.NAVBAR) {
+          payload.data.value.links = ((_j = item2.children) == null ? void 0 : _j.map((child) => {
+            const navbarLinkData = __spreadProps(__spreadValues({
+              color: "#1890ff",
+              "font-size": "13px",
+              target: "_blank",
+              padding: "15px 10px"
+            }, child.attributes), {
+              content: child.content
+            });
+            formatPadding(navbarLinkData, "padding");
+            return navbarLinkData;
+          })) || [];
+          payload.children = [];
+        } else if (block2.type === BasicType.SOCIAL) {
+          payload.data.value.elements = ((_k = item2.children) == null ? void 0 : _k.map((child) => {
+            return __spreadProps(__spreadValues({}, child.attributes), {
+              content: child.content
+            });
+          })) || [];
+          payload.children = [];
+        } else if (item2.children) {
+          payload.children = item2.children.map(transform);
+        }
+        const blockData = block2.create(payload);
+        formatPadding(blockData.attributes, "padding");
+        formatPadding(blockData.attributes, "inner-padding");
+        return blockData;
+    }
+  };
+  return transform(data);
+}
+function getMetaDataFromMjml(data) {
+  var _a;
+  const mjmlHtmlAttributes = (_a = data == null ? void 0 : data.children) == null ? void 0 : _a.filter((item2) => item2.tagName === "mj-html-attributes").map((item2) => item2.children).flat().filter((item2) => item2 && item2.attributes.class === "easy-email").reduce((obj, item2) => {
+    if (!item2)
+      return obj;
+    const name2 = item2.attributes["attribute-name"];
+    const isMultipleAttributes = Boolean(item2.attributes["multiple-attributes"]);
+    obj[name2] = isMultipleAttributes ? lodash.exports.pickBy(__spreadProps(__spreadValues({}, item2.attributes), {
+      "attribute-name": void 0,
+      "multiple-attributes": void 0,
+      class: void 0
+    }), lodash.exports.identity) : item2.attributes[name2];
+    return obj;
+  }, {});
+  return lodash.exports.pickBy(mjmlHtmlAttributes, lodash.exports.identity);
+}
+function formatPadding(attributes, attributeName) {
+  const ele = document.createElement("div");
+  Object.keys(attributes).forEach((key) => {
+    var _a;
+    if (new RegExp(`^${attributeName}`).test(key)) {
+      const formatKey = (_a = new RegExp(`^${attributeName}(.*)`).exec(key)) == null ? void 0 : _a[0];
+      if (formatKey) {
+        ele.style[formatKey] = attributes[key];
+        delete attributes[key];
+      }
+    }
+  });
+  const newPadding = [
+    ele.style.paddingTop,
+    ele.style.paddingRight,
+    ele.style.paddingBottom,
+    ele.style.paddingLeft
+  ].filter(Boolean).join(" ");
+  if (newPadding) {
+    attributes[attributeName] = newPadding;
+  }
+}
 function SourceCodePanel() {
   const { setValueByIdx, focusBlock, values } = useBlock();
   const { focusIdx } = useFocusIdx();
@@ -46141,5 +46319,5 @@ const StandardLayout = (props) => {
     style: { width: 0, overflow: "hidden" }
   }))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-export { SearchField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, BlockMarketManager as E, FontFamily as F, BlockMaskWrapper as G, Height as H, SourceCodePanel as I, InteractivePrompt as J, SimpleLayout as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, StandardLayout as O, Page as P, MergeTagBadgePrompt as Q, ExtensionContext as R, ShortcutToolbar as S, TextAlign as T, ExtensionProvider as U, VerticalAlign as V, Width as W, useExtensionProps as X, RICH_TEXT_TOOL_BAR as Y, TextField as Z, InputWithUnitField as _, getIconNameByBlockType as a, TextAreaField as a0, NumberField as a1, SliderField as a2, UploadField as a3, ImageUploaderField as a4, SelectField as a5, TreeSelectField as a6, AutoCompleteField as a7, RadioGroupField as a8, SwitchField as a9, CheckboxField as aa, EditTabField as ab, EditGridTabField as ac, InlineTextField as ad, ColorPickerField as ae, enhancer as af, RichTextField as ag, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, ContainerBackgroundColor as i, TextDecoration as j, Background as k, LineHeight as l, TextTransform as m, BackgroundColor as n, Direction as o, Link as p, Border as q, BorderColor as r, FontSize$1 as s, MergeTags$1 as t, BorderStyle as u, FontStyle as v, BorderWidth as w, FontWeight as x, Padding as y, ClassName as z };
+export { TextField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, Padding as E, FontFamily as F, ClassName as G, Height as H, BlockMarketManager as I, BlockMaskWrapper as J, SourceCodePanel as K, LetterSpacing as L, MjmlToJson as M, NavbarLinkPadding as N, InteractivePrompt as O, Page as P, SimpleLayout as Q, StandardLayout as R, ShortcutToolbar as S, TextAlign as T, MergeTagBadgePrompt as U, VerticalAlign as V, Width as W, ExtensionContext as X, ExtensionProvider as Y, useExtensionProps as Z, RICH_TEXT_TOOL_BAR as _, getIconNameByBlockType as a, InputWithUnitField as a0, SearchField as a1, TextAreaField as a2, NumberField as a3, SliderField as a4, UploadField as a5, ImageUploaderField as a6, SelectField as a7, TreeSelectField as a8, AutoCompleteField as a9, RadioGroupField as aa, SwitchField as ab, CheckboxField as ac, EditTabField as ad, EditGridTabField as ae, InlineTextField as af, ColorPickerField as ag, enhancer as ah, RichTextField as ai, getBlockTitle as b, commonjsGlobal as c, BlockAttributeConfigurationManager as d, Align as e, AttributesPanelWrapper as f, getContextMergeTags as g, CollapseWrapper as h, Condition as i, ContainerBackgroundColor as j, TextDecoration as k, Background as l, LineHeight as m, TextTransform as n, BackgroundColor as o, Direction as p, Link as q, Border as r, Margin as s, BorderColor as t, FontSize$1 as u, MergeTags$1 as v, BorderStyle as w, FontStyle as x, BorderWidth as y, FontWeight as z };
 //# sourceMappingURL=index2.js.map