easy-email-extensions 4.13.0 → 4.14.0

package/lib/ConfigurationPanel/index.d.ts

@@ -1,7 +1,9 @@
 export interface ConfigurationPanelProps {
     showSourceCode: boolean;
+    jsonReadOnly: boolean;
+    mjmlReadOnly: boolean;
     height: string;
     onBack?: () => void;
     compact?: boolean;
 }
-export declare function ConfigurationPanel({ showSourceCode, height, onBack, compact, }: ConfigurationPanelProps): JSX.Element | null;
+export declare function ConfigurationPanel({ showSourceCode, height, onBack, compact, jsonReadOnly, mjmlReadOnly, }: ConfigurationPanelProps): JSX.Element | null;

package/lib/EditPanel/ConfigurationDrawer/index.d.ts

@@ -1,5 +1,7 @@
-export declare function ConfigurationDrawer({ height, compact, showSourceCode, }: {
+export declare function ConfigurationDrawer({ height, compact, showSourceCode, jsonReadOnly, mjmlReadOnly, }: {
     height: string;
     compact: boolean;
     showSourceCode: boolean;
+    jsonReadOnly: boolean;
+    mjmlReadOnly: boolean;
 }): JSX.Element;

package/lib/EditPanel/index.d.ts

@@ -1,3 +1,5 @@
-export declare function EditPanel({ showSourceCode }: {
+export declare function EditPanel({ showSourceCode, jsonReadOnly, mjmlReadOnly, }: {
     showSourceCode: boolean;
+    jsonReadOnly: boolean;
+    mjmlReadOnly: boolean;
 }): JSX.Element;

package/lib/SimpleLayout/SimpleLayout.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { BlockLayerProps } from '../BlockLayer';
 export declare const SimpleLayout: React.FC<{
     showSourceCode?: boolean;
+    jsonReadOnly?: boolean;
+    mjmlReadOnly?: boolean;
     defaultShowLayer?: boolean;
     children: React.ReactNode | React.ReactElement;
 } & BlockLayerProps>;

package/lib/SourceCodePanel/index.d.ts

@@ -1 +1,4 @@
-export declare function SourceCodePanel(): JSX.Element | null;
+export declare function SourceCodePanel({ jsonReadOnly, mjmlReadOnly }: {
+    jsonReadOnly: boolean;
+    mjmlReadOnly: boolean;
+}): JSX.Element | null;

package/lib/components/Providers/ExtensionProvider.d.ts

@@ -33,6 +33,8 @@ export interface ExtensionProps extends BlockLayerProps {
         displayType: 'custom';
     }>;
     showSourceCode?: boolean;
+    jsonReadOnly?: boolean;
+    mjmlReadOnly?: boolean;
     compact?: boolean;
 }
 export declare const ExtensionContext: React.Context<ExtensionProps>;

package/lib/index2.js

@@ -63,7 +63,7 @@ import { Field, useForm as useForm$1, useField, Form as Form$3, version as versi
 import mjml from "mjml-browser";
 var index$2 = "";
 const title = "_title_1f523_1";
-var styles$a = {
+var styles$b = {
   title
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -30349,7 +30349,7 @@ function CacheTree(props) {
 const wrap$1 = "_wrap_aul3a_1";
 const listItem = "_listItem_aul3a_13";
 const contextmenuMark = "_contextmenuMark_aul3a_23";
-var styles$9 = {
+var styles$a = {
   wrap: wrap$1,
   listItem,
   contextmenuMark
@@ -30622,7 +30622,7 @@ const btnWrap = "_btn-wrap_jzksr_43";
 const upload = "_upload_jzksr_68";
 const wrap = "_wrap_jzksr_80";
 const urlInput = "_urlInput_jzksr_80";
-var styles$8 = {
+var styles$9 = {
   container,
   error,
   item,
@@ -30855,27 +30855,27 @@ function ImageUploader(props) {
   const content = useMemo(() => {
     if (isUploading) {
       return /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$8["item"]
+        className: styles$9["item"]
       }, /* @__PURE__ */ React__default.createElement("div", {
-        className: classnames$1(styles$8["info"])
+        className: classnames$1(styles$9["info"])
       }, /* @__PURE__ */ React__default.createElement(Spin$1, null), /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$8["btn-wrap"]
+        className: styles$9["btn-wrap"]
       })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$8["upload"],
+        className: styles$9["upload"],
         onClick: onUpload
       }, /* @__PURE__ */ React__default.createElement(IconPlus$1, null), /* @__PURE__ */ React__default.createElement("div", null, "Upload"));
     }
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$8["item"]
+      className: styles$9["item"]
     }, /* @__PURE__ */ React__default.createElement("div", {
-      className: classnames$1(styles$8["info"])
+      className: classnames$1(styles$9["info"])
     }, /* @__PURE__ */ React__default.createElement("img", {
       src: props.value
     }), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$8["btn-wrap"]
+      className: styles$9["btn-wrap"]
     }, /* @__PURE__ */ React__default.createElement("a", {
       title: t("Preview"),
       onClick: () => setPreview(true)
@@ -30891,9 +30891,9 @@ function ImageUploader(props) {
     });
   }
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$8.wrap
+    className: styles$9.wrap
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$8["container"]
+    className: styles$9["container"]
   }, content, /* @__PURE__ */ React__default.createElement(Grid.Row, {
     style: { width: "100%" }
   }, mergeTags2 && /* @__PURE__ */ React__default.createElement(Popover$1, {
@@ -31226,7 +31226,7 @@ const editTab = "_editTab_1m9nq_20";
 const inputWithUnit = "_inputWithUnit_1m9nq_27";
 const inputWithUnitSelectOption = "_inputWithUnitSelectOption_1m9nq_35";
 const colorPicker = "_colorPicker_1m9nq_40";
-var styles$7 = {
+var styles$8 = {
   helperText,
   "label-hidden": "_label-hidden_1m9nq_9",
   labelHidden,
@@ -31254,7 +31254,7 @@ function EditTab(props) {
   };
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
     destroyOnHide: true,
-    className: classnames(styles$7.editTab),
+    className: classnames(styles$8.editTab),
     style: { border: "none" },
     type: "card",
     activeTab,
@@ -33069,7 +33069,7 @@ function ColorPickerContent(props) {
   } catch (error2) {
   }
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$7.colorPicker,
+    className: styles$8.colorPicker,
     style: { width: 202, paddingTop: 12, paddingBottom: 12 }
   }, /* @__PURE__ */ React__default.createElement("div", {
     style: { padding: "0px 16px" }
@@ -37171,40 +37171,40 @@ function ContextMenu({
       left,
       top
     },
-    className: styles$9.wrap,
+    className: styles$a.wrap,
     onClick: (e) => e.stopPropagation()
   }, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$9.listItem,
+    className: styles$a.listItem,
     onClick: handleMoveUp
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-top",
     style: { marginRight: 10 }
   }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Move up"))), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$9.listItem,
+    className: styles$a.listItem,
     onClick: handleMoveDown
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-bottom",
     style: { marginRight: 10 }
   }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Move down"))), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$9.listItem,
+    className: styles$a.listItem,
     onClick: handleCopy
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-copy",
     style: { marginRight: 10 }
   }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Copy"))), props.onAddCollection && /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$9.listItem,
+    className: styles$a.listItem,
     onClick: handleAddToCollection
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-start",
     style: { marginRight: 10 }
   }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection")), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$9.listItem,
+    className: styles$a.listItem,
     onClick: handleDelete
   }, /* @__PURE__ */ React__default.createElement(IconFont, {
     iconName: "icon-delete",
     style: { marginRight: 10 }
   }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, t("Delete")))), /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$9.contextmenuMark,
+    className: styles$a.contextmenuMark,
     onClick: onClose,
     onContextMenu: (e) => {
       e.preventDefault();
@@ -37450,7 +37450,7 @@ function BlockLayer(props) {
     const title2 = propsRenderTitle ? propsRenderTitle(data) : getBlockTitle(data);
     return /* @__PURE__ */ React__default.createElement("div", {
       "data-tree-idx": data.id,
-      className: classnames(styles$a.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
+      className: classnames(styles$b.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
     }, /* @__PURE__ */ React__default.createElement(Space$1, {
       align: "center",
       size: "mini"
@@ -37468,7 +37468,7 @@ function BlockLayer(props) {
     }, /* @__PURE__ */ React__default.createElement(TextStyle, {
       size: "smallest"
     }, title2))), /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$a.eyeIcon
+      className: styles$b.eyeIcon
     }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
       blockData: data,
       onToggleVisible
@@ -37592,7 +37592,7 @@ function BlockLayer(props) {
 const BlocksPanel$1 = "_BlocksPanel_15fho_1";
 const blockItem$1 = "_blockItem_15fho_5";
 const closeBtn = "_closeBtn_15fho_12";
-var styles$6 = {
+var styles$7 = {
   BlocksPanel: BlocksPanel$1,
   blockItem: blockItem$1,
   closeBtn
@@ -37650,7 +37650,7 @@ __publicField(BlockMarketManager, "category", []);
 __publicField(BlockMarketManager, "subscriptHandles", []);
 const mask = "_mask_1a0xw_1";
 const drag = "_drag_1a0xw_12";
-var styles$5 = {
+var styles$6 = {
   mask,
   drag
 };
@@ -37660,7 +37660,7 @@ const BlockMaskWrapper = (props) => {
   const { type, payload } = props;
   const onMouseDown = useCallback(() => {
     if (ref.current) {
-      ref.current.classList.add(styles$5.drag);
+      ref.current.classList.add(styles$6.drag);
     }
   }, []);
   const onMaskMouseDown = useCallback((ev) => {
@@ -37672,7 +37672,7 @@ const BlockMaskWrapper = (props) => {
   useEffect(() => {
     const mouseup = () => {
       if (ref.current) {
-        ref.current.classList.remove(styles$5.drag);
+        ref.current.classList.remove(styles$6.drag);
       }
     };
     document.addEventListener("mouseup", mouseup);
@@ -37683,7 +37683,7 @@ const BlockMaskWrapper = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { position: "relative" }
   }, props.children, /* @__PURE__ */ React__default.createElement("div", {
-    className: styles$5.wrapper,
+    className: styles$6.wrapper,
     style: {
       position: "absolute",
       height: "100%",
@@ -37698,7 +37698,7 @@ const BlockMaskWrapper = (props) => {
     payload
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref,
-    className: styles$5.mask,
+    className: styles$6.mask,
     onMouseDown: onMaskMouseDown
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref: dragRef,
@@ -39796,7 +39796,7 @@ const BlocksPanel = (props) => {
   }, /* @__PURE__ */ React__default.createElement("div", {
     onClick: toggleVisible
   }, props.children), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
-    className: styles$6.BlocksPanel,
+    className: styles$7.BlocksPanel,
     style: {
       pointerEvents: isDragging ? "none" : void 0,
       position: "fixed",
@@ -39812,7 +39812,7 @@ const BlocksPanel = (props) => {
     bodyStyle: { padding: 0 },
     title: "Drag block",
     extra: /* @__PURE__ */ React__default.createElement("div", {
-      className: styles$6.closeBtn
+      className: styles$7.closeBtn
     }, /* @__PURE__ */ React__default.createElement(IconFont, {
       iconName: "icon-close",
       onClick: toggleVisible
@@ -39848,7 +39848,7 @@ const BlockPanelItem = React__default.memo((props) => {
         alignment: "center",
         spacing: "extraTight"
       }, /* @__PURE__ */ React__default.createElement("div", {
-        className: styles$6.blockItem
+        className: styles$7.blockItem
       }, block2.title), block2.description && /* @__PURE__ */ React__default.createElement(Help, {
         title: block2.description
       }))
@@ -40045,7 +40045,7 @@ function MjmlToJson(data) {
               headAttributes,
               headStyles,
               fonts,
-              breakpoint: breakpoint == null ? void 0 : breakpoint.attributes.breakpoint
+              breakpoint: breakpoint == null ? void 0 : breakpoint.attributes.width
             }, metaData)
           }
         });
@@ -40141,7 +40141,11 @@ function formatPadding(attributes, attributeName) {
     attributes[attributeName] = newPadding;
   }
 }
-function SourceCodePanel() {
+const customTextArea = "_customTextArea_xcz5w_1";
+var styles$5 = {
+  customTextArea
+};
+function SourceCodePanel({ jsonReadOnly, mjmlReadOnly }) {
   const { setValueByIdx, focusBlock, values } = useBlock();
   const { focusIdx } = useFocusIdx();
   const [mjmlText, setMjmlText] = useState("");
@@ -40206,7 +40210,9 @@ function SourceCodePanel() {
     key: code,
     defaultValue: code,
     autoSize: { maxRows: 25 },
-    onBlur: onChangeCode
+    onBlur: onChangeCode,
+    readOnly: jsonReadOnly,
+    className: styles$5.customTextArea
   })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
     name: "mjml",
     header: t("MJML source"),
@@ -40216,7 +40222,9 @@ function SourceCodePanel() {
     value: mjmlText,
     autoSize: { maxRows: 25 },
     onChange: onChangeMjmlText,
-    onBlur: onMjmlChange
+    onBlur: onMjmlChange,
+    readOnly: mjmlReadOnly,
+    className: styles$5.customTextArea
   })));
 }
 function Toolbar() {
@@ -40956,7 +40964,7 @@ function MergeTagBadgePrompt() {
 }
 const SimpleLayout = (props) => {
   const { height: containerHeight } = useEditorProps();
-  const { showSourceCode = true, defaultShowLayer = true } = props;
+  const { showSourceCode = true, defaultShowLayer = true, jsonReadOnly: jsonReadOnly2 = false, mjmlReadOnly: mjmlReadOnly2 = true } = props;
   const [collapsed, setCollapsed] = useState(!defaultShowLayer);
   return /* @__PURE__ */ React__default.createElement(ConfigProvider, {
     locale: enUS
@@ -41038,7 +41046,10 @@ const SimpleLayout = (props) => {
     title: /* @__PURE__ */ React__default.createElement("div", {
       style: { height: 31, lineHeight: "31px" }
     }, t("Source code"))
-  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
+  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, {
+    jsonReadOnly: jsonReadOnly2,
+    mjmlReadOnly: mjmlReadOnly2
+  }))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
 const StandardLayout$1 = "_StandardLayout_xv0bc_1";
 var styles$3 = {
@@ -46095,7 +46106,9 @@ function ConfigurationPanel({
   showSourceCode,
   height,
   onBack,
-  compact
+  compact,
+  jsonReadOnly: jsonReadOnly2,
+  mjmlReadOnly: mjmlReadOnly2
 }) {
   const [inited, setInited] = useState(false);
   useEffect(() => {
@@ -46140,12 +46153,17 @@ function ConfigurationPanel({
     }, t("Source code"))
   }, /* @__PURE__ */ React__default.createElement(FullHeightOverlayScrollbars, {
     height: `calc(${height} - 60px)`
-  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null)))) : /* @__PURE__ */ React__default.createElement(AttributePanel, null));
+  }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, {
+    jsonReadOnly: jsonReadOnly2,
+    mjmlReadOnly: mjmlReadOnly2
+  })))) : /* @__PURE__ */ React__default.createElement(AttributePanel, null));
 }
 function ConfigurationDrawer({
   height,
   compact,
-  showSourceCode
+  showSourceCode,
+  jsonReadOnly: jsonReadOnly2,
+  mjmlReadOnly: mjmlReadOnly2
 }) {
   const refWrapper = useRef(null);
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
@@ -46180,12 +46198,18 @@ function ConfigurationDrawer({
       compact,
       showSourceCode,
       height,
-      onBack: onClose
+      onBack: onClose,
+      jsonReadOnly: jsonReadOnly2,
+      mjmlReadOnly: mjmlReadOnly2
     })));
   }, [visible, onClose, compact, showSourceCode, height]);
 }
 const TabPane = Tabs$1.TabPane;
-function EditPanel({ showSourceCode }) {
+function EditPanel({
+  showSourceCode,
+  jsonReadOnly: jsonReadOnly2,
+  mjmlReadOnly: mjmlReadOnly2
+}) {
   const { height } = useEditorProps();
   const { compact = true } = useExtensionProps();
   return /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
@@ -46217,7 +46241,9 @@ function EditPanel({ showSourceCode }) {
   }, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), !compact && /* @__PURE__ */ React__default.createElement(ConfigurationDrawer, {
     height,
     showSourceCode,
-    compact: Boolean(compact)
+    compact: Boolean(compact),
+    jsonReadOnly: jsonReadOnly2,
+    mjmlReadOnly: mjmlReadOnly2
   }));
 }
 const defaultCategories = [
@@ -46287,14 +46313,20 @@ const defaultCategories = [
         get title() {
           return t("4 columns");
         },
-        payload: [[["25%", "25%", "25%", "25%"]]]
+        payload: [["25%", "25%", "25%", "25%"]]
       }
     ]
   }
 ];
 const StandardLayout = (props) => {
   const { height: containerHeight } = useEditorProps();
-  const { showSourceCode = true, compact = true, categories = defaultCategories } = props;
+  const {
+    showSourceCode = true,
+    compact = true,
+    categories = defaultCategories,
+    jsonReadOnly: jsonReadOnly2 = false,
+    mjmlReadOnly: mjmlReadOnly2 = true
+  } = props;
   const { setFocusIdx } = useFocusIdx();
   useEffect(() => {
     if (!compact) {
@@ -46320,11 +46352,15 @@ const StandardLayout = (props) => {
       overflow: "hidden"
     }
   }, compact && /* @__PURE__ */ React__default.createElement(EditPanel, {
-    showSourceCode
+    showSourceCode,
+    jsonReadOnly: jsonReadOnly2,
+    mjmlReadOnly: mjmlReadOnly2
   }), /* @__PURE__ */ React__default.createElement(Layout$1, {
     style: { height: containerHeight, flex: 1 }
   }, props.children), !compact && /* @__PURE__ */ React__default.createElement(EditPanel, {
-    showSourceCode
+    showSourceCode,
+    jsonReadOnly: jsonReadOnly2,
+    mjmlReadOnly: mjmlReadOnly2
   }), compact ? /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: {
       height: containerHeight,
@@ -46335,7 +46371,9 @@ const StandardLayout = (props) => {
   }, /* @__PURE__ */ React__default.createElement(ConfigurationPanel, {
     compact,
     height: containerHeight,
-    showSourceCode
+    showSourceCode,
+    jsonReadOnly: jsonReadOnly2,
+    mjmlReadOnly: mjmlReadOnly2
   })) : /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: { width: 0, overflow: "hidden" }
   }))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));