easy-email-extensions 4.0.0 → 4.1.2

package/lib/hooks/useFontFamily.d.ts

@@ -1,6 +1,6 @@
 export declare function useFontFamily(): {
     fontList: {
         value: string;
-        label: string;
+        label: JSX.Element;
     }[];
 };

package/lib/index2.js

@@ -55,7 +55,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, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, Fragment, createElement, Suspense } from "react";
-import { IconFont, useEditorProps, Stack as Stack$6, getShadowRoot, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, getEditNode, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, isTextBlock, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, useRefState, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getBlockNodeByIdx, useLazyState, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$6, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, TextStyle, useEditorContext, useBlock, useFocusIdx, useFocusBlockLayout, MergeTagBadge, FIXED_CONTAINER_ID, getPluginElement, RICH_TEXT_BAR_ID, CONTENT_EDITABLE_CLASS_NAME, getEditorRoot, DATA_CONTENT_EDITABLE_IDX, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, useRefState, 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, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
 import ReactDOM, { findDOMNode, render as render$1, unmountComponentAtNode, createPortal } from "react-dom";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -39793,6 +39793,21 @@ ImageManager.add(defaultImagesMap$1);
 function getImg$1(name) {
   return ImageManager.get(name);
 }
+const helperText = "_helperText_1m9nq_1";
+const labelHidden = "_label-hidden_1m9nq_9";
+const editTab = "_editTab_1m9nq_20";
+const inputWithUnit = "_inputWithUnit_1m9nq_27";
+const inputWithUnitSelectOption = "_inputWithUnitSelectOption_1m9nq_35";
+const colorPicker = "_colorPicker_1m9nq_40";
+var styles$3 = {
+  helperText,
+  "label-hidden": "_label-hidden_1m9nq_9",
+  labelHidden,
+  editTab,
+  inputWithUnit,
+  inputWithUnitSelectOption,
+  colorPicker
+};
 function ColorPicker(props) {
   const { colors: presetColors, addCurrentColor } = useContext(PresetColorsContext);
   const [color, setColor] = useState("");
@@ -39819,12 +39834,14 @@ function ColorPicker(props) {
     title: props.label,
     trigger: "click"
   }, props), {
-    content: /* @__PURE__ */ React__default.createElement(SketchPicker, {
+    content: /* @__PURE__ */ React__default.createElement("div", {
+      className: styles$3.colorPicker
+    }, /* @__PURE__ */ React__default.createElement(SketchPicker, {
       presetColors,
       color,
       disableAlpha: true,
       onChangeComplete
-    })
+    }))
   }), children || /* @__PURE__ */ React__default.createElement("div", {
     style: {
       display: "inline-block",
@@ -39888,19 +39905,6 @@ function RadioGroup(props) {
     value: item2.value
   }, item2.label))));
 }
-const helperText = "_helperText_k05ys_1";
-const labelHidden = "_label-hidden_k05ys_9";
-const editTab = "_editTab_k05ys_20";
-const inputWithUnit = "_inputWithUnit_k05ys_27";
-const inputWithUnitSelectOption = "_inputWithUnitSelectOption_k05ys_35";
-var styles$3 = {
-  helperText,
-  "label-hidden": "_label-hidden_k05ys_9",
-  labelHidden,
-  editTab,
-  inputWithUnit,
-  inputWithUnitSelectOption
-};
 let primaryId = 0;
 const parse = (v) => v;
 function enhancer(Component2, changeAdapter) {
@@ -40216,17 +40220,28 @@ function InlineText({ idx, onChange, children }) {
   useEffect(() => {
     const shadowRoot = getShadowRoot();
     const onPaste = (e) => {
-      var _a;
+      var _a, _b;
       if (!(e.target instanceof Element) || !e.target.getAttribute("contenteditable"))
         return;
       e.preventDefault();
       const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
       document.execCommand("insertHTML", false, text);
-      onChange(e.target.innerHTML || "");
+      const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
+      if (contentEditableType === ContentEditableType.RichText) {
+        onChange(e.target.innerHTML || "");
+      } else if (contentEditableType === ContentEditableType.Text) {
+        onChange(((_b = e.target.textContent) == null ? void 0 : _b.trim()) || "");
+      }
     };
     const onInput = (e) => {
+      var _a;
       if (e.target instanceof Element && e.target.getAttribute("contenteditable")) {
-        onChange(e.target.innerHTML || "");
+        const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
+        if (contentEditableType === ContentEditableType.RichText) {
+          onChange(e.target.innerHTML || "");
+        } else if (contentEditableType === ContentEditableType.Text) {
+          onChange(((_a = e.target.textContent) == null ? void 0 : _a.trim()) || "");
+        }
       }
     };
     shadowRoot.addEventListener("paste", onPaste, true);
@@ -40385,7 +40400,9 @@ function useFontFamily() {
       const options2 = addFonts.map((item2) => ({ value: item2.name, label: item2.name }));
       fonts.unshift(...options2);
     }
-    return fonts;
+    return fonts.map((item2) => ({ value: item2.value, label: /* @__PURE__ */ React__default.createElement("span", {
+      style: { fontFamily: item2.value }
+    }, item2.label) }));
   }, [addFonts, defaultFontList]);
   return {
     fontList: fontList2
@@ -43633,17 +43650,13 @@ function Tools(props) {
   const { mergeTags: mergeTags2, enabledMergeTagsBadge } = useEditorProps();
   const { focusBlockNode } = useFocusBlockLayout();
   const { selectionRange, restoreRange, setRangeByElement } = useSelectionRange();
-  const execCommand = (cmd, val) => {
-    const container2 = getEditNode(focusBlockNode);
-    if (!container2) {
-      console.error("No container");
-      return;
-    }
+  const execCommand = useCallback((cmd, val) => {
+    var _a;
     if (!selectionRange) {
       console.error("No selectionRange");
       return;
     }
-    if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
+    if (!(focusBlockNode == null ? void 0 : focusBlockNode.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer))) {
       console.error("Not commonAncestorContainer");
       return;
     }
@@ -43679,19 +43692,15 @@ function Tools(props) {
     } else {
       document.execCommand(cmd, false, val);
     }
-    const html = container2.innerHTML;
+    const html = ((_a = getShadowRoot().activeElement) == null ? void 0 : _a.innerHTML) || "";
     props.onChange(html);
-  };
+  }, [enabledMergeTagsBadge, focusBlockNode, props, restoreRange, selectionRange, setRangeByElement]);
   const execCommandWithRange = useCallback((cmd, val) => {
-    const container2 = getEditNode(focusBlockNode);
-    if (!container2) {
-      console.error("No container");
-      return;
-    }
+    var _a;
     document.execCommand(cmd, false, val);
-    const html = container2.innerHTML;
+    const html = ((_a = getShadowRoot().activeElement) == null ? void 0 : _a.innerHTML) || "";
     props.onChange(html);
-  }, [focusBlockNode, props]);
+  }, [props.onChange]);
   const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
   return /* @__PURE__ */ React__default.createElement("div", {
     id: "Tools",
@@ -43822,6 +43831,7 @@ function RichTextToolBar(props) {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
     dangerouslySetInnerHTML: { __html: styleText }
   }), /* @__PURE__ */ React__default.createElement("div", {
+    id: RICH_TEXT_BAR_ID,
     style: {
       transform: "translate(0,0)",
       padding: "4px 8px",
@@ -43846,20 +43856,67 @@ function RichTextToolBar(props) {
   }))), root2));
 }
 const RichTextField = (props) => {
-  const { focusBlock: focusBlock2 } = useBlock();
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  if (!isTextBlock(focusBlock2 == null ? void 0 : focusBlock2.type))
+  const [contentEditableName, setContentEditableName] = useState("");
+  const [contentEditableType, setContentEditableType] = useState(CONTENT_EDITABLE_CLASS_NAME);
+  useEffect(() => {
+    const onClick = (e) => {
+      var _a;
+      if ((_a = getEditorRoot()) == null ? void 0 : _a.contains(e.target)) {
+        return;
+      }
+      const fixedContainer = document.getElementById(FIXED_CONTAINER_ID);
+      if (fixedContainer == null ? void 0 : fixedContainer.contains(e.target)) {
+        return;
+      }
+      setContentEditableName("");
+    };
+    window.addEventListener("click", onClick);
+    return () => {
+      window.removeEventListener("click", onClick);
+    };
+  }, []);
+  useEffect(() => {
+    const root2 = getShadowRoot();
+    if (!root2)
+      return;
+    const onClick = (e) => {
+      const target2 = e.target;
+      const fixedContainer = document.getElementById(FIXED_CONTAINER_ID);
+      const richTextBar = root2.getElementById(RICH_TEXT_BAR_ID);
+      if ((fixedContainer == null ? void 0 : fixedContainer.contains(target2)) || (richTextBar == null ? void 0 : richTextBar.contains(target2))) {
+        return;
+      }
+      const activeElement = getShadowRoot().activeElement;
+      if (!activeElement) {
+        setContentEditableName("");
+      } else {
+        const idxName = activeElement.getAttribute(DATA_CONTENT_EDITABLE_IDX);
+        const type = activeElement.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
+        setContentEditableType(type);
+        if (idxName) {
+          setContentEditableName(idxName);
+        } else {
+          setContentEditableName("");
+        }
+      }
+    };
+    root2.addEventListener("click", onClick);
+    return () => {
+      root2.removeEventListener("click", onClick);
+    };
+  }, []);
+  if (!contentEditableName)
     return null;
-  const name = `${focusIdx2}.data.value.content`;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Field, {
-    name,
+    name: contentEditableName,
     parse: (v) => v
   }, ({ input }) => /* @__PURE__ */ React__default.createElement(FieldWrapper, __spreadProps(__spreadValues({}, props), {
+    contentEditableType,
     input
   }))));
 };
 function FieldWrapper(props) {
-  const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
+  const _a = props, { input, contentEditableType } = _a, rest = __objRest(_a, ["input", "contentEditableType"]);
   const { mergeTagGenerate, enabledMergeTagsBadge } = useEditorProps();
   const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
     if (enabledMergeTagsBadge) {
@@ -43869,7 +43926,7 @@ function FieldWrapper(props) {
     }
     input.onBlur();
   }, 200), [input]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, contentEditableType === ContentEditableType.RichText && /* @__PURE__ */ React__default.createElement(RichTextToolBar, {
     onChange: debounceCallbackChange
   }), /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
     onChange: debounceCallbackChange