easy-email-extensions 4.8.0 → 4.11.0

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, a8 as AutoCompleteField, l as Background, o as BackgroundColor, d as BlockAttributeConfigurationManager, B as BlockLayer, G as BlockMarketManager, I as BlockMaskWrapper, r as Border, s as BorderColor, v as BorderStyle, x as BorderWidth, ab as CheckboxField, E as ClassName, h as CollapseWrapper, C as Color, af as ColorPickerField, i as Condition, j as ContainerBackgroundColor, D as Decoration, P as DefaultPageConfigPanel, p as Direction, ad as EditGridTabField, ac as EditTabField, U as ExtensionContext, X as ExtensionProvider, F as FontFamily, t as FontSize, w as FontStyle, y as FontWeight, H as Height, a5 as ImageUploaderField, ae as InlineTextField, $ as InputWithUnitField, K as InteractivePrompt, L as LetterSpacing, m as LineHeight, q as Link, M as Margin, R as MergeTagBadgePrompt, u as MergeTags, N as NavbarLinkPadding, a2 as NumberField, z as Padding, Z as RICH_TEXT_TOOL_BAR, a9 as RadioGroupField, ah as RichTextField, a0 as SearchField, a6 as SelectField, S as ShortcutToolbar, O as SimpleLayout, a3 as SliderField, J as SourceCodePanel, Q as StandardLayout, aa as SwitchField, T as TextAlign, a1 as TextAreaField, k as TextDecoration, _ as TextField, n as TextTransform, a7 as TreeSelectField, a4 as UploadField, V as VerticalAlign, W as Width, ag as enhancer, b as getBlockTitle, g as getContextMergeTags, a as getIconNameByBlockType, Y 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 = {
@@ -35162,6 +35163,16 @@ function Text() {
     setVisible
   }));
 }
+const fullWidthOnMobileAdapter = {
+  format(obj) {
+    return Boolean(obj);
+  },
+  parse(val) {
+    if (!val)
+      return void 0;
+    return "true";
+  }
+};
 function Image$1() {
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const { onUploadImage } = useEditorProps();
@@ -35185,6 +35196,10 @@ function Image$1() {
     label: t("Background color"),
     name: `${focusIdx2}.attributes.container-background-color`,
     inline: true
+  }), /* @__PURE__ */ React__default.createElement(SwitchField, {
+    label: t("Full width on mobile"),
+    name: `${focusIdx2}.attributes.fluid-on-mobile `,
+    config: fullWidthOnMobileAdapter
   }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "0",
     header: t("Dimension")
@@ -39942,6 +39957,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 +46333,5 @@ const StandardLayout = (props) => {
     style: { width: 0, overflow: "hidden" }
   }))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
-export { InputWithUnitField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, ClassName as E, FontFamily as F, BlockMarketManager as G, Height as H, BlockMaskWrapper as I, SourceCodePanel as J, InteractivePrompt as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, SimpleLayout as O, Page as P, StandardLayout as Q, MergeTagBadgePrompt as R, ShortcutToolbar as S, TextAlign as T, ExtensionContext as U, VerticalAlign as V, Width as W, ExtensionProvider as X, useExtensionProps as Y, RICH_TEXT_TOOL_BAR as Z, TextField as _, getIconNameByBlockType as a, SearchField as a0, TextAreaField as a1, NumberField as a2, SliderField as a3, UploadField as a4, ImageUploaderField as a5, SelectField as a6, TreeSelectField as a7, AutoCompleteField as a8, RadioGroupField as a9, SwitchField as aa, CheckboxField as ab, EditTabField as ac, EditGridTabField as ad, InlineTextField as ae, ColorPickerField as af, enhancer as ag, RichTextField as ah, 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, BorderColor as s, FontSize$1 as t, MergeTags$1 as u, BorderStyle as v, FontStyle as w, BorderWidth as x, FontWeight as y, Padding 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