easy-email-pro-theme 0.2.0 → 0.3.0

package/lib/index.js

@@ -54,11 +54,11 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useEditorContext, useEventCallback, validation, CustomEvent, ActiveTabKeys, BeacasEditorProvider, BeacasEditor, useSelectedNode, useForceUpdate, toggleFormat, TextFormat, IframeComponent, HtmlStringToReactNodes, isFormatActive } from "easy-email-pro-editor";
+import { classnames, useEditorState, useEditorProps, useRefState, isDOMElement, useEditorContext, useEventCallback, validation, CustomEvent, ActiveTabKeys, EmailEditorProvider, EmailEditor, useSelectedNode, useForceUpdate, toggleFormat, TextFormat, IframeComponent, HtmlStringToReactNodes, isFormatActive } from "easy-email-pro-editor";
 import { useSlate, ReactEditor, useSlateStatic } from "slate-react";
 import * as React$2 from "react";
 import React__default, { useRef, useCallback as useCallback$1, useEffect, useMemo as useMemo$1, useState, forwardRef, memo, Component, PureComponent, useContext, useLayoutEffect, useReducer, Suspense } from "react";
-import { NodeUtils, BlockManager, ElementType, t, BeacasCore, ElementCategory, classnames as classnames$1, StandardType, MERGE_TAG_PATTERN, PluginManager, ConditionOperator, ConditionOperatorSymbol } from "easy-email-pro-core";
+import { NodeUtils, BlockManager, ElementType, t, EditorCore, ElementCategory, classnames as classnames$1, StandardType, PluginManager, ConditionOperator, ConditionOperatorSymbol } from "easy-email-pro-core";
 import { Editor, Transforms, Path, Node as Node$1, createEditor, Text as Text$1, Range, Element as Element$1, Point } from "slate";
 import ReactDOM, { unstable_batchedUpdates, createPortal } from "react-dom";
 import { cloneDeep, debounce as debounce$2, get, isEqual as isEqual$3, set, omit as omit$2, merge as merge$1, isUndefined as isUndefined$1, isString as isString$1, isNumber as isNumber$1, uniqueId, upperFirst, flatMap, sum, camelCase } from "lodash";
@@ -6133,7 +6133,7 @@ const useEditorForm = () => {
       try {
         let pageBlock = newValues.content;
         if (universalElementSetting) {
-          pageBlock = BeacasCore.transformUniversalElements({
+          pageBlock = EditorCore.transformUniversalElements({
             content: pageBlock,
             universalElements: universalElementSetting.elements
           });
@@ -6553,6 +6553,9 @@ function BlockItem({
 }) {
   const { universalElementEditing } = useEditorState();
   const block = BlockManager.getBlockByType(type);
+  if (!block) {
+    throw new Error(`block ${type} not found`);
+  }
   const element = useMemo$1(() => block.create(payload), [block, payload]);
   const { dragHandle: dragHandle2 } = useDragging({
     element,
@@ -6712,63 +6715,7 @@ const defaultCategories = [
             className: "block-list-grid-item-icon",
             iconName: "icon-navbar"
           }
-        ),
-        payload: {
-          children: [
-            {
-              data: {},
-              type: "standard-navbar-link",
-              children: [
-                {
-                  text: "Shop"
-                }
-              ],
-              attributes: {
-                href: "",
-                "font-size": "20px"
-              }
-            },
-            {
-              data: {},
-              type: "standard-navbar-link",
-              children: [
-                {
-                  text: "About"
-                }
-              ],
-              attributes: {
-                href: "",
-                "font-size": "20px"
-              }
-            },
-            {
-              data: {},
-              type: "standard-navbar-link",
-              children: [
-                {
-                  text: "Contact"
-                }
-              ],
-              attributes: {
-                href: "",
-                "font-size": "20px"
-              }
-            },
-            {
-              data: {},
-              type: "standard-navbar-link",
-              children: [
-                {
-                  text: "Blog"
-                }
-              ],
-              attributes: {
-                href: "",
-                "font-size": "20px"
-              }
-            }
-          ]
-        }
+        )
       },
       {
         type: ElementType.STANDARD_SOCIAL,
@@ -6785,60 +6732,7 @@ const defaultCategories = [
           attributes: {
             "icon-size": "30px",
             spacing: "20px"
-          },
-          children: [
-            {
-              data: {},
-              type: "standard-social-element",
-              children: [
-                {
-                  text: ""
-                }
-              ],
-              attributes: {
-                src: "https://res.cloudinary.com/dfite2e16/image/upload/v1681908489/clgnivsuj0018z9ltiixmxf6k/xkd0kfnytbfywsofk8t6.png",
-                href: "",
-                "padding-left": "0px",
-                "padding-right": "0px",
-                "padding-top": "0px",
-                "padding-bottom": "0px"
-              }
-            },
-            {
-              data: {},
-              type: "standard-social-element",
-              children: [
-                {
-                  text: ""
-                }
-              ],
-              attributes: {
-                src: "https://res.cloudinary.com/dfite2e16/image/upload/v1681908521/clgnivsuj0018z9ltiixmxf6k/ulyduaza1votoacctoi3.png",
-                href: "",
-                "padding-left": "20px",
-                "padding-right": "0px",
-                "padding-top": "0px",
-                "padding-bottom": "0px"
-              }
-            },
-            {
-              data: {},
-              type: "standard-social-element",
-              children: [
-                {
-                  text: ""
-                }
-              ],
-              attributes: {
-                src: "https://res.cloudinary.com/dfite2e16/image/upload/v1681908543/clgnivsuj0018z9ltiixmxf6k/wtefhsfwaapcdbz7knqw.png",
-                href: "",
-                "padding-left": "20px",
-                "padding-right": "0px",
-                "padding-top": "0px",
-                "padding-bottom": "0px"
-              }
-            }
-          ]
+          }
         }
       },
       {
@@ -8915,10 +8809,15 @@ function ColorPicker(props) {
     placeholder: placeholder2 = ""
   } = props;
   const [popupVisible, setPopupVisible] = useState(false);
+  const { mergetagsData, pageDataVariables } = useEditorContext();
+  const isPageVarMatch = EditorCore.isPageDataVariable(value);
+  const isTemplateVarMatch = PluginManager.isVariable(value);
   const mergeTagColor = useMemo$1(() => {
-    const isMatch = MERGE_TAG_PATTERN.test(value);
-    if (isMatch) {
-      return PluginManager.renderWithData(value, {});
+    if (isPageVarMatch) {
+      return EditorCore.renderWithPageVariables(value, pageDataVariables);
+    }
+    if (isTemplateVarMatch) {
+      return PluginManager.renderWithData(value, mergetagsData);
     }
     try {
       if (Color$1(`#${value}`).hex())
@@ -8926,14 +8825,20 @@ function ColorPicker(props) {
     } catch (error2) {
     }
     return value;
-  }, [value]);
+  }, [
+    isPageVarMatch,
+    isTemplateVarMatch,
+    mergetagsData,
+    pageDataVariables,
+    value
+  ]);
   const onInputChange = useEventCallback((value2) => {
     onChange == null ? void 0 : onChange(value2);
   });
   const onClose = useEventCallback(() => {
     setPopupVisible(false);
   });
-  const inputColor = mergeTagColor.replace(/#/, "");
+  const inputColor = value.replace(/#/, "");
   useEffect(() => {
     const onHandle = () => {
       setPopupVisible(false);
@@ -9014,7 +8919,7 @@ function ColorPicker(props) {
   ), showInput && /* @__PURE__ */ React__default.createElement(
     Input,
     {
-      prefix: "#",
+      prefix: !isPageVarMatch && !isTemplateVarMatch && !value.includes("rgb") ? "#" : "",
       value: inputColor,
       style: { outline: "none", flex: 1 },
       onChange: onInputChange,
@@ -9033,6 +8938,11 @@ const ColorPickerField = (props) => {
         rules: [
           {
             validator(value, callback) {
+              const isPageVarMatch = EditorCore.isPageDataVariable(value);
+              const isTemplateVarMatch = PluginManager.isVariable(value);
+              if (isPageVarMatch || isTemplateVarMatch) {
+                return callback();
+              }
               const Validate = validation.color.typeConstructor();
               const errMsg = new Validate(value || "").getErrorMessage();
               if (errMsg) {
@@ -21098,10 +21008,13 @@ function ImageUploader(props) {
     })
   );
   const image2 = useMemo$1(() => {
-    const isMatch = NodeUtils.isMergeTag(props.value);
+    const isPageVarMatch = EditorCore.isPageDataVariable(props.value);
+    const isTemplateVarMatch = PluginManager.isVariable(props.value);
     try {
-      if (isMatch) {
-        return PluginManager.renderWithData(props.value, __spreadValues(__spreadValues({}, mergetagsData), pageDataVariables)) || imagePlaceholder;
+      if (isPageVarMatch) {
+        return EditorCore.renderWithPageVariables(props.value, __spreadValues({}, pageDataVariables)) || imagePlaceholder;
+      } else if (isTemplateVarMatch) {
+        return PluginManager.renderWithData(props.value, __spreadValues({}, mergetagsData)) || imagePlaceholder;
       }
     } catch (error2) {
       console.error((error2 == null ? void 0 : error2.message) || error2);
@@ -21651,7 +21564,7 @@ const RichtextBar = (props) => {
     props.onChange(currentElement);
   };
   return /* @__PURE__ */ React__default.createElement(
-    BeacasEditorProvider,
+    EmailEditorProvider,
     {
       initialValues: initialValue,
       editor,
@@ -21662,7 +21575,7 @@ const RichtextBar = (props) => {
       newLineWithBr: true
     },
     /* @__PURE__ */ React__default.createElement(SharedComponents.HoveringToolbar, null),
-    /* @__PURE__ */ React__default.createElement(BeacasEditor, null),
+    /* @__PURE__ */ React__default.createElement(EmailEditor, null),
     /* @__PURE__ */ React__default.createElement(SharedComponents.Hotkeys, null),
     /* @__PURE__ */ React__default.createElement(ResetContent, { initialValue }),
     /* @__PURE__ */ React__default.createElement("style", null, styleText$c)
@@ -23337,7 +23250,7 @@ function Link(props) {
           rules: [
             {
               validator(value, callback) {
-                const isValid = isValidHttpUrl(value) || NodeUtils.isMergeTag(value);
+                const isValid = isValidHttpUrl(value) || PluginManager.isVariable(value);
                 if (!isValid) {
                   callback(t("Invalid URL"));
                 }
@@ -23720,7 +23633,7 @@ const SourceCodePanel = () => {
     if (!selectedNode)
       return;
     try {
-      const mjml22 = BeacasCore.toMJML({
+      const mjml22 = EditorCore.toMJML({
         element: selectedNode,
         pageElement: values2.content,
         mode: "production",
@@ -26655,10 +26568,10 @@ const PreviewEmail = observer(
     mergetagsData
   }) => {
     const pageVariables = useMemo$1(() => {
-      return BeacasCore.getPageDataVariables(values2.content);
+      return EditorCore.getPageDataVariables(values2.content);
     }, [values2.content]);
     const mjmlString = useMemo$1(() => {
-      return BeacasCore.toMJML({
+      return EditorCore.toMJML({
         element: values2.content,
         mode: "production",
         universalElements: universalElementSetting,
@@ -32579,6 +32492,7 @@ const TextAlign = () => {
 const options$1 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
 const FontSize = () => {
   const { fontSizeList } = useEditorProps();
+  const [fontSizeValue, setFontSizeValue] = useState();
   const editor = useSlate();
   const [nodeEntry] = Editor.nodes(editor, {
     match: (node) => {
@@ -32587,14 +32501,17 @@ const FontSize = () => {
     mode: "lowest"
   });
   const textNode = nodeEntry == null ? void 0 : nodeEntry[0];
-  let fontSizeValue = textNode == null ? void 0 : textNode.fontSize;
-  if (!fontSizeValue && textNode) {
-    try {
-      const textDomNode = ReactEditor.toDOMNode(editor, textNode);
-      fontSizeValue = window.getComputedStyle(textDomNode).fontSize;
-    } catch (error2) {
+  useEffect(() => {
+    let fontSizeValue2 = textNode == null ? void 0 : textNode.fontSize;
+    if (!fontSizeValue2 && textNode) {
+      try {
+        const textDomNode = ReactEditor.toDOMNode(editor, textNode);
+        fontSizeValue2 = window.getComputedStyle(textDomNode).fontSize;
+      } catch (error2) {
+      }
     }
-  }
+    setFontSizeValue(fontSizeValue2);
+  }, [editor, textNode, textNode == null ? void 0 : textNode.fontSize]);
   const optionsList = useMemo$1(() => {
     const list = [...fontSizeList || options$1];
     if (fontSizeValue) {
@@ -32629,9 +32546,9 @@ const FontSize = () => {
   ), /* @__PURE__ */ React__default.createElement("style", null, `.easy-email-pro-font-size .arco-select-view { border: none; }`));
 };
 const FontFamily = () => {
-  var _a2;
   const { fontList } = useFontFamily();
   const editor = useSlate();
+  const [fontFamilyValue, setFontFamilyValue] = useState();
   const [nodeEntry] = Editor.nodes(editor, {
     match: (node) => {
       return Text$1.isText(node);
@@ -32639,14 +32556,18 @@ const FontFamily = () => {
     mode: "lowest"
   });
   const textNode = nodeEntry == null ? void 0 : nodeEntry[0];
-  let fontFamilyValue = textNode == null ? void 0 : textNode.fontFamily;
-  if (!fontFamilyValue && textNode) {
-    try {
-      const textDomNode = ReactEditor.toDOMNode(editor, textNode);
-      fontFamilyValue = ((_a2 = window.getComputedStyle(textDomNode).fontFamily.split(",")) == null ? void 0 : _a2[0]) || "";
-    } catch (error2) {
+  useEffect(() => {
+    var _a2;
+    let fontFamilyValue2 = textNode == null ? void 0 : textNode.fontFamily;
+    if (!fontFamilyValue2 && textNode) {
+      try {
+        const textDomNode = ReactEditor.toDOMNode(editor, textNode);
+        fontFamilyValue2 = ((_a2 = window.getComputedStyle(textDomNode).fontFamily.split(",")) == null ? void 0 : _a2[0]) || "";
+      } catch (error2) {
+      }
     }
-  }
+    setFontFamilyValue(fontFamilyValue2);
+  }, [editor, textNode, textNode == null ? void 0 : textNode.fontFamily]);
   const optionsList = useMemo$1(() => {
     const list = [...fontList];
     if (fontFamilyValue) {
@@ -38695,7 +38616,7 @@ const Layout$1 = ({
         },
         /* @__PURE__ */ React__default.createElement(SharedComponents.BlockSideBar, { height })
       ),
-      /* @__PURE__ */ React__default.createElement("div", { style: { height, minWidth: 800, flex: 1 } }, /* @__PURE__ */ React__default.createElement(SharedComponents.EditorTabs, null, /* @__PURE__ */ React__default.createElement(BeacasEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$c, RetroStyleText)), children))
+      /* @__PURE__ */ React__default.createElement("div", { style: { height, minWidth: 800, flex: 1 } }, /* @__PURE__ */ React__default.createElement(SharedComponents.EditorTabs, null, /* @__PURE__ */ React__default.createElement(EmailEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$c, RetroStyleText)), children))
     )
   ));
   if (!root2 || !inited)
@@ -40547,7 +40468,7 @@ const Layout = ({
             flex: showSidebar ? 1 : void 0
           }
         },
-        /* @__PURE__ */ React__default.createElement(SharedComponents.EditorTabs, null, /* @__PURE__ */ React__default.createElement(BeacasEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$c, minimaliststyleText)), children)
+        /* @__PURE__ */ React__default.createElement(SharedComponents.EditorTabs, null, /* @__PURE__ */ React__default.createElement(EmailEditor, null, /* @__PURE__ */ React__default.createElement("style", { id: "Retro-CSS" }, styleText$c, minimaliststyleText)), children)
       )
     )
   ));

package/lib/typings/utils/mjmlToJson/HtmlNodeAdapter.d.ts

@@ -1,2 +1,2 @@
-import { Element as BeacasElement, TextNode } from "easy-email-pro-core";
-export declare const HtmlNodeAdapter: (content: string) => (BeacasElement | TextNode)[];
+import { Element as NodeElement, TextNode } from "easy-email-pro-core";
+export declare const HtmlNodeAdapter: (content: string) => (NodeElement | TextNode)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "files": [
     "lib"