easy-email-extensions 4.0.0 → 4.1.0

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";
@@ -40216,17 +40216,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);
@@ -43633,17 +43644,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 +43686,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 +43825,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 +43850,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 +43920,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