easy-email-extensions 3.0.13 → 3.1.2
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/AttributePanel/AttributePanel.d.ts +3 -3
- package/lib/AttributePanel/components/UI/Help/index.d.ts +7 -7
- package/lib/AttributePanel/components/UI/HtmlEditor.d.ts +5 -5
- package/lib/AttributePanel/components/attributes/Align.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/AttributesPanelWrapper/index.d.ts +6 -6
- package/lib/AttributePanel/components/attributes/Background.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/BackgroundColor.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Border.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/BorderColor.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/BorderStyle.d.ts +5 -5
- package/lib/AttributePanel/components/attributes/BorderWidth.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Color.d.ts +4 -4
- package/lib/AttributePanel/components/attributes/ContainerBackgroundColor.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Decoration.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Direction.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/FontFamily.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/FontSize.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/FontStyle.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/FontWeight.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Height.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/LetterSpacing.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/LineHeight.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Link.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Margin.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/MergeTags.d.ts +6 -6
- package/lib/AttributePanel/components/attributes/NavbarLinkPadding.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Padding.d.ts +5 -5
- package/lib/AttributePanel/components/attributes/TextAlign.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/TextDecoration.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/TextTransform.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/VerticalAlign.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Width.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/index.d.ts +29 -29
- package/lib/AttributePanel/components/blocks/Accordion/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/AccordionElement/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/AccordionText/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/AccordionTitle/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Button/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Carousel/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Column/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Divider/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Group/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Hero/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Image/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Navbar/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Page/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Raw/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Section/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Social/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Spacer/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Table/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Text/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Wrapper/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/index.d.ts +42 -42
- package/lib/AttributePanel/components/provider/PresetColorsProvider/index.d.ts +6 -6
- package/lib/AttributePanel/components/provider/SelectionRangeProvider/index.d.ts +6 -6
- package/lib/AttributePanel/hooks/useSelectionRange.d.ts +6 -6
- package/lib/AttributePanel/index.d.ts +3 -3
- package/lib/AttributePanel/utils/BlockAttributeConfigurationManager.d.ts +10 -10
- package/lib/AttributePanel/utils/InputNumberAdapter.d.ts +2 -2
- package/lib/AttributePanel/utils/PromiseEach.d.ts +1 -1
- package/lib/AttributePanel/utils/Uploader.d.ts +35 -35
- package/lib/AttributePanel/utils/awaitForElement.d.ts +4 -4
- package/lib/AttributePanel/utils/classnames.d.ts +1 -1
- package/lib/AttributePanel/utils/getImg.d.ts +8 -8
- package/lib/AttributePanel/utils/onDrag.d.ts +10 -10
- package/lib/AttributePanel/utils/previewLoadImage.d.ts +1 -1
- package/lib/BlockLayer/components/BlockTree/index.d.ts +50 -29
- package/lib/BlockLayer/components/BlockTree/transparentImage.d.ts +1 -0
- package/lib/BlockLayer/components/ContextMenu/index.d.ts +14 -14
- package/lib/BlockLayer/components/EyeIcon/index.d.ts +7 -7
- package/lib/BlockLayer/hooks/useAvatarWrapperDrop.d.ts +24 -0
- package/lib/BlockLayer/index.d.ts +8 -7
- package/lib/InteractivePrompt/components/FocusTooltip.d.ts +1 -1
- package/lib/InteractivePrompt/components/HoverTooltip.d.ts +1 -1
- package/lib/InteractivePrompt/components/Toolbar.d.ts +5 -5
- package/lib/InteractivePrompt/index.d.ts +1 -1
- package/lib/InteractivePrompt/utils/awaitForElement.d.ts +4 -4
- package/lib/ShortcutToolbar/ShortcutToolbar.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlockMaskWrapper/index.d.ts +6 -6
- package/lib/ShortcutToolbar/components/BlocksPanel/index.d.ts +2 -2
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/AccordionBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ButtonBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/CarouselBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ColumnBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/DividerBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/GroupBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/HeroBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ImageBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/NavbarBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/RawBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SectionBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SocialBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SpacerBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/TextBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/WrapperBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/index.d.ts +18 -18
- package/lib/ShortcutToolbar/components/Picture/index.d.ts +7 -7
- package/lib/ShortcutToolbar/index.d.ts +4 -4
- package/lib/ShortcutToolbar/utils/BlockMarketManager.d.ts +32 -32
- package/lib/ShortcutToolbar/utils/getImg.d.ts +68 -68
- package/lib/SimpleLayout/SimpleLayout.d.ts +2 -2
- package/lib/SimpleLayout/index.d.ts +1 -1
- package/lib/SourceCodePanel/index.d.ts +1 -1
- package/lib/components/AddToCollection/index.d.ts +5 -5
- package/lib/components/Form/AddFont.d.ts +1 -1
- package/lib/components/Form/AutoComplete.d.ts +11 -11
- package/lib/components/Form/CheckBoxGroup.d.ts +14 -14
- package/lib/components/Form/CodemirrorEditor/index.d.ts +8 -8
- package/lib/components/Form/ColorPicker.d.ts +10 -10
- package/lib/components/Form/EditTab.d.ts +10 -10
- package/lib/components/Form/ImageUploader/index.d.ts +8 -8
- package/lib/components/Form/InlineTextField/index.d.ts +7 -7
- package/lib/components/Form/Input.d.ts +7 -7
- package/lib/components/Form/RadioGroup.d.ts +13 -13
- package/lib/components/Form/RichTextField/index.d.ts +2 -2
- package/lib/components/Form/RichTextToolBar/RichTextToolBar.d.ts +1 -1
- package/lib/components/Form/RichTextToolBar/components/FontFamily/index.d.ts +3 -3
- package/lib/components/Form/RichTextToolBar/components/FontSizeList/index.d.ts +3 -3
- package/lib/components/Form/RichTextToolBar/components/Heading/index.d.ts +3 -3
- package/lib/components/Form/RichTextToolBar/components/Link/index.d.ts +12 -12
- package/lib/components/Form/RichTextToolBar/components/ToolItem/index.d.ts +7 -7
- package/lib/components/Form/RichTextToolBar/components/Tools/Tools.d.ts +5 -5
- package/lib/components/Form/RichTextToolBar/components/Tools/index.d.ts +1 -1
- package/lib/components/Form/RichTextToolBar/index.d.ts +1 -1
- package/lib/components/Form/Select.d.ts +11 -11
- package/lib/components/Form/UploadField.d.ts +8 -8
- package/lib/components/Form/enhancer.d.ts +20 -20
- package/lib/components/Form/index.d.ts +29 -29
- package/lib/components/RenderCount/index.d.ts +1 -1
- package/lib/components/ShadowDom/index.d.ts +2 -2
- package/lib/hooks/useAddToCollection.d.ts +6 -6
- package/lib/index.d.ts +8 -8
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib/index2.js +1443 -1441
- package/lib/index2.js.map +1 -1
- package/lib/index3.js +1 -2
- package/lib/index3.js.map +1 -1
- package/lib/style.css +1 -1
- package/lib/utils/awaitForElement.d.ts +4 -4
- package/lib/utils/classnames.d.ts +1 -1
- package/package.json +4 -8
- package/readme.md +138 -138
- package/lib/BlockLayer/components/BlockTree/components/BlockTreeItem/index.d.ts +0 -23
- package/lib/BlockLayer/components/BlockTree/components/TreeCollapse.d.ts +0 -6
- package/lib/components/Form/RichTextToolBar/components/MergeTags/MergeTags.d.ts +0 -6
- package/lib/components/Form/RichTextToolBar/components/MergeTags/index.d.ts +0 -1
package/lib/index2.js
CHANGED
@@ -54,15 +54,14 @@ var __async = (__this, __arguments, generator) => {
|
|
54
54
|
});
|
55
55
|
};
|
56
56
|
import * as React from "react";
|
57
|
-
import React__default, {
|
58
|
-
import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps,
|
59
|
-
import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx,
|
60
|
-
import { ReactSortable } from "react-sortablejs";
|
61
|
-
import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
|
57
|
+
import React__default, { Children, isValidElement, cloneElement, createContext, useContext, Component, useMemo, memo, forwardRef, useEffect, useRef, useLayoutEffect, useState, createRef, useImperativeHandle, PureComponent, useCallback, useReducer, createElement, Suspense } from "react";
|
58
|
+
import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, useFocusIdx, useEditorContext, getShadowRoot, FIXED_CONTAINER_ID, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_ID, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
|
59
|
+
import { BasicType, ImageManager, BlockManager, createBlockDataByType, getParentByIdx, getValueByIdx, getIndexByIdx, getSiblingIdx, getNodeIdxFromClassName, getParentIdx, getNodeIdxClassName, getPageIdx, getChildIdx, MjmlToJson, JsonToMjml, getNodeTypeFromClassName } from "easy-email-core";
|
62
60
|
import ReactDOM, { findDOMNode, createPortal } from "react-dom";
|
63
|
-
|
64
|
-
|
65
|
-
|
61
|
+
import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
|
62
|
+
var index$2 = "";
|
63
|
+
const title = "_title_pteer_1";
|
64
|
+
var styles$6 = {
|
66
65
|
title
|
67
66
|
};
|
68
67
|
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
@@ -5498,313 +5497,6 @@ function EyeIcon$1({
|
|
5498
5497
|
iconName: "icon-eye"
|
5499
5498
|
});
|
5500
5499
|
}
|
5501
|
-
const treeNodeList = "_treeNodeList_7a1ah_1";
|
5502
|
-
const treeNodeWrapper = "_treeNodeWrapper_7a1ah_6";
|
5503
|
-
const treeNode = "_treeNode_7a1ah_1";
|
5504
|
-
const treeNodeSelected = "_treeNodeSelected_7a1ah_18";
|
5505
|
-
const treeNodeTitle = "_treeNodeTitle_7a1ah_21";
|
5506
|
-
var styles$8 = {
|
5507
|
-
treeNodeList,
|
5508
|
-
treeNodeWrapper,
|
5509
|
-
treeNode,
|
5510
|
-
treeNodeSelected,
|
5511
|
-
treeNodeTitle
|
5512
|
-
};
|
5513
|
-
const TreeCollapse = React__default.memo(({ expand, setExpand, hasChildren }) => {
|
5514
|
-
const onToggle = useCallback(() => {
|
5515
|
-
setExpand((v) => !v);
|
5516
|
-
}, [setExpand]);
|
5517
|
-
if (!hasChildren)
|
5518
|
-
return /* @__PURE__ */ React__default.createElement(IconFont, {
|
5519
|
-
size: 12,
|
5520
|
-
iconName: "icon-dot",
|
5521
|
-
onClickCapture: onToggle
|
5522
|
-
});
|
5523
|
-
if (expand) {
|
5524
|
-
return /* @__PURE__ */ React__default.createElement(IconFont, {
|
5525
|
-
size: 12,
|
5526
|
-
iconName: "icon-minus-square",
|
5527
|
-
onClickCapture: onToggle
|
5528
|
-
});
|
5529
|
-
}
|
5530
|
-
return /* @__PURE__ */ React__default.createElement(IconFont, {
|
5531
|
-
size: 12,
|
5532
|
-
iconName: "icon-plus-square",
|
5533
|
-
onClickCapture: onToggle
|
5534
|
-
});
|
5535
|
-
});
|
5536
|
-
function classnames$1(...rest) {
|
5537
|
-
return rest.filter((item2) => typeof item2 === "string").join(" ");
|
5538
|
-
}
|
5539
|
-
const DATA_ATTRIBUTE_ID = "data-tree-node-id";
|
5540
|
-
const DATA_ATTRIBUTE_INDEX = "data-tree-node-index";
|
5541
|
-
function BlockTreeItem(props) {
|
5542
|
-
var _a, _b;
|
5543
|
-
const {
|
5544
|
-
nodeData,
|
5545
|
-
renderTitle,
|
5546
|
-
defaultExpandAll,
|
5547
|
-
onDragStart,
|
5548
|
-
onDragMove,
|
5549
|
-
onDragEnd,
|
5550
|
-
onSpill,
|
5551
|
-
indent,
|
5552
|
-
index: index2,
|
5553
|
-
onSelect: handleSelect,
|
5554
|
-
onMouseEnter: handleMouseEnter,
|
5555
|
-
onContextMenu: handleContextMenu
|
5556
|
-
} = props;
|
5557
|
-
const [expand, setExpand] = useState(Boolean(defaultExpandAll));
|
5558
|
-
const ulRef = useRef(null);
|
5559
|
-
const initedRef = useRef(false);
|
5560
|
-
useEffect(() => {
|
5561
|
-
const ulEle = ulRef.current;
|
5562
|
-
if (!ulEle)
|
5563
|
-
return;
|
5564
|
-
if (!initedRef.current) {
|
5565
|
-
initedRef.current = true;
|
5566
|
-
if (!expand) {
|
5567
|
-
ulEle.style.setProperty("max-height", "0px");
|
5568
|
-
}
|
5569
|
-
return;
|
5570
|
-
}
|
5571
|
-
if (expand) {
|
5572
|
-
const onTransitionEnd = () => {
|
5573
|
-
ulEle.style.removeProperty("max-height");
|
5574
|
-
ulEle.removeEventListener("transitionend", onTransitionEnd);
|
5575
|
-
};
|
5576
|
-
ulEle.style.setProperty("transition", "none");
|
5577
|
-
ulEle.style.removeProperty("max-height");
|
5578
|
-
const maxHeight = ulEle.getBoundingClientRect().height;
|
5579
|
-
ulEle.style.setProperty("max-height", "0px");
|
5580
|
-
ulEle.addEventListener("transitionend", onTransitionEnd);
|
5581
|
-
requestAnimationFrame(() => {
|
5582
|
-
ulEle.style.setProperty("transition", "all .3s ease-out");
|
5583
|
-
ulEle.style.setProperty("max-height", maxHeight + "px");
|
5584
|
-
});
|
5585
|
-
} else {
|
5586
|
-
ulEle.style.setProperty("transition", "none");
|
5587
|
-
const maxHeight = ulEle.getBoundingClientRect().height;
|
5588
|
-
ulEle.style.setProperty("max-height", maxHeight + "px");
|
5589
|
-
requestAnimationFrame(() => {
|
5590
|
-
ulEle.style.setProperty("transition", "all .3s ease-out");
|
5591
|
-
ulEle.style.setProperty("max-height", "0px");
|
5592
|
-
});
|
5593
|
-
}
|
5594
|
-
}, [expand]);
|
5595
|
-
const onStart = useCallback((evt, sortable, store) => {
|
5596
|
-
if (onDragStart) {
|
5597
|
-
onDragStart(evt, sortable, store);
|
5598
|
-
}
|
5599
|
-
setExpand(false);
|
5600
|
-
}, [onDragStart]);
|
5601
|
-
const onSelect = useCallback((ev) => {
|
5602
|
-
ev.stopPropagation();
|
5603
|
-
handleSelect(nodeData.id);
|
5604
|
-
}, [nodeData.id, handleSelect]);
|
5605
|
-
const onMouseEnter = useCallback((ev) => {
|
5606
|
-
handleMouseEnter && handleMouseEnter(nodeData.id, ev);
|
5607
|
-
}, [nodeData.id, handleMouseEnter]);
|
5608
|
-
const onContextMenu = useCallback((ev) => {
|
5609
|
-
handleContextMenu && handleContextMenu(nodeData, ev);
|
5610
|
-
}, [handleContextMenu, nodeData]);
|
5611
|
-
return /* @__PURE__ */ React__default.createElement("li", {
|
5612
|
-
className: styles$8.treeNodeWrapper
|
5613
|
-
}, /* @__PURE__ */ React__default.createElement(ReactSortable, __spreadValues({
|
5614
|
-
revertOnSpill: true,
|
5615
|
-
list: [{ id: nodeData.id }],
|
5616
|
-
setList: () => {
|
5617
|
-
},
|
5618
|
-
onMove: onDragMove,
|
5619
|
-
onEnd: onDragEnd,
|
5620
|
-
onStart,
|
5621
|
-
onSpill
|
5622
|
-
}, {
|
5623
|
-
animation: 150,
|
5624
|
-
fallbackOnBody: true,
|
5625
|
-
swapThreshold: 0.65,
|
5626
|
-
ghostClass: "ghost",
|
5627
|
-
group: "shared"
|
5628
|
-
}), /* @__PURE__ */ React__default.createElement("div", __spreadValues({
|
5629
|
-
onMouseEnter,
|
5630
|
-
onContextMenu,
|
5631
|
-
className: classnames$1(styles$8.treeNode)
|
5632
|
-
}, {
|
5633
|
-
[DATA_ATTRIBUTE_ID]: nodeData.id,
|
5634
|
-
[DATA_ATTRIBUTE_INDEX]: index2
|
5635
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
5636
|
-
style: { width: indent * 18 }
|
5637
|
-
}), /* @__PURE__ */ React__default.createElement(TreeCollapse, {
|
5638
|
-
hasChildren: Boolean((_a = nodeData.children) == null ? void 0 : _a.length),
|
5639
|
-
expand,
|
5640
|
-
setExpand
|
5641
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
5642
|
-
className: styles$8.treeNodeTitle,
|
5643
|
-
onClick: onSelect
|
5644
|
-
}, renderTitle(nodeData)), /* @__PURE__ */ React__default.createElement(IconFont, {
|
5645
|
-
iconName: "icon-drag",
|
5646
|
-
style: { cursor: "grab", fontSize: 12 }
|
5647
|
-
}))), /* @__PURE__ */ React__default.createElement("ul", {
|
5648
|
-
ref: ulRef,
|
5649
|
-
style: { overflow: "hidden" },
|
5650
|
-
className: styles$8.treeNodeList
|
5651
|
-
}, (_b = nodeData.children) == null ? void 0 : _b.map((item2, index22) => {
|
5652
|
-
return /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
|
5653
|
-
key: index22,
|
5654
|
-
index: index22,
|
5655
|
-
onSelect: handleSelect,
|
5656
|
-
onMouseEnter: handleMouseEnter,
|
5657
|
-
onContextMenu: handleContextMenu,
|
5658
|
-
nodeData: item2,
|
5659
|
-
renderTitle,
|
5660
|
-
indent: indent + 1,
|
5661
|
-
defaultExpandAll,
|
5662
|
-
onDragStart,
|
5663
|
-
onDragMove,
|
5664
|
-
onDragEnd,
|
5665
|
-
onSpill
|
5666
|
-
});
|
5667
|
-
})));
|
5668
|
-
}
|
5669
|
-
const getCurrenTreeNode = (ele, rootEle) => {
|
5670
|
-
if (ele.classList.contains(styles$8.treeNode))
|
5671
|
-
return ele;
|
5672
|
-
if (ele.parentElement && rootEle && rootEle.contains(ele.parentElement))
|
5673
|
-
return getCurrenTreeNode(ele.parentElement, rootEle);
|
5674
|
-
return null;
|
5675
|
-
};
|
5676
|
-
function BlockTree(props) {
|
5677
|
-
const [eleRef, setEleRef] = useState(null);
|
5678
|
-
const [selectedId, setSelectedId] = useState(props.selectedId);
|
5679
|
-
const dropDataRef = useRef(null);
|
5680
|
-
const {
|
5681
|
-
treeData,
|
5682
|
-
allowDrop,
|
5683
|
-
onDrop,
|
5684
|
-
onSelect,
|
5685
|
-
onMouseEnter,
|
5686
|
-
onMouseLeave,
|
5687
|
-
onContextMenu
|
5688
|
-
} = props;
|
5689
|
-
const treeDataMap = useMemo(() => {
|
5690
|
-
const map2 = {};
|
5691
|
-
const loop2 = (node) => {
|
5692
|
-
if (map2[node.id]) {
|
5693
|
-
console.warn(`have same id ${node.id}`);
|
5694
|
-
}
|
5695
|
-
map2[node.id] = node;
|
5696
|
-
if (node.children) {
|
5697
|
-
node.children.forEach((item2) => {
|
5698
|
-
loop2(item2);
|
5699
|
-
});
|
5700
|
-
}
|
5701
|
-
};
|
5702
|
-
treeData.forEach((item2) => {
|
5703
|
-
loop2(item2);
|
5704
|
-
});
|
5705
|
-
return map2;
|
5706
|
-
}, [treeData]);
|
5707
|
-
useEffect(() => {
|
5708
|
-
setSelectedId(props.selectedId);
|
5709
|
-
}, [props.selectedId]);
|
5710
|
-
useEffect(() => {
|
5711
|
-
if (!eleRef)
|
5712
|
-
return;
|
5713
|
-
if (selectedId) {
|
5714
|
-
const node = eleRef.querySelector("." + styles$8.treeNodeSelected);
|
5715
|
-
if (node) {
|
5716
|
-
node.classList.remove(styles$8.treeNodeSelected);
|
5717
|
-
}
|
5718
|
-
setTimeout(() => {
|
5719
|
-
const selectedNode = eleRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${selectedId}"]`);
|
5720
|
-
if (selectedNode) {
|
5721
|
-
selectedNode.classList.add(styles$8.treeNodeSelected);
|
5722
|
-
selectedNode.scrollIntoView({
|
5723
|
-
block: "center",
|
5724
|
-
behavior: "smooth"
|
5725
|
-
});
|
5726
|
-
}
|
5727
|
-
}, 50);
|
5728
|
-
}
|
5729
|
-
}, [eleRef, selectedId]);
|
5730
|
-
const onDragStart = useCallback((evt, sortable, store) => {
|
5731
|
-
}, []);
|
5732
|
-
const onDragMove = useCallback((evt, originalEvent) => {
|
5733
|
-
const dragEle = getCurrenTreeNode(evt.dragged);
|
5734
|
-
const dropEle = getCurrenTreeNode(evt.related);
|
5735
|
-
if (dropEle && dragEle) {
|
5736
|
-
const dragId = dragEle.getAttribute(DATA_ATTRIBUTE_ID);
|
5737
|
-
const dragIndex = dragEle.getAttribute(DATA_ATTRIBUTE_INDEX);
|
5738
|
-
const dropId = dropEle.getAttribute(DATA_ATTRIBUTE_ID);
|
5739
|
-
const dropIndex = dropEle.getAttribute(DATA_ATTRIBUTE_INDEX);
|
5740
|
-
const currentDropData = {
|
5741
|
-
dragNode: treeDataMap[dragId],
|
5742
|
-
dragIndex: Number(dragIndex),
|
5743
|
-
dropIndex: Number(dropIndex),
|
5744
|
-
dropNode: treeDataMap[dropId],
|
5745
|
-
willInsertAfter: evt.willInsertAfter,
|
5746
|
-
event: originalEvent
|
5747
|
-
};
|
5748
|
-
const isAllowDrop = allowDrop(currentDropData);
|
5749
|
-
if (isAllowDrop) {
|
5750
|
-
dropEle.classList.add(styles$8.treeNodeDrop);
|
5751
|
-
dropDataRef.current = currentDropData;
|
5752
|
-
return true;
|
5753
|
-
}
|
5754
|
-
}
|
5755
|
-
return false;
|
5756
|
-
}, [allowDrop, treeDataMap]);
|
5757
|
-
const onDragEnd = useCallback((evt) => {
|
5758
|
-
if (dropDataRef.current) {
|
5759
|
-
onDrop(dropDataRef.current);
|
5760
|
-
}
|
5761
|
-
dropDataRef.current = null;
|
5762
|
-
}, [dropDataRef, , onDrop]);
|
5763
|
-
const onSpill = useCallback((evt) => {
|
5764
|
-
dropDataRef.current = null;
|
5765
|
-
}, []);
|
5766
|
-
return useMemo(() => /* @__PURE__ */ React__default.createElement("div", {
|
5767
|
-
ref: setEleRef,
|
5768
|
-
className: styles$8.tree,
|
5769
|
-
onMouseLeave
|
5770
|
-
}, props.treeData.map((item2) => /* @__PURE__ */ React__default.createElement("ul", {
|
5771
|
-
key: item2.id,
|
5772
|
-
className: styles$8.treeNodeList
|
5773
|
-
}, /* @__PURE__ */ React__default.createElement(BlockTreeItem, {
|
5774
|
-
nodeData: item2,
|
5775
|
-
renderTitle: props.renderTitle,
|
5776
|
-
indent: 0,
|
5777
|
-
index: 0,
|
5778
|
-
onSelect,
|
5779
|
-
onMouseEnter,
|
5780
|
-
onContextMenu,
|
5781
|
-
defaultExpandAll: Boolean(props.defaultExpandAll),
|
5782
|
-
onDragStart,
|
5783
|
-
onDragMove,
|
5784
|
-
onDragEnd,
|
5785
|
-
onSpill
|
5786
|
-
})))), [
|
5787
|
-
onContextMenu,
|
5788
|
-
onDragEnd,
|
5789
|
-
onDragMove,
|
5790
|
-
onDragStart,
|
5791
|
-
onMouseEnter,
|
5792
|
-
onMouseLeave,
|
5793
|
-
onSelect,
|
5794
|
-
onSpill,
|
5795
|
-
props.defaultExpandAll,
|
5796
|
-
props.renderTitle,
|
5797
|
-
props.treeData
|
5798
|
-
]);
|
5799
|
-
}
|
5800
|
-
const wrap$1 = "_wrap_aul3a_1";
|
5801
|
-
const listItem = "_listItem_aul3a_13";
|
5802
|
-
const contextmenuMark = "_contextmenuMark_aul3a_23";
|
5803
|
-
var styles$7 = {
|
5804
|
-
wrap: wrap$1,
|
5805
|
-
listItem,
|
5806
|
-
contextmenuMark
|
5807
|
-
};
|
5808
5500
|
function _extends$f() {
|
5809
5501
|
_extends$f = Object.assign || function(target2) {
|
5810
5502
|
for (var i2 = 1; i2 < arguments.length; i2++) {
|
@@ -21735,7 +21427,7 @@ var __assign$y = globalThis && globalThis.__assign || function() {
|
|
21735
21427
|
};
|
21736
21428
|
return __assign$y.apply(this, arguments);
|
21737
21429
|
};
|
21738
|
-
function wrapper
|
21430
|
+
function wrapper(picker, displayName) {
|
21739
21431
|
var _a;
|
21740
21432
|
return _a = function(_super) {
|
21741
21433
|
__extends$5(PickerWrapper, _super);
|
@@ -21748,11 +21440,11 @@ function wrapper$1(picker, displayName) {
|
|
21748
21440
|
return PickerWrapper;
|
21749
21441
|
}(React__default.Component), _a.displayName = displayName, _a;
|
21750
21442
|
}
|
21751
|
-
var DatePicker = wrapper
|
21752
|
-
var MonthPicker = wrapper
|
21753
|
-
var YearPicker = wrapper
|
21754
|
-
var WeekPicker = wrapper
|
21755
|
-
var QuarterPicker = wrapper
|
21443
|
+
var DatePicker = wrapper(React__default.createElement(DatePicker$2, null), "DatePicker");
|
21444
|
+
var MonthPicker = wrapper(React__default.createElement(MonthPicker$1, null), "MonthPicker");
|
21445
|
+
var YearPicker = wrapper(React__default.createElement(YearPicker$1, null), "YearPicker");
|
21446
|
+
var WeekPicker = wrapper(React__default.createElement(WeekPicker$1, null), "WeekPicker");
|
21447
|
+
var QuarterPicker = wrapper(React__default.createElement(QuarterPicker$1, null), "QuarterPicker");
|
21756
21448
|
var RangePicker = PickerRange;
|
21757
21449
|
Object.assign(DatePicker, { MonthPicker, YearPicker, WeekPicker, QuarterPicker, RangePicker });
|
21758
21450
|
var DatePicker$1 = DatePicker;
|
@@ -27893,7 +27585,7 @@ var __rest$2 = globalThis && globalThis.__rest || function(s, e) {
|
|
27893
27585
|
}
|
27894
27586
|
return t;
|
27895
27587
|
};
|
27896
|
-
function TabPane$
|
27588
|
+
function TabPane$1(props, ref) {
|
27897
27589
|
var shouldRender = useRef(false);
|
27898
27590
|
var getPrefixCls = useContext(ConfigContext).getPrefixCls;
|
27899
27591
|
var children = props.children, className = props.className, style = props.style, lazyload = props.lazyload, isActive = props.isActive, rest = __rest$2(props, ["children", "className", "style", "lazyload", "isActive"]);
|
@@ -27901,10 +27593,10 @@ function TabPane$2(props, ref) {
|
|
27901
27593
|
shouldRender.current = lazyload ? shouldRender.current || isActive : true;
|
27902
27594
|
return shouldRender.current && React__default.createElement("div", __assign$b({ ref }, omit$1(rest, ["destroyOnHide", "title", "closable"]), { className: cs(prefixCls2 + "-pane", className), style }), children);
|
27903
27595
|
}
|
27904
|
-
var TabPaneRef = React__default.forwardRef(TabPane$
|
27596
|
+
var TabPaneRef = React__default.forwardRef(TabPane$1);
|
27905
27597
|
TabPaneRef.displayName = "TabPane";
|
27906
27598
|
TabPaneRef.isTabPane = true;
|
27907
|
-
var TabPane$
|
27599
|
+
var TabPane$2 = TabPaneRef;
|
27908
27600
|
function DropdownIcon(props) {
|
27909
27601
|
var prefixCls2 = props.prefixCls, currentOffset = props.currentOffset, headerSize = props.headerSize, headerWrapperSize = props.headerWrapperSize, getTitleRef = props.getTitleRef, paneChildren = props.paneChildren, direction = props.direction;
|
27910
27602
|
var paneKeys = paneChildren.map(function(child) {
|
@@ -28609,7 +28301,7 @@ function Tabs(baseProps, ref) {
|
|
28609
28301
|
var ForwardRefTabs = React__default.forwardRef(Tabs);
|
28610
28302
|
var TabsComponent = ForwardRefTabs;
|
28611
28303
|
TabsComponent.displayName = "Tabs";
|
28612
|
-
TabsComponent.TabPane = TabPane$
|
28304
|
+
TabsComponent.TabPane = TabPane$2;
|
28613
28305
|
var Tabs$1 = TabsComponent;
|
28614
28306
|
function ownKeys$3(object, enumerableOnly) {
|
28615
28307
|
var keys2 = Object.keys(object);
|
@@ -30501,10 +30193,10 @@ function TreeList(props, ref) {
|
|
30501
30193
|
treeRef.current.handleCheck && treeRef.current.handleCheck(!checked, node.props._key, e);
|
30502
30194
|
}
|
30503
30195
|
}, []);
|
30504
|
-
var handleLoadMore = useCallback(function(
|
30196
|
+
var handleLoadMore = useCallback(function(treeNode) {
|
30505
30197
|
if (isFunction$5(loadMore)) {
|
30506
|
-
var dataRef =
|
30507
|
-
return loadMore(
|
30198
|
+
var dataRef = treeNode.props.dataRef;
|
30199
|
+
return loadMore(treeNode, dataRef);
|
30508
30200
|
}
|
30509
30201
|
return [];
|
30510
30202
|
}, [loadMore]);
|
@@ -30942,6 +30634,138 @@ IconUpload.defaultProps = {
|
|
30942
30634
|
};
|
30943
30635
|
IconUpload.displayName = "IconUpload";
|
30944
30636
|
var IconUpload$1 = IconUpload;
|
30637
|
+
const transparentImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
|
30638
|
+
const img = new Image();
|
30639
|
+
img.width = 0;
|
30640
|
+
img.height = 0;
|
30641
|
+
img.src = transparentImage;
|
30642
|
+
function BlockTree(props) {
|
30643
|
+
const [blockTreeRef, setBlockTreeRef] = useState(null);
|
30644
|
+
const [selectedId, setSelectedId] = useState(props.selectedId);
|
30645
|
+
const dragNode = useRef(null);
|
30646
|
+
const { treeData, allowDrop, onContextMenu } = props;
|
30647
|
+
useEffect(() => {
|
30648
|
+
setSelectedId(props.selectedId);
|
30649
|
+
}, [props.selectedId]);
|
30650
|
+
const onDragStart = useCallback((e, node) => {
|
30651
|
+
var _a;
|
30652
|
+
e.dataTransfer.dropEffect = "none";
|
30653
|
+
const dragNodeData = node.props.dataRef;
|
30654
|
+
dragNode.current = {
|
30655
|
+
dataRef: dragNodeData,
|
30656
|
+
parent: node.props.parent,
|
30657
|
+
key: node.props._key,
|
30658
|
+
parentKey: node.props.parentKey
|
30659
|
+
};
|
30660
|
+
(_a = props.onDragStart) == null ? void 0 : _a.call(props);
|
30661
|
+
}, [props.onDragStart]);
|
30662
|
+
const onDragMove = useCallback((option) => {
|
30663
|
+
if (!dragNode.current)
|
30664
|
+
return false;
|
30665
|
+
const dropData = option.dropNode.props.dataRef;
|
30666
|
+
const dropId = option.dropNode.props._key;
|
30667
|
+
const currentDropData = {
|
30668
|
+
dragNode: { key: dragNode.current.key },
|
30669
|
+
dropNode: {
|
30670
|
+
dataRef: dropData,
|
30671
|
+
parent: option.dropNode.props.parent,
|
30672
|
+
key: dropId
|
30673
|
+
},
|
30674
|
+
dropPosition: option.dropPosition
|
30675
|
+
};
|
30676
|
+
const isAllowDrop = allowDrop(currentDropData);
|
30677
|
+
if (isAllowDrop) {
|
30678
|
+
return true;
|
30679
|
+
}
|
30680
|
+
return false;
|
30681
|
+
}, [dragNode]);
|
30682
|
+
const onDrop = useCallback((info2) => {
|
30683
|
+
const { dropNode, dropPosition, e } = info2;
|
30684
|
+
e.dataTransfer.dropEffect = "move";
|
30685
|
+
if (!dragNode.current || !dropNode)
|
30686
|
+
return;
|
30687
|
+
const dropData = dropNode.props.dataRef;
|
30688
|
+
const currentDropData = {
|
30689
|
+
dragNode: dragNode.current,
|
30690
|
+
dropNode: {
|
30691
|
+
dataRef: dropData,
|
30692
|
+
parent: dropNode.props.parent,
|
30693
|
+
key: dropNode.props._key,
|
30694
|
+
parentKey: dropNode.props.parentKey
|
30695
|
+
},
|
30696
|
+
dropPosition
|
30697
|
+
};
|
30698
|
+
props.onDrop(currentDropData);
|
30699
|
+
}, []);
|
30700
|
+
const renderTitle = useCallback((nodeData) => {
|
30701
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
30702
|
+
style: { display: "inline-flex", width: "100%" },
|
30703
|
+
onContextMenu: (ev) => onContextMenu && onContextMenu(nodeData, ev)
|
30704
|
+
}, props.renderTitle(nodeData));
|
30705
|
+
}, [onContextMenu]);
|
30706
|
+
const onDragEnd = useCallback(() => {
|
30707
|
+
var _a;
|
30708
|
+
dragNode.current = null;
|
30709
|
+
(_a = props.onDragEnd) == null ? void 0 : _a.call(props);
|
30710
|
+
}, [props.onDragEnd]);
|
30711
|
+
const onSelect = useCallback((selectedKeys2) => {
|
30712
|
+
props.onSelect(selectedKeys2[0]);
|
30713
|
+
}, [props.onSelect]);
|
30714
|
+
useEffect(() => {
|
30715
|
+
if (blockTreeRef) {
|
30716
|
+
blockTreeRef.addEventListener("dragover", (e) => {
|
30717
|
+
if (e.dataTransfer) {
|
30718
|
+
e.dataTransfer.dropEffect = "move";
|
30719
|
+
}
|
30720
|
+
});
|
30721
|
+
}
|
30722
|
+
}, [blockTreeRef]);
|
30723
|
+
const selectedKeys = useMemo(() => selectedId ? [selectedId] : [], [selectedId]);
|
30724
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
30725
|
+
ref: setBlockTreeRef,
|
30726
|
+
onMouseLeave: props.onMouseLeave
|
30727
|
+
}, /* @__PURE__ */ React__default.createElement(CacheTree, {
|
30728
|
+
selectedKeys,
|
30729
|
+
draggable: true,
|
30730
|
+
size: "small",
|
30731
|
+
treeData,
|
30732
|
+
blockNode: true,
|
30733
|
+
fieldNames: {
|
30734
|
+
key: "id"
|
30735
|
+
},
|
30736
|
+
onDragEnd,
|
30737
|
+
onDragStart,
|
30738
|
+
onDrop,
|
30739
|
+
allowDrop: onDragMove,
|
30740
|
+
onSelect,
|
30741
|
+
renderTitle
|
30742
|
+
}));
|
30743
|
+
}
|
30744
|
+
function CacheTree(props) {
|
30745
|
+
const [cacheProps, setCacheProps] = useState(props);
|
30746
|
+
const lastProps = useRef(props);
|
30747
|
+
const debounceCallback = useCallback(lodash.exports.debounce((data) => {
|
30748
|
+
setCacheProps(data);
|
30749
|
+
}, 300), []);
|
30750
|
+
useEffect(() => {
|
30751
|
+
if (lastProps.current.treeData !== props.treeData) {
|
30752
|
+
lastProps.current = props;
|
30753
|
+
debounceCallback(props);
|
30754
|
+
} else {
|
30755
|
+
lastProps.current = props;
|
30756
|
+
setCacheProps(props);
|
30757
|
+
}
|
30758
|
+
}, [props]);
|
30759
|
+
return useMemo(() => /* @__PURE__ */ React__default.createElement(Tree$1, __spreadValues({}, cacheProps)), [cacheProps]);
|
30760
|
+
}
|
30761
|
+
const wrap$1 = "_wrap_aul3a_1";
|
30762
|
+
const listItem = "_listItem_aul3a_13";
|
30763
|
+
const contextmenuMark = "_contextmenuMark_aul3a_23";
|
30764
|
+
var styles$5 = {
|
30765
|
+
wrap: wrap$1,
|
30766
|
+
listItem,
|
30767
|
+
contextmenuMark
|
30768
|
+
};
|
30945
30769
|
var rngBrowser = { exports: {} };
|
30946
30770
|
var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
|
30947
30771
|
if (getRandomValues) {
|
@@ -31150,7 +30974,7 @@ const btnWrap = "_btn-wrap_jzksr_43";
|
|
31150
30974
|
const upload = "_upload_jzksr_68";
|
31151
30975
|
const wrap = "_wrap_jzksr_80";
|
31152
30976
|
const urlInput = "_urlInput_jzksr_80";
|
31153
|
-
var styles$
|
30977
|
+
var styles$4 = {
|
31154
30978
|
container: container$1,
|
31155
30979
|
error,
|
31156
30980
|
item,
|
@@ -31312,16 +31136,16 @@ class Uploader {
|
|
31312
31136
|
this.handler[event2] = handles.filter((item2) => item2 !== fn);
|
31313
31137
|
}
|
31314
31138
|
}
|
31315
|
-
function classnames(...rest) {
|
31139
|
+
function classnames$1(...rest) {
|
31316
31140
|
return rest.filter((item2) => typeof item2 === "string").join(" ");
|
31317
31141
|
}
|
31318
31142
|
function previewLoadImage(url) {
|
31319
31143
|
return new Promise((resolve) => {
|
31320
|
-
const
|
31321
|
-
|
31322
|
-
|
31323
|
-
|
31324
|
-
|
31144
|
+
const img2 = new Image();
|
31145
|
+
img2.setAttribute("crossOrigin", "Anonymous");
|
31146
|
+
img2.src = url;
|
31147
|
+
img2.onload = () => resolve(img2);
|
31148
|
+
img2.onerror = () => resolve(img2);
|
31325
31149
|
});
|
31326
31150
|
}
|
31327
31151
|
const defaultImagesMap$1 = {
|
@@ -31392,30 +31216,30 @@ function ImageUploader(props) {
|
|
31392
31216
|
const content = useMemo(() => {
|
31393
31217
|
if (isUploading) {
|
31394
31218
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31395
|
-
className: styles$
|
31219
|
+
className: styles$4["item"]
|
31396
31220
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
31397
|
-
className: classnames(styles$
|
31221
|
+
className: classnames$1(styles$4["info"])
|
31398
31222
|
}, /* @__PURE__ */ React__default.createElement("img", {
|
31399
31223
|
src: getImg$1("AttributePanel_03"),
|
31400
31224
|
alt: "Loading..."
|
31401
31225
|
}), /* @__PURE__ */ React__default.createElement("div", {
|
31402
|
-
className: styles$
|
31226
|
+
className: styles$4["btn-wrap"]
|
31403
31227
|
})));
|
31404
31228
|
}
|
31405
31229
|
if (!props.value) {
|
31406
31230
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31407
|
-
className: styles$
|
31231
|
+
className: styles$4["upload"],
|
31408
31232
|
onClick: onUpload
|
31409
31233
|
}, /* @__PURE__ */ React__default.createElement(IconPlus$1, null), /* @__PURE__ */ React__default.createElement("div", null, "Upload"));
|
31410
31234
|
}
|
31411
31235
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31412
|
-
className: styles$
|
31236
|
+
className: styles$4["item"]
|
31413
31237
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
31414
|
-
className: classnames(styles$
|
31238
|
+
className: classnames$1(styles$4["info"])
|
31415
31239
|
}, /* @__PURE__ */ React__default.createElement("img", {
|
31416
31240
|
src: props.value
|
31417
31241
|
}), /* @__PURE__ */ React__default.createElement("div", {
|
31418
|
-
className: styles$
|
31242
|
+
className: styles$4["btn-wrap"]
|
31419
31243
|
}, /* @__PURE__ */ React__default.createElement("a", {
|
31420
31244
|
title: "Preview",
|
31421
31245
|
onClick: () => setPreview(true)
|
@@ -31431,9 +31255,9 @@ function ImageUploader(props) {
|
|
31431
31255
|
});
|
31432
31256
|
}
|
31433
31257
|
return /* @__PURE__ */ React__default.createElement("div", {
|
31434
|
-
className: styles$
|
31258
|
+
className: styles$4.wrap
|
31435
31259
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
31436
|
-
className: styles$
|
31260
|
+
className: styles$4["container"]
|
31437
31261
|
}, content, /* @__PURE__ */ React__default.createElement(Input$5, {
|
31438
31262
|
onPaste,
|
31439
31263
|
value: props.value,
|
@@ -38385,7 +38209,7 @@ function ColorPicker(props) {
|
|
38385
38209
|
height: 32,
|
38386
38210
|
width: 32,
|
38387
38211
|
padding: 4,
|
38388
|
-
border: "1px solid
|
38212
|
+
border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
|
38389
38213
|
borderRadius: showInput ? void 0 : 4,
|
38390
38214
|
fontSize: 0,
|
38391
38215
|
borderRight: showInput ? "none" : void 0,
|
@@ -38396,7 +38220,7 @@ function ColorPicker(props) {
|
|
38396
38220
|
style: {
|
38397
38221
|
position: "relative",
|
38398
38222
|
display: "block",
|
38399
|
-
border: "1px solid
|
38223
|
+
border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
|
38400
38224
|
borderRadius: 2,
|
38401
38225
|
width: "100%",
|
38402
38226
|
height: "100%",
|
@@ -38443,7 +38267,7 @@ function RadioGroup(props) {
|
|
38443
38267
|
const helperText = "_helperText_cmm2s_1";
|
38444
38268
|
const labelHidden = "_label-hidden_cmm2s_9";
|
38445
38269
|
const editTab = "_editTab_cmm2s_20";
|
38446
|
-
var styles$
|
38270
|
+
var styles$3 = {
|
38447
38271
|
helperText,
|
38448
38272
|
"label-hidden": "_label-hidden_cmm2s_9",
|
38449
38273
|
labelHidden,
|
@@ -38532,7 +38356,7 @@ function enhancer(Component2, changeAdapter) {
|
|
38532
38356
|
alignment: alignment ? alignment : inline ? "center" : void 0,
|
38533
38357
|
distribution
|
38534
38358
|
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
|
38535
|
-
className: labelHidden2 ? styles$
|
38359
|
+
className: labelHidden2 ? styles$3["label-hidden"] : void 0,
|
38536
38360
|
htmlFor: id
|
38537
38361
|
}, /* @__PURE__ */ React__default.createElement("span", {
|
38538
38362
|
style: { whiteSpace: "pre" }
|
@@ -38551,7 +38375,7 @@ function enhancer(Component2, changeAdapter) {
|
|
38551
38375
|
value: valueAdapter ? valueAdapter(currentValue) : currentValue,
|
38552
38376
|
onChange: onFieldChange
|
38553
38377
|
})))), /* @__PURE__ */ React__default.createElement("div", {
|
38554
|
-
className: styles$
|
38378
|
+
className: styles$3.helperText
|
38555
38379
|
}, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
|
38556
38380
|
});
|
38557
38381
|
};
|
@@ -38603,7 +38427,10 @@ function CheckBoxGroup(props) {
|
|
38603
38427
|
value: item2.value
|
38604
38428
|
}, item2.label))));
|
38605
38429
|
}
|
38606
|
-
|
38430
|
+
function classnames(...rest) {
|
38431
|
+
return rest.filter((item2) => typeof item2 === "string").join(" ");
|
38432
|
+
}
|
38433
|
+
const { TabPane } = Tabs$1;
|
38607
38434
|
function EditTab(props) {
|
38608
38435
|
const { value, additionItem } = props;
|
38609
38436
|
const onAddTab = () => {
|
@@ -38613,14 +38440,14 @@ function EditTab(props) {
|
|
38613
38440
|
props.onChange(value.filter((_, vIndex) => Number(index2) !== vIndex));
|
38614
38441
|
};
|
38615
38442
|
return /* @__PURE__ */ React__default.createElement(Tabs$1, {
|
38616
|
-
className: classnames
|
38443
|
+
className: classnames(styles$3.editTab),
|
38617
38444
|
style: { border: "none" },
|
38618
38445
|
type: "card",
|
38619
38446
|
tabPosition: props.tabPosition,
|
38620
38447
|
editable: true,
|
38621
38448
|
onAddTab,
|
38622
38449
|
onDeleteTab
|
38623
|
-
}, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane
|
38450
|
+
}, (Array.isArray(value) ? value : []).map((item2, index2) => /* @__PURE__ */ React__default.createElement(TabPane, {
|
38624
38451
|
style: { paddingLeft: 12 },
|
38625
38452
|
title: `${props.label || "Tab"} ${index2 + 1}`,
|
38626
38453
|
key: index2
|
@@ -38659,10 +38486,20 @@ function InlineText({ idx, onChange, children }) {
|
|
38659
38486
|
useField(idx);
|
38660
38487
|
const { focusBlock: focusBlock2 } = useBlock();
|
38661
38488
|
useEffect(() => {
|
38662
|
-
|
38663
|
-
|
38664
|
-
|
38665
|
-
|
38489
|
+
let promiseObj;
|
38490
|
+
const getTextBlock = () => {
|
38491
|
+
promiseObj = awaitForElement$1(idx);
|
38492
|
+
promiseObj.promise.then((blockNode) => {
|
38493
|
+
if (blockNode.querySelector('[contenteditable="true"]')) {
|
38494
|
+
setTextContainer(blockNode);
|
38495
|
+
} else {
|
38496
|
+
setTimeout(() => {
|
38497
|
+
getTextBlock();
|
38498
|
+
}, 50);
|
38499
|
+
}
|
38500
|
+
});
|
38501
|
+
};
|
38502
|
+
getTextBlock();
|
38666
38503
|
return () => {
|
38667
38504
|
promiseObj.cancel();
|
38668
38505
|
};
|
@@ -38672,17 +38509,14 @@ function InlineText({ idx, onChange, children }) {
|
|
38672
38509
|
return;
|
38673
38510
|
const container2 = getEditNode(textContainer);
|
38674
38511
|
if (container2) {
|
38675
|
-
container2.focus();
|
38676
38512
|
const onPaste = (e) => {
|
38677
38513
|
var _a;
|
38678
38514
|
e.preventDefault();
|
38679
38515
|
const text = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text/plain")) || "";
|
38680
38516
|
document.execCommand("insertHTML", false, text);
|
38681
|
-
setFieldTouched(idx, true);
|
38682
38517
|
onChange(getEditContent(textContainer));
|
38683
38518
|
};
|
38684
38519
|
const onInput = () => {
|
38685
|
-
setFieldTouched(idx, true);
|
38686
38520
|
onChange(getEditContent(textContainer));
|
38687
38521
|
};
|
38688
38522
|
container2.addEventListener("paste", onPaste, true);
|
@@ -38692,7 +38526,7 @@ function InlineText({ idx, onChange, children }) {
|
|
38692
38526
|
container2.removeEventListener("input", onInput);
|
38693
38527
|
};
|
38694
38528
|
}
|
38695
|
-
}, [
|
38529
|
+
}, [onChange, setFieldTouched, textContainer]);
|
38696
38530
|
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
|
38697
38531
|
}
|
38698
38532
|
function AutoComplete(props) {
|
@@ -38898,884 +38732,204 @@ function FontFamily$1(props) {
|
|
38898
38732
|
key: item2.value
|
38899
38733
|
}, item2.label))));
|
38900
38734
|
}
|
38901
|
-
|
38902
|
-
|
38735
|
+
var styleText$1 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
|
38736
|
+
function Help(props) {
|
38737
|
+
return /* @__PURE__ */ React__default.createElement(Tooltip$1, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { style: void 0 })), {
|
38738
|
+
content: props.title
|
38739
|
+
}), /* @__PURE__ */ React__default.createElement("span", {
|
38740
|
+
style: { cursor: "pointer" }
|
38741
|
+
}, /* @__PURE__ */ React__default.createElement(IconQuestionCircle$1, {
|
38742
|
+
style: props.style
|
38743
|
+
})));
|
38744
|
+
}
|
38745
|
+
var ARRAY_ERROR = "FINAL_FORM/array-error";
|
38746
|
+
var fieldSubscriptionItems = ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "value", "visited", "validating"];
|
38747
|
+
var version$1 = "4.20.4";
|
38748
|
+
function renderComponent(props, name) {
|
38749
|
+
var render3 = props.render, children = props.children, component = props.component, rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
|
38750
|
+
if (component) {
|
38751
|
+
return /* @__PURE__ */ createElement(component, _extends$f({}, rest, {
|
38752
|
+
children,
|
38753
|
+
render: render3
|
38754
|
+
}));
|
38755
|
+
}
|
38756
|
+
if (render3) {
|
38757
|
+
return render3(children === void 0 ? rest : _extends$f({}, rest, {
|
38758
|
+
children
|
38759
|
+
}));
|
38760
|
+
}
|
38761
|
+
if (typeof children !== "function") {
|
38762
|
+
throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
|
38763
|
+
}
|
38764
|
+
return children(rest);
|
38765
|
+
}
|
38766
|
+
var defaultIsEqual = function defaultIsEqual2(aArray, bArray) {
|
38767
|
+
return aArray === bArray || Array.isArray(aArray) && Array.isArray(bArray) && aArray.length === bArray.length && !aArray.some(function(a, index2) {
|
38768
|
+
return a !== bArray[index2];
|
38769
|
+
});
|
38770
|
+
};
|
38771
|
+
function useConstant(init) {
|
38772
|
+
var ref = React__default.useRef();
|
38773
|
+
if (!ref.current) {
|
38774
|
+
ref.current = init();
|
38775
|
+
}
|
38776
|
+
return ref.current;
|
38777
|
+
}
|
38778
|
+
var all = fieldSubscriptionItems.reduce(function(result, key) {
|
38779
|
+
result[key] = true;
|
38780
|
+
return result;
|
38781
|
+
}, {});
|
38782
|
+
var useFieldArray = function useFieldArray2(name, _temp) {
|
38783
|
+
var _ref2 = _temp === void 0 ? {} : _temp, _ref$subscription = _ref2.subscription, subscription = _ref$subscription === void 0 ? all : _ref$subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, _ref$isEqual = _ref2.isEqual, isEqual2 = _ref$isEqual === void 0 ? defaultIsEqual : _ref$isEqual, validateProp = _ref2.validate;
|
38784
|
+
var form = useForm$1("useFieldArray");
|
38785
|
+
var formMutators = form.mutators;
|
38786
|
+
var hasMutators = !!(formMutators && formMutators.push && formMutators.pop);
|
38787
|
+
if (!hasMutators) {
|
38788
|
+
throw new Error("Array mutators not found. You need to provide the mutators from final-form-arrays to your form");
|
38789
|
+
}
|
38790
|
+
var mutators = useConstant(function() {
|
38791
|
+
return Object.keys(formMutators).reduce(function(result, key) {
|
38792
|
+
result[key] = function() {
|
38793
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
38794
|
+
args[_key] = arguments[_key];
|
38795
|
+
}
|
38796
|
+
return formMutators[key].apply(formMutators, [name].concat(args));
|
38797
|
+
};
|
38798
|
+
return result;
|
38799
|
+
}, {});
|
38800
|
+
});
|
38801
|
+
var validate3 = useConstant(function() {
|
38802
|
+
return function(value, allValues, meta2) {
|
38803
|
+
if (!validateProp)
|
38804
|
+
return void 0;
|
38805
|
+
var error2 = validateProp(value, allValues, meta2);
|
38806
|
+
if (!error2 || Array.isArray(error2)) {
|
38807
|
+
return error2;
|
38808
|
+
} else {
|
38809
|
+
var arrayError = [];
|
38810
|
+
arrayError[ARRAY_ERROR] = error2;
|
38811
|
+
return arrayError;
|
38812
|
+
}
|
38813
|
+
};
|
38814
|
+
});
|
38815
|
+
var _useField = useField(name, {
|
38816
|
+
subscription: _extends$f({}, subscription, {
|
38817
|
+
length: true
|
38818
|
+
}),
|
38819
|
+
defaultValue,
|
38820
|
+
initialValue,
|
38821
|
+
isEqual: isEqual2,
|
38822
|
+
validate: validate3,
|
38823
|
+
format: function format(v) {
|
38824
|
+
return v;
|
38825
|
+
}
|
38826
|
+
}), _useField$meta = _useField.meta, length = _useField$meta.length, meta = _objectWithoutPropertiesLoose(_useField$meta, ["length"]), input = _useField.input, fieldState = _objectWithoutPropertiesLoose(_useField, ["meta", "input"]);
|
38827
|
+
var forEach2 = function forEach3(iterator) {
|
38828
|
+
var len = length || 0;
|
38829
|
+
for (var i2 = 0; i2 < len; i2++) {
|
38830
|
+
iterator(name + "[" + i2 + "]", i2);
|
38831
|
+
}
|
38832
|
+
};
|
38833
|
+
var map2 = function map3(iterator) {
|
38834
|
+
var len = length || 0;
|
38835
|
+
var results = [];
|
38836
|
+
for (var i2 = 0; i2 < len; i2++) {
|
38837
|
+
results.push(iterator(name + "[" + i2 + "]", i2));
|
38838
|
+
}
|
38839
|
+
return results;
|
38840
|
+
};
|
38841
|
+
return {
|
38842
|
+
fields: _extends$f({
|
38843
|
+
name,
|
38844
|
+
forEach: forEach2,
|
38845
|
+
length: length || 0,
|
38846
|
+
map: map2
|
38847
|
+
}, mutators, fieldState, {
|
38848
|
+
value: input.value
|
38849
|
+
}),
|
38850
|
+
meta
|
38851
|
+
};
|
38852
|
+
};
|
38853
|
+
var version = "3.1.2";
|
38854
|
+
var versions = {
|
38855
|
+
"final-form": version$1,
|
38856
|
+
"react-final-form": version$2,
|
38857
|
+
"react-final-form-arrays": version
|
38858
|
+
};
|
38859
|
+
var FieldArray = function FieldArray2(_ref2) {
|
38860
|
+
var name = _ref2.name, subscription = _ref2.subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, isEqual2 = _ref2.isEqual, validate3 = _ref2.validate, rest = _objectWithoutPropertiesLoose(_ref2, ["name", "subscription", "defaultValue", "initialValue", "isEqual", "validate"]);
|
38861
|
+
var _useFieldArray = useFieldArray(name, {
|
38862
|
+
subscription,
|
38863
|
+
defaultValue,
|
38864
|
+
initialValue,
|
38865
|
+
isEqual: isEqual2,
|
38866
|
+
validate: validate3
|
38867
|
+
}), fields = _useFieldArray.fields, meta = _useFieldArray.meta;
|
38868
|
+
return renderComponent(_extends$f({
|
38869
|
+
fields,
|
38870
|
+
meta: _extends$f({}, meta, {
|
38871
|
+
__versions: versions
|
38872
|
+
})
|
38873
|
+
}, rest), "FieldArray(" + name + ")");
|
38874
|
+
};
|
38875
|
+
function AddFont() {
|
38876
|
+
const { focusBlock: focusBlock2 } = useBlock();
|
38877
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
38878
|
+
const value = focusBlock2 == null ? void 0 : focusBlock2.data.value;
|
38879
|
+
return /* @__PURE__ */ React__default.createElement(FieldArray, {
|
38880
|
+
name: `${focusIdx2}.data.value.fonts`,
|
38881
|
+
render: (arrayHelpers) => {
|
38882
|
+
var _a;
|
38883
|
+
return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
38884
|
+
vertical: true,
|
38885
|
+
spacing: "tight"
|
38886
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
38887
|
+
distribution: "equalSpacing"
|
38888
|
+
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
38889
|
+
variation: "strong"
|
38890
|
+
}, "Import font ", /* @__PURE__ */ React__default.createElement(Help, {
|
38891
|
+
title: "Points to a hosted css file"
|
38892
|
+
})), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(Button$4, {
|
38893
|
+
size: "small",
|
38894
|
+
icon: /* @__PURE__ */ React__default.createElement(IconPlus$1, null),
|
38895
|
+
onClick: () => arrayHelpers.fields.push({ name: "", href: "" })
|
38896
|
+
}))), /* @__PURE__ */ React__default.createElement(Stack$6, {
|
38897
|
+
vertical: true,
|
38898
|
+
spacing: "extraTight"
|
38899
|
+
}, (_a = value.fonts) == null ? void 0 : _a.map((item2, index2) => {
|
38900
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
38901
|
+
key: index2
|
38902
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
38903
|
+
alignment: "center",
|
38904
|
+
wrap: false
|
38905
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
38906
|
+
fill: true
|
38907
|
+
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
38908
|
+
inline: true,
|
38909
|
+
name: `${focusIdx2}.data.value.fonts.${index2}.name`,
|
38910
|
+
label: "Name"
|
38911
|
+
})), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
38912
|
+
fill: true
|
38913
|
+
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
38914
|
+
inline: true,
|
38915
|
+
name: `${focusIdx2}.data.value.fonts.${index2}.href`,
|
38916
|
+
label: "Href"
|
38917
|
+
})), /* @__PURE__ */ React__default.createElement(Button$4, {
|
38918
|
+
icon: /* @__PURE__ */ React__default.createElement(IconDelete$1, null),
|
38919
|
+
onClick: () => arrayHelpers.fields.remove(index2)
|
38920
|
+
})));
|
38921
|
+
}))));
|
38922
|
+
}
|
38923
|
+
});
|
38924
|
+
}
|
38925
|
+
const MergeTags = React__default.memo((props) => {
|
38926
|
+
const { mergeTags = {}, mergeTagGenerate } = useEditorProps();
|
38903
38927
|
const treeOptions = useMemo(() => {
|
38904
38928
|
const treeData = [];
|
38905
38929
|
const deep = (key, title2, parent2, mapData = []) => {
|
38906
38930
|
const currentMapData = {
|
38907
|
-
key:
|
38908
|
-
value:
|
38909
|
-
title: title2,
|
38910
|
-
children: []
|
38911
|
-
};
|
38912
|
-
mapData.push(currentMapData);
|
38913
|
-
const current = parent2[key];
|
38914
|
-
if (lodash.exports.isObject(current)) {
|
38915
|
-
Object.keys(current).map((childKey) => deep(key + "." + childKey, childKey, current, currentMapData.children));
|
38916
|
-
}
|
38917
|
-
};
|
38918
|
-
Object.keys(mergeTags).map((key) => deep(key, key, mergeTags, treeData));
|
38919
|
-
return treeData;
|
38920
|
-
}, [mergeTags]);
|
38921
|
-
const onSelect = useCallback((value) => {
|
38922
|
-
return props.onChange(value);
|
38923
|
-
}, [props]);
|
38924
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
38925
|
-
style: { color: "#333" }
|
38926
|
-
}, props.isSelect ? /* @__PURE__ */ React__default.createElement(TreeSelect$1, {
|
38927
|
-
value: props.value,
|
38928
|
-
size: "small",
|
38929
|
-
style: { width: 120 },
|
38930
|
-
dropdownMenuStyle: { maxHeight: 400, overflow: "auto" },
|
38931
|
-
placeholder: "Please select",
|
38932
|
-
treeData: treeOptions,
|
38933
|
-
onChange: onSelect
|
38934
|
-
}) : /* @__PURE__ */ React__default.createElement(Tree$1, {
|
38935
|
-
style: { width: 120 },
|
38936
|
-
selectedKeys: [],
|
38937
|
-
treeData: treeOptions,
|
38938
|
-
onSelect: (vals) => onSelect(vals[0])
|
38939
|
-
}));
|
38940
|
-
});
|
38941
|
-
var styleText$1 = ".easy-email-extensions-Tools-Popover .arco-popover-content{padding:0}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar{-webkit-appearance:none;width:5px}.easy-email-extensions-Tools-Popover .arco-popover-content-inner *::-webkit-scrollbar-thumb{border-radius:5px;background-color:#00000080;box-shadow:0 0 1px #ffffff80;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}\n";
|
38942
|
-
function Tools(props) {
|
38943
|
-
const { container: container2 } = props;
|
38944
|
-
const { mergeTags } = useEditorProps();
|
38945
|
-
const [selectionRange, setSelectionRange] = useState(null);
|
38946
|
-
useEffect(() => {
|
38947
|
-
const onSelectionChange = () => {
|
38948
|
-
try {
|
38949
|
-
const range2 = getShadowRoot().getSelection().getRangeAt(0);
|
38950
|
-
if (range2) {
|
38951
|
-
setSelectionRange(range2);
|
38952
|
-
}
|
38953
|
-
} catch (error2) {
|
38954
|
-
}
|
38955
|
-
};
|
38956
|
-
document.addEventListener("selectionchange", onSelectionChange);
|
38957
|
-
return () => {
|
38958
|
-
document.removeEventListener("selectionchange", onSelectionChange);
|
38959
|
-
};
|
38960
|
-
}, []);
|
38961
|
-
const restoreRange = useCallback((range2) => {
|
38962
|
-
const selection = getShadowRoot().getSelection();
|
38963
|
-
selection.removeAllRanges();
|
38964
|
-
const newRange = document.createRange();
|
38965
|
-
newRange.setStart(range2.startContainer, range2.startOffset);
|
38966
|
-
newRange.setEnd(range2.endContainer, range2.endOffset);
|
38967
|
-
selection.addRange(newRange);
|
38968
|
-
}, []);
|
38969
|
-
const execCommand = (cmd, val) => {
|
38970
|
-
if (!container2) {
|
38971
|
-
console.error("No container");
|
38972
|
-
return;
|
38973
|
-
}
|
38974
|
-
if (!selectionRange) {
|
38975
|
-
console.error("No selectionRange");
|
38976
|
-
return;
|
38977
|
-
}
|
38978
|
-
if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
|
38979
|
-
console.error("Not commonAncestorContainer");
|
38980
|
-
return;
|
38981
|
-
}
|
38982
|
-
restoreRange(selectionRange);
|
38983
|
-
if (cmd === "createLink") {
|
38984
|
-
const linkData = val;
|
38985
|
-
const target2 = linkData.blank ? "_blank" : "";
|
38986
|
-
let link;
|
38987
|
-
if (linkData.linkNode) {
|
38988
|
-
link = linkData.linkNode;
|
38989
|
-
} else {
|
38990
|
-
const uuid2 = (+new Date()).toString();
|
38991
|
-
document.execCommand(cmd, false, uuid2);
|
38992
|
-
link = getShadowRoot().querySelector(`a[href="${uuid2}"`);
|
38993
|
-
}
|
38994
|
-
if (target2) {
|
38995
|
-
link.setAttribute("target", target2);
|
38996
|
-
}
|
38997
|
-
link.style.color = "inherit";
|
38998
|
-
link.style.textDecoration = linkData.underline ? "underline" : "none";
|
38999
|
-
link.setAttribute("href", linkData.link);
|
39000
|
-
} else {
|
39001
|
-
document.execCommand(cmd, false, val);
|
39002
|
-
}
|
39003
|
-
const html = container2.innerHTML;
|
39004
|
-
props.onChange(html);
|
39005
|
-
};
|
39006
|
-
const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
|
39007
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
39008
|
-
id: "Tools",
|
39009
|
-
style: { display: "flex", flexWrap: "nowrap" }
|
39010
|
-
}, /* @__PURE__ */ React__default.createElement("div", {
|
39011
|
-
style: {
|
39012
|
-
display: "flex",
|
39013
|
-
alignItems: "center"
|
39014
|
-
}
|
39015
|
-
}, /* @__PURE__ */ React__default.createElement("div", {
|
39016
|
-
className: "easy-email-extensions-divider"
|
39017
|
-
}), /* @__PURE__ */ React__default.createElement(Popover$1, {
|
39018
|
-
className: "easy-email-extensions-Tools-Popover",
|
39019
|
-
trigger: "click",
|
39020
|
-
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
|
39021
|
-
onChange: (val) => execCommand("fontName", val)
|
39022
|
-
})),
|
39023
|
-
getPopupContainer: getPopoverMountNode
|
39024
|
-
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39025
|
-
title: "font family",
|
39026
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39027
|
-
iconName: "icon-font-family"
|
39028
|
-
})
|
39029
|
-
})), /* @__PURE__ */ React__default.createElement("div", {
|
39030
|
-
className: "easy-email-extensions-divider"
|
39031
|
-
}), /* @__PURE__ */ React__default.createElement(Popover$1, {
|
39032
|
-
className: "easy-email-extensions-Tools-Popover",
|
39033
|
-
color: "#fff",
|
39034
|
-
trigger: "click",
|
39035
|
-
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontSizeList, {
|
39036
|
-
onChange: (val) => execCommand("fontSize", val)
|
39037
|
-
})),
|
39038
|
-
getPopupContainer: getPopoverMountNode
|
39039
|
-
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39040
|
-
title: "line-height",
|
39041
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39042
|
-
iconName: "icon-line-height"
|
39043
|
-
})
|
39044
|
-
})), /* @__PURE__ */ React__default.createElement("div", {
|
39045
|
-
className: "easy-email-extensions-divider"
|
39046
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39047
|
-
onClick: () => execCommand("bold"),
|
39048
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39049
|
-
iconName: "icon-bold"
|
39050
|
-
}),
|
39051
|
-
title: "Bold"
|
39052
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39053
|
-
className: "easy-email-extensions-divider"
|
39054
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39055
|
-
onClick: () => execCommand("italic"),
|
39056
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39057
|
-
iconName: "icon-italic"
|
39058
|
-
}),
|
39059
|
-
title: "Italic"
|
39060
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39061
|
-
className: "easy-email-extensions-divider"
|
39062
|
-
}), /* @__PURE__ */ React__default.createElement(ColorPicker, {
|
39063
|
-
label: "",
|
39064
|
-
position: "tl",
|
39065
|
-
onChange: (color) => execCommand("foreColor", color),
|
39066
|
-
getPopupContainer: getPopoverMountNode,
|
39067
|
-
showInput: false
|
39068
|
-
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39069
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39070
|
-
iconName: "icon-font-color"
|
39071
|
-
}),
|
39072
|
-
title: "Text color"
|
39073
|
-
})), /* @__PURE__ */ React__default.createElement("div", {
|
39074
|
-
className: "easy-email-extensions-divider"
|
39075
|
-
}), /* @__PURE__ */ React__default.createElement(ColorPicker, {
|
39076
|
-
label: "",
|
39077
|
-
showInput: false,
|
39078
|
-
position: "tl",
|
39079
|
-
onChange: (color) => execCommand("hiliteColor", color),
|
39080
|
-
getPopupContainer: getPopoverMountNode
|
39081
|
-
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39082
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39083
|
-
iconName: "icon-bg-colors"
|
39084
|
-
}),
|
39085
|
-
title: "Background color"
|
39086
|
-
})), /* @__PURE__ */ React__default.createElement("div", {
|
39087
|
-
className: "easy-email-extensions-divider"
|
39088
|
-
}), /* @__PURE__ */ React__default.createElement(Link$1, {
|
39089
|
-
currentRange: selectionRange,
|
39090
|
-
onChange: (values2) => execCommand("createLink", values2),
|
39091
|
-
getPopupContainer: getPopoverMountNode
|
39092
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39093
|
-
className: "easy-email-extensions-divider"
|
39094
|
-
}), mergeTags && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
|
39095
|
-
color: "#fff",
|
39096
|
-
position: "bottom",
|
39097
|
-
content: /* @__PURE__ */ React__default.createElement(MergeTags$1, {
|
39098
|
-
value: "",
|
39099
|
-
onChange: (val) => execCommand("insertHTML", val)
|
39100
|
-
}),
|
39101
|
-
getPopupContainer: getPopoverMountNode
|
39102
|
-
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39103
|
-
title: "Merge tag",
|
39104
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39105
|
-
iconName: "icon-merge-tags"
|
39106
|
-
})
|
39107
|
-
})), /* @__PURE__ */ React__default.createElement("div", {
|
39108
|
-
className: "easy-email-extensions-divider"
|
39109
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39110
|
-
onClick: () => execCommand("justifyLeft"),
|
39111
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39112
|
-
iconName: "icon-align-left"
|
39113
|
-
}),
|
39114
|
-
title: "Align left"
|
39115
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39116
|
-
onClick: () => execCommand("justifyCenter"),
|
39117
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39118
|
-
iconName: "icon-align-center"
|
39119
|
-
}),
|
39120
|
-
title: "Align center"
|
39121
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39122
|
-
onClick: () => execCommand("justifyRight"),
|
39123
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39124
|
-
iconName: "icon-align-right"
|
39125
|
-
}),
|
39126
|
-
title: "Align right"
|
39127
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39128
|
-
className: "easy-email-extensions-divider"
|
39129
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39130
|
-
onClick: () => execCommand("insertOrderedList"),
|
39131
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39132
|
-
iconName: "icon-list-ol"
|
39133
|
-
}),
|
39134
|
-
title: "Orderlist"
|
39135
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39136
|
-
onClick: () => execCommand("insertUnorderedList"),
|
39137
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39138
|
-
iconName: "icon-list-ul"
|
39139
|
-
}),
|
39140
|
-
title: "Unorderlist"
|
39141
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39142
|
-
className: "easy-email-extensions-divider"
|
39143
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39144
|
-
onClick: () => execCommand("strikeThrough"),
|
39145
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39146
|
-
iconName: "icon-strikethrough"
|
39147
|
-
}),
|
39148
|
-
title: "StrikethroughOutlined"
|
39149
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39150
|
-
onClick: () => execCommand("underline"),
|
39151
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39152
|
-
iconName: "icon-underline"
|
39153
|
-
}),
|
39154
|
-
title: "UnderlineOutlined"
|
39155
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39156
|
-
onClick: () => execCommand("insertHorizontalRule"),
|
39157
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39158
|
-
iconName: "icon-line"
|
39159
|
-
}),
|
39160
|
-
title: "Line"
|
39161
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39162
|
-
className: "easy-email-extensions-divider"
|
39163
|
-
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
39164
|
-
onClick: () => execCommand("removeFormat"),
|
39165
|
-
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
39166
|
-
iconName: "icon-close"
|
39167
|
-
}),
|
39168
|
-
title: "Remove format"
|
39169
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39170
|
-
className: "easy-email-extensions-divider"
|
39171
|
-
})));
|
39172
|
-
}
|
39173
|
-
var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;line-height:1.5715;border:none;background-color:transparent;color:#fff}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
|
39174
|
-
function RichTextToolBar() {
|
39175
|
-
const [direction, setDirection] = useState("top");
|
39176
|
-
const [blockNode, setBlockNode] = useState(null);
|
39177
|
-
const [offsetX, setOffsetX] = useState(0);
|
39178
|
-
const { focusBlock: focusBlock2 } = useBlock();
|
39179
|
-
const { pageData: pageData2 } = useEditorContext();
|
39180
|
-
const { focusIdx: focusIdx2 } = useFocusIdx();
|
39181
|
-
const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
|
39182
|
-
useEffect(() => {
|
39183
|
-
const promiseObj = awaitForElement(focusIdx2);
|
39184
|
-
promiseObj.promise.then((blockNode2) => {
|
39185
|
-
setBlockNode(blockNode2);
|
39186
|
-
});
|
39187
|
-
return () => {
|
39188
|
-
promiseObj.cancel();
|
39189
|
-
};
|
39190
|
-
}, [focusIdx2, focusBlock2]);
|
39191
|
-
useEffect(() => {
|
39192
|
-
if (blockNode) {
|
39193
|
-
const options2 = {
|
39194
|
-
rootMargin: "-84px 0px 0px 0px",
|
39195
|
-
root: getShadowRoot().firstChild,
|
39196
|
-
threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
|
39197
|
-
};
|
39198
|
-
const checkDirection = (ev) => {
|
39199
|
-
const [current] = ev;
|
39200
|
-
const { top } = current.intersectionRect;
|
39201
|
-
const boundingClientRect = current.boundingClientRect;
|
39202
|
-
const rootBounds = current.rootBounds;
|
39203
|
-
const intersectionRatio = current.intersectionRatio;
|
39204
|
-
if (!rootBounds)
|
39205
|
-
return;
|
39206
|
-
const paddingLeft = (rootBounds.width - pageWidth) / 2;
|
39207
|
-
const offsetLeft = boundingClientRect.left - rootBounds.left;
|
39208
|
-
setOffsetX(paddingLeft - offsetLeft);
|
39209
|
-
if (intersectionRatio === 1) {
|
39210
|
-
setDirection("top");
|
39211
|
-
} else {
|
39212
|
-
if (top) {
|
39213
|
-
if (top > rootBounds.top) {
|
39214
|
-
setDirection("top");
|
39215
|
-
} else {
|
39216
|
-
setDirection("bottom");
|
39217
|
-
}
|
39218
|
-
}
|
39219
|
-
}
|
39220
|
-
};
|
39221
|
-
const observer = new IntersectionObserver(checkDirection, options2);
|
39222
|
-
observer.observe(blockNode);
|
39223
|
-
return () => {
|
39224
|
-
observer.unobserve(blockNode);
|
39225
|
-
};
|
39226
|
-
}
|
39227
|
-
}, [blockNode, pageWidth]);
|
39228
|
-
if (!blockNode)
|
39229
|
-
return null;
|
39230
|
-
const editorContainer = blockNode && getEditNode(blockNode);
|
39231
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
|
39232
|
-
dangerouslySetInnerHTML: { __html: styleText }
|
39233
|
-
}), /* @__PURE__ */ React__default.createElement("div", {
|
39234
|
-
style: {
|
39235
|
-
transform: direction === "top" ? "translate(0,-100%)" : void 0,
|
39236
|
-
padding: "4px 8px",
|
39237
|
-
boxSizing: "border-box",
|
39238
|
-
position: "absolute",
|
39239
|
-
zIndex: 100,
|
39240
|
-
top: direction === "top" ? -40 : "calc(100% + 40px)",
|
39241
|
-
left: offsetX,
|
39242
|
-
width: pageWidth
|
39243
|
-
}
|
39244
|
-
}, /* @__PURE__ */ React__default.createElement("div", {
|
39245
|
-
style: {
|
39246
|
-
position: "absolute",
|
39247
|
-
backgroundColor: "#41444d",
|
39248
|
-
height: "100%",
|
39249
|
-
width: "100%",
|
39250
|
-
left: 0,
|
39251
|
-
top: 0
|
39252
|
-
}
|
39253
|
-
}), /* @__PURE__ */ React__default.createElement(Tools, {
|
39254
|
-
container: editorContainer,
|
39255
|
-
onChange: () => {
|
39256
|
-
}
|
39257
|
-
}))), blockNode));
|
39258
|
-
}
|
39259
|
-
const RichTextField = (props) => {
|
39260
|
-
const { focusBlock: focusBlock2 } = useBlock();
|
39261
|
-
const { focusIdx: focusIdx2 } = useFocusIdx();
|
39262
|
-
if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
|
39263
|
-
return null;
|
39264
|
-
const name = `${focusIdx2}.data.value.content`;
|
39265
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(Field, {
|
39266
|
-
name,
|
39267
|
-
parse: (v) => v
|
39268
|
-
}, ({ input }) => /* @__PURE__ */ React__default.createElement(FieldWrapper, __spreadProps(__spreadValues({}, props), {
|
39269
|
-
input
|
39270
|
-
}))));
|
39271
|
-
};
|
39272
|
-
function FieldWrapper(props) {
|
39273
|
-
const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
|
39274
|
-
const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
|
39275
|
-
input.onChange(val);
|
39276
|
-
}, 500), [input]);
|
39277
|
-
return /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
|
39278
|
-
onChange: debounceCallbackChange
|
39279
|
-
}));
|
39280
|
-
}
|
39281
|
-
const TextField = enhancer(Input, (value) => value);
|
39282
|
-
const SearchField = enhancer(Input$5.Search, (val) => val);
|
39283
|
-
const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
|
39284
|
-
const NumberField = enhancer(InputNumber$1, (e) => e);
|
39285
|
-
const SliderField = enhancer(Slider$2, (e) => e);
|
39286
|
-
const ColorPickerField = enhancer(ColorPicker, (e) => e);
|
39287
|
-
const UploadField = enhancer(UploadField$1, (val) => val);
|
39288
|
-
const ImageUploaderField = enhancer(ImageUploader, (url) => url);
|
39289
|
-
const SelectField = enhancer(Select, (e) => e);
|
39290
|
-
const AutoCompleteField = enhancer(AutoComplete, (e) => e);
|
39291
|
-
const RadioGroupField = enhancer(RadioGroup, (value) => value);
|
39292
|
-
const SwitchField = enhancer(Switch$1, (e) => e);
|
39293
|
-
const DatePickerField = enhancer(DatePicker$1, (date) => date);
|
39294
|
-
const CheckboxField = enhancer(CheckBoxGroup, (e) => e);
|
39295
|
-
const EditTabField = enhancer(EditTab, (e) => e);
|
39296
|
-
const InlineTextField = enhancer(InlineText, (value) => value);
|
39297
|
-
const AddToCollection = ({ visible, setVisible }) => {
|
39298
|
-
const { focusBlock: focusBlockData } = useBlock();
|
39299
|
-
const { onAddCollection, onUploadImage } = useEditorProps();
|
39300
|
-
const onSubmit = (values2) => {
|
39301
|
-
if (!values2.label)
|
39302
|
-
return;
|
39303
|
-
const uuid2 = uuid_1.v4();
|
39304
|
-
onAddCollection == null ? void 0 : onAddCollection({
|
39305
|
-
label: values2.label,
|
39306
|
-
helpText: values2.helpText,
|
39307
|
-
data: focusBlockData,
|
39308
|
-
thumbnail: values2.thumbnail,
|
39309
|
-
id: uuid2
|
39310
|
-
});
|
39311
|
-
setVisible(false);
|
39312
|
-
};
|
39313
|
-
return /* @__PURE__ */ React__default.createElement(Form$3, {
|
39314
|
-
initialValues: { label: "", helpText: "", thumbnail: "" },
|
39315
|
-
onSubmit
|
39316
|
-
}, ({ handleSubmit }) => /* @__PURE__ */ React__default.createElement(Modal$1, {
|
39317
|
-
maskClosable: false,
|
39318
|
-
style: { zIndex: 2e3 },
|
39319
|
-
visible,
|
39320
|
-
title: "Add to collection",
|
39321
|
-
onOk: () => handleSubmit(),
|
39322
|
-
onCancel: () => setVisible(false)
|
39323
|
-
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39324
|
-
vertical: true
|
39325
|
-
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(TextField, {
|
39326
|
-
label: "Title",
|
39327
|
-
name: "label",
|
39328
|
-
validate: (val) => {
|
39329
|
-
if (!val)
|
39330
|
-
return "Title required!";
|
39331
|
-
return void 0;
|
39332
|
-
}
|
39333
|
-
}), /* @__PURE__ */ React__default.createElement(TextAreaField, {
|
39334
|
-
label: "Description",
|
39335
|
-
name: "helpText"
|
39336
|
-
}), /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
|
39337
|
-
label: "Thumbnail",
|
39338
|
-
name: "thumbnail",
|
39339
|
-
uploadHandler: onUploadImage,
|
39340
|
-
validate: (val) => {
|
39341
|
-
if (!val)
|
39342
|
-
return "Thumbnail required!";
|
39343
|
-
return void 0;
|
39344
|
-
}
|
39345
|
-
}))));
|
39346
|
-
};
|
39347
|
-
function useAddToCollection() {
|
39348
|
-
const [modalVisible, setModalVisible] = useState(false);
|
39349
|
-
const modal = useMemo(() => /* @__PURE__ */ React__default.createElement(AddToCollection, {
|
39350
|
-
visible: modalVisible,
|
39351
|
-
setVisible: setModalVisible
|
39352
|
-
}), [modalVisible]);
|
39353
|
-
return {
|
39354
|
-
modal,
|
39355
|
-
modalVisible,
|
39356
|
-
setModalVisible
|
39357
|
-
};
|
39358
|
-
}
|
39359
|
-
function ContextMenu({
|
39360
|
-
moveBlock,
|
39361
|
-
copyBlock,
|
39362
|
-
removeBlock,
|
39363
|
-
contextMenuData,
|
39364
|
-
onClose
|
39365
|
-
}) {
|
39366
|
-
const { blockData, left, top } = contextMenuData;
|
39367
|
-
const idx = blockData.id;
|
39368
|
-
const { modal, modalVisible, setModalVisible } = useAddToCollection();
|
39369
|
-
const ref = useRef(null);
|
39370
|
-
const handleMoveUp = () => {
|
39371
|
-
moveBlock(idx, getSiblingIdx(idx, -1));
|
39372
|
-
scrollBlockEleIntoView({
|
39373
|
-
idx: getSiblingIdx(idx, -1)
|
39374
|
-
});
|
39375
|
-
onClose();
|
39376
|
-
};
|
39377
|
-
const handleMoveDown = () => {
|
39378
|
-
moveBlock(idx, getSiblingIdx(idx, 1));
|
39379
|
-
scrollBlockEleIntoView({
|
39380
|
-
idx: getSiblingIdx(idx, 1)
|
39381
|
-
});
|
39382
|
-
onClose();
|
39383
|
-
};
|
39384
|
-
const handleCopy = (ev) => {
|
39385
|
-
copyBlock(idx);
|
39386
|
-
scrollBlockEleIntoView({
|
39387
|
-
idx: getSiblingIdx(idx, 1)
|
39388
|
-
});
|
39389
|
-
onClose();
|
39390
|
-
};
|
39391
|
-
const handleAddToCollection = () => {
|
39392
|
-
setModalVisible(true);
|
39393
|
-
};
|
39394
|
-
const handleDelete = () => {
|
39395
|
-
removeBlock(idx);
|
39396
|
-
onClose();
|
39397
|
-
};
|
39398
|
-
const isFirst = getIndexByIdx(idx) === 0;
|
39399
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
39400
|
-
ref,
|
39401
|
-
style: { visibility: modalVisible ? "hidden" : void 0 }
|
39402
|
-
}, /* @__PURE__ */ React__default.createElement("div", {
|
39403
|
-
style: {
|
39404
|
-
left,
|
39405
|
-
top
|
39406
|
-
},
|
39407
|
-
className: styles$7.wrap,
|
39408
|
-
onClick: (e) => e.stopPropagation()
|
39409
|
-
}, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
|
39410
|
-
className: styles$7.listItem,
|
39411
|
-
onClick: handleMoveUp
|
39412
|
-
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39413
|
-
iconName: "icon-top",
|
39414
|
-
style: { marginRight: 10 }
|
39415
|
-
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move up")), /* @__PURE__ */ React__default.createElement("div", {
|
39416
|
-
className: styles$7.listItem,
|
39417
|
-
onClick: handleMoveDown
|
39418
|
-
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39419
|
-
iconName: "icon-bottom",
|
39420
|
-
style: { marginRight: 10 }
|
39421
|
-
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move down")), /* @__PURE__ */ React__default.createElement("div", {
|
39422
|
-
className: styles$7.listItem,
|
39423
|
-
onClick: handleCopy
|
39424
|
-
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39425
|
-
iconName: "icon-copy",
|
39426
|
-
style: { marginRight: 10 }
|
39427
|
-
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Copy")), /* @__PURE__ */ React__default.createElement("div", {
|
39428
|
-
className: styles$7.listItem,
|
39429
|
-
onClick: handleAddToCollection
|
39430
|
-
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39431
|
-
iconName: "icon-start",
|
39432
|
-
style: { marginRight: 10 }
|
39433
|
-
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection")), /* @__PURE__ */ React__default.createElement("div", {
|
39434
|
-
className: styles$7.listItem,
|
39435
|
-
onClick: handleDelete
|
39436
|
-
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39437
|
-
iconName: "icon-delete",
|
39438
|
-
style: { marginRight: 10 }
|
39439
|
-
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Delete")), /* @__PURE__ */ React__default.createElement("div", {
|
39440
|
-
className: styles$7.listItem,
|
39441
|
-
onClick: handleAddToCollection
|
39442
|
-
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
39443
|
-
iconName: "icon-start",
|
39444
|
-
style: { marginRight: 10 }
|
39445
|
-
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection"))), /* @__PURE__ */ React__default.createElement("div", {
|
39446
|
-
className: styles$7.contextmenuMark,
|
39447
|
-
onClick: onClose,
|
39448
|
-
onContextMenu: (e) => {
|
39449
|
-
e.preventDefault();
|
39450
|
-
onClose(e);
|
39451
|
-
}
|
39452
|
-
}), modal);
|
39453
|
-
}
|
39454
|
-
function BlockLayer() {
|
39455
|
-
const {
|
39456
|
-
pageData: pageData2,
|
39457
|
-
formState: { values: values2 }
|
39458
|
-
} = useEditorContext();
|
39459
|
-
const { onUploadImage, onAddCollection } = useEditorProps();
|
39460
|
-
const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
|
39461
|
-
const { setHoverIdx } = useHoverIdx();
|
39462
|
-
const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
|
39463
|
-
const [contextMenuData, setContextMenuData] = useState(null);
|
39464
|
-
const onToggleVisible = useCallback(({ id }, e) => {
|
39465
|
-
e.stopPropagation();
|
39466
|
-
const blockData = lodash.exports.get(values2, id);
|
39467
|
-
if (blockData) {
|
39468
|
-
blockData.data.hidden = !Boolean(blockData.data.hidden);
|
39469
|
-
setValueByIdx2(id, blockData);
|
39470
|
-
}
|
39471
|
-
}, [setValueByIdx2, values2]);
|
39472
|
-
const renderTitle = useCallback((data) => {
|
39473
|
-
const block2 = BlockManager.getBlockByType(data.type);
|
39474
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
39475
|
-
className: styles$9.title
|
39476
|
-
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
39477
|
-
size: "smallest"
|
39478
|
-
}, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
|
39479
|
-
className: styles$9.eyeIcon
|
39480
|
-
}, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
|
39481
|
-
blockData: data,
|
39482
|
-
onToggleVisible
|
39483
|
-
})));
|
39484
|
-
}, [onToggleVisible]);
|
39485
|
-
const treeData = useMemo(() => {
|
39486
|
-
const copyData = lodash.exports.cloneDeep(pageData2);
|
39487
|
-
const loop2 = (item2, id, parent2) => {
|
39488
|
-
item2.id = id;
|
39489
|
-
item2.parent = parent2;
|
39490
|
-
item2.children.map((child, index2) => loop2(child, getChildIdx(id, index2), item2));
|
39491
|
-
};
|
39492
|
-
loop2(copyData, getPageIdx(), null);
|
39493
|
-
return [copyData];
|
39494
|
-
}, [pageData2]);
|
39495
|
-
const onSelect = useCallback((selectedId) => {
|
39496
|
-
setFocusIdx(selectedId);
|
39497
|
-
scrollBlockEleIntoView({ idx: selectedId });
|
39498
|
-
}, [setFocusIdx]);
|
39499
|
-
const onContextMenu = useCallback((blockData, ev) => {
|
39500
|
-
ev.preventDefault();
|
39501
|
-
setContextMenuData({ blockData, left: ev.clientX, top: ev.clientY });
|
39502
|
-
}, []);
|
39503
|
-
const onCloseContextMenu = useCallback((ev) => {
|
39504
|
-
setContextMenuData(null);
|
39505
|
-
}, []);
|
39506
|
-
const onMouseEnter = useCallback((id) => {
|
39507
|
-
setHoverIdx(id);
|
39508
|
-
}, [setHoverIdx]);
|
39509
|
-
const onMouseLeave = useCallback(() => {
|
39510
|
-
setHoverIdx("");
|
39511
|
-
}, [setHoverIdx]);
|
39512
|
-
const allowDrop = useCallback((params) => {
|
39513
|
-
const { dragNode, dropNode, willInsertAfter } = params;
|
39514
|
-
const dragBlock = BlockManager.getBlockByType(dragNode.type);
|
39515
|
-
if (!dragBlock)
|
39516
|
-
return false;
|
39517
|
-
if (dragBlock.validParentType.includes(dropNode.type) && willInsertAfter) {
|
39518
|
-
return true;
|
39519
|
-
}
|
39520
|
-
if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
39521
|
-
return true;
|
39522
|
-
}
|
39523
|
-
return false;
|
39524
|
-
}, []);
|
39525
|
-
const onDrop = useCallback((params) => {
|
39526
|
-
const { dragNode, dropNode, willInsertAfter } = params;
|
39527
|
-
const dragBlock = BlockManager.getBlockByType(dragNode.type);
|
39528
|
-
if (!dragBlock)
|
39529
|
-
return;
|
39530
|
-
if (dragBlock.validParentType.includes(dropNode.type) && willInsertAfter) {
|
39531
|
-
moveBlock(dragNode.id, getChildIdx(dropNode.id, 0));
|
39532
|
-
} else {
|
39533
|
-
moveBlock(dragNode.id, willInsertAfter ? getSiblingIdx(dropNode.id, 1) : dropNode.id);
|
39534
|
-
}
|
39535
|
-
}, [moveBlock]);
|
39536
|
-
const hasFocus = Boolean(focusIdx2);
|
39537
|
-
return useMemo(() => {
|
39538
|
-
if (!hasFocus)
|
39539
|
-
return null;
|
39540
|
-
return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
|
39541
|
-
id: "BlockLayerManager"
|
39542
|
-
}, {
|
39543
|
-
[DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
|
39544
|
-
}), /* @__PURE__ */ React__default.createElement(BlockTree, {
|
39545
|
-
selectedId: focusIdx2,
|
39546
|
-
defaultExpandAll: true,
|
39547
|
-
treeData,
|
39548
|
-
renderTitle,
|
39549
|
-
allowDrop,
|
39550
|
-
onContextMenu,
|
39551
|
-
onDrop,
|
39552
|
-
onSelect,
|
39553
|
-
onMouseEnter,
|
39554
|
-
onMouseLeave
|
39555
|
-
}), contextMenuData && /* @__PURE__ */ React__default.createElement(ContextMenu, {
|
39556
|
-
onClose: onCloseContextMenu,
|
39557
|
-
moveBlock,
|
39558
|
-
copyBlock,
|
39559
|
-
removeBlock,
|
39560
|
-
contextMenuData
|
39561
|
-
}));
|
39562
|
-
}, [
|
39563
|
-
hasFocus,
|
39564
|
-
focusIdx2,
|
39565
|
-
treeData,
|
39566
|
-
renderTitle,
|
39567
|
-
allowDrop,
|
39568
|
-
onContextMenu,
|
39569
|
-
onDrop,
|
39570
|
-
onSelect,
|
39571
|
-
onMouseEnter,
|
39572
|
-
onMouseLeave,
|
39573
|
-
contextMenuData,
|
39574
|
-
onCloseContextMenu,
|
39575
|
-
onUploadImage,
|
39576
|
-
onAddCollection,
|
39577
|
-
moveBlock,
|
39578
|
-
copyBlock,
|
39579
|
-
removeBlock
|
39580
|
-
]);
|
39581
|
-
}
|
39582
|
-
function Help(props) {
|
39583
|
-
return /* @__PURE__ */ React__default.createElement(Tooltip$1, __spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, props), { style: void 0 })), {
|
39584
|
-
content: props.title
|
39585
|
-
}), /* @__PURE__ */ React__default.createElement("span", {
|
39586
|
-
style: { cursor: "pointer" }
|
39587
|
-
}, /* @__PURE__ */ React__default.createElement(IconQuestionCircle$1, {
|
39588
|
-
style: props.style
|
39589
|
-
})));
|
39590
|
-
}
|
39591
|
-
var ARRAY_ERROR = "FINAL_FORM/array-error";
|
39592
|
-
var fieldSubscriptionItems = ["active", "data", "dirty", "dirtySinceLastSubmit", "error", "initial", "invalid", "length", "modified", "modifiedSinceLastSubmit", "pristine", "submitError", "submitFailed", "submitSucceeded", "submitting", "touched", "valid", "value", "visited", "validating"];
|
39593
|
-
var version$1 = "4.20.4";
|
39594
|
-
function renderComponent(props, name) {
|
39595
|
-
var render3 = props.render, children = props.children, component = props.component, rest = _objectWithoutPropertiesLoose(props, ["render", "children", "component"]);
|
39596
|
-
if (component) {
|
39597
|
-
return /* @__PURE__ */ createElement(component, _extends$f({}, rest, {
|
39598
|
-
children,
|
39599
|
-
render: render3
|
39600
|
-
}));
|
39601
|
-
}
|
39602
|
-
if (render3) {
|
39603
|
-
return render3(children === void 0 ? rest : _extends$f({}, rest, {
|
39604
|
-
children
|
39605
|
-
}));
|
39606
|
-
}
|
39607
|
-
if (typeof children !== "function") {
|
39608
|
-
throw new Error("Must specify either a render prop, a render function as children, or a component prop to " + name);
|
39609
|
-
}
|
39610
|
-
return children(rest);
|
39611
|
-
}
|
39612
|
-
var defaultIsEqual = function defaultIsEqual2(aArray, bArray) {
|
39613
|
-
return aArray === bArray || Array.isArray(aArray) && Array.isArray(bArray) && aArray.length === bArray.length && !aArray.some(function(a, index2) {
|
39614
|
-
return a !== bArray[index2];
|
39615
|
-
});
|
39616
|
-
};
|
39617
|
-
function useConstant(init) {
|
39618
|
-
var ref = React__default.useRef();
|
39619
|
-
if (!ref.current) {
|
39620
|
-
ref.current = init();
|
39621
|
-
}
|
39622
|
-
return ref.current;
|
39623
|
-
}
|
39624
|
-
var all = fieldSubscriptionItems.reduce(function(result, key) {
|
39625
|
-
result[key] = true;
|
39626
|
-
return result;
|
39627
|
-
}, {});
|
39628
|
-
var useFieldArray = function useFieldArray2(name, _temp) {
|
39629
|
-
var _ref2 = _temp === void 0 ? {} : _temp, _ref$subscription = _ref2.subscription, subscription = _ref$subscription === void 0 ? all : _ref$subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, _ref$isEqual = _ref2.isEqual, isEqual2 = _ref$isEqual === void 0 ? defaultIsEqual : _ref$isEqual, validateProp = _ref2.validate;
|
39630
|
-
var form = useForm$1("useFieldArray");
|
39631
|
-
var formMutators = form.mutators;
|
39632
|
-
var hasMutators = !!(formMutators && formMutators.push && formMutators.pop);
|
39633
|
-
if (!hasMutators) {
|
39634
|
-
throw new Error("Array mutators not found. You need to provide the mutators from final-form-arrays to your form");
|
39635
|
-
}
|
39636
|
-
var mutators = useConstant(function() {
|
39637
|
-
return Object.keys(formMutators).reduce(function(result, key) {
|
39638
|
-
result[key] = function() {
|
39639
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
39640
|
-
args[_key] = arguments[_key];
|
39641
|
-
}
|
39642
|
-
return formMutators[key].apply(formMutators, [name].concat(args));
|
39643
|
-
};
|
39644
|
-
return result;
|
39645
|
-
}, {});
|
39646
|
-
});
|
39647
|
-
var validate3 = useConstant(function() {
|
39648
|
-
return function(value, allValues, meta2) {
|
39649
|
-
if (!validateProp)
|
39650
|
-
return void 0;
|
39651
|
-
var error2 = validateProp(value, allValues, meta2);
|
39652
|
-
if (!error2 || Array.isArray(error2)) {
|
39653
|
-
return error2;
|
39654
|
-
} else {
|
39655
|
-
var arrayError = [];
|
39656
|
-
arrayError[ARRAY_ERROR] = error2;
|
39657
|
-
return arrayError;
|
39658
|
-
}
|
39659
|
-
};
|
39660
|
-
});
|
39661
|
-
var _useField = useField(name, {
|
39662
|
-
subscription: _extends$f({}, subscription, {
|
39663
|
-
length: true
|
39664
|
-
}),
|
39665
|
-
defaultValue,
|
39666
|
-
initialValue,
|
39667
|
-
isEqual: isEqual2,
|
39668
|
-
validate: validate3,
|
39669
|
-
format: function format(v) {
|
39670
|
-
return v;
|
39671
|
-
}
|
39672
|
-
}), _useField$meta = _useField.meta, length = _useField$meta.length, meta = _objectWithoutPropertiesLoose(_useField$meta, ["length"]), input = _useField.input, fieldState = _objectWithoutPropertiesLoose(_useField, ["meta", "input"]);
|
39673
|
-
var forEach2 = function forEach3(iterator) {
|
39674
|
-
var len = length || 0;
|
39675
|
-
for (var i2 = 0; i2 < len; i2++) {
|
39676
|
-
iterator(name + "[" + i2 + "]", i2);
|
39677
|
-
}
|
39678
|
-
};
|
39679
|
-
var map2 = function map3(iterator) {
|
39680
|
-
var len = length || 0;
|
39681
|
-
var results = [];
|
39682
|
-
for (var i2 = 0; i2 < len; i2++) {
|
39683
|
-
results.push(iterator(name + "[" + i2 + "]", i2));
|
39684
|
-
}
|
39685
|
-
return results;
|
39686
|
-
};
|
39687
|
-
return {
|
39688
|
-
fields: _extends$f({
|
39689
|
-
name,
|
39690
|
-
forEach: forEach2,
|
39691
|
-
length: length || 0,
|
39692
|
-
map: map2
|
39693
|
-
}, mutators, fieldState, {
|
39694
|
-
value: input.value
|
39695
|
-
}),
|
39696
|
-
meta
|
39697
|
-
};
|
39698
|
-
};
|
39699
|
-
var version = "3.1.2";
|
39700
|
-
var versions = {
|
39701
|
-
"final-form": version$1,
|
39702
|
-
"react-final-form": version$2,
|
39703
|
-
"react-final-form-arrays": version
|
39704
|
-
};
|
39705
|
-
var FieldArray = function FieldArray2(_ref2) {
|
39706
|
-
var name = _ref2.name, subscription = _ref2.subscription, defaultValue = _ref2.defaultValue, initialValue = _ref2.initialValue, isEqual2 = _ref2.isEqual, validate3 = _ref2.validate, rest = _objectWithoutPropertiesLoose(_ref2, ["name", "subscription", "defaultValue", "initialValue", "isEqual", "validate"]);
|
39707
|
-
var _useFieldArray = useFieldArray(name, {
|
39708
|
-
subscription,
|
39709
|
-
defaultValue,
|
39710
|
-
initialValue,
|
39711
|
-
isEqual: isEqual2,
|
39712
|
-
validate: validate3
|
39713
|
-
}), fields = _useFieldArray.fields, meta = _useFieldArray.meta;
|
39714
|
-
return renderComponent(_extends$f({
|
39715
|
-
fields,
|
39716
|
-
meta: _extends$f({}, meta, {
|
39717
|
-
__versions: versions
|
39718
|
-
})
|
39719
|
-
}, rest), "FieldArray(" + name + ")");
|
39720
|
-
};
|
39721
|
-
function AddFont() {
|
39722
|
-
const { focusBlock: focusBlock2 } = useBlock();
|
39723
|
-
const { focusIdx: focusIdx2 } = useFocusIdx();
|
39724
|
-
const value = focusBlock2 == null ? void 0 : focusBlock2.data.value;
|
39725
|
-
return /* @__PURE__ */ React__default.createElement(FieldArray, {
|
39726
|
-
name: `${focusIdx2}.data.value.fonts`,
|
39727
|
-
render: (arrayHelpers) => {
|
39728
|
-
var _a;
|
39729
|
-
return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39730
|
-
vertical: true,
|
39731
|
-
spacing: "tight"
|
39732
|
-
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39733
|
-
distribution: "equalSpacing"
|
39734
|
-
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
39735
|
-
variation: "strong"
|
39736
|
-
}, "Import font ", /* @__PURE__ */ React__default.createElement(Help, {
|
39737
|
-
title: "Points to a hosted css file"
|
39738
|
-
})), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(Button$4, {
|
39739
|
-
size: "small",
|
39740
|
-
icon: /* @__PURE__ */ React__default.createElement(IconPlus$1, null),
|
39741
|
-
onClick: () => arrayHelpers.fields.push({ name: "", href: "" })
|
39742
|
-
}))), /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39743
|
-
vertical: true,
|
39744
|
-
spacing: "extraTight"
|
39745
|
-
}, (_a = value.fonts) == null ? void 0 : _a.map((item2, index2) => {
|
39746
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
39747
|
-
key: index2
|
39748
|
-
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39749
|
-
alignment: "center",
|
39750
|
-
wrap: false
|
39751
|
-
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
39752
|
-
fill: true
|
39753
|
-
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
39754
|
-
inline: true,
|
39755
|
-
name: `${focusIdx2}.data.value.fonts.${index2}.name`,
|
39756
|
-
label: "Name"
|
39757
|
-
})), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
39758
|
-
fill: true
|
39759
|
-
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
39760
|
-
inline: true,
|
39761
|
-
name: `${focusIdx2}.data.value.fonts.${index2}.href`,
|
39762
|
-
label: "Href"
|
39763
|
-
})), /* @__PURE__ */ React__default.createElement(Button$4, {
|
39764
|
-
icon: /* @__PURE__ */ React__default.createElement(IconDelete$1, null),
|
39765
|
-
onClick: () => arrayHelpers.fields.remove(index2)
|
39766
|
-
})));
|
39767
|
-
}))));
|
39768
|
-
}
|
39769
|
-
});
|
39770
|
-
}
|
39771
|
-
const MergeTags = React__default.memo((props) => {
|
39772
|
-
const { mergeTags = {} } = useEditorProps();
|
39773
|
-
const treeOptions = useMemo(() => {
|
39774
|
-
const treeData = [];
|
39775
|
-
const deep = (key, title2, parent2, mapData = []) => {
|
39776
|
-
const currentMapData = {
|
39777
|
-
key: `{{${key}}}`,
|
39778
|
-
value: `{{${key}}}`,
|
38931
|
+
key: mergeTagGenerate(key),
|
38932
|
+
value: mergeTagGenerate(key),
|
39779
38933
|
title: title2,
|
39780
38934
|
children: []
|
39781
38935
|
};
|
@@ -39808,10 +38962,6 @@ const MergeTags = React__default.memo((props) => {
|
|
39808
38962
|
onSelect: (vals) => onSelect(vals[0])
|
39809
38963
|
}));
|
39810
38964
|
});
|
39811
|
-
const wrapper = "_wrapper_j840r_1";
|
39812
|
-
var styles$4 = {
|
39813
|
-
wrapper
|
39814
|
-
};
|
39815
38965
|
const AttributesPanelWrapper = (props) => {
|
39816
38966
|
const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
|
39817
38967
|
const { mergeTags } = useEditorProps();
|
@@ -39824,11 +38974,9 @@ const AttributesPanelWrapper = (props) => {
|
|
39824
38974
|
}, [focusBlock2, setFocusBlock]);
|
39825
38975
|
if (!focusBlock2 || !block2)
|
39826
38976
|
return null;
|
39827
|
-
return /* @__PURE__ */ React__default.createElement("div", {
|
39828
|
-
className: styles$4.wrapper
|
39829
|
-
}, /* @__PURE__ */ React__default.createElement("div", {
|
38977
|
+
return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
|
39830
38978
|
style: {
|
39831
|
-
border: "1px solid
|
38979
|
+
border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
|
39832
38980
|
borderBottom: "none",
|
39833
38981
|
padding: "12px 24px"
|
39834
38982
|
}
|
@@ -39843,7 +38991,10 @@ const AttributesPanelWrapper = (props) => {
|
|
39843
38991
|
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39844
38992
|
spacing: "extraTight",
|
39845
38993
|
alignment: "center"
|
39846
|
-
}, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle,
|
38994
|
+
}, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, {
|
38995
|
+
variation: "strong",
|
38996
|
+
size: "large"
|
38997
|
+
}, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
|
39847
38998
|
spacing: "extraTight"
|
39848
38999
|
}, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Hide if"), /* @__PURE__ */ React__default.createElement(MergeTags, {
|
39849
39000
|
isSelect: true,
|
@@ -39870,8 +39021,10 @@ function EyeIcon() {
|
|
39870
39021
|
if (focusBlock2.type === BasicType.PAGE)
|
39871
39022
|
return null;
|
39872
39023
|
return focusBlock2.data.hidden ? /* @__PURE__ */ React__default.createElement(IconEyeInvisible$1, {
|
39024
|
+
style: { cursor: "pointer", fontSize: 18 },
|
39873
39025
|
onClick: onToggleVisible
|
39874
39026
|
}) : /* @__PURE__ */ React__default.createElement(IconEye$1, {
|
39027
|
+
style: { cursor: "pointer", fontSize: 18 },
|
39875
39028
|
onClick: onToggleVisible
|
39876
39029
|
});
|
39877
39030
|
}
|
@@ -39998,10 +39151,10 @@ function Padding(props = {}) {
|
|
39998
39151
|
bottom,
|
39999
39152
|
right
|
40000
39153
|
};
|
40001
|
-
}, [paddingList, defaultPaddingList]);
|
39154
|
+
}, [paddingList, defaultPaddingList, defaultPaddingValue, paddingValue]);
|
40002
39155
|
const onChancePadding = useCallback((val) => {
|
40003
39156
|
change(focusIdx2 + `.attributes[${attributeName}]`, val);
|
40004
|
-
}, [focusIdx2, attributeName]);
|
39157
|
+
}, [focusIdx2, attributeName, change]);
|
40005
39158
|
return /* @__PURE__ */ React__default.createElement(Form$3, {
|
40006
39159
|
initialValues: paddingFormValues,
|
40007
39160
|
subscription: { submitting: true, pristine: true },
|
@@ -41656,165 +40809,1013 @@ function Table() {
|
|
41656
40809
|
setVisible
|
41657
40810
|
}));
|
41658
40811
|
}
|
41659
|
-
const blocks = {
|
41660
|
-
[BasicType.PAGE]: Page,
|
41661
|
-
[BasicType.SECTION]: Section,
|
41662
|
-
[BasicType.COLUMN]: Column,
|
41663
|
-
[BasicType.TEXT]: Text,
|
41664
|
-
[BasicType.IMAGE]: Image$1,
|
41665
|
-
[BasicType.GROUP]: Group,
|
41666
|
-
[BasicType.BUTTON]: Button,
|
41667
|
-
[BasicType.DIVIDER]: Divider,
|
41668
|
-
[BasicType.WRAPPER]: Wrapper,
|
41669
|
-
[BasicType.SPACER]: Spacer,
|
41670
|
-
[BasicType.RAW]: Raw,
|
41671
|
-
[BasicType.ACCORDION]: Accordion,
|
41672
|
-
[BasicType.ACCORDION_ELEMENT]: AccordionElement,
|
41673
|
-
[BasicType.ACCORDION_TITLE]: AccordionTitle,
|
41674
|
-
[BasicType.ACCORDION_TEXT]: AccordionText,
|
41675
|
-
[BasicType.CAROUSEL]: Carousel,
|
41676
|
-
[BasicType.HERO]: Hero,
|
41677
|
-
[BasicType.NAVBAR]: Navbar,
|
41678
|
-
[BasicType.SOCIAL]: Social,
|
41679
|
-
[BasicType.TABLE]: Table
|
40812
|
+
const blocks = {
|
40813
|
+
[BasicType.PAGE]: Page,
|
40814
|
+
[BasicType.SECTION]: Section,
|
40815
|
+
[BasicType.COLUMN]: Column,
|
40816
|
+
[BasicType.TEXT]: Text,
|
40817
|
+
[BasicType.IMAGE]: Image$1,
|
40818
|
+
[BasicType.GROUP]: Group,
|
40819
|
+
[BasicType.BUTTON]: Button,
|
40820
|
+
[BasicType.DIVIDER]: Divider,
|
40821
|
+
[BasicType.WRAPPER]: Wrapper,
|
40822
|
+
[BasicType.SPACER]: Spacer,
|
40823
|
+
[BasicType.RAW]: Raw,
|
40824
|
+
[BasicType.ACCORDION]: Accordion,
|
40825
|
+
[BasicType.ACCORDION_ELEMENT]: AccordionElement,
|
40826
|
+
[BasicType.ACCORDION_TITLE]: AccordionTitle,
|
40827
|
+
[BasicType.ACCORDION_TEXT]: AccordionText,
|
40828
|
+
[BasicType.CAROUSEL]: Carousel,
|
40829
|
+
[BasicType.HERO]: Hero,
|
40830
|
+
[BasicType.NAVBAR]: Navbar,
|
40831
|
+
[BasicType.SOCIAL]: Social,
|
40832
|
+
[BasicType.TABLE]: Table
|
40833
|
+
};
|
40834
|
+
class BlockAttributeConfigurationManager {
|
40835
|
+
static add(componentMap) {
|
40836
|
+
Object.keys(componentMap).forEach((name) => {
|
40837
|
+
this.map[name] = componentMap[name];
|
40838
|
+
});
|
40839
|
+
}
|
40840
|
+
static get(name) {
|
40841
|
+
return this.map[name];
|
40842
|
+
}
|
40843
|
+
static getMap() {
|
40844
|
+
return this.map;
|
40845
|
+
}
|
40846
|
+
}
|
40847
|
+
__publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
|
40848
|
+
function AttributePanel() {
|
40849
|
+
const { values: values2, focusBlock: focusBlock2 } = useBlock();
|
40850
|
+
const { initialized } = useEditorContext();
|
40851
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
40852
|
+
const value = getValueByIdx(values2, focusIdx2);
|
40853
|
+
const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
|
40854
|
+
const shadowRoot = getShadowRoot();
|
40855
|
+
if (!value || !initialized)
|
40856
|
+
return null;
|
40857
|
+
return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
|
40858
|
+
style: { marginTop: 200, padding: "0 50px" }
|
40859
|
+
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
40860
|
+
size: "extraLarge"
|
40861
|
+
}, "No matching components")), /* @__PURE__ */ React__default.createElement("div", {
|
40862
|
+
style: { position: "absolute" }
|
40863
|
+
}, /* @__PURE__ */ React__default.createElement(RichTextField, {
|
40864
|
+
idx: focusIdx2
|
40865
|
+
})), shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
|
40866
|
+
.email-block [contentEditable="true"],
|
40867
|
+
.email-block [contentEditable="true"] * {
|
40868
|
+
outline: none;
|
40869
|
+
cursor: text;
|
40870
|
+
}
|
40871
|
+
`), shadowRoot));
|
40872
|
+
}
|
40873
|
+
function Decoration() {
|
40874
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
40875
|
+
return useMemo(() => {
|
40876
|
+
return /* @__PURE__ */ React__default.createElement(Stack$6, {
|
40877
|
+
key: focusIdx2,
|
40878
|
+
vertical: true,
|
40879
|
+
spacing: "extraTight"
|
40880
|
+
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
40881
|
+
variation: "strong",
|
40882
|
+
size: "large"
|
40883
|
+
}, "Decoration"), /* @__PURE__ */ React__default.createElement(TextField, {
|
40884
|
+
label: "Border radius",
|
40885
|
+
name: `${focusIdx2}.attributes.borderRadius`,
|
40886
|
+
inline: true
|
40887
|
+
}), /* @__PURE__ */ React__default.createElement(TextField, {
|
40888
|
+
label: "Border",
|
40889
|
+
name: `${focusIdx2}.attributes.border`,
|
40890
|
+
inline: true,
|
40891
|
+
alignment: "center"
|
40892
|
+
}), /* @__PURE__ */ React__default.createElement(NumberField, {
|
40893
|
+
label: "Opacity",
|
40894
|
+
max: 1,
|
40895
|
+
min: 0,
|
40896
|
+
step: 0.1,
|
40897
|
+
name: `${focusIdx2}.attributes.opacity`,
|
40898
|
+
inline: true,
|
40899
|
+
alignment: "center"
|
40900
|
+
}));
|
40901
|
+
}, [focusIdx2]);
|
40902
|
+
}
|
40903
|
+
const options = [
|
40904
|
+
{
|
40905
|
+
value: "ltr",
|
40906
|
+
label: "ltr"
|
40907
|
+
},
|
40908
|
+
{
|
40909
|
+
value: "rtl",
|
40910
|
+
label: "rtl"
|
40911
|
+
}
|
40912
|
+
];
|
40913
|
+
function Direction() {
|
40914
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
40915
|
+
return useMemo(() => {
|
40916
|
+
return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
|
40917
|
+
label: "Direction",
|
40918
|
+
name: `${focusIdx2}.attributes.direction`,
|
40919
|
+
options,
|
40920
|
+
inline: true
|
40921
|
+
}));
|
40922
|
+
}, [focusIdx2]);
|
40923
|
+
}
|
40924
|
+
function Margin() {
|
40925
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
40926
|
+
return useMemo(() => {
|
40927
|
+
return /* @__PURE__ */ React__default.createElement(Stack$6, {
|
40928
|
+
vertical: true,
|
40929
|
+
spacing: "extraTight"
|
40930
|
+
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
40931
|
+
size: "large"
|
40932
|
+
}, "Margin"), /* @__PURE__ */ React__default.createElement(Stack$6, {
|
40933
|
+
wrap: false
|
40934
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
40935
|
+
fill: true
|
40936
|
+
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
40937
|
+
label: "Top",
|
40938
|
+
quickchange: true,
|
40939
|
+
name: `${focusIdx2}.attributes.marginTop`,
|
40940
|
+
inline: true
|
40941
|
+
})), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
40942
|
+
fill: true
|
40943
|
+
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
40944
|
+
label: "Bottom",
|
40945
|
+
quickchange: true,
|
40946
|
+
name: `${focusIdx2}.attributes.marginBottom`,
|
40947
|
+
inline: true
|
40948
|
+
}))), /* @__PURE__ */ React__default.createElement(Stack$6, {
|
40949
|
+
wrap: false
|
40950
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
40951
|
+
fill: true
|
40952
|
+
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
40953
|
+
label: "Left",
|
40954
|
+
quickchange: true,
|
40955
|
+
name: `${focusIdx2}.attributes.marginLeft`,
|
40956
|
+
inline: true
|
40957
|
+
})), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
40958
|
+
fill: true
|
40959
|
+
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
40960
|
+
label: "Right",
|
40961
|
+
quickchange: true,
|
40962
|
+
name: `${focusIdx2}.attributes.marginRight`,
|
40963
|
+
inline: true
|
40964
|
+
}))));
|
40965
|
+
}, [focusIdx2]);
|
40966
|
+
}
|
40967
|
+
function Tools(props) {
|
40968
|
+
const { container: container2 } = props;
|
40969
|
+
const { mergeTags } = useEditorProps();
|
40970
|
+
const [selectionRange, setSelectionRange] = useState(null);
|
40971
|
+
useEffect(() => {
|
40972
|
+
const onSelectionChange = () => {
|
40973
|
+
try {
|
40974
|
+
const range2 = getShadowRoot().getSelection().getRangeAt(0);
|
40975
|
+
if (range2) {
|
40976
|
+
setSelectionRange(range2);
|
40977
|
+
}
|
40978
|
+
} catch (error2) {
|
40979
|
+
}
|
40980
|
+
};
|
40981
|
+
document.addEventListener("selectionchange", onSelectionChange);
|
40982
|
+
return () => {
|
40983
|
+
document.removeEventListener("selectionchange", onSelectionChange);
|
40984
|
+
};
|
40985
|
+
}, []);
|
40986
|
+
const restoreRange = useCallback((range2) => {
|
40987
|
+
const selection = getShadowRoot().getSelection();
|
40988
|
+
selection.removeAllRanges();
|
40989
|
+
const newRange = document.createRange();
|
40990
|
+
newRange.setStart(range2.startContainer, range2.startOffset);
|
40991
|
+
newRange.setEnd(range2.endContainer, range2.endOffset);
|
40992
|
+
selection.addRange(newRange);
|
40993
|
+
}, []);
|
40994
|
+
const execCommand = (cmd, val) => {
|
40995
|
+
if (!container2) {
|
40996
|
+
console.error("No container");
|
40997
|
+
return;
|
40998
|
+
}
|
40999
|
+
if (!selectionRange) {
|
41000
|
+
console.error("No selectionRange");
|
41001
|
+
return;
|
41002
|
+
}
|
41003
|
+
if (!(container2 == null ? void 0 : container2.contains(selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) && container2 !== (selectionRange == null ? void 0 : selectionRange.commonAncestorContainer)) {
|
41004
|
+
console.error("Not commonAncestorContainer");
|
41005
|
+
return;
|
41006
|
+
}
|
41007
|
+
restoreRange(selectionRange);
|
41008
|
+
if (cmd === "createLink") {
|
41009
|
+
const linkData = val;
|
41010
|
+
const target2 = linkData.blank ? "_blank" : "";
|
41011
|
+
let link;
|
41012
|
+
if (linkData.linkNode) {
|
41013
|
+
link = linkData.linkNode;
|
41014
|
+
} else {
|
41015
|
+
const uuid2 = (+new Date()).toString();
|
41016
|
+
document.execCommand(cmd, false, uuid2);
|
41017
|
+
link = getShadowRoot().querySelector(`a[href="${uuid2}"`);
|
41018
|
+
}
|
41019
|
+
if (target2) {
|
41020
|
+
link.setAttribute("target", target2);
|
41021
|
+
}
|
41022
|
+
link.style.color = "inherit";
|
41023
|
+
link.style.textDecoration = linkData.underline ? "underline" : "none";
|
41024
|
+
link.setAttribute("href", linkData.link);
|
41025
|
+
} else {
|
41026
|
+
document.execCommand(cmd, false, val);
|
41027
|
+
}
|
41028
|
+
const html = container2.innerHTML;
|
41029
|
+
props.onChange(html);
|
41030
|
+
};
|
41031
|
+
const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
|
41032
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
41033
|
+
id: "Tools",
|
41034
|
+
style: { display: "flex", flexWrap: "nowrap" }
|
41035
|
+
}, /* @__PURE__ */ React__default.createElement("div", {
|
41036
|
+
style: {
|
41037
|
+
display: "flex",
|
41038
|
+
alignItems: "center"
|
41039
|
+
}
|
41040
|
+
}, /* @__PURE__ */ React__default.createElement("div", {
|
41041
|
+
className: "easy-email-extensions-divider"
|
41042
|
+
}), /* @__PURE__ */ React__default.createElement(Popover$1, {
|
41043
|
+
className: "easy-email-extensions-Tools-Popover",
|
41044
|
+
trigger: "click",
|
41045
|
+
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
|
41046
|
+
onChange: (val) => execCommand("fontName", val)
|
41047
|
+
})),
|
41048
|
+
getPopupContainer: getPopoverMountNode
|
41049
|
+
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41050
|
+
title: "font family",
|
41051
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41052
|
+
iconName: "icon-font-family"
|
41053
|
+
})
|
41054
|
+
})), /* @__PURE__ */ React__default.createElement("div", {
|
41055
|
+
className: "easy-email-extensions-divider"
|
41056
|
+
}), /* @__PURE__ */ React__default.createElement(Popover$1, {
|
41057
|
+
className: "easy-email-extensions-Tools-Popover",
|
41058
|
+
color: "#fff",
|
41059
|
+
trigger: "click",
|
41060
|
+
content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontSizeList, {
|
41061
|
+
onChange: (val) => execCommand("fontSize", val)
|
41062
|
+
})),
|
41063
|
+
getPopupContainer: getPopoverMountNode
|
41064
|
+
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41065
|
+
title: "line-height",
|
41066
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41067
|
+
iconName: "icon-line-height"
|
41068
|
+
})
|
41069
|
+
})), /* @__PURE__ */ React__default.createElement("div", {
|
41070
|
+
className: "easy-email-extensions-divider"
|
41071
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41072
|
+
onClick: () => execCommand("bold"),
|
41073
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41074
|
+
iconName: "icon-bold"
|
41075
|
+
}),
|
41076
|
+
title: "Bold"
|
41077
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41078
|
+
className: "easy-email-extensions-divider"
|
41079
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41080
|
+
onClick: () => execCommand("italic"),
|
41081
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41082
|
+
iconName: "icon-italic"
|
41083
|
+
}),
|
41084
|
+
title: "Italic"
|
41085
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41086
|
+
className: "easy-email-extensions-divider"
|
41087
|
+
}), /* @__PURE__ */ React__default.createElement(ColorPicker, {
|
41088
|
+
label: "",
|
41089
|
+
position: "tl",
|
41090
|
+
onChange: (color) => execCommand("foreColor", color),
|
41091
|
+
getPopupContainer: getPopoverMountNode,
|
41092
|
+
showInput: false
|
41093
|
+
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41094
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41095
|
+
iconName: "icon-font-color"
|
41096
|
+
}),
|
41097
|
+
title: "Text color"
|
41098
|
+
})), /* @__PURE__ */ React__default.createElement("div", {
|
41099
|
+
className: "easy-email-extensions-divider"
|
41100
|
+
}), /* @__PURE__ */ React__default.createElement(ColorPicker, {
|
41101
|
+
label: "",
|
41102
|
+
showInput: false,
|
41103
|
+
position: "tl",
|
41104
|
+
onChange: (color) => execCommand("hiliteColor", color),
|
41105
|
+
getPopupContainer: getPopoverMountNode
|
41106
|
+
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41107
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41108
|
+
iconName: "icon-bg-colors"
|
41109
|
+
}),
|
41110
|
+
title: "Background color"
|
41111
|
+
})), /* @__PURE__ */ React__default.createElement("div", {
|
41112
|
+
className: "easy-email-extensions-divider"
|
41113
|
+
}), /* @__PURE__ */ React__default.createElement(Link$1, {
|
41114
|
+
currentRange: selectionRange,
|
41115
|
+
onChange: (values2) => execCommand("createLink", values2),
|
41116
|
+
getPopupContainer: getPopoverMountNode
|
41117
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41118
|
+
className: "easy-email-extensions-divider"
|
41119
|
+
}), mergeTags && /* @__PURE__ */ React__default.createElement(Popover$1, {
|
41120
|
+
trigger: "click",
|
41121
|
+
color: "#fff",
|
41122
|
+
position: "bottom",
|
41123
|
+
content: /* @__PURE__ */ React__default.createElement(MergeTags, {
|
41124
|
+
value: "",
|
41125
|
+
onChange: (val) => execCommand("insertHTML", val)
|
41126
|
+
}),
|
41127
|
+
getPopupContainer: getPopoverMountNode
|
41128
|
+
}, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41129
|
+
title: "Merge tag",
|
41130
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41131
|
+
iconName: "icon-merge-tags"
|
41132
|
+
})
|
41133
|
+
})), /* @__PURE__ */ React__default.createElement("div", {
|
41134
|
+
className: "easy-email-extensions-divider"
|
41135
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41136
|
+
onClick: () => execCommand("justifyLeft"),
|
41137
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41138
|
+
iconName: "icon-align-left"
|
41139
|
+
}),
|
41140
|
+
title: "Align left"
|
41141
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41142
|
+
onClick: () => execCommand("justifyCenter"),
|
41143
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41144
|
+
iconName: "icon-align-center"
|
41145
|
+
}),
|
41146
|
+
title: "Align center"
|
41147
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41148
|
+
onClick: () => execCommand("justifyRight"),
|
41149
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41150
|
+
iconName: "icon-align-right"
|
41151
|
+
}),
|
41152
|
+
title: "Align right"
|
41153
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41154
|
+
className: "easy-email-extensions-divider"
|
41155
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41156
|
+
onClick: () => execCommand("insertOrderedList"),
|
41157
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41158
|
+
iconName: "icon-list-ol"
|
41159
|
+
}),
|
41160
|
+
title: "Orderlist"
|
41161
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41162
|
+
onClick: () => execCommand("insertUnorderedList"),
|
41163
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41164
|
+
iconName: "icon-list-ul"
|
41165
|
+
}),
|
41166
|
+
title: "Unorderlist"
|
41167
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41168
|
+
className: "easy-email-extensions-divider"
|
41169
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41170
|
+
onClick: () => execCommand("strikeThrough"),
|
41171
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41172
|
+
iconName: "icon-strikethrough"
|
41173
|
+
}),
|
41174
|
+
title: "StrikethroughOutlined"
|
41175
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41176
|
+
onClick: () => execCommand("underline"),
|
41177
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41178
|
+
iconName: "icon-underline"
|
41179
|
+
}),
|
41180
|
+
title: "UnderlineOutlined"
|
41181
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41182
|
+
onClick: () => execCommand("insertHorizontalRule"),
|
41183
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41184
|
+
iconName: "icon-line"
|
41185
|
+
}),
|
41186
|
+
title: "Line"
|
41187
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41188
|
+
className: "easy-email-extensions-divider"
|
41189
|
+
}), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
|
41190
|
+
onClick: () => execCommand("removeFormat"),
|
41191
|
+
icon: /* @__PURE__ */ React__default.createElement(IconFont, {
|
41192
|
+
iconName: "icon-close"
|
41193
|
+
}),
|
41194
|
+
title: "Remove format"
|
41195
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41196
|
+
className: "easy-email-extensions-divider"
|
41197
|
+
})));
|
41198
|
+
}
|
41199
|
+
var styleText = ".easy-email-extensions-emailToolItem{display:inline-flex;position:relative;outline:none;font-weight:400;appearance:none;cursor:pointer!important;white-space:nowrap;transition:all .1s linear;box-sizing:border-box;line-height:1.5715;border:none;background-color:transparent;color:#fff}.easy-email-extensions-divider{position:relative;display:inline-flex;width:1px;height:16px;background-color:#808080e6}\n";
|
41200
|
+
function RichTextToolBar() {
|
41201
|
+
const [direction, setDirection] = useState("top");
|
41202
|
+
const [blockNode, setBlockNode] = useState(null);
|
41203
|
+
const [offsetX, setOffsetX] = useState(0);
|
41204
|
+
const { focusBlock: focusBlock2 } = useBlock();
|
41205
|
+
const { pageData: pageData2 } = useEditorContext();
|
41206
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
41207
|
+
const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
|
41208
|
+
useEffect(() => {
|
41209
|
+
const promiseObj = awaitForElement(focusIdx2);
|
41210
|
+
promiseObj.promise.then((blockNode2) => {
|
41211
|
+
setBlockNode(blockNode2);
|
41212
|
+
});
|
41213
|
+
return () => {
|
41214
|
+
promiseObj.cancel();
|
41215
|
+
};
|
41216
|
+
}, [focusIdx2, focusBlock2]);
|
41217
|
+
useEffect(() => {
|
41218
|
+
if (blockNode) {
|
41219
|
+
const options2 = {
|
41220
|
+
rootMargin: "-84px 0px 0px 0px",
|
41221
|
+
root: getShadowRoot().firstChild,
|
41222
|
+
threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
|
41223
|
+
};
|
41224
|
+
const checkDirection = (ev) => {
|
41225
|
+
const [current] = ev;
|
41226
|
+
const { top } = current.intersectionRect;
|
41227
|
+
const boundingClientRect = current.boundingClientRect;
|
41228
|
+
const rootBounds = current.rootBounds;
|
41229
|
+
const intersectionRatio = current.intersectionRatio;
|
41230
|
+
if (!rootBounds)
|
41231
|
+
return;
|
41232
|
+
const paddingLeft = (rootBounds.width - pageWidth) / 2;
|
41233
|
+
const offsetLeft = boundingClientRect.left - rootBounds.left;
|
41234
|
+
setOffsetX(paddingLeft - offsetLeft);
|
41235
|
+
if (intersectionRatio === 1) {
|
41236
|
+
setDirection("top");
|
41237
|
+
} else {
|
41238
|
+
if (top) {
|
41239
|
+
if (top > rootBounds.top) {
|
41240
|
+
setDirection("top");
|
41241
|
+
} else {
|
41242
|
+
setDirection("bottom");
|
41243
|
+
}
|
41244
|
+
}
|
41245
|
+
}
|
41246
|
+
};
|
41247
|
+
const observer = new IntersectionObserver(checkDirection, options2);
|
41248
|
+
observer.observe(blockNode);
|
41249
|
+
return () => {
|
41250
|
+
observer.unobserve(blockNode);
|
41251
|
+
};
|
41252
|
+
}
|
41253
|
+
}, [blockNode, pageWidth]);
|
41254
|
+
if (!blockNode)
|
41255
|
+
return null;
|
41256
|
+
const editorContainer = blockNode && getEditNode(blockNode);
|
41257
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
|
41258
|
+
dangerouslySetInnerHTML: { __html: styleText }
|
41259
|
+
}), /* @__PURE__ */ React__default.createElement("div", {
|
41260
|
+
style: {
|
41261
|
+
transform: direction === "top" ? "translate(0,-100%)" : void 0,
|
41262
|
+
padding: "4px 8px",
|
41263
|
+
boxSizing: "border-box",
|
41264
|
+
position: "absolute",
|
41265
|
+
zIndex: 100,
|
41266
|
+
top: direction === "top" ? -40 : "calc(100% + 40px)",
|
41267
|
+
left: offsetX,
|
41268
|
+
width: pageWidth
|
41269
|
+
}
|
41270
|
+
}, /* @__PURE__ */ React__default.createElement("div", {
|
41271
|
+
style: {
|
41272
|
+
position: "absolute",
|
41273
|
+
backgroundColor: "#41444d",
|
41274
|
+
height: "100%",
|
41275
|
+
width: "100%",
|
41276
|
+
left: 0,
|
41277
|
+
top: 0
|
41278
|
+
}
|
41279
|
+
}), /* @__PURE__ */ React__default.createElement(Tools, {
|
41280
|
+
container: editorContainer,
|
41281
|
+
onChange: () => {
|
41282
|
+
}
|
41283
|
+
}))), blockNode));
|
41284
|
+
}
|
41285
|
+
const RichTextField = (props) => {
|
41286
|
+
const { focusBlock: focusBlock2 } = useBlock();
|
41287
|
+
const { focusIdx: focusIdx2 } = useFocusIdx();
|
41288
|
+
if ((focusBlock2 == null ? void 0 : focusBlock2.type) !== BasicType.TEXT)
|
41289
|
+
return null;
|
41290
|
+
const name = `${focusIdx2}.data.value.content`;
|
41291
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(Field, {
|
41292
|
+
name,
|
41293
|
+
parse: (v) => v
|
41294
|
+
}, ({ input }) => /* @__PURE__ */ React__default.createElement(FieldWrapper, __spreadProps(__spreadValues({}, props), {
|
41295
|
+
input
|
41296
|
+
}))));
|
41297
|
+
};
|
41298
|
+
function FieldWrapper(props) {
|
41299
|
+
const _a = props, { input } = _a, rest = __objRest(_a, ["input"]);
|
41300
|
+
const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
|
41301
|
+
input.onChange(val);
|
41302
|
+
}, 500), [input]);
|
41303
|
+
return /* @__PURE__ */ React__default.createElement(InlineText, __spreadProps(__spreadValues({}, rest), {
|
41304
|
+
onChange: debounceCallbackChange
|
41305
|
+
}));
|
41306
|
+
}
|
41307
|
+
const TextField = enhancer(Input, (value) => value);
|
41308
|
+
const SearchField = enhancer(Input$5.Search, (val) => val);
|
41309
|
+
const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
|
41310
|
+
const NumberField = enhancer(InputNumber$1, (e) => e);
|
41311
|
+
const SliderField = enhancer(Slider$2, (e) => e);
|
41312
|
+
const ColorPickerField = enhancer(ColorPicker, (e) => e);
|
41313
|
+
const UploadField = enhancer(UploadField$1, (val) => val);
|
41314
|
+
const ImageUploaderField = enhancer(ImageUploader, (url) => url);
|
41315
|
+
const SelectField = enhancer(Select, (e) => e);
|
41316
|
+
const AutoCompleteField = enhancer(AutoComplete, (e) => e);
|
41317
|
+
const RadioGroupField = enhancer(RadioGroup, (value) => value);
|
41318
|
+
const SwitchField = enhancer(Switch$1, (e) => e);
|
41319
|
+
const DatePickerField = enhancer(DatePicker$1, (date) => date);
|
41320
|
+
const CheckboxField = enhancer(CheckBoxGroup, (e) => e);
|
41321
|
+
const EditTabField = enhancer(EditTab, (e) => e);
|
41322
|
+
const InlineTextField = enhancer(InlineText, (value) => value);
|
41323
|
+
const AddToCollection = ({ visible, setVisible }) => {
|
41324
|
+
const { focusBlock: focusBlockData } = useBlock();
|
41325
|
+
const { onAddCollection, onUploadImage } = useEditorProps();
|
41326
|
+
const onSubmit = (values2) => {
|
41327
|
+
if (!values2.label)
|
41328
|
+
return;
|
41329
|
+
const uuid2 = uuid_1.v4();
|
41330
|
+
onAddCollection == null ? void 0 : onAddCollection({
|
41331
|
+
label: values2.label,
|
41332
|
+
helpText: values2.helpText,
|
41333
|
+
data: focusBlockData,
|
41334
|
+
thumbnail: values2.thumbnail,
|
41335
|
+
id: uuid2
|
41336
|
+
});
|
41337
|
+
setVisible(false);
|
41338
|
+
};
|
41339
|
+
return /* @__PURE__ */ React__default.createElement(Form$3, {
|
41340
|
+
initialValues: { label: "", helpText: "", thumbnail: "" },
|
41341
|
+
onSubmit
|
41342
|
+
}, ({ handleSubmit }) => /* @__PURE__ */ React__default.createElement(Modal$1, {
|
41343
|
+
maskClosable: false,
|
41344
|
+
style: { zIndex: 2e3 },
|
41345
|
+
visible,
|
41346
|
+
title: "Add to collection",
|
41347
|
+
onOk: () => handleSubmit(),
|
41348
|
+
onCancel: () => setVisible(false)
|
41349
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$6, {
|
41350
|
+
vertical: true
|
41351
|
+
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(TextField, {
|
41352
|
+
label: "Title",
|
41353
|
+
name: "label",
|
41354
|
+
validate: (val) => {
|
41355
|
+
if (!val)
|
41356
|
+
return "Title required!";
|
41357
|
+
return void 0;
|
41358
|
+
}
|
41359
|
+
}), /* @__PURE__ */ React__default.createElement(TextAreaField, {
|
41360
|
+
label: "Description",
|
41361
|
+
name: "helpText"
|
41362
|
+
}), /* @__PURE__ */ React__default.createElement(ImageUploaderField, {
|
41363
|
+
label: "Thumbnail",
|
41364
|
+
name: "thumbnail",
|
41365
|
+
uploadHandler: onUploadImage,
|
41366
|
+
validate: (val) => {
|
41367
|
+
if (!val)
|
41368
|
+
return "Thumbnail required!";
|
41369
|
+
return void 0;
|
41370
|
+
}
|
41371
|
+
}))));
|
41680
41372
|
};
|
41681
|
-
|
41682
|
-
|
41683
|
-
|
41684
|
-
|
41373
|
+
function useAddToCollection() {
|
41374
|
+
const [modalVisible, setModalVisible] = useState(false);
|
41375
|
+
const modal = useMemo(() => /* @__PURE__ */ React__default.createElement(AddToCollection, {
|
41376
|
+
visible: modalVisible,
|
41377
|
+
setVisible: setModalVisible
|
41378
|
+
}), [modalVisible]);
|
41379
|
+
return {
|
41380
|
+
modal,
|
41381
|
+
modalVisible,
|
41382
|
+
setModalVisible
|
41383
|
+
};
|
41384
|
+
}
|
41385
|
+
function ContextMenu({
|
41386
|
+
moveBlock,
|
41387
|
+
copyBlock,
|
41388
|
+
removeBlock,
|
41389
|
+
contextMenuData,
|
41390
|
+
onClose
|
41391
|
+
}) {
|
41392
|
+
const { blockData, left, top } = contextMenuData;
|
41393
|
+
const idx = blockData.id;
|
41394
|
+
const { modal, modalVisible, setModalVisible } = useAddToCollection();
|
41395
|
+
const ref = useRef(null);
|
41396
|
+
const handleMoveUp = () => {
|
41397
|
+
moveBlock(idx, getSiblingIdx(idx, -1));
|
41398
|
+
scrollBlockEleIntoView({
|
41399
|
+
idx: getSiblingIdx(idx, -1)
|
41685
41400
|
});
|
41401
|
+
onClose();
|
41402
|
+
};
|
41403
|
+
const handleMoveDown = () => {
|
41404
|
+
moveBlock(idx, getSiblingIdx(idx, 1));
|
41405
|
+
scrollBlockEleIntoView({
|
41406
|
+
idx: getSiblingIdx(idx, 1)
|
41407
|
+
});
|
41408
|
+
onClose();
|
41409
|
+
};
|
41410
|
+
const handleCopy = (ev) => {
|
41411
|
+
copyBlock(idx);
|
41412
|
+
scrollBlockEleIntoView({
|
41413
|
+
idx: getSiblingIdx(idx, 1)
|
41414
|
+
});
|
41415
|
+
onClose();
|
41416
|
+
};
|
41417
|
+
const handleAddToCollection = () => {
|
41418
|
+
setModalVisible(true);
|
41419
|
+
};
|
41420
|
+
const handleDelete = () => {
|
41421
|
+
removeBlock(idx);
|
41422
|
+
onClose();
|
41423
|
+
};
|
41424
|
+
const isFirst = getIndexByIdx(idx) === 0;
|
41425
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
41426
|
+
ref,
|
41427
|
+
style: { visibility: modalVisible ? "hidden" : void 0 }
|
41428
|
+
}, /* @__PURE__ */ React__default.createElement("div", {
|
41429
|
+
style: {
|
41430
|
+
left,
|
41431
|
+
top
|
41432
|
+
},
|
41433
|
+
className: styles$5.wrap,
|
41434
|
+
onClick: (e) => e.stopPropagation()
|
41435
|
+
}, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
|
41436
|
+
className: styles$5.listItem,
|
41437
|
+
onClick: handleMoveUp
|
41438
|
+
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
41439
|
+
iconName: "icon-top",
|
41440
|
+
style: { marginRight: 10 }
|
41441
|
+
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move up")), /* @__PURE__ */ React__default.createElement("div", {
|
41442
|
+
className: styles$5.listItem,
|
41443
|
+
onClick: handleMoveDown
|
41444
|
+
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
41445
|
+
iconName: "icon-bottom",
|
41446
|
+
style: { marginRight: 10 }
|
41447
|
+
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move down")), /* @__PURE__ */ React__default.createElement("div", {
|
41448
|
+
className: styles$5.listItem,
|
41449
|
+
onClick: handleCopy
|
41450
|
+
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
41451
|
+
iconName: "icon-copy",
|
41452
|
+
style: { marginRight: 10 }
|
41453
|
+
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Copy")), /* @__PURE__ */ React__default.createElement("div", {
|
41454
|
+
className: styles$5.listItem,
|
41455
|
+
onClick: handleAddToCollection
|
41456
|
+
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
41457
|
+
iconName: "icon-start",
|
41458
|
+
style: { marginRight: 10 }
|
41459
|
+
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection")), /* @__PURE__ */ React__default.createElement("div", {
|
41460
|
+
className: styles$5.listItem,
|
41461
|
+
onClick: handleDelete
|
41462
|
+
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
41463
|
+
iconName: "icon-delete",
|
41464
|
+
style: { marginRight: 10 }
|
41465
|
+
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Delete")), /* @__PURE__ */ React__default.createElement("div", {
|
41466
|
+
className: styles$5.listItem,
|
41467
|
+
onClick: handleAddToCollection
|
41468
|
+
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
41469
|
+
iconName: "icon-start",
|
41470
|
+
style: { marginRight: 10 }
|
41471
|
+
}), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection"))), /* @__PURE__ */ React__default.createElement("div", {
|
41472
|
+
className: styles$5.contextmenuMark,
|
41473
|
+
onClick: onClose,
|
41474
|
+
onContextMenu: (e) => {
|
41475
|
+
e.preventDefault();
|
41476
|
+
onClose(e);
|
41477
|
+
}
|
41478
|
+
}), modal);
|
41479
|
+
}
|
41480
|
+
function useAvatarWrapperDrop() {
|
41481
|
+
const [blockLayerRef, setBlockLayerRef] = useState(null);
|
41482
|
+
const { setHoverIdx, setDirection } = useHoverIdx();
|
41483
|
+
const { dataTransfer, setDataTransfer } = useDataTransfer();
|
41484
|
+
const {
|
41485
|
+
formState: { values: values2 }
|
41486
|
+
} = useEditorContext();
|
41487
|
+
const valuesRef = useRef(values2);
|
41488
|
+
const dataTransferRef = useRef(dataTransfer);
|
41489
|
+
useEffect(() => {
|
41490
|
+
valuesRef.current = values2;
|
41491
|
+
}, [values2]);
|
41492
|
+
useEffect(() => {
|
41493
|
+
dataTransferRef.current = dataTransfer;
|
41494
|
+
}, [dataTransfer]);
|
41495
|
+
function isKeyObject(o) {
|
41496
|
+
return o.key !== void 0;
|
41686
41497
|
}
|
41687
|
-
|
41688
|
-
|
41689
|
-
|
41690
|
-
|
41691
|
-
|
41692
|
-
|
41498
|
+
const removeHightLightClassName = useCallback(() => {
|
41499
|
+
if (!blockLayerRef)
|
41500
|
+
return;
|
41501
|
+
blockLayerRef.querySelectorAll(".arco-tree-node-title-gap-top, .arco-tree-node-title-gap-bottom, .arco-tree-node-title-highlight").forEach((item2) => {
|
41502
|
+
item2.classList.remove("arco-tree-node-title-gap-top", "arco-tree-node-title-gap-bottom", "arco-tree-node-title-highlight");
|
41503
|
+
});
|
41504
|
+
}, [blockLayerRef]);
|
41505
|
+
const allowDrop = useCallback((params) => {
|
41506
|
+
const { dragNode, dropNode, dropPosition } = params;
|
41507
|
+
let dragType;
|
41508
|
+
if (isKeyObject(dragNode)) {
|
41509
|
+
const blockData = lodash.exports.get(valuesRef.current, dragNode.key);
|
41510
|
+
if (!blockData)
|
41511
|
+
return false;
|
41512
|
+
dragType = blockData.type;
|
41513
|
+
} else {
|
41514
|
+
dragType = dragNode.type;
|
41515
|
+
}
|
41516
|
+
const dragBlock = BlockManager.getBlockByType(dragType);
|
41517
|
+
if (!dragBlock)
|
41518
|
+
return false;
|
41519
|
+
if (dropPosition === 0) {
|
41520
|
+
if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
|
41521
|
+
return {
|
41522
|
+
position: 0,
|
41523
|
+
key: dropNode.key
|
41524
|
+
};
|
41525
|
+
} else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
41526
|
+
return {
|
41527
|
+
position: -1,
|
41528
|
+
key: dropNode.key
|
41529
|
+
};
|
41530
|
+
}
|
41531
|
+
} else {
|
41532
|
+
if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
41533
|
+
return {
|
41534
|
+
position: dropPosition,
|
41535
|
+
key: dropNode.key
|
41536
|
+
};
|
41537
|
+
}
|
41538
|
+
}
|
41539
|
+
setDirection("");
|
41540
|
+
setHoverIdx("");
|
41541
|
+
return false;
|
41542
|
+
}, [setDirection, setHoverIdx, removeHightLightClassName]);
|
41543
|
+
useEffect(() => {
|
41544
|
+
if (blockLayerRef) {
|
41545
|
+
const onDragOver = lodash.exports.debounce((ev) => {
|
41546
|
+
var _a, _b, _c, _d;
|
41547
|
+
if (!dataTransferRef.current)
|
41548
|
+
return;
|
41549
|
+
const blockNode = getBlockNodeByChildEle(ev.target);
|
41550
|
+
if (!blockNode || !ev.target)
|
41551
|
+
return;
|
41552
|
+
const directionPosition = getDirectionPosition(ev, 5);
|
41553
|
+
const treeNodeEle = (_b = (_a = blockNode.parentNode) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
|
41554
|
+
if (!treeNodeEle)
|
41555
|
+
return;
|
41556
|
+
removeHightLightClassName();
|
41557
|
+
const dropIdx = getNodeIdxFromClassName(blockNode.classList);
|
41558
|
+
if (!dropIdx)
|
41559
|
+
return;
|
41560
|
+
const dropParentIdx = getParentIdx(dropIdx);
|
41561
|
+
const dropBlockData = lodash.exports.get(valuesRef.current, dropIdx);
|
41562
|
+
const dropParentBlockData = dropParentIdx ? lodash.exports.get(valuesRef.current, dropParentIdx) : null;
|
41563
|
+
let dropPosition = 0;
|
41564
|
+
if (directionPosition.vertical.direction === "top" && directionPosition.vertical.isEdge) {
|
41565
|
+
dropPosition = -1;
|
41566
|
+
} else if (directionPosition.vertical.direction === "bottom" && directionPosition.vertical.isEdge) {
|
41567
|
+
dropPosition = 1;
|
41568
|
+
}
|
41569
|
+
const dropResult = allowDrop({
|
41570
|
+
dragNode: {
|
41571
|
+
type: dataTransferRef.current.type
|
41572
|
+
},
|
41573
|
+
dropNode: {
|
41574
|
+
dataRef: dropBlockData,
|
41575
|
+
key: dropIdx,
|
41576
|
+
parent: dropParentBlockData
|
41577
|
+
},
|
41578
|
+
dropPosition
|
41579
|
+
});
|
41580
|
+
if (!dropResult)
|
41581
|
+
return;
|
41582
|
+
const node = (_d = (_c = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _c.parentNode) == null ? void 0 : _d.parentNode;
|
41583
|
+
if (node instanceof HTMLElement) {
|
41584
|
+
removeHightLightClassName();
|
41585
|
+
node.classList.add("arco-tree-node-title-gap-bottom");
|
41586
|
+
}
|
41587
|
+
setDirection(getDirectionFormDropPosition(dropResult.position));
|
41588
|
+
setHoverIdx(dropResult.key);
|
41589
|
+
if (dropResult.position === -1) {
|
41590
|
+
treeNodeEle.classList.add("arco-tree-node-title-gap-top");
|
41591
|
+
setDataTransfer((dataTransfer2) => {
|
41592
|
+
return __spreadProps(__spreadValues({}, dataTransfer2), {
|
41593
|
+
parentIdx: dropParentIdx,
|
41594
|
+
positionIndex: getIndexByIdx(dropIdx)
|
41595
|
+
});
|
41596
|
+
});
|
41597
|
+
} else if (dropResult.position === 1) {
|
41598
|
+
setDataTransfer((dataTransfer2) => {
|
41599
|
+
return __spreadProps(__spreadValues({}, dataTransfer2), {
|
41600
|
+
parentIdx: dropParentIdx,
|
41601
|
+
positionIndex: getIndexByIdx(dropIdx) + 1
|
41602
|
+
});
|
41603
|
+
});
|
41604
|
+
treeNodeEle.classList.add("arco-tree-node-title-gap-bottom");
|
41605
|
+
} else {
|
41606
|
+
treeNodeEle.classList.add("arco-tree-node-title-highlight");
|
41607
|
+
setDataTransfer((dataTransfer2) => {
|
41608
|
+
return __spreadProps(__spreadValues({}, dataTransfer2), {
|
41609
|
+
parentIdx: getIndexByIdx(dropIdx),
|
41610
|
+
positionIndex: 0
|
41611
|
+
});
|
41612
|
+
});
|
41613
|
+
}
|
41614
|
+
});
|
41615
|
+
const onDragend = (ev) => {
|
41616
|
+
removeHightLightClassName();
|
41617
|
+
};
|
41618
|
+
const onDrop = (ev) => {
|
41619
|
+
setTimeout(() => {
|
41620
|
+
removeHightLightClassName();
|
41621
|
+
}, 0);
|
41622
|
+
};
|
41623
|
+
blockLayerRef.addEventListener("dragover", onDragOver);
|
41624
|
+
blockLayerRef.addEventListener("drop", onDrop);
|
41625
|
+
blockLayerRef.addEventListener("dragleave", onDragend);
|
41626
|
+
return () => {
|
41627
|
+
blockLayerRef.removeEventListener("dragover", onDragOver);
|
41628
|
+
blockLayerRef.removeEventListener("drop", onDrop);
|
41629
|
+
blockLayerRef.removeEventListener("dragleave", onDragend);
|
41630
|
+
};
|
41631
|
+
}
|
41632
|
+
}, [blockLayerRef, dataTransferRef, valuesRef, removeHightLightClassName]);
|
41633
|
+
return {
|
41634
|
+
setBlockLayerRef,
|
41635
|
+
blockLayerRef,
|
41636
|
+
allowDrop,
|
41637
|
+
removeHightLightClassName
|
41638
|
+
};
|
41693
41639
|
}
|
41694
|
-
|
41695
|
-
|
41696
|
-
|
41697
|
-
|
41698
|
-
|
41699
|
-
|
41700
|
-
const Com = focusBlock2 && BlockAttributeConfigurationManager.get(focusBlock2.type);
|
41701
|
-
const shadowRoot = getShadowRoot();
|
41702
|
-
if (!value || !initialized)
|
41703
|
-
return null;
|
41704
|
-
return /* @__PURE__ */ React__default.createElement(PresetColorsProvider, null, Com ? /* @__PURE__ */ React__default.createElement(Com, null) : /* @__PURE__ */ React__default.createElement("div", {
|
41705
|
-
style: { marginTop: 200, padding: "0 50px" }
|
41706
|
-
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
41707
|
-
size: "extraLarge"
|
41708
|
-
}, "No matching components")), /* @__PURE__ */ React__default.createElement("div", {
|
41709
|
-
style: { position: "absolute" }
|
41710
|
-
}, /* @__PURE__ */ React__default.createElement(RichTextField, {
|
41711
|
-
idx: focusIdx2
|
41712
|
-
})), shadowRoot && ReactDOM.createPortal(/* @__PURE__ */ React__default.createElement("style", null, `
|
41713
|
-
.email-block [contentEditable="true"],
|
41714
|
-
.email-block [contentEditable="true"] * {
|
41715
|
-
outline: none;
|
41716
|
-
cursor: text;
|
41717
|
-
}
|
41718
|
-
`), shadowRoot));
|
41640
|
+
function getDirectionFormDropPosition(position) {
|
41641
|
+
if (position === -1)
|
41642
|
+
return "top";
|
41643
|
+
if (position === 1)
|
41644
|
+
return "bottom";
|
41645
|
+
return "";
|
41719
41646
|
}
|
41720
|
-
function
|
41721
|
-
const {
|
41722
|
-
|
41723
|
-
|
41724
|
-
|
41725
|
-
|
41726
|
-
|
41647
|
+
function BlockLayer() {
|
41648
|
+
const {
|
41649
|
+
pageData: pageData2,
|
41650
|
+
formState: { values: values2 }
|
41651
|
+
} = useEditorContext();
|
41652
|
+
const { onUploadImage, onAddCollection } = useEditorProps();
|
41653
|
+
const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
|
41654
|
+
const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
|
41655
|
+
const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
|
41656
|
+
const {
|
41657
|
+
setBlockLayerRef,
|
41658
|
+
allowDrop,
|
41659
|
+
blockLayerRef,
|
41660
|
+
removeHightLightClassName
|
41661
|
+
} = useAvatarWrapperDrop();
|
41662
|
+
const [contextMenuData, setContextMenuData] = useState(null);
|
41663
|
+
const onToggleVisible = useCallback(({ id }, e) => {
|
41664
|
+
e.stopPropagation();
|
41665
|
+
const blockData = lodash.exports.get(values2, id);
|
41666
|
+
if (blockData) {
|
41667
|
+
blockData.data.hidden = !Boolean(blockData.data.hidden);
|
41668
|
+
setValueByIdx2(id, blockData);
|
41669
|
+
}
|
41670
|
+
}, [setValueByIdx2, values2]);
|
41671
|
+
const renderTitle = useCallback((data) => {
|
41672
|
+
const block2 = BlockManager.getBlockByType(data.type);
|
41673
|
+
const isPage = data.type === BasicType.PAGE;
|
41674
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
41675
|
+
"data-tree-idx": data.id,
|
41676
|
+
className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
|
41727
41677
|
}, /* @__PURE__ */ React__default.createElement(TextStyle, {
|
41728
|
-
|
41729
|
-
|
41730
|
-
|
41731
|
-
|
41732
|
-
|
41733
|
-
|
41734
|
-
})
|
41735
|
-
|
41736
|
-
|
41737
|
-
|
41738
|
-
|
41739
|
-
|
41740
|
-
|
41741
|
-
|
41742
|
-
|
41743
|
-
|
41744
|
-
|
41745
|
-
|
41746
|
-
|
41747
|
-
|
41748
|
-
|
41749
|
-
}
|
41750
|
-
const
|
41751
|
-
|
41752
|
-
|
41753
|
-
|
41754
|
-
|
41755
|
-
|
41756
|
-
|
41757
|
-
|
41758
|
-
|
41759
|
-
];
|
41760
|
-
|
41761
|
-
|
41678
|
+
size: "smallest"
|
41679
|
+
}, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
|
41680
|
+
className: styles$6.eyeIcon
|
41681
|
+
}, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
|
41682
|
+
blockData: data,
|
41683
|
+
onToggleVisible
|
41684
|
+
})));
|
41685
|
+
}, [onToggleVisible]);
|
41686
|
+
const treeData = useMemo(() => {
|
41687
|
+
const copyData = lodash.exports.cloneDeep(pageData2);
|
41688
|
+
const loop2 = (item2, id, parent2) => {
|
41689
|
+
item2.id = id;
|
41690
|
+
item2.parent = parent2;
|
41691
|
+
item2.children.map((child, index2) => loop2(child, getChildIdx(id, index2), item2));
|
41692
|
+
};
|
41693
|
+
loop2(copyData, getPageIdx(), null);
|
41694
|
+
return [copyData];
|
41695
|
+
}, [pageData2]);
|
41696
|
+
const onSelect = useCallback((selectedId) => {
|
41697
|
+
setFocusIdx(selectedId);
|
41698
|
+
scrollBlockEleIntoView({ idx: selectedId });
|
41699
|
+
}, [setFocusIdx]);
|
41700
|
+
const onContextMenu = useCallback((blockData, ev) => {
|
41701
|
+
ev.preventDefault();
|
41702
|
+
setContextMenuData({ blockData, left: ev.clientX, top: ev.clientY });
|
41703
|
+
}, []);
|
41704
|
+
const onCloseContextMenu = useCallback((ev) => {
|
41705
|
+
setContextMenuData(null);
|
41706
|
+
}, []);
|
41707
|
+
const onMouseEnter = useCallback((id) => {
|
41708
|
+
setHoverIdx(id);
|
41709
|
+
}, [setHoverIdx]);
|
41710
|
+
const onMouseLeave = useCallback(() => {
|
41711
|
+
setHoverIdx("");
|
41712
|
+
}, [setHoverIdx]);
|
41713
|
+
const onDragStart = useCallback(() => {
|
41714
|
+
setIsDragging(true);
|
41715
|
+
}, [setIsDragging]);
|
41716
|
+
const onDragEnd = useCallback(() => {
|
41717
|
+
setIsDragging(false);
|
41718
|
+
}, [setIsDragging]);
|
41719
|
+
const onDrop = useCallback((params) => {
|
41720
|
+
const { dragNode, dropNode, dropPosition } = params;
|
41721
|
+
const dragBlock = BlockManager.getBlockByType(dragNode.dataRef.type);
|
41722
|
+
if (!dragBlock)
|
41723
|
+
return false;
|
41724
|
+
const dropIndex = getIndexByIdx(dropNode.key);
|
41725
|
+
if (dropPosition === 0) {
|
41726
|
+
if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
|
41727
|
+
moveBlock(dragNode.key, getChildIdx(dropNode.key, 0));
|
41728
|
+
} else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
|
41729
|
+
moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropIndex));
|
41730
|
+
}
|
41731
|
+
} else {
|
41732
|
+
moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropPosition > 0 ? dropIndex + 1 : dropIndex));
|
41733
|
+
}
|
41734
|
+
}, [moveBlock]);
|
41735
|
+
useEffect(() => {
|
41736
|
+
if (!blockLayerRef)
|
41737
|
+
return;
|
41738
|
+
if (focusIdx2) {
|
41739
|
+
setTimeout(() => {
|
41740
|
+
const selectedNode = blockLayerRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${focusIdx2}"]`);
|
41741
|
+
if (selectedNode) {
|
41742
|
+
selectedNode.scrollIntoView({
|
41743
|
+
block: "center",
|
41744
|
+
behavior: "smooth"
|
41745
|
+
});
|
41746
|
+
}
|
41747
|
+
}, 50);
|
41748
|
+
}
|
41749
|
+
}, [blockLayerRef, focusIdx2]);
|
41750
|
+
const blockTreeAllowDrop = useCallback((data) => {
|
41751
|
+
var _a, _b;
|
41752
|
+
const dropResult = allowDrop(data);
|
41753
|
+
if (dropResult) {
|
41754
|
+
const node = (_b = (_a = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
|
41755
|
+
if (node instanceof HTMLElement) {
|
41756
|
+
removeHightLightClassName();
|
41757
|
+
node.classList.add("arco-tree-node-title-gap-bottom");
|
41758
|
+
}
|
41759
|
+
setDirection(getDirectionFormDropPosition(dropResult.position));
|
41760
|
+
setHoverIdx(dropResult.key);
|
41761
|
+
}
|
41762
|
+
return dropResult;
|
41763
|
+
}, [allowDrop]);
|
41764
|
+
const hasFocus = Boolean(focusIdx2);
|
41762
41765
|
return useMemo(() => {
|
41763
|
-
|
41764
|
-
|
41765
|
-
|
41766
|
-
|
41767
|
-
|
41766
|
+
if (!hasFocus)
|
41767
|
+
return null;
|
41768
|
+
return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
|
41769
|
+
ref: setBlockLayerRef,
|
41770
|
+
id: "BlockLayerManager"
|
41771
|
+
}, {
|
41772
|
+
[DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
|
41773
|
+
}), /* @__PURE__ */ React__default.createElement(BlockTree, {
|
41774
|
+
selectedId: focusIdx2,
|
41775
|
+
defaultExpandAll: true,
|
41776
|
+
treeData,
|
41777
|
+
renderTitle,
|
41778
|
+
allowDrop: blockTreeAllowDrop,
|
41779
|
+
onContextMenu,
|
41780
|
+
onDrop,
|
41781
|
+
onDragStart,
|
41782
|
+
onDragEnd,
|
41783
|
+
onSelect,
|
41784
|
+
onMouseEnter,
|
41785
|
+
onMouseLeave
|
41786
|
+
}), contextMenuData && /* @__PURE__ */ React__default.createElement(ContextMenu, {
|
41787
|
+
onClose: onCloseContextMenu,
|
41788
|
+
moveBlock,
|
41789
|
+
copyBlock,
|
41790
|
+
removeBlock,
|
41791
|
+
contextMenuData
|
41768
41792
|
}));
|
41769
|
-
}, [
|
41770
|
-
|
41771
|
-
|
41772
|
-
|
41773
|
-
|
41774
|
-
|
41775
|
-
|
41776
|
-
|
41777
|
-
|
41778
|
-
|
41779
|
-
|
41780
|
-
|
41781
|
-
|
41782
|
-
|
41783
|
-
|
41784
|
-
|
41785
|
-
|
41786
|
-
|
41787
|
-
|
41788
|
-
|
41789
|
-
|
41790
|
-
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
41791
|
-
label: "Bottom",
|
41792
|
-
quickchange: true,
|
41793
|
-
name: `${focusIdx2}.attributes.marginBottom`,
|
41794
|
-
inline: true
|
41795
|
-
}))), /* @__PURE__ */ React__default.createElement(Stack$6, {
|
41796
|
-
wrap: false
|
41797
|
-
}, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
41798
|
-
fill: true
|
41799
|
-
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
41800
|
-
label: "Left",
|
41801
|
-
quickchange: true,
|
41802
|
-
name: `${focusIdx2}.attributes.marginLeft`,
|
41803
|
-
inline: true
|
41804
|
-
})), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
|
41805
|
-
fill: true
|
41806
|
-
}, /* @__PURE__ */ React__default.createElement(TextField, {
|
41807
|
-
label: "Right",
|
41808
|
-
quickchange: true,
|
41809
|
-
name: `${focusIdx2}.attributes.marginRight`,
|
41810
|
-
inline: true
|
41811
|
-
}))));
|
41812
|
-
}, [focusIdx2]);
|
41793
|
+
}, [
|
41794
|
+
hasFocus,
|
41795
|
+
focusIdx2,
|
41796
|
+
treeData,
|
41797
|
+
renderTitle,
|
41798
|
+
allowDrop,
|
41799
|
+
onContextMenu,
|
41800
|
+
onDrop,
|
41801
|
+
onSelect,
|
41802
|
+
onMouseEnter,
|
41803
|
+
onMouseLeave,
|
41804
|
+
contextMenuData,
|
41805
|
+
onCloseContextMenu,
|
41806
|
+
onUploadImage,
|
41807
|
+
onAddCollection,
|
41808
|
+
moveBlock,
|
41809
|
+
copyBlock,
|
41810
|
+
removeBlock,
|
41811
|
+
onDragEnd,
|
41812
|
+
onDragStart
|
41813
|
+
]);
|
41813
41814
|
}
|
41814
41815
|
const BlocksPanel$1 = "_BlocksPanel_15fho_1";
|
41815
41816
|
const blockItem = "_blockItem_15fho_5";
|
41816
41817
|
const closeBtn = "_closeBtn_15fho_12";
|
41817
|
-
var styles$
|
41818
|
+
var styles$2 = {
|
41818
41819
|
BlocksPanel: BlocksPanel$1,
|
41819
41820
|
blockItem,
|
41820
41821
|
closeBtn
|
@@ -41872,7 +41873,7 @@ __publicField(BlockMarketManager, "category", []);
|
|
41872
41873
|
__publicField(BlockMarketManager, "subscriptHandles", []);
|
41873
41874
|
const mask = "_mask_1a0xw_1";
|
41874
41875
|
const drag = "_drag_1a0xw_12";
|
41875
|
-
var styles$
|
41876
|
+
var styles$1 = {
|
41876
41877
|
mask,
|
41877
41878
|
drag
|
41878
41879
|
};
|
@@ -41882,7 +41883,7 @@ const BlockMaskWrapper = (props) => {
|
|
41882
41883
|
const { type, payload } = props;
|
41883
41884
|
const onMouseDown = useCallback(() => {
|
41884
41885
|
if (ref.current) {
|
41885
|
-
ref.current.classList.add(styles$
|
41886
|
+
ref.current.classList.add(styles$1.drag);
|
41886
41887
|
}
|
41887
41888
|
}, []);
|
41888
41889
|
const onMaskMouseDown = useCallback((ev) => {
|
@@ -41894,7 +41895,7 @@ const BlockMaskWrapper = (props) => {
|
|
41894
41895
|
useEffect(() => {
|
41895
41896
|
const mouseup = () => {
|
41896
41897
|
if (ref.current) {
|
41897
|
-
ref.current.classList.remove(styles$
|
41898
|
+
ref.current.classList.remove(styles$1.drag);
|
41898
41899
|
}
|
41899
41900
|
};
|
41900
41901
|
document.addEventListener("mouseup", mouseup);
|
@@ -41905,7 +41906,7 @@ const BlockMaskWrapper = (props) => {
|
|
41905
41906
|
return /* @__PURE__ */ React__default.createElement("div", {
|
41906
41907
|
style: { position: "relative" }
|
41907
41908
|
}, props.children, /* @__PURE__ */ React__default.createElement("div", {
|
41908
|
-
className: styles$
|
41909
|
+
className: styles$1.wrapper,
|
41909
41910
|
style: {
|
41910
41911
|
position: "absolute",
|
41911
41912
|
height: "100%",
|
@@ -41920,7 +41921,7 @@ const BlockMaskWrapper = (props) => {
|
|
41920
41921
|
payload
|
41921
41922
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
41922
41923
|
ref,
|
41923
|
-
className: styles$
|
41924
|
+
className: styles$1.mask,
|
41924
41925
|
onMouseDown: onMaskMouseDown
|
41925
41926
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
41926
41927
|
ref: dragRef,
|
@@ -43966,13 +43967,13 @@ const BlocksPanel = (props) => {
|
|
43966
43967
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
43967
43968
|
onClick: toggleVisible
|
43968
43969
|
}, props.children), ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
|
43969
|
-
className: styles$
|
43970
|
+
className: styles$2.BlocksPanel,
|
43970
43971
|
style: {
|
43971
43972
|
pointerEvents: isDragging ? "none" : void 0,
|
43972
43973
|
position: "fixed",
|
43973
43974
|
width: isDragging ? 0 : 650,
|
43975
|
+
backgroundColor: "var(--color-bg-2)",
|
43974
43976
|
zIndex: 200,
|
43975
|
-
top: 0,
|
43976
43977
|
left: 60,
|
43977
43978
|
maxHeight: "85vh",
|
43978
43979
|
transition: "width .5s",
|
@@ -43982,7 +43983,7 @@ const BlocksPanel = (props) => {
|
|
43982
43983
|
bodyStyle: { padding: 0 },
|
43983
43984
|
title: "Drag block",
|
43984
43985
|
extra: /* @__PURE__ */ React__default.createElement("div", {
|
43985
|
-
className: styles$
|
43986
|
+
className: styles$2.closeBtn
|
43986
43987
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
43987
43988
|
iconName: "icon-close",
|
43988
43989
|
onClick: toggleVisible
|
@@ -43993,7 +43994,8 @@ const BlocksPanel = (props) => {
|
|
43993
43994
|
}, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
|
43994
43995
|
style: {
|
43995
43996
|
padding: 0,
|
43996
|
-
overflow: "auto"
|
43997
|
+
overflow: "auto",
|
43998
|
+
height: 500
|
43997
43999
|
},
|
43998
44000
|
key: category.title,
|
43999
44001
|
title: /* @__PURE__ */ React__default.createElement("div", {
|
@@ -44008,17 +44010,16 @@ const BlocksPanel = (props) => {
|
|
44008
44010
|
};
|
44009
44011
|
const BlockPanelItem = React__default.memo((props) => {
|
44010
44012
|
return /* @__PURE__ */ React__default.createElement(Tabs$1, {
|
44011
|
-
style: { padding: "20px 0" },
|
44012
44013
|
tabPosition: "left"
|
44013
44014
|
}, props.category.blocks.map((block2, index2) => {
|
44014
44015
|
return /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
|
44015
|
-
style: { padding: 0 },
|
44016
|
+
style: { padding: 0, height: 500 },
|
44016
44017
|
key: block2.title,
|
44017
44018
|
title: /* @__PURE__ */ React__default.createElement(Stack$6, {
|
44018
44019
|
alignment: "center",
|
44019
44020
|
spacing: "extraTight"
|
44020
44021
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
44021
|
-
className: styles$
|
44022
|
+
className: styles$2.blockItem
|
44022
44023
|
}, block2.title), block2.description && /* @__PURE__ */ React__default.createElement(Help, {
|
44023
44024
|
title: block2.description
|
44024
44025
|
}))
|
@@ -44035,11 +44036,14 @@ const BlockPanelItem = React__default.memo((props) => {
|
|
44035
44036
|
}));
|
44036
44037
|
});
|
44037
44038
|
function ShortcutToolbar() {
|
44039
|
+
const blocksPanelRef = useRef(null);
|
44038
44040
|
return /* @__PURE__ */ React__default.createElement(Stack$6, {
|
44039
44041
|
vertical: true,
|
44040
44042
|
alignment: "center",
|
44041
44043
|
distribution: "center"
|
44042
|
-
}, /* @__PURE__ */ React__default.createElement(
|
44044
|
+
}, /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement("div", {
|
44045
|
+
ref: blocksPanelRef
|
44046
|
+
})), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
|
44043
44047
|
type: BasicType.TEXT
|
44044
44048
|
}, /* @__PURE__ */ React__default.createElement(IconFont, {
|
44045
44049
|
title: "Text",
|
@@ -44083,22 +44087,25 @@ function ShortcutToolbar() {
|
|
44083
44087
|
cursor: "move",
|
44084
44088
|
color: "#e5afe5"
|
44085
44089
|
}
|
44086
|
-
})), /* @__PURE__ */ React__default.createElement(
|
44090
|
+
})), /* @__PURE__ */ React__default.createElement(IconFont, {
|
44091
|
+
onClick: () => {
|
44092
|
+
var _a;
|
44093
|
+
return (_a = blocksPanelRef.current) == null ? void 0 : _a.click();
|
44094
|
+
},
|
44087
44095
|
iconName: "icon-more",
|
44088
44096
|
style: {
|
44089
44097
|
display: "flex",
|
44090
44098
|
alignItems: "center",
|
44091
44099
|
justifyContent: "center",
|
44092
|
-
color: "#000",
|
44093
44100
|
width: 30,
|
44094
44101
|
height: 30,
|
44095
44102
|
borderRadius: "50%",
|
44096
|
-
|
44103
|
+
color: "var(--color-text-2)",
|
44104
|
+
boxShadow: "0 0 12px -3px var(--color-text-2)",
|
44097
44105
|
fontSize: 18
|
44098
44106
|
}
|
44099
|
-
}))
|
44107
|
+
}));
|
44100
44108
|
}
|
44101
|
-
var styles$1 = {};
|
44102
44109
|
function SourceCodePanel() {
|
44103
44110
|
const { setValueByIdx, focusBlock, values } = useBlock();
|
44104
44111
|
const { focusIdx } = useFocusIdx();
|
@@ -44109,7 +44116,7 @@ function SourceCodePanel() {
|
|
44109
44116
|
return "";
|
44110
44117
|
return JSON.stringify(focusBlock, null, 2) || "";
|
44111
44118
|
}, [focusBlock]);
|
44112
|
-
const
|
44119
|
+
const onChangeCode = useCallback((event) => {
|
44113
44120
|
try {
|
44114
44121
|
const parseValue = JSON.parse(JSON.stringify(eval("(" + event.target.value + ")")));
|
44115
44122
|
const block = BlockManager.getBlockByType(parseValue.type);
|
@@ -44154,9 +44161,7 @@ function SourceCodePanel() {
|
|
44154
44161
|
}, [focusBlock, focusIdx, pageData]);
|
44155
44162
|
if (!focusBlock)
|
44156
44163
|
return null;
|
44157
|
-
return /* @__PURE__ */ React__default.createElement(Collapse$1, {
|
44158
|
-
className: styles$1.wrapper
|
44159
|
-
}, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
44164
|
+
return /* @__PURE__ */ React__default.createElement(Collapse$1, null, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
44160
44165
|
name: "json",
|
44161
44166
|
header: "Json source",
|
44162
44167
|
contentStyle: { padding: "8px 13px" }
|
@@ -44164,7 +44169,7 @@ function SourceCodePanel() {
|
|
44164
44169
|
key: code,
|
44165
44170
|
defaultValue: code,
|
44166
44171
|
autoSize: { maxRows: 25 },
|
44167
|
-
onBlur:
|
44172
|
+
onBlur: onChangeCode
|
44168
44173
|
})), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
|
44169
44174
|
name: "mjml",
|
44170
44175
|
header: "MJML source",
|
@@ -44218,7 +44223,7 @@ function Toolbar({
|
|
44218
44223
|
}, /* @__PURE__ */ React__default.createElement("div", {
|
44219
44224
|
style: {
|
44220
44225
|
color: "#ffffff",
|
44221
|
-
backgroundColor: "
|
44226
|
+
backgroundColor: "var(--selected-color)",
|
44222
44227
|
height: "22px",
|
44223
44228
|
display: "inline-flex",
|
44224
44229
|
padding: "1px 5px",
|
@@ -44258,7 +44263,7 @@ function ToolItem(props) {
|
|
44258
44263
|
onClick: props.onClick,
|
44259
44264
|
style: {
|
44260
44265
|
color: "#ffffff",
|
44261
|
-
backgroundColor: "
|
44266
|
+
backgroundColor: "var(--selected-color)",
|
44262
44267
|
height: 22,
|
44263
44268
|
fontSize: props.width || 14,
|
44264
44269
|
lineHeight: "22px",
|
@@ -44268,7 +44273,7 @@ function ToolItem(props) {
|
|
44268
44273
|
cursor: "pointer",
|
44269
44274
|
justifyContent: "center"
|
44270
44275
|
},
|
44271
|
-
className: classnames
|
44276
|
+
className: classnames("iconfont", props.iconName)
|
44272
44277
|
});
|
44273
44278
|
}
|
44274
44279
|
function FocusTooltip() {
|
@@ -44613,10 +44618,9 @@ var styles = {
|
|
44613
44618
|
container,
|
44614
44619
|
customScrollBar
|
44615
44620
|
};
|
44616
|
-
const { TabPane } = Tabs$1;
|
44617
44621
|
const SimpleLayout = (props) => {
|
44618
44622
|
const { height: containerHeight } = useEditorProps();
|
44619
|
-
return /* @__PURE__ */ React__default.createElement(Layout$1,
|
44623
|
+
return /* @__PURE__ */ React__default.createElement(Layout$1, {
|
44620
44624
|
style: {
|
44621
44625
|
display: "flex",
|
44622
44626
|
width: "100vw",
|
@@ -44624,40 +44628,38 @@ const SimpleLayout = (props) => {
|
|
44624
44628
|
minWidth: 1400
|
44625
44629
|
}
|
44626
44630
|
}, /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
|
44627
|
-
theme: "light",
|
44628
|
-
width: 60,
|
44629
|
-
style: { border: "1px solid #f0f0f0" }
|
44630
|
-
}, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
|
44631
44631
|
style: {
|
44632
|
-
|
44632
|
+
width: 360
|
44633
|
+
}
|
44634
|
+
}, /* @__PURE__ */ React__default.createElement(Card$1, {
|
44635
|
+
bodyStyle: { padding: 0 },
|
44636
|
+
style: { border: "none" }
|
44637
|
+
}, /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
|
44638
|
+
style: { width: 60 }
|
44639
|
+
}, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
|
44640
|
+
className: styles.customScrollBar,
|
44641
|
+
style: {
|
44642
|
+
width: 300,
|
44643
|
+
paddingBottom: 50,
|
44644
|
+
border: "none",
|
44633
44645
|
height: containerHeight,
|
44634
44646
|
overflow: "auto"
|
44635
|
-
}
|
44636
|
-
className: styles.customScrollBar,
|
44637
|
-
theme: "light",
|
44638
|
-
width: 300
|
44647
|
+
}
|
44639
44648
|
}, /* @__PURE__ */ React__default.createElement(Card$1, {
|
44640
|
-
|
44641
|
-
style: {
|
44642
|
-
}, /* @__PURE__ */ React__default.createElement(Tabs$1, {
|
44643
|
-
style: { borderLeft: "none" },
|
44644
|
-
defaultActiveTab: "Layout"
|
44645
|
-
}, /* @__PURE__ */ React__default.createElement(TabPane, {
|
44646
|
-
style: { paddingTop: 10 },
|
44647
|
-
key: "Layout",
|
44648
|
-
title: "Layout"
|
44649
|
+
title: "Layout",
|
44650
|
+
style: { border: "none" }
|
44649
44651
|
}, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), /* @__PURE__ */ React__default.createElement(Layout$1, {
|
44650
44652
|
style: { height: containerHeight }
|
44651
44653
|
}, props.children), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
|
44652
44654
|
style: { height: containerHeight },
|
44653
|
-
theme: "light",
|
44654
44655
|
width: 350
|
44655
44656
|
}, /* @__PURE__ */ React__default.createElement(Card$1, {
|
44656
44657
|
size: "small",
|
44657
44658
|
id: "rightSide",
|
44658
44659
|
style: {
|
44659
44660
|
maxHeight: "100%",
|
44660
|
-
height: "100%"
|
44661
|
+
height: "100%",
|
44662
|
+
borderLeft: "none"
|
44661
44663
|
},
|
44662
44664
|
bodyStyle: { padding: 0 },
|
44663
44665
|
className: styles.customScrollBar
|
@@ -44668,7 +44670,7 @@ const SimpleLayout = (props) => {
|
|
44668
44670
|
}, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
|
44669
44671
|
key: "Source code",
|
44670
44672
|
title: "Source code"
|
44671
|
-
}, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null)))))
|
44673
|
+
}, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
|
44672
44674
|
};
|
44673
44675
|
export { EditTabField as $, AttributePanel as A, BlockLayer as B, Color as C, Decoration as D, TextAreaField as E, FontFamily as F, NumberField as G, Height as H, InteractivePrompt as I, SliderField as J, ColorPickerField as K, LetterSpacing as L, Margin as M, NavbarLinkPadding as N, ImageUploaderField as O, Padding as P, SelectField as Q, AutoCompleteField as R, ShortcutToolbar as S, TextAlign as T, UploadField as U, VerticalAlign as V, Width as W, RadioGroupField as X, SwitchField as Y, DatePickerField as Z, CheckboxField as _, BlockAttributeConfigurationManager as a, InlineTextField as a0, enhancer as a1, RichTextField as a2, Align as b, commonjsGlobal as c, AttributesPanelWrapper as d, ContainerBackgroundColor as e, TextDecoration as f, Background as g, LineHeight as h, TextTransform as i, BackgroundColor as j, Direction as k, Link as l, Border as m, BorderColor as n, FontSize as o, MergeTags as p, BorderStyle as q, FontStyle as r, BorderWidth as s, FontWeight as t, BlockMarketManager as u, BlockMaskWrapper as v, SourceCodePanel as w, SimpleLayout as x, TextField as y, SearchField as z };
|
44674
44676
|
//# sourceMappingURL=index2.js.map
|