easy-email-extensions 2.5.2-beta.1 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/InteractivePrompt/components/Toolbar.d.ts +2 -1
- package/lib/index2.js +158 -120
- package/lib/index2.js.map +1 -1
- package/lib/style.css +1 -1
- package/package.json +2 -2
- package/lib/InteractivePrompt/constants.d.ts +0 -15
package/lib/index2.js
CHANGED
@@ -55,8 +55,8 @@ var __async = (__this, __arguments, generator2) => {
|
|
55
55
|
};
|
56
56
|
import * as React from "react";
|
57
57
|
import React__default, { useCallback, useState, useRef, useEffect, useMemo as useMemo$1, createContext, useLayoutEffect as useLayoutEffect$2, Component, useContext, forwardRef, useImperativeHandle, isValidElement as isValidElement$1, PureComponent, createElement, Suspense } from "react";
|
58
|
-
import { IconFont, Stack as Stack$5, TextStyle, getBlockNodeByIdx, useBlock, getShadowRoot, FIXED_CONTAINER_ID, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx,
|
59
|
-
import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx,
|
58
|
+
import { IconFont, Stack as Stack$5, TextStyle, getBlockNodeByIdx, useBlock, getShadowRoot, FIXED_CONTAINER_ID, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, ActiveTabKeys } from "easy-email-editor";
|
59
|
+
import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
|
60
60
|
import { useForm as useForm$2, useField, Form as Form$4, version as version$3 } from "react-final-form";
|
61
61
|
import * as ReactDOM from "react-dom";
|
62
62
|
import ReactDOM__default, { findDOMNode as findDOMNode$1, createPortal } from "react-dom";
|
@@ -53984,12 +53984,50 @@ function FontFamily$1(props) {
|
|
53984
53984
|
key: item2.value
|
53985
53985
|
}, item2.label))));
|
53986
53986
|
}
|
53987
|
-
|
53988
|
-
|
53989
|
-
|
53990
|
-
|
53987
|
+
var index$4 = "";
|
53988
|
+
const MergeTags$1 = React__default.memo((props) => {
|
53989
|
+
const { mergeTags = {} } = useEditorProps();
|
53990
|
+
const treeOptions = useMemo$1(() => {
|
53991
|
+
const treeData = [];
|
53992
|
+
const deep = (key2, title2, parent, mapData = []) => {
|
53993
|
+
const currentMapData = {
|
53994
|
+
key: `{{${key2}}}`,
|
53995
|
+
value: `{{${key2}}}`,
|
53996
|
+
title: title2,
|
53997
|
+
children: []
|
53998
|
+
};
|
53999
|
+
mapData.push(currentMapData);
|
54000
|
+
const current = parent[key2];
|
54001
|
+
if (lodash.exports.isObject(current)) {
|
54002
|
+
Object.keys(current).map((childKey) => deep(key2 + "." + childKey, childKey, current, currentMapData.children));
|
54003
|
+
}
|
54004
|
+
};
|
54005
|
+
Object.keys(mergeTags).map((key2) => deep(key2, key2, mergeTags, treeData));
|
54006
|
+
return treeData;
|
54007
|
+
}, [mergeTags]);
|
54008
|
+
const onSelect = useCallback((value) => {
|
54009
|
+
return props.onChange(value);
|
54010
|
+
}, [props]);
|
54011
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
54012
|
+
style: { color: "#333" }
|
54013
|
+
}, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$2, {
|
54014
|
+
value: props.value,
|
54015
|
+
size: "small",
|
54016
|
+
style: { width: 120 },
|
54017
|
+
dropdownStyle: { maxHeight: 400, overflow: "auto" },
|
54018
|
+
placeholder: "Please select",
|
54019
|
+
treeData: treeOptions,
|
54020
|
+
onSelect: (val) => onSelect(val)
|
54021
|
+
}) : /* @__PURE__ */ React__default.createElement(Tree$1, {
|
54022
|
+
style: { width: 120 },
|
54023
|
+
selectedKeys: [],
|
54024
|
+
treeData: treeOptions,
|
54025
|
+
onSelect: (vals) => onSelect(vals[0])
|
54026
|
+
}));
|
53991
54027
|
});
|
53992
|
-
|
54028
|
+
function TextToolbar(props) {
|
54029
|
+
const { container: container2 } = props;
|
54030
|
+
const { mergeTags } = useEditorProps();
|
53993
54031
|
const [selectionRange, setSelectionRange] = useState(null);
|
53994
54032
|
useEffect(() => {
|
53995
54033
|
const onSelectionChange = () => {
|
@@ -54006,15 +54044,6 @@ const SelectionRangeProvider = (props) => {
|
|
54006
54044
|
document.removeEventListener("selectionchange", onSelectionChange);
|
54007
54045
|
};
|
54008
54046
|
}, []);
|
54009
|
-
return /* @__PURE__ */ React__default.createElement(SelectionRangeContext.Provider, {
|
54010
|
-
value: {
|
54011
|
-
selectionRange,
|
54012
|
-
setSelectionRange
|
54013
|
-
}
|
54014
|
-
}, props.children);
|
54015
|
-
};
|
54016
|
-
function useSelectionRange() {
|
54017
|
-
const { selectionRange, setSelectionRange } = useContext(SelectionRangeContext);
|
54018
54047
|
const restoreRange = useCallback((range2) => {
|
54019
54048
|
const selection = getShadowRoot().getSelection();
|
54020
54049
|
selection.removeAllRanges();
|
@@ -54023,30 +54052,20 @@ function useSelectionRange() {
|
|
54023
54052
|
newRange.setEnd(range2.endContainer, range2.endOffset);
|
54024
54053
|
selection.addRange(newRange);
|
54025
54054
|
}, []);
|
54026
|
-
return {
|
54027
|
-
selectionRange,
|
54028
|
-
setSelectionRange,
|
54029
|
-
restoreRange
|
54030
|
-
};
|
54031
|
-
}
|
54032
|
-
function TextToolbar(props) {
|
54033
|
-
const { container: container2 } = props;
|
54034
|
-
const { selectionRange: currentRange, restoreRange } = useSelectionRange();
|
54035
|
-
useEditorProps();
|
54036
54055
|
const execCommand = (cmd, val) => {
|
54037
54056
|
if (!container2) {
|
54038
54057
|
console.error("No container");
|
54039
54058
|
return;
|
54040
54059
|
}
|
54041
|
-
if (!
|
54042
|
-
console.error("No
|
54060
|
+
if (!selectionRange) {
|
54061
|
+
console.error("No selectionRange");
|
54043
54062
|
return;
|
54044
54063
|
}
|
54045
|
-
if (!(container2 == null ? void 0 : container2.contains(
|
54064
|
+
if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
|
54046
54065
|
console.error("Not commonAncestorContainer");
|
54047
54066
|
return;
|
54048
54067
|
}
|
54049
|
-
restoreRange(
|
54068
|
+
restoreRange(selectionRange);
|
54050
54069
|
if (cmd === "createLink") {
|
54051
54070
|
const linkData = val;
|
54052
54071
|
const target = linkData.blank ? "_blank" : "";
|
@@ -54136,10 +54155,24 @@ function TextToolbar(props) {
|
|
54136
54155
|
}),
|
54137
54156
|
title: "Background color"
|
54138
54157
|
})), /* @__PURE__ */ React__default.createElement(Link$1, {
|
54139
|
-
currentRange,
|
54158
|
+
currentRange: selectionRange,
|
54140
54159
|
onChange: (values2) => execCommand("createLink", values2),
|
54141
54160
|
getPopupContainer: getPopoverMountNode
|
54142
|
-
}), /* @__PURE__ */ React__default.createElement(
|
54161
|
+
}), mergeTags && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
|
54162
|
+
color: "#fff",
|
54163
|
+
placement: "bottom",
|
54164
|
+
title: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
|
54165
|
+
value: "",
|
54166
|
+
onChange: (val) => execCommand("insertHTML", val)
|
54167
|
+
}),
|
54168
|
+
getPopupContainer: getPopoverMountNode
|
54169
|
+
}, /* @__PURE__ */ React__default.createElement(Button$3, {
|
54170
|
+
size: "small",
|
54171
|
+
title: "Merge tag",
|
54172
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
54173
|
+
iconName: "icon-merge-tags"
|
54174
|
+
})
|
54175
|
+
})), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
54143
54176
|
onClick: () => execCommand("removeFormat"),
|
54144
54177
|
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
54145
54178
|
iconName: "icon-close"
|
@@ -54452,7 +54485,10 @@ function ContextMenu({
|
|
54452
54485
|
}), modal);
|
54453
54486
|
}
|
54454
54487
|
function BlockLayer() {
|
54455
|
-
const {
|
54488
|
+
const {
|
54489
|
+
pageData: pageData2,
|
54490
|
+
formState: { values: values2 }
|
54491
|
+
} = useEditorContext();
|
54456
54492
|
const { onUploadImage, onAddCollection } = useEditorProps();
|
54457
54493
|
const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
|
54458
54494
|
const { setHoverIdx } = useHoverIdx();
|
@@ -54534,9 +54570,11 @@ function BlockLayer() {
|
|
54534
54570
|
return useMemo$1(() => {
|
54535
54571
|
if (!hasFocus)
|
54536
54572
|
return null;
|
54537
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
54573
|
+
return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
|
54538
54574
|
id: "BlockLayerManager"
|
54539
|
-
},
|
54575
|
+
}, {
|
54576
|
+
[DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
|
54577
|
+
}), /* @__PURE__ */ React__default.createElement(BlockTree, {
|
54540
54578
|
selectedId: focusIdx2,
|
54541
54579
|
defaultExpandAll: true,
|
54542
54580
|
treeData,
|
@@ -54761,7 +54799,6 @@ function AddFont() {
|
|
54761
54799
|
}
|
54762
54800
|
});
|
54763
54801
|
}
|
54764
|
-
var index$4 = "";
|
54765
54802
|
var index$3 = "";
|
54766
54803
|
const MergeTags = React__default.memo((props) => {
|
54767
54804
|
const { mergeTags = {} } = useEditorProps();
|
@@ -56672,13 +56709,14 @@ class BlockAttributeConfigurationManager {
|
|
56672
56709
|
__publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
|
56673
56710
|
function AttributePanel() {
|
56674
56711
|
const { values: values2, focusBlock: focusBlock2 } = useBlock();
|
56712
|
+
const { initialized } = useEditorContext();
|
56675
56713
|
const { focusIdx: focusIdx2 } = useFocusIdx();
|
56676
56714
|
const value = getValueByIdx(values2, focusIdx2);
|
56677
56715
|
const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
|
56678
56716
|
const shadowRoot = getShadowRoot();
|
56679
|
-
if (!value)
|
56717
|
+
if (!value || !initialized)
|
56680
56718
|
return null;
|
56681
|
-
return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null,
|
56719
|
+
return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
|
56682
56720
|
style: { marginTop: 200, padding: "0 50px" }
|
56683
56721
|
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
56684
56722
|
size: "extraLarge"
|
@@ -56695,7 +56733,7 @@ function AttributePanel() {
|
|
56695
56733
|
outline: none;
|
56696
56734
|
cursor: text;
|
56697
56735
|
}
|
56698
|
-
`), shadowRoot))
|
56736
|
+
`), shadowRoot));
|
56699
56737
|
}
|
56700
56738
|
var index$1 = "";
|
56701
56739
|
const blockItem = "_blockItem_h5aqy_1";
|
@@ -59096,25 +59134,11 @@ function awaitForElement(idx) {
|
|
59096
59134
|
});
|
59097
59135
|
return promiseObj;
|
59098
59136
|
}
|
59099
|
-
|
59100
|
-
|
59101
|
-
|
59102
|
-
|
59103
|
-
|
59104
|
-
DRAG_INDEX: 1,
|
59105
|
-
SELECT_BLOCK_TOOLTIP: 1,
|
59106
|
-
HOVER_BLOCK_TOOLTIP: 1,
|
59107
|
-
DRAG_BLOCK_TOOLTIP: 1,
|
59108
|
-
SELECT_BLOCK_CHILD: 2,
|
59109
|
-
HOVER_BLOCK_CHILD: 2,
|
59110
|
-
DRAG_BLOCK_CHILD: 2
|
59111
|
-
};
|
59112
|
-
function Toolbar({ block: block2 }) {
|
59113
|
-
const {
|
59114
|
-
moveBlock,
|
59115
|
-
copyBlock,
|
59116
|
-
removeBlock
|
59117
|
-
} = useBlock();
|
59137
|
+
function Toolbar({
|
59138
|
+
block: block2,
|
59139
|
+
direction
|
59140
|
+
}) {
|
59141
|
+
const { moveBlock, copyBlock, removeBlock } = useBlock();
|
59118
59142
|
const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
|
59119
59143
|
const { modal, setModalVisible } = useAddToCollection();
|
59120
59144
|
const isPage = block2.type === BasicType.PAGE;
|
@@ -59134,7 +59158,7 @@ function Toolbar({ block: block2 }) {
|
|
59134
59158
|
style: {
|
59135
59159
|
position: "absolute",
|
59136
59160
|
left: 0,
|
59137
|
-
top: 0,
|
59161
|
+
top: direction === "top" ? 0 : "100%",
|
59138
59162
|
fontSize: 14,
|
59139
59163
|
zIndex: 3,
|
59140
59164
|
color: "#000",
|
@@ -59145,7 +59169,7 @@ function Toolbar({ block: block2 }) {
|
|
59145
59169
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
59146
59170
|
style: {
|
59147
59171
|
color: "#ffffff",
|
59148
|
-
transform: "translateY(-100%)",
|
59172
|
+
transform: direction === "top" ? "translateY(-100%)" : void 0,
|
59149
59173
|
display: "flex"
|
59150
59174
|
}
|
59151
59175
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
@@ -59208,6 +59232,7 @@ function FocusTooltip() {
|
|
59208
59232
|
const [blockNode, setBlockNode] = useState(null);
|
59209
59233
|
const { focusBlock: focusBlock2 } = useBlock();
|
59210
59234
|
const { focusIdx: focusIdx2 } = useFocusIdx();
|
59235
|
+
const [direction, setDirection] = useState("top");
|
59211
59236
|
const isPage = (focusBlock2 == null ? void 0 : focusBlock2.type) === BasicType.PAGE;
|
59212
59237
|
useEffect(() => {
|
59213
59238
|
const promiseObj = awaitForElement(focusIdx2);
|
@@ -59219,17 +59244,33 @@ function FocusTooltip() {
|
|
59219
59244
|
};
|
59220
59245
|
}, [focusIdx2, focusBlock2]);
|
59221
59246
|
useEffect(() => {
|
59222
|
-
if (
|
59223
|
-
|
59224
|
-
|
59225
|
-
|
59226
|
-
|
59227
|
-
|
59247
|
+
if (blockNode) {
|
59248
|
+
const options2 = {
|
59249
|
+
rootMargin: "-24px 0px -24px 0px",
|
59250
|
+
root: getShadowRoot().host,
|
59251
|
+
threshold: [0, 1e-3, 0.1, 0.999, 0.9, 1]
|
59252
|
+
};
|
59253
|
+
const checkDirection = (ev) => {
|
59254
|
+
const [current] = ev;
|
59255
|
+
const { top, bottom } = current.intersectionRect;
|
59256
|
+
const rootBounds = current.rootBounds;
|
59257
|
+
if (!rootBounds)
|
59258
|
+
return;
|
59259
|
+
if (rootBounds.bottom === bottom) {
|
59260
|
+
setDirection("top");
|
59261
|
+
} else if (rootBounds.top === top) {
|
59262
|
+
setDirection("bottom");
|
59263
|
+
} else {
|
59264
|
+
setDirection("top");
|
59265
|
+
}
|
59266
|
+
};
|
59267
|
+
const observer = new IntersectionObserver(checkDirection, options2);
|
59268
|
+
observer.observe(blockNode);
|
59228
59269
|
return () => {
|
59229
|
-
|
59270
|
+
observer.unobserve(blockNode);
|
59230
59271
|
};
|
59231
59272
|
}
|
59232
|
-
}, [blockNode
|
59273
|
+
}, [blockNode]);
|
59233
59274
|
const block2 = useMemo$1(() => {
|
59234
59275
|
if (!focusBlock2)
|
59235
59276
|
return null;
|
@@ -59245,9 +59286,14 @@ function FocusTooltip() {
|
|
59245
59286
|
pointerEvents: "none",
|
59246
59287
|
left: 0,
|
59247
59288
|
top: 0,
|
59248
|
-
zIndex:
|
59289
|
+
zIndex: 1
|
59249
59290
|
}
|
59250
|
-
}, /* @__PURE__ */ React__default.createElement(
|
59291
|
+
}, /* @__PURE__ */ React__default.createElement("style", null, `
|
59292
|
+
.email-block {
|
59293
|
+
position: relative;
|
59294
|
+
}
|
59295
|
+
|
59296
|
+
`), /* @__PURE__ */ React__default.createElement("div", {
|
59251
59297
|
style: {
|
59252
59298
|
position: "absolute",
|
59253
59299
|
zIndex: 9999,
|
@@ -59279,6 +59325,7 @@ function FocusTooltip() {
|
|
59279
59325
|
iconName: "icon-move",
|
59280
59326
|
style: { color: "#fff", cursor: "grab" }
|
59281
59327
|
})))), /* @__PURE__ */ React__default.createElement(Toolbar, {
|
59328
|
+
direction,
|
59282
59329
|
block: block2
|
59283
59330
|
}), /* @__PURE__ */ React__default.createElement("div", {
|
59284
59331
|
style: {
|
@@ -59294,27 +59341,27 @@ function FocusTooltip() {
|
|
59294
59341
|
}
|
59295
59342
|
})), blockNode));
|
59296
59343
|
}
|
59297
|
-
const FocusStyle = () => {
|
59298
|
-
return /* @__PURE__ */ React__default.createElement("style", null, `
|
59299
|
-
.block-selected {
|
59300
|
-
position: relative;
|
59301
|
-
z-index: 1;
|
59302
|
-
}
|
59303
|
-
|
59304
|
-
.block-selected .email-block {
|
59305
|
-
z-index: 2;
|
59306
|
-
}
|
59307
|
-
|
59308
|
-
`);
|
59309
|
-
};
|
59310
59344
|
function HoverTooltip() {
|
59311
59345
|
const { hoverIdx, direction, isDragging } = useHoverIdx();
|
59312
59346
|
const { focusIdx: focusIdx2 } = useFocusIdx();
|
59347
|
+
const [isTop, setIsTop] = useState(false);
|
59348
|
+
const { initialized } = useEditorContext();
|
59313
59349
|
const [blockNode, setBlockNode] = useState(null);
|
59350
|
+
const rootRef = useRef(null);
|
59314
59351
|
useEffect(() => {
|
59352
|
+
if (initialized) {
|
59353
|
+
rootRef.current = getEditorRoot().getBoundingClientRect();
|
59354
|
+
}
|
59355
|
+
}, [initialized]);
|
59356
|
+
useEffect(() => {
|
59357
|
+
const rootBounds = rootRef.current;
|
59358
|
+
if (!initialized || !rootBounds)
|
59359
|
+
return;
|
59315
59360
|
if (hoverIdx) {
|
59316
59361
|
const promiseObj = awaitForElement(hoverIdx);
|
59317
59362
|
promiseObj.promise.then((blockNode2) => {
|
59363
|
+
const { top } = blockNode2.getBoundingClientRect();
|
59364
|
+
setIsTop(rootBounds.top === top);
|
59318
59365
|
setBlockNode(blockNode2);
|
59319
59366
|
});
|
59320
59367
|
return () => {
|
@@ -59323,16 +59370,7 @@ function HoverTooltip() {
|
|
59323
59370
|
} else {
|
59324
59371
|
setBlockNode(null);
|
59325
59372
|
}
|
59326
|
-
}, [hoverIdx]);
|
59327
|
-
useEffect(() => {
|
59328
|
-
getBlockNodes().forEach((blockNode2) => {
|
59329
|
-
if (getNodeIdxFromClassName(blockNode2.classList) !== hoverIdx) {
|
59330
|
-
blockNode2.classList.remove(BLOCK_HOVER_CLASSNAME);
|
59331
|
-
} else {
|
59332
|
-
blockNode2.classList.add(BLOCK_HOVER_CLASSNAME);
|
59333
|
-
}
|
59334
|
-
});
|
59335
|
-
}, [hoverIdx]);
|
59373
|
+
}, [hoverIdx, initialized]);
|
59336
59374
|
const block2 = useMemo$1(() => {
|
59337
59375
|
return blockNode ? BlockManager.getBlockByType(getNodeTypeFromClassName(blockNode.classList)) : null;
|
59338
59376
|
}, [blockNode]);
|
@@ -59340,13 +59378,23 @@ function HoverTooltip() {
|
|
59340
59378
|
return null;
|
59341
59379
|
if (!block2 || !blockNode)
|
59342
59380
|
return null;
|
59343
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(
|
59381
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement("div", {
|
59382
|
+
style: {
|
59383
|
+
position: "absolute",
|
59384
|
+
height: "100%",
|
59385
|
+
width: "100%",
|
59386
|
+
top: 0,
|
59387
|
+
left: 0,
|
59388
|
+
zIndex: 2,
|
59389
|
+
pointerEvents: "none"
|
59390
|
+
}
|
59391
|
+
}, /* @__PURE__ */ React__default.createElement(TipNode, {
|
59344
59392
|
type: isDragging ? "drag" : "hover",
|
59345
59393
|
lineWidth: 1,
|
59346
59394
|
title: block2.name,
|
59347
|
-
direction,
|
59395
|
+
direction: isTop ? "noEnoughTop" : direction,
|
59348
59396
|
isDragging
|
59349
|
-
}), blockNode));
|
59397
|
+
})), blockNode));
|
59350
59398
|
}
|
59351
59399
|
function TipNode(props) {
|
59352
59400
|
const { direction, title: title2, lineWidth, type: type2 } = props;
|
@@ -59373,14 +59421,19 @@ function TipNode(props) {
|
|
59373
59421
|
left: 0,
|
59374
59422
|
top: 0,
|
59375
59423
|
fontSize: 14,
|
59376
|
-
zIndex:
|
59424
|
+
zIndex: 1,
|
59377
59425
|
color: "#000",
|
59378
59426
|
width: "100%",
|
59379
59427
|
height: "100%",
|
59380
59428
|
pointerEvents: "none",
|
59381
59429
|
textAlign: "left"
|
59382
59430
|
}
|
59383
|
-
}, /* @__PURE__ */ React__default.createElement(
|
59431
|
+
}, /* @__PURE__ */ React__default.createElement("style", null, `
|
59432
|
+
.email-block {
|
59433
|
+
position: relative;
|
59434
|
+
}
|
59435
|
+
|
59436
|
+
`), /* @__PURE__ */ React__default.createElement("div", {
|
59384
59437
|
style: {
|
59385
59438
|
position: "absolute",
|
59386
59439
|
left: 0,
|
@@ -59403,7 +59456,7 @@ function TipNode(props) {
|
|
59403
59456
|
padding: "1px 5px",
|
59404
59457
|
boxSizing: "border-box",
|
59405
59458
|
whiteSpace: "nowrap",
|
59406
|
-
transform: "
|
59459
|
+
transform: "translateX(-100%)"
|
59407
59460
|
}
|
59408
59461
|
}, title2))), props.isDragging && /* @__PURE__ */ React__default.createElement("div", {
|
59409
59462
|
style: __spreadValues({
|
@@ -59427,28 +59480,13 @@ function TipNode(props) {
|
|
59427
59480
|
}, positionStyleMap[props.direction || "none"])
|
59428
59481
|
}, dragTitle)));
|
59429
59482
|
}
|
59430
|
-
const HoverStyle = () => {
|
59431
|
-
return /* @__PURE__ */ React__default.createElement("style", null, `
|
59432
|
-
.block-hover {
|
59433
|
-
position: relative;
|
59434
|
-
z-index: 1;
|
59435
|
-
}
|
59436
|
-
.block-hover .email-block {
|
59437
|
-
z-index: 2;
|
59438
|
-
}
|
59439
|
-
|
59440
|
-
.block-dragover {
|
59441
|
-
position: relative;
|
59442
|
-
z-index: 2;
|
59443
|
-
}
|
59444
|
-
|
59445
|
-
|
59446
|
-
.block-dragover .email-block {
|
59447
|
-
z-index: 3;
|
59448
|
-
}
|
59449
|
-
`);
|
59450
|
-
};
|
59451
59483
|
const positionStyleMap = {
|
59484
|
+
noEnoughTop: {
|
59485
|
+
top: "0%",
|
59486
|
+
left: "50%",
|
59487
|
+
padding: "1px 5px",
|
59488
|
+
transform: "translate(-50%, 0%)"
|
59489
|
+
},
|
59452
59490
|
top: {
|
59453
59491
|
top: "0%",
|
59454
59492
|
left: "50%",
|