@go-mailer/easy-email-extensions 5.0.0 → 5.0.2

package/lib/components/Form/RichTextToolBar/components/Heading/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-export declare function Heading(props: {
-    onChange: (val: string) => void;
-}): React.JSX.Element;
+export interface HeadingProps {
+    execCommand: (cmd: string, value: any) => void;
+    getPopupContainer: () => HTMLElement;
+}
+export declare function Heading(props: HeadingProps): React.JSX.Element;

package/lib/components/Form/RichTextToolBar/components/Personalization/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FontFamilyProps {
+    execCommand: (cmd: string, value: any) => void;
+    getPopupContainer: () => HTMLElement;
+}
+export declare function Personalization(props: FontFamilyProps): React.JSX.Element;

package/lib/hooks/usePersonalization.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function usePersonalization(): {
+    personalizations: {
+        value: string;
+        label: React.JSX.Element;
+    }[];
+};

package/lib/index2.js

@@ -38066,6 +38066,79 @@ function Link$1(props) {
     }));
   });
 }
+function Heading(props) {
+  const list2 = [
+    {
+      value: "H1",
+      label: "Heading 1"
+    },
+    {
+      value: "H2",
+      label: "Heading 2"
+    },
+    {
+      value: "H3",
+      label: "Heading 3"
+    },
+    {
+      value: "H4",
+      label: "Heading 4"
+    },
+    {
+      value: "H5",
+      label: "Heading 5"
+    },
+    {
+      value: "H6",
+      label: "Heading 6"
+    },
+    {
+      value: "P",
+      label: t("Paragraph")
+    }
+  ];
+  const { execCommand } = props;
+  const [visible, setVisible] = React__default.useState(false);
+  const onChange = useCallback(
+    (val) => {
+      execCommand("formatBlock", val);
+      setVisible(false);
+    },
+    [execCommand]
+  );
+  const onVisibleChange = useCallback((v2) => {
+    setVisible(v2);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(Popover$1, {
+    trigger: "click",
+    color: "#fff",
+    position: "left",
+    className: "easy-email-extensions-Tools-Popover",
+    popupVisible: visible,
+    onVisibleChange,
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
+      style: {
+        maxWidth: 200,
+        maxHeight: 350,
+        overflowY: "auto",
+        overflowX: "hidden"
+      }
+    }, /* @__PURE__ */ React__default.createElement(Menu$1, {
+      onClickMenuItem: onChange,
+      selectedKeys: [],
+      style: { border: "none" }
+    }, list2.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
+      style: { lineHeight: "30px", height: 30 },
+      key: item2.value
+    }, item2.label))))),
+    getPopupContainer: props.getPopupContainer
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: t("Heading"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-heading"
+    })
+  }));
+}
 function useFontFamily() {
   const { fontList: defaultFontList } = useEditorProps();
   const { pageData: pageData2 } = useEditorContext();
@@ -42580,6 +42653,75 @@ function FontSize(props) {
     })
   }));
 }
+function usePersonalization() {
+  const { personalizations: defaultPersonalizations } = useEditorProps();
+  const { pageData: pageData2 } = useEditorContext();
+  const personalizationsOptions = pageData2.data.value.personalization;
+  const personalizations = useMemo(() => {
+    const placeholders = [];
+    if (defaultPersonalizations) {
+      placeholders.push(...defaultPersonalizations);
+    }
+    if (personalizationsOptions) {
+      const options2 = personalizationsOptions.map((item2) => ({
+        value: item2.value,
+        label: item2.label
+      }));
+      placeholders.unshift(...options2);
+    }
+    return placeholders.map((item2) => ({
+      value: item2.value,
+      label: /* @__PURE__ */ React__default.createElement("span", null, item2.label)
+    }));
+  }, [personalizationsOptions, defaultPersonalizations]);
+  return {
+    personalizations
+  };
+}
+function Personalization(props) {
+  const { personalizations } = usePersonalization();
+  const { execCommand } = props;
+  const [visible, setVisible] = React__default.useState(false);
+  const onChange = useCallback(
+    (val) => {
+      execCommand("insertText", val);
+      setVisible(false);
+    },
+    [execCommand]
+  );
+  const onVisibleChange = useCallback((v2) => {
+    setVisible(v2);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(Popover$1, {
+    trigger: "click",
+    color: "#fff",
+    position: "left",
+    className: "easy-email-extensions-Tools-Popover",
+    popupVisible: visible,
+    onVisibleChange,
+    content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$2), /* @__PURE__ */ React__default.createElement("div", {
+      style: {
+        maxWidth: 200,
+        maxHeight: 350,
+        overflowY: "auto",
+        overflowX: "hidden"
+      }
+    }, /* @__PURE__ */ React__default.createElement(Menu$1, {
+      onClickMenuItem: onChange,
+      selectedKeys: [],
+      style: { border: "none", padding: 0 }
+    }, personalizations.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
+      style: { lineHeight: "30px", height: 30 },
+      key: item2.value
+    }, item2.label))))),
+    getPopupContainer: props.getPopupContainer
+  }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+    title: t("Add Message Personalization"),
+    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+      iconName: "icon-personalization"
+    })
+  }));
+}
 function Tools(props) {
   var _a2, _b2;
   const { mergeTags: mergeTags2, enabledMergeTagsBadge, toolbar } = useEditorProps();
@@ -42658,6 +42800,7 @@ function Tools(props) {
   const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
   const enabledTools = (_a2 = toolbar == null ? void 0 : toolbar.tools) != null ? _a2 : [
     AvailableTools.MergeTags,
+    AvailableTools.Heading,
     AvailableTools.FontFamily,
     AvailableTools.FontSize,
     AvailableTools.Bold,
@@ -42684,6 +42827,14 @@ function Tools(props) {
             getPopupContainer: getPopoverMountNode
           })
         ];
+      case AvailableTools.Heading:
+        return [
+          /* @__PURE__ */ React__default.createElement(Heading, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
       case AvailableTools.FontFamily:
         return [
           /* @__PURE__ */ React__default.createElement(FontFamily$1, {
@@ -42819,6 +42970,14 @@ function Tools(props) {
             title: t("Line")
           })
         ];
+      case AvailableTools.Personalization:
+        return [
+          /* @__PURE__ */ React__default.createElement(Personalization, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
       case AvailableTools.RemoveFormat:
         return [
           /* @__PURE__ */ React__default.createElement(ToolItem$1, {