easy-email-extensions 4.16.2 → 4.16.4

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

@@ -10,4 +10,5 @@ export interface LinkProps extends PopoverProps {
     currentRange: Range | null | undefined;
     onChange: (val: LinkParams) => void;
 }
+export declare function getLinkNode(currentRange: Range | null | undefined): HTMLAnchorElement | null;
 export declare function Link(props: LinkProps): JSX.Element;

package/lib/index2.js

@@ -56,7 +56,7 @@ 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, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, isTextBlock, getBlockNodeByIdx, useLazyState, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, MergeTagBadge, AvailableTools, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, 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, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, render, createPortal } from "react-dom";
 import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -37529,11 +37529,12 @@ function FontSize(props) {
   }));
 }
 function Tools(props) {
-  const { mergeTags: mergeTags2, enabledMergeTagsBadge } = useEditorProps();
+  var _a, _b;
+  const { mergeTags: mergeTags2, enabledMergeTagsBadge, toolbar } = useEditorProps();
   const { focusBlockNode } = useFocusBlockLayout();
   const { selectionRange, restoreRange, setRangeByElement } = useSelectionRange();
   const execCommand = useCallback((cmd, val) => {
-    var _a;
+    var _a2;
     if (!selectionRange) {
       console.error(t("No selectionRange"));
       return;
@@ -37571,12 +37572,18 @@ function Tools(props) {
         insertMergeTagEle.focus();
         setRangeByElement(insertMergeTagEle);
       }
+    } else if (cmd === "foreColor") {
+      document.execCommand(cmd, false, val);
+      let linkNode = getLinkNode$1(selectionRange);
+      if (linkNode) {
+        linkNode.style.color = "inherit";
+      }
     } else {
       document.execCommand(cmd, false, val);
     }
     const contenteditableElement = getShadowRoot().activeElement;
     if ((contenteditableElement == null ? void 0 : contenteditableElement.getAttribute("contenteditable")) === "true") {
-      const html = ((_a = getShadowRoot().activeElement) == null ? void 0 : _a.innerHTML) || "";
+      const html = ((_a2 = getShadowRoot().activeElement) == null ? void 0 : _a2.innerHTML) || "";
       props.onChange(html);
     }
   }, [
@@ -37588,15 +37595,194 @@ function Tools(props) {
     setRangeByElement
   ]);
   const execCommandWithRange = useCallback((cmd, val) => {
-    var _a;
+    var _a2;
     document.execCommand(cmd, false, val);
     const contenteditableElement = getShadowRoot().activeElement;
     if ((contenteditableElement == null ? void 0 : contenteditableElement.getAttribute("contenteditable")) === "true") {
-      const html = ((_a = getShadowRoot().activeElement) == null ? void 0 : _a.innerHTML) || "";
+      const html = ((_a2 = getShadowRoot().activeElement) == null ? void 0 : _a2.innerHTML) || "";
       props.onChange(html);
     }
   }, [props.onChange]);
   const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
+  const enabledTools = (_a = toolbar == null ? void 0 : toolbar.tools) != null ? _a : [
+    AvailableTools.MergeTags,
+    AvailableTools.FontFamily,
+    AvailableTools.FontSize,
+    AvailableTools.Bold,
+    AvailableTools.Italic,
+    AvailableTools.StrikeThrough,
+    AvailableTools.Underline,
+    AvailableTools.IconFontColor,
+    AvailableTools.IconBgColor,
+    AvailableTools.Link,
+    AvailableTools.Justify,
+    AvailableTools.Lists,
+    AvailableTools.HorizontalRule,
+    AvailableTools.RemoveFormat
+  ];
+  const tools = enabledTools.flatMap((tool) => {
+    switch (tool) {
+      case AvailableTools.MergeTags:
+        if (!mergeTags2)
+          return [];
+        return [
+          /* @__PURE__ */ React__default.createElement(MergeTags, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
+      case AvailableTools.FontFamily:
+        return [
+          /* @__PURE__ */ React__default.createElement(FontFamily$1, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
+      case AvailableTools.FontSize:
+        return [
+          /* @__PURE__ */ React__default.createElement(FontSize, {
+            key: tool,
+            execCommand,
+            getPopupContainer: getPopoverMountNode
+          })
+        ];
+      case AvailableTools.Bold:
+        return [
+          /* @__PURE__ */ React__default.createElement(Bold, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("bold")
+          })
+        ];
+      case AvailableTools.Italic:
+        return [
+          /* @__PURE__ */ React__default.createElement(Italic, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("italic")
+          })
+        ];
+      case AvailableTools.StrikeThrough:
+        return [
+          /* @__PURE__ */ React__default.createElement(StrikeThrough, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("strikeThrough")
+          })
+        ];
+      case AvailableTools.Underline:
+        return [
+          /* @__PURE__ */ React__default.createElement(Underline, {
+            key: tool,
+            currentRange: selectionRange,
+            onChange: () => execCommandWithRange("underline")
+          })
+        ];
+      case AvailableTools.IconFontColor:
+        return [
+          /* @__PURE__ */ React__default.createElement(IconFontColor, {
+            selectionRange,
+            execCommand,
+            getPopoverMountNode
+          })
+        ];
+      case AvailableTools.IconBgColor:
+        return [
+          /* @__PURE__ */ React__default.createElement(IconBgColor, {
+            selectionRange,
+            execCommand,
+            getPopoverMountNode
+          })
+        ];
+      case AvailableTools.Link:
+        return [
+          /* @__PURE__ */ React__default.createElement(Link$1, {
+            key: `${tool}-link`,
+            currentRange: selectionRange,
+            onChange: (values2) => execCommand("createLink", values2),
+            getPopupContainer: getPopoverMountNode
+          }),
+          /* @__PURE__ */ React__default.createElement(Unlink, {
+            key: `${tool}-unlink`,
+            currentRange: selectionRange,
+            onChange: () => execCommand("")
+          })
+        ];
+      case "justify":
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-justify-left`,
+            onClick: () => execCommand("justifyLeft"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-align-left"
+            }),
+            title: t("Align left")
+          }),
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-justify-center`,
+            onClick: () => execCommand("justifyCenter"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-align-center"
+            }),
+            title: t("Align center")
+          }),
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-justify-right`,
+            onClick: () => execCommand("justifyRight"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-align-right"
+            }),
+            title: t("Align right")
+          })
+        ];
+      case AvailableTools.Lists:
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-ordered-list`,
+            onClick: () => execCommand("insertOrderedList"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-list-ol"
+            }),
+            title: t("Orderlist")
+          }),
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: `${tool}-unordered-list`,
+            onClick: () => execCommand("insertUnorderedList"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-list-ul"
+            }),
+            title: t("Unorderlist")
+          })
+        ];
+      case AvailableTools.HorizontalRule:
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: tool,
+            onClick: () => execCommand("insertHorizontalRule"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-line"
+            }),
+            title: t("Line")
+          })
+        ];
+      case AvailableTools.RemoveFormat:
+        return [
+          /* @__PURE__ */ React__default.createElement(ToolItem$1, {
+            key: tool,
+            onClick: () => execCommand("removeFormat"),
+            icon: /* @__PURE__ */ React__default.createElement(IconFont, {
+              iconName: "icon-close"
+            }),
+            title: t("Remove format")
+          })
+        ];
+      default:
+        console.error("Not existing tool", tool);
+        throw new Error(`Not existing tool ${tool}`);
+    }
+  });
   return /* @__PURE__ */ React__default.createElement("div", {
     id: RICH_TEXT_TOOL_BAR,
     style: { display: "flex", flexWrap: "nowrap" }
@@ -37605,117 +37791,13 @@ function Tools(props) {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */ React__default.createElement(BasicTools, null), mergeTags2 && /* @__PURE__ */ React__default.createElement(MergeTags, {
-    execCommand,
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
-    execCommand,
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(FontSize, {
-    execCommand,
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Bold, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("bold")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Italic, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("italic")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(StrikeThrough, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("strikeThrough")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Underline, {
-    currentRange: selectionRange,
-    onChange: () => execCommandWithRange("underline")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(IconFontColor, {
-    selectionRange,
-    execCommand,
-    getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(IconBgColor, {
-    selectionRange,
-    execCommand,
-    getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Link$1, {
-    currentRange: selectionRange,
-    onChange: (values2) => execCommand("createLink", values2),
-    getPopupContainer: getPopoverMountNode
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(Unlink, {
-    currentRange: selectionRange,
-    onChange: () => execCommand("")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyLeft"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-left"
-    }),
-    title: t("Align left")
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyCenter"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-center"
-    }),
-    title: t("Align center")
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("justifyRight"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-align-right"
-    }),
-    title: t("Align right")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertOrderedList"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-list-ol"
-    }),
-    title: t("Orderlist")
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertUnorderedList"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-list-ul"
-    }),
-    title: t("Unorderlist")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("insertHorizontalRule"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-line"
-    }),
-    title: t("Line")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
-    onClick: () => execCommand("removeFormat"),
-    icon: /* @__PURE__ */ React__default.createElement(IconFont, {
-      iconName: "icon-close"
-    }),
-    title: t("Remove format")
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "easy-email-extensions-divider"
-  })));
+  }, /* @__PURE__ */ React__default.createElement(BasicTools, null), tools.flatMap((tool, index2) => [
+    tool,
+    /* @__PURE__ */ React__default.createElement("div", {
+      className: "easy-email-extensions-divider",
+      key: `divider-${index2}`
+    })
+  ])), (_b = toolbar == null ? void 0 : toolbar.suffix) == null ? void 0 : _b.call(toolbar, execCommand));
 }
 var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;align-items:center;justify-content:center;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;border-radius:2px;border:none;background-color:transparent;color:#fff;width:28px;height:27px}.easy-email-extensions-emailToolItem:hover,.easy-email-extensions-emailToolItem-active{background-color:#f2f3f5;color:#4e5969}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
 function RichTextToolBar(props) {