easy-email-extensions 3.0.10 → 3.0.14

package/lib/index2.js

@@ -55,7 +55,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React from "react";
 import React__default, { useCallback, useState, useRef, useEffect, useMemo, Children, isValidElement, cloneElement, createContext, useContext, Component, memo, forwardRef, useLayoutEffect, createRef, useImperativeHandle, PureComponent, useReducer, createElement, Suspense } from "react";
-import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, useActiveTab, ActiveTabKeys } from "easy-email-editor";
+import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, getShadowRoot, FIXED_CONTAINER_ID, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
 import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
 import { ReactSortable } from "react-sortablejs";
 import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
@@ -38655,92 +38655,51 @@ function InlineText({ idx, onChange, children }) {
   const {
     mutators: { setFieldTouched }
   } = useForm$1();
-  const [isFocus, setIsFocus] = useState(false);
   const [textContainer, setTextContainer] = useState(null);
   useField(idx);
   const { focusBlock: focusBlock2 } = useBlock();
   useEffect(() => {
-    const promiseObj = awaitForElement$1(idx);
-    promiseObj.promise.then((blockNode) => {
-      setTextContainer(blockNode);
-    });
+    let promiseObj;
+    const getTextBlock = () => {
+      promiseObj = awaitForElement$1(idx);
+      promiseObj.promise.then((blockNode) => {
+        if (blockNode.querySelector('[contenteditable="true"]')) {
+          setTextContainer(blockNode);
+        } else {
+          setTimeout(() => {
+            getTextBlock();
+          }, 50);
+        }
+      });
+    };
+    getTextBlock();
     return () => {
       promiseObj.cancel();
     };
   }, [idx, focusBlock2]);
-  const onTextChange = useCallback((text) => {
-    if ((focusBlock2 == null ? void 0 : focusBlock2.data.value.content) !== text) {
-      onChange(text);
-    }
-  }, [focusBlock2 == null ? void 0 : focusBlock2.data.value.content, onChange]);
   useEffect(() => {
     if (!textContainer)
       return;
     const container2 = getEditNode(textContainer);
     if (container2) {
-      container2.focus();
-      let focusTarget = null;
-      const root2 = getShadowRoot();
-      const onClick = (ev) => {
-        ev.stopPropagation();
-        focusTarget = ev.target;
-        const fixedContainer = document.getElementById(FIXED_CONTAINER_ID);
-        if (textContainer == null ? void 0 : textContainer.contains(focusTarget))
-          return;
-        if (fixedContainer && fixedContainer.contains(focusTarget))
-          return;
-        if (fixedContainer == null ? void 0 : fixedContainer.contains(document.activeElement))
-          return;
-        onTextChange(getEditContent(textContainer));
-      };
       const onPaste = (e) => {
         var _a;
         e.preventDefault();
         const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
         document.execCommand("insertHTML", false, text);
-      };
-      const stopDrag = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
+        onChange(getEditContent(textContainer));
       };
       const onInput = () => {
-        setFieldTouched(idx, true);
+        onChange(getEditContent(textContainer));
       };
       container2.addEventListener("paste", onPaste, true);
-      container2.addEventListener("dragstart", stopDrag);
       container2.addEventListener("input", onInput);
-      document.addEventListener("mousedown", onClick);
-      root2.addEventListener("mousedown", onClick);
       return () => {
         container2.removeEventListener("paste", onPaste, true);
-        container2.removeEventListener("dragstart", stopDrag);
         container2.removeEventListener("input", onInput);
-        document.removeEventListener("mousedown", onClick);
-        root2.removeEventListener("mousedown", onClick);
       };
     }
-  }, [idx, onTextChange, setFieldTouched, textContainer]);
-  useEffect(() => {
-    const onFocus3 = (ev) => {
-      ev.stopPropagation();
-      if (document.activeElement === getEditorRoot()) {
-        setIsFocus(true);
-      } else {
-        setIsFocus(false);
-      }
-    };
-    const root2 = getShadowRoot();
-    root2.addEventListener("click", onFocus3);
-    root2.addEventListener("focusin", onFocus3);
-    window.addEventListener("focusin", onFocus3);
-    return () => {
-      root2.addEventListener("click", onFocus3);
-      root2.removeEventListener("focusin", onFocus3);
-      window.removeEventListener("focusin", onFocus3);
-    };
-  }, []);
-  if (!isFocus)
-    return null;
+  }, [onChange, setFieldTouched, textContainer]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
 }
 function AutoComplete(props) {
@@ -39296,8 +39255,7 @@ function RichTextToolBar() {
       height: "100%",
       width: "100%",
       left: 0,
-      top: 0,
-      cursor: "move"
+      top: 0
     }
   }), /* @__PURE__ */ React__default.createElement(Tools, {
     container: editorContainer,
@@ -39305,20 +39263,28 @@ function RichTextToolBar() {
     }
   }))), blockNode));
 }
-const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
-const RichTextFieldItem = (props) => {
-  useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)));
-};
 const RichTextField = (props) => {
   const { focusBlock: focusBlock2 } = useBlock();
   const { focusIdx: focusIdx2 } = useFocusIdx();
   if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
     return null;
-  return /* @__PURE__ */ React__default.createElement(RichTextFieldItem, __spreadValues({
-    key: focusIdx2
-  }, props));
+  const name = `${focusIdx2}.data.value.content`;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(Field, {
+    name,
+    parse: (v) => v
+  }, ({ input }) => /* @__PURE__ */ React__default.createElement(FieldWrapper, __spreadProps(__spreadValues({}, props), {
+    input
+  }))));
 };
+function FieldWrapper(props) {
+  const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
+  const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
+    input.onChange(val);
+  }, 500), [input]);
+  return /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
+    onChange: debounceCallbackChange
+  }));
+}
 const TextField = enhancer(Input, (value) => value);
 const SearchField = enhancer(Input$5.Search, (val) => val);
 const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
@@ -41749,10 +41715,7 @@ function AttributePanel() {
   }, "No matching components")), /* @__PURE__ */ React__default.createElement("div", {
     style: { position: "absolute" }
   }, /* @__PURE__ */ React__default.createElement(RichTextField, {
-    idx: focusIdx2,
-    name: `${focusIdx2}.data.value.content`,
-    label: "",
-    labelHidden: true
+    idx: focusIdx2
   })), shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
               .email-block [contentEditable="true"],
               .email-block [contentEditable="true"] * {