easy-email-extensions 4.12.0 → 4.12.2

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

@@ -2,5 +2,6 @@ import React from 'react';
 export interface AttributesPanelWrapper {
     style?: React.CSSProperties;
     extra?: React.ReactNode;
+    children: React.ReactNode | React.ReactElement;
 }
 export declare const AttributesPanelWrapper: React.FC<AttributesPanelWrapper>;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface CollapseWrapperProps {
     defaultActiveKey: string[];
+    children: React.ReactNode | React.ReactElement;
 }
 export declare const CollapseWrapper: React.FC<CollapseWrapperProps>;

package/lib/AttributePanel/components/provider/PresetColorsProvider/index.d.ts

@@ -3,4 +3,6 @@ export declare const PresetColorsContext: React.Context<{
     colors: string[];
     addCurrentColor: (color: string) => void;
 }>;
-export declare const PresetColorsProvider: React.FC<{}>;
+export declare const PresetColorsProvider: React.FC<{
+    children: React.ReactNode | React.ReactElement;
+}>;

package/lib/AttributePanel/components/provider/SelectionRangeProvider/index.d.ts

@@ -3,4 +3,6 @@ export declare const SelectionRangeContext: React.Context<{
     selectionRange: Range | null;
     setSelectionRange: React.Dispatch<React.SetStateAction<Range | null>>;
 }>;
-export declare const SelectionRangeProvider: React.FC<{}>;
+export declare const SelectionRangeProvider: React.FC<{
+    children: React.ReactNode | React.ReactElement;
+}>;

package/lib/ConfigurationPanel/index.d.ts

@@ -1,7 +1,8 @@
 export interface ConfigurationPanelProps {
     showSourceCode: 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, mjmlReadOnly, }: ConfigurationPanelProps): JSX.Element | null;

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

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

package/lib/EditPanel/index.d.ts

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

package/lib/ShortcutToolbar/components/BlockMaskWrapper/index.d.ts

@@ -3,4 +3,5 @@ import { BlockType } from 'easy-email-core';
 export declare const BlockMaskWrapper: React.FC<{
     type: BlockType | string;
     payload: any;
+    children: React.ReactNode | React.ReactElement;
 }>;

package/lib/ShortcutToolbar/components/BlocksPanel/index.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const BlocksPanel: React.FC;
+export declare const BlocksPanel: React.FC<{
+    children: React.ReactNode | React.ReactElement;
+}>;

package/lib/SimpleLayout/SimpleLayout.d.ts

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

package/lib/SourceCodePanel/index.d.ts

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

package/lib/components/FullHeightOverlayScrollbars/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import 'overlayscrollbars/css/OverlayScrollbars.css';
 export declare const FullHeightOverlayScrollbars: React.FC<{
+    children: React.ReactNode | React.ReactElement;
     height: string | number;
 }>;

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

@@ -1,6 +1,7 @@
 import { BlockLayerProps } from '../../BlockLayer';
 import React from 'react';
 export interface ExtensionProps extends BlockLayerProps {
+    children?: React.ReactNode | React.ReactElement;
     categories: Array<{
         label: string;
         active?: boolean;
@@ -32,6 +33,7 @@ export interface ExtensionProps extends BlockLayerProps {
         displayType: 'custom';
     }>;
     showSourceCode?: boolean;
+    mjmlReadOnly?: boolean;
     compact?: boolean;
 }
 export declare const ExtensionContext: React.Context<ExtensionProps>;

package/lib/index2.js

@@ -33061,6 +33061,13 @@ function ColorPickerContent(props) {
   const presetColorList = useMemo(() => {
     return [...presetColors.filter((item2) => item2 !== transparentColor$1).slice(-14)];
   }, [presetColors]);
+  let adapterColor = color2;
+  try {
+    if (Color$2(color2).hex()) {
+      adapterColor = Color$2(color2).hex();
+    }
+  } catch (error2) {
+  }
   return /* @__PURE__ */ React__default.createElement("div", {
     className: styles$7.colorPicker,
     style: { width: 202, paddingTop: 12, paddingBottom: 12 }
@@ -33113,7 +33120,7 @@ function ColorPickerContent(props) {
       opacity: 0
     },
     type: "color",
-    value: color2 ? Color$2(color2).hex() : color2,
+    value: adapterColor,
     onChange: (e) => onChange(e.target.value)
   }))), /* @__PURE__ */ React__default.createElement("style", null, `
           .form-alpha-picker {
@@ -36297,13 +36304,13 @@ function AttributePanel() {
     style: { position: "absolute" }
   }, /* @__PURE__ */ React__default.createElement(RichTextField, {
     idx: focusIdx2
-  })), shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
+  })), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
               .email-block [contentEditable="true"],
               .email-block [contentEditable="true"] * {
                 outline: none;
                 cursor: text;
               }
-              `), shadowRoot)));
+              `), shadowRoot))));
 }
 function MergeTags(props) {
   const { execCommand } = props;
@@ -39788,7 +39795,7 @@ const BlocksPanel = (props) => {
     style: { position: "relative" }
   }, /* @__PURE__ */ React__default.createElement("div", {
     onClick: toggleVisible
-  }, props.children), ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
+  }, props.children), /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
     className: styles$6.BlocksPanel,
     style: {
       pointerEvents: isDragging ? "none" : void 0,
@@ -39828,7 +39835,7 @@ const BlocksPanel = (props) => {
     }, category.title)
   }, /* @__PURE__ */ React__default.createElement(BlockPanelItem, {
     category
-  })))))), ele)), [filterCategories, ele, isDragging, props.children, toggleVisible, visible]);
+  })))))), ele))), [filterCategories, ele, isDragging, props.children, toggleVisible, visible]);
 };
 const BlockPanelItem = React__default.memo((props) => {
   return /* @__PURE__ */ React__default.createElement(Tabs$1, {
@@ -40038,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)
           }
         });
@@ -40134,7 +40141,7 @@ function formatPadding(attributes, attributeName) {
     attributes[attributeName] = newPadding;
   }
 }
-function SourceCodePanel() {
+function SourceCodePanel({ mjmlReadOnly }) {
   const { setValueByIdx, focusBlock, values } = useBlock();
   const { focusIdx } = useFocusIdx();
   const [mjmlText, setMjmlText] = useState("");
@@ -40209,7 +40216,8 @@ function SourceCodePanel() {
     value: mjmlText,
     autoSize: { maxRows: 25 },
     onChange: onChangeMjmlText,
-    onBlur: onMjmlChange
+    onBlur: onMjmlChange,
+    readOnly: mjmlReadOnly
   })));
 }
 function Toolbar() {
@@ -40949,7 +40957,7 @@ function MergeTagBadgePrompt() {
 }
 const SimpleLayout = (props) => {
   const { height: containerHeight } = useEditorProps();
-  const { showSourceCode = true, defaultShowLayer = true } = props;
+  const { showSourceCode = true, defaultShowLayer = true, mjmlReadOnly: mjmlReadOnly2 = true } = props;
   const [collapsed, setCollapsed] = useState(!defaultShowLayer);
   return /* @__PURE__ */ React__default.createElement(ConfigProvider, {
     locale: enUS
@@ -41031,7 +41039,9 @@ 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, {
+    mjmlReadOnly: mjmlReadOnly2
+  }))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadgePrompt, null)));
 };
 const StandardLayout$1 = "_StandardLayout_xv0bc_1";
 var styles$3 = {
@@ -46088,7 +46098,8 @@ function ConfigurationPanel({
   showSourceCode,
   height,
   onBack,
-  compact
+  compact,
+  mjmlReadOnly: mjmlReadOnly2
 }) {
   const [inited, setInited] = useState(false);
   useEffect(() => {
@@ -46133,12 +46144,15 @@ 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, {
+    mjmlReadOnly: mjmlReadOnly2
+  })))) : /* @__PURE__ */ React__default.createElement(AttributePanel, null));
 }
 function ConfigurationDrawer({
   height,
   compact,
-  showSourceCode
+  showSourceCode,
+  mjmlReadOnly: mjmlReadOnly2
 }) {
   const refWrapper = useRef(null);
   const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
@@ -46173,12 +46187,16 @@ function ConfigurationDrawer({
       compact,
       showSourceCode,
       height,
-      onBack: onClose
+      onBack: onClose,
+      mjmlReadOnly: mjmlReadOnly2
     })));
   }, [visible, onClose, compact, showSourceCode, height]);
 }
 const TabPane = Tabs$1.TabPane;
-function EditPanel({ showSourceCode }) {
+function EditPanel({
+  showSourceCode,
+  mjmlReadOnly: mjmlReadOnly2
+}) {
   const { height } = useEditorProps();
   const { compact = true } = useExtensionProps();
   return /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
@@ -46210,7 +46228,8 @@ function EditPanel({ showSourceCode }) {
   }, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), !compact && /* @__PURE__ */ React__default.createElement(ConfigurationDrawer, {
     height,
     showSourceCode,
-    compact: Boolean(compact)
+    compact: Boolean(compact),
+    mjmlReadOnly: mjmlReadOnly2
   }));
 }
 const defaultCategories = [
@@ -46280,14 +46299,19 @@ 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,
+    mjmlReadOnly: mjmlReadOnly2 = true
+  } = props;
   const { setFocusIdx } = useFocusIdx();
   useEffect(() => {
     if (!compact) {
@@ -46313,11 +46337,13 @@ const StandardLayout = (props) => {
       overflow: "hidden"
     }
   }, compact && /* @__PURE__ */ React__default.createElement(EditPanel, {
-    showSourceCode
+    showSourceCode,
+    mjmlReadOnly: mjmlReadOnly2
   }), /* @__PURE__ */ React__default.createElement(Layout$1, {
     style: { height: containerHeight, flex: 1 }
   }, props.children), !compact && /* @__PURE__ */ React__default.createElement(EditPanel, {
-    showSourceCode
+    showSourceCode,
+    mjmlReadOnly: mjmlReadOnly2
   }), compact ? /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
     style: {
       height: containerHeight,
@@ -46328,7 +46354,8 @@ const StandardLayout = (props) => {
   }, /* @__PURE__ */ React__default.createElement(ConfigurationPanel, {
     compact,
     height: containerHeight,
-    showSourceCode
+    showSourceCode,
+    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)));