@ivanholiak/easy-email-extensions 4.16.8 → 4.16.10

package/lib/index2.js

@@ -52,7 +52,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import * as React$1 from "react";
 import React__default, { createContext, useContext, isValidElement, Children, cloneElement, Component, useRef, useMemo, memo, forwardRef, createRef, useState, useImperativeHandle, useEffect, useLayoutEffect, useCallback, PureComponent, useReducer, Fragment, 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, 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 "@ivanholiak/easy-email-editor";
+import { IconFont, useEditorProps, Stack as Stack$4, useRefState, getShadowRoot, DATA_CONTENT_EDITABLE_TYPE, ContentEditableType, MergeTagBadge, TextStyle, useEditorContext, useBlock, useFocusIdx, DATA_CONTENT_EDITABLE_IDX, useFocusBlockLayout, 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 "@ivanholiak/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 "@ivanholiak/easy-email-core";
 import ReactDOM$1, { createPortal } from "react-dom";
 import { Field, useForm as useForm$1, useField, Form as Form$3, version as version$2, useFormState as useFormState$2 } from "react-final-form";
@@ -35980,6 +35980,7 @@ function InlineText({ idx, onChange, children }) {
   const {
     mutators: { setFieldTouched }
   } = useForm$1();
+  const { enabledMergeTagsBadge, mergeTagGenerate } = useEditorProps();
   useField(idx);
   useEffect(() => {
     const shadowRoot = getShadowRoot();
@@ -36008,13 +36009,57 @@ function InlineText({ idx, onChange, children }) {
         }
       }
     };
+    const onDrop = (e2) => {
+      var _a2, _b2, _c;
+      const target2 = e2.target;
+      if (!target2 || !target2.getAttribute("contenteditable"))
+        return;
+      const mergeTagText = ((_a2 = e2.dataTransfer) == null ? void 0 : _a2.getData("text/merge-tag")) || ((_b2 = e2.dataTransfer) == null ? void 0 : _b2.getData("text/plain"));
+      if (mergeTagText && (mergeTagText.startsWith("{{") || mergeTagText.includes("{{"))) {
+        e2.preventDefault();
+        e2.stopPropagation();
+        const contentEditableType = target2.getAttribute(DATA_CONTENT_EDITABLE_TYPE);
+        let insertText = mergeTagText;
+        if (enabledMergeTagsBadge && mergeTagGenerate) {
+          const match = mergeTagText.match(/{{([^}]+)}}/);
+          if (match && match[1]) {
+            const mergeTagKey = match[1].trim();
+            const generatedTag = mergeTagGenerate(mergeTagKey);
+            insertText = MergeTagBadge.transform(generatedTag);
+          } else {
+            insertText = MergeTagBadge.transform(mergeTagText);
+          }
+        }
+        document.execCommand("insertHTML", false, insertText);
+        if (contentEditableType === ContentEditableType.RichText) {
+          onChange(target2.innerHTML || "");
+        } else if (contentEditableType === ContentEditableType.Text) {
+          onChange(((_c = target2.textContent) == null ? void 0 : _c.trim()) || "");
+        }
+      }
+    };
+    const onDragOver = (e2) => {
+      var _a2, _b2;
+      const target2 = e2.target;
+      if (target2 && target2.getAttribute("contenteditable")) {
+        const mergeTagText = ((_a2 = e2.dataTransfer) == null ? void 0 : _a2.getData("text/merge-tag")) || ((_b2 = e2.dataTransfer) == null ? void 0 : _b2.getData("text/plain"));
+        if (mergeTagText && (mergeTagText.startsWith("{{") || mergeTagText.includes("{{"))) {
+          e2.preventDefault();
+          e2.dataTransfer.dropEffect = "copy";
+        }
+      }
+    };
     shadowRoot.addEventListener("paste", onPaste, true);
     shadowRoot.addEventListener("input", onInput);
+    shadowRoot.addEventListener("drop", onDrop, true);
+    shadowRoot.addEventListener("dragover", onDragOver, true);
     return () => {
       shadowRoot.removeEventListener("paste", onPaste, true);
       shadowRoot.removeEventListener("input", onInput);
+      shadowRoot.removeEventListener("drop", onDrop, true);
+      shadowRoot.removeEventListener("dragover", onDragOver, true);
     };
-  }, [onChange, setFieldTouched]);
+  }, [onChange, setFieldTouched, enabledMergeTagsBadge, mergeTagGenerate]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
 }
 function AutoComplete(props) {