easy-email-extensions 3.2.1-alpha.0 → 3.2.1-alpha.3

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, 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 as MergeTagBadge$1, 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 { BasicType, ImageManager, EMAIL_BLOCK_CLASS_NAME, BlockManager, createBlockDataByType, AdvancedType, Operator, OperatorSymbol, isAdvancedBlock, getParentByIdx, getParentIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
+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, createPortal } from "react-dom";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
 var index$2 = "";
@@ -42349,10 +42349,9 @@ function AttributePanel() {
   const { values: values2, focusBlock: focusBlock2 } = useBlock();
   const { initialized } = useEditorContext();
   const { focusIdx: focusIdx2 } = useFocusIdx();
-  const value = getValueByIdx(values2, focusIdx2);
   const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
   const shadowRoot = getShadowRoot();
-  if (!value || !initialized)
+  if (!initialized)
     return null;
   return /* @__PURE__ */ React__default.createElement(SelectionRangeProvider, null, /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, {
     key: focusIdx2
@@ -42798,7 +42797,7 @@ function FontSize(props) {
   }));
 }
 function Tools(props) {
-  const { mergeTags: mergeTags2 } = useEditorProps();
+  const { mergeTags: mergeTags2, enabledMergeTagsBadge } = useEditorProps();
   const { focusBlockNode } = useFocusBlockLayout();
   const { selectionRange, restoreRange, setRangeByElement } = useSelectionRange();
   const execCommand = (cmd, val) => {
@@ -42834,7 +42833,10 @@ function Tools(props) {
       link.style.textDecoration = linkData.underline ? "underline" : "none";
       link.setAttribute("href", linkData.link);
     } else if (cmd === "insertHTML") {
-      const newContent = MergeTagBadge$1.transform(val, uuid2);
+      let newContent = val;
+      if (enabledMergeTagsBadge) {
+        newContent = MergeTagBadge$1.transform(val, uuid2);
+      }
       document.execCommand(cmd, false, newContent);
       const insertMergeTagEle = getShadowRoot().getElementById(uuid2);
       if (insertMergeTagEle) {
@@ -46617,6 +46619,15 @@ function MergeTagBadge() {
       window.removeEventListener("click", onBlur3);
     };
   }, [targetRef, popoverRef]);
+  const onClose = useCallback(() => {
+    let ele = targetRef.current;
+    setTimeout(() => {
+      if (!ele)
+        return;
+      focusMergeTag(ele);
+    }, 100);
+    setTarget(null);
+  }, [focusMergeTag, targetRef]);
   useEffect(() => {
     if (!root2)
       return;
@@ -46627,6 +46638,10 @@ function MergeTagBadge() {
       if (target22 instanceof HTMLInputElement && target22.classList.contains("easy-email-merge-tag")) {
         target22.classList.add("easy-email-merge-tag-focus");
         const namePath = target22.value;
+        if (!onChangeMergeTag) {
+          focusMergeTag(target22);
+          return;
+        }
         setText(lodash.exports.get(mergeTags2, namePath, ""));
         setTarget(target22);
       } else {
@@ -46639,16 +46654,7 @@ function MergeTagBadge() {
     return () => {
       root2.removeEventListener("click", onClick2);
     };
-  }, [focusMergeTag, mergeTags2, root2]);
-  const onClose = useCallback(() => {
-    let ele = targetRef.current;
-    setTimeout(() => {
-      if (!ele)
-        return;
-      focusMergeTag(ele);
-    }, 100);
-    setTarget(null);
-  }, [focusMergeTag, targetRef]);
+  }, [focusMergeTag, mergeTags2, onChangeMergeTag, root2]);
   const onChange = useCallback((ev) => {
     setText(ev.target.value);
   }, []);
@@ -46774,9 +46780,11 @@ const SimpleLayout = (props) => {
     bodyStyle: { padding: 0 },
     className: styles.customScrollBar
   }, /* @__PURE__ */ React__default.createElement(Tabs$1, null, /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
+    destroyOnHide: true,
     key: "Configuration",
     title: "Configuration"
   }, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), showSourceCode && /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
+    destroyOnHide: true,
     key: "Source code",
     title: "Source code"
   }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null), /* @__PURE__ */ React__default.createElement(MergeTagBadge, null)));