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.
Files changed (148) hide show
  1. package/lib/AttributePanel/AttributePanel.d.ts +3 -3
  2. package/lib/AttributePanel/components/UI/Help/index.d.ts +7 -7
  3. package/lib/AttributePanel/components/UI/HtmlEditor.d.ts +5 -5
  4. package/lib/AttributePanel/components/attributes/Align.d.ts +1 -1
  5. package/lib/AttributePanel/components/attributes/AttributesPanelWrapper/index.d.ts +6 -6
  6. package/lib/AttributePanel/components/attributes/Background.d.ts +1 -1
  7. package/lib/AttributePanel/components/attributes/BackgroundColor.d.ts +3 -3
  8. package/lib/AttributePanel/components/attributes/Border.d.ts +1 -1
  9. package/lib/AttributePanel/components/attributes/BorderColor.d.ts +1 -1
  10. package/lib/AttributePanel/components/attributes/BorderStyle.d.ts +5 -5
  11. package/lib/AttributePanel/components/attributes/BorderWidth.d.ts +1 -1
  12. package/lib/AttributePanel/components/attributes/Color.d.ts +4 -4
  13. package/lib/AttributePanel/components/attributes/ContainerBackgroundColor.d.ts +3 -3
  14. package/lib/AttributePanel/components/attributes/Decoration.d.ts +1 -1
  15. package/lib/AttributePanel/components/attributes/Direction.d.ts +1 -1
  16. package/lib/AttributePanel/components/attributes/FontFamily.d.ts +1 -1
  17. package/lib/AttributePanel/components/attributes/FontSize.d.ts +1 -1
  18. package/lib/AttributePanel/components/attributes/FontStyle.d.ts +3 -3
  19. package/lib/AttributePanel/components/attributes/FontWeight.d.ts +1 -1
  20. package/lib/AttributePanel/components/attributes/Height.d.ts +3 -3
  21. package/lib/AttributePanel/components/attributes/LetterSpacing.d.ts +1 -1
  22. package/lib/AttributePanel/components/attributes/LineHeight.d.ts +1 -1
  23. package/lib/AttributePanel/components/attributes/Link.d.ts +1 -1
  24. package/lib/AttributePanel/components/attributes/Margin.d.ts +1 -1
  25. package/lib/AttributePanel/components/attributes/MergeTags.d.ts +6 -6
  26. package/lib/AttributePanel/components/attributes/NavbarLinkPadding.d.ts +3 -3
  27. package/lib/AttributePanel/components/attributes/Padding.d.ts +5 -5
  28. package/lib/AttributePanel/components/attributes/TextAlign.d.ts +1 -1
  29. package/lib/AttributePanel/components/attributes/TextDecoration.d.ts +1 -1
  30. package/lib/AttributePanel/components/attributes/TextTransform.d.ts +1 -1
  31. package/lib/AttributePanel/components/attributes/VerticalAlign.d.ts +3 -3
  32. package/lib/AttributePanel/components/attributes/Width.d.ts +3 -3
  33. package/lib/AttributePanel/components/attributes/index.d.ts +29 -29
  34. package/lib/AttributePanel/components/blocks/Accordion/index.d.ts +1 -1
  35. package/lib/AttributePanel/components/blocks/AccordionElement/index.d.ts +1 -1
  36. package/lib/AttributePanel/components/blocks/AccordionText/index.d.ts +1 -1
  37. package/lib/AttributePanel/components/blocks/AccordionTitle/index.d.ts +1 -1
  38. package/lib/AttributePanel/components/blocks/Button/index.d.ts +1 -1
  39. package/lib/AttributePanel/components/blocks/Carousel/index.d.ts +1 -1
  40. package/lib/AttributePanel/components/blocks/Column/index.d.ts +1 -1
  41. package/lib/AttributePanel/components/blocks/Divider/index.d.ts +1 -1
  42. package/lib/AttributePanel/components/blocks/Group/index.d.ts +1 -1
  43. package/lib/AttributePanel/components/blocks/Hero/index.d.ts +1 -1
  44. package/lib/AttributePanel/components/blocks/Image/index.d.ts +1 -1
  45. package/lib/AttributePanel/components/blocks/Navbar/index.d.ts +1 -1
  46. package/lib/AttributePanel/components/blocks/Page/index.d.ts +1 -1
  47. package/lib/AttributePanel/components/blocks/Raw/index.d.ts +1 -1
  48. package/lib/AttributePanel/components/blocks/Section/index.d.ts +1 -1
  49. package/lib/AttributePanel/components/blocks/Social/index.d.ts +1 -1
  50. package/lib/AttributePanel/components/blocks/Spacer/index.d.ts +1 -1
  51. package/lib/AttributePanel/components/blocks/Table/index.d.ts +1 -1
  52. package/lib/AttributePanel/components/blocks/Text/index.d.ts +1 -1
  53. package/lib/AttributePanel/components/blocks/Wrapper/index.d.ts +1 -1
  54. package/lib/AttributePanel/components/blocks/index.d.ts +42 -42
  55. package/lib/AttributePanel/components/provider/PresetColorsProvider/index.d.ts +6 -6
  56. package/lib/AttributePanel/components/provider/SelectionRangeProvider/index.d.ts +6 -6
  57. package/lib/AttributePanel/hooks/useSelectionRange.d.ts +6 -6
  58. package/lib/AttributePanel/index.d.ts +3 -3
  59. package/lib/AttributePanel/utils/BlockAttributeConfigurationManager.d.ts +10 -10
  60. package/lib/AttributePanel/utils/InputNumberAdapter.d.ts +2 -2
  61. package/lib/AttributePanel/utils/PromiseEach.d.ts +1 -1
  62. package/lib/AttributePanel/utils/Uploader.d.ts +35 -35
  63. package/lib/AttributePanel/utils/awaitForElement.d.ts +4 -4
  64. package/lib/AttributePanel/utils/classnames.d.ts +1 -1
  65. package/lib/AttributePanel/utils/getImg.d.ts +8 -8
  66. package/lib/AttributePanel/utils/onDrag.d.ts +10 -10
  67. package/lib/AttributePanel/utils/previewLoadImage.d.ts +1 -1
  68. package/lib/BlockLayer/components/BlockTree/index.d.ts +50 -29
  69. package/lib/BlockLayer/components/BlockTree/transparentImage.d.ts +1 -0
  70. package/lib/BlockLayer/components/ContextMenu/index.d.ts +14 -14
  71. package/lib/BlockLayer/components/EyeIcon/index.d.ts +7 -7
  72. package/lib/BlockLayer/hooks/useAvatarWrapperDrop.d.ts +24 -0
  73. package/lib/BlockLayer/index.d.ts +8 -7
  74. package/lib/InteractivePrompt/components/FocusTooltip.d.ts +1 -1
  75. package/lib/InteractivePrompt/components/HoverTooltip.d.ts +1 -1
  76. package/lib/InteractivePrompt/components/Toolbar.d.ts +5 -5
  77. package/lib/InteractivePrompt/index.d.ts +1 -1
  78. package/lib/InteractivePrompt/utils/awaitForElement.d.ts +4 -4
  79. package/lib/ShortcutToolbar/ShortcutToolbar.d.ts +1 -1
  80. package/lib/ShortcutToolbar/components/BlockMaskWrapper/index.d.ts +6 -6
  81. package/lib/ShortcutToolbar/components/BlocksPanel/index.d.ts +2 -2
  82. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/AccordionBlockItem/index.d.ts +1 -1
  83. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ButtonBlockItem/index.d.ts +1 -1
  84. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/CarouselBlockItem/index.d.ts +1 -1
  85. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ColumnBlockItem/index.d.ts +1 -1
  86. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/DividerBlockItem/index.d.ts +1 -1
  87. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/GroupBlockItem/index.d.ts +1 -1
  88. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/HeroBlockItem/index.d.ts +1 -1
  89. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ImageBlockItem/index.d.ts +1 -1
  90. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/NavbarBlockItem/index.d.ts +1 -1
  91. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/RawBlockItem/index.d.ts +1 -1
  92. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SectionBlockItem/index.d.ts +1 -1
  93. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SocialBlockItem/index.d.ts +1 -1
  94. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SpacerBlockItem/index.d.ts +1 -1
  95. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/TextBlockItem/index.d.ts +1 -1
  96. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/WrapperBlockItem/index.d.ts +1 -1
  97. package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/index.d.ts +18 -18
  98. package/lib/ShortcutToolbar/components/Picture/index.d.ts +7 -7
  99. package/lib/ShortcutToolbar/index.d.ts +4 -4
  100. package/lib/ShortcutToolbar/utils/BlockMarketManager.d.ts +32 -32
  101. package/lib/ShortcutToolbar/utils/getImg.d.ts +68 -68
  102. package/lib/SimpleLayout/SimpleLayout.d.ts +2 -2
  103. package/lib/SimpleLayout/index.d.ts +1 -1
  104. package/lib/SourceCodePanel/index.d.ts +1 -1
  105. package/lib/components/AddToCollection/index.d.ts +5 -5
  106. package/lib/components/Form/AddFont.d.ts +1 -1
  107. package/lib/components/Form/AutoComplete.d.ts +11 -11
  108. package/lib/components/Form/CheckBoxGroup.d.ts +14 -14
  109. package/lib/components/Form/CodemirrorEditor/index.d.ts +8 -8
  110. package/lib/components/Form/ColorPicker.d.ts +10 -10
  111. package/lib/components/Form/EditTab.d.ts +10 -10
  112. package/lib/components/Form/ImageUploader/index.d.ts +8 -8
  113. package/lib/components/Form/InlineTextField/index.d.ts +7 -7
  114. package/lib/components/Form/Input.d.ts +7 -7
  115. package/lib/components/Form/RadioGroup.d.ts +13 -13
  116. package/lib/components/Form/RichTextField/index.d.ts +2 -2
  117. package/lib/components/Form/RichTextToolBar/RichTextToolBar.d.ts +1 -1
  118. package/lib/components/Form/RichTextToolBar/components/FontFamily/index.d.ts +3 -3
  119. package/lib/components/Form/RichTextToolBar/components/FontSizeList/index.d.ts +3 -3
  120. package/lib/components/Form/RichTextToolBar/components/Heading/index.d.ts +3 -3
  121. package/lib/components/Form/RichTextToolBar/components/Link/index.d.ts +12 -12
  122. package/lib/components/Form/RichTextToolBar/components/ToolItem/index.d.ts +7 -7
  123. package/lib/components/Form/RichTextToolBar/components/Tools/Tools.d.ts +5 -5
  124. package/lib/components/Form/RichTextToolBar/components/Tools/index.d.ts +1 -1
  125. package/lib/components/Form/RichTextToolBar/index.d.ts +1 -1
  126. package/lib/components/Form/Select.d.ts +11 -11
  127. package/lib/components/Form/UploadField.d.ts +8 -8
  128. package/lib/components/Form/enhancer.d.ts +20 -20
  129. package/lib/components/Form/index.d.ts +29 -29
  130. package/lib/components/RenderCount/index.d.ts +1 -1
  131. package/lib/components/ShadowDom/index.d.ts +2 -2
  132. package/lib/hooks/useAddToCollection.d.ts +6 -6
  133. package/lib/index.d.ts +8 -8
  134. package/lib/index.js +1 -2
  135. package/lib/index.js.map +1 -1
  136. package/lib/index2.js +1443 -1441
  137. package/lib/index2.js.map +1 -1
  138. package/lib/index3.js +1 -2
  139. package/lib/index3.js.map +1 -1
  140. package/lib/style.css +1 -1
  141. package/lib/utils/awaitForElement.d.ts +4 -4
  142. package/lib/utils/classnames.d.ts +1 -1
  143. package/package.json +4 -8
  144. package/readme.md +138 -138
  145. package/lib/BlockLayer/components/BlockTree/components/BlockTreeItem/index.d.ts +0 -23
  146. package/lib/BlockLayer/components/BlockTree/components/TreeCollapse.d.ts +0 -6
  147. package/lib/components/Form/RichTextToolBar/components/MergeTags/MergeTags.d.ts +0 -6
  148. 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, { useCallback, useState, useRef, useEffect, useMemo, Children, isValidElement, cloneElement, createContext, useContext, Component, memo, forwardRef, useLayoutEffect, createRef, useImperativeHandle, PureComponent, useReducer, createElement, Suspense } from "react";
58
- import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getEditContent, useEditorProps, getShadowRoot, FIXED_CONTAINER_ID, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
59
- import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
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
- var arco = "";
64
- const title = "_title_1gyaq_1";
65
- var styles$9 = {
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$1(picker, displayName) {
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$1(React__default.createElement(DatePicker$2, null), "DatePicker");
21752
- var MonthPicker = wrapper$1(React__default.createElement(MonthPicker$1, null), "MonthPicker");
21753
- var YearPicker = wrapper$1(React__default.createElement(YearPicker$1, null), "YearPicker");
21754
- var WeekPicker = wrapper$1(React__default.createElement(WeekPicker$1, null), "WeekPicker");
21755
- var QuarterPicker = wrapper$1(React__default.createElement(QuarterPicker$1, null), "QuarterPicker");
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$2(props, ref) {
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$2);
27596
+ var TabPaneRef = React__default.forwardRef(TabPane$1);
27905
27597
  TabPaneRef.displayName = "TabPane";
27906
27598
  TabPaneRef.isTabPane = true;
27907
- var TabPane$3 = TabPaneRef;
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$3;
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(treeNode2) {
30196
+ var handleLoadMore = useCallback(function(treeNode) {
30505
30197
  if (isFunction$5(loadMore)) {
30506
- var dataRef = treeNode2.props.dataRef;
30507
- return loadMore(treeNode2, dataRef);
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$6 = {
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 img = new Image();
31321
- img.setAttribute("crossOrigin", "Anonymous");
31322
- img.src = url;
31323
- img.onload = () => resolve(img);
31324
- img.onerror = () => resolve(img);
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$6["item"]
31219
+ className: styles$4["item"]
31396
31220
  }, /* @__PURE__ */ React__default.createElement("div", {
31397
- className: classnames(styles$6["info"])
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$6["btn-wrap"]
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$6["upload"],
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$6["item"]
31236
+ className: styles$4["item"]
31413
31237
  }, /* @__PURE__ */ React__default.createElement("div", {
31414
- className: classnames(styles$6["info"])
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$6["btn-wrap"]
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$6.wrap
31258
+ className: styles$4.wrap
31435
31259
  }, /* @__PURE__ */ React__default.createElement("div", {
31436
- className: styles$6["container"]
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 #e6e6e6",
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 #999",
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$5 = {
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$5["label-hidden"] : void 0,
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$5.helperText
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
- const { TabPane: TabPane$1 } = Tabs$1;
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$1(styles$5.editTab),
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$1, {
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
- const promiseObj = awaitForElement$1(idx);
38663
- promiseObj.promise.then((blockNode) => {
38664
- setTextContainer(blockNode);
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
- }, [idx, onChange, setFieldTouched, textContainer]);
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
- const MergeTags$1 = React__default.memo((props) => {
38902
- const { mergeTags = {} } = useEditorProps();
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: `{{${key}}}`,
38908
- value: `{{${key}}}`,
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 #f0f0f0",
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, null, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
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
- class BlockAttributeConfigurationManager {
41682
- static add(componentMap) {
41683
- Object.keys(componentMap).forEach((name) => {
41684
- this.map[name] = componentMap[name];
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
- static get(name) {
41688
- return this.map[name];
41689
- }
41690
- static getMap() {
41691
- return this.map;
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
- __publicField(BlockAttributeConfigurationManager, "map", __spreadValues({}, blocks));
41695
- function AttributePanel() {
41696
- const { values: values2, focusBlock: focusBlock2 } = useBlock();
41697
- const { initialized } = useEditorContext();
41698
- const { focusIdx: focusIdx2 } = useFocusIdx();
41699
- const value = getValueByIdx(values2, focusIdx2);
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 Decoration() {
41721
- const { focusIdx: focusIdx2 } = useFocusIdx();
41722
- return useMemo(() => {
41723
- return /* @__PURE__ */ React__default.createElement(Stack$6, {
41724
- key: focusIdx2,
41725
- vertical: true,
41726
- spacing: "extraTight"
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
- variation: "strong",
41729
- size: "large"
41730
- }, "Decoration"), /* @__PURE__ */ React__default.createElement(TextField, {
41731
- label: "Border radius",
41732
- name: `${focusIdx2}.attributes.borderRadius`,
41733
- inline: true
41734
- }), /* @__PURE__ */ React__default.createElement(TextField, {
41735
- label: "Border",
41736
- name: `${focusIdx2}.attributes.border`,
41737
- inline: true,
41738
- alignment: "center"
41739
- }), /* @__PURE__ */ React__default.createElement(NumberField, {
41740
- label: "Opacity",
41741
- max: 1,
41742
- min: 0,
41743
- step: 0.1,
41744
- name: `${focusIdx2}.attributes.opacity`,
41745
- inline: true,
41746
- alignment: "center"
41747
- }));
41748
- }, [focusIdx2]);
41749
- }
41750
- const options = [
41751
- {
41752
- value: "ltr",
41753
- label: "ltr"
41754
- },
41755
- {
41756
- value: "rtl",
41757
- label: "rtl"
41758
- }
41759
- ];
41760
- function Direction() {
41761
- const { focusIdx: focusIdx2 } = useFocusIdx();
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
- return /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(RadioGroupField, {
41764
- label: "Direction",
41765
- name: `${focusIdx2}.attributes.direction`,
41766
- options,
41767
- inline: true
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
- }, [focusIdx2]);
41770
- }
41771
- function Margin() {
41772
- const { focusIdx: focusIdx2 } = useFocusIdx();
41773
- return useMemo(() => {
41774
- return /* @__PURE__ */ React__default.createElement(Stack$6, {
41775
- vertical: true,
41776
- spacing: "extraTight"
41777
- }, /* @__PURE__ */ React__default.createElement(TextStyle, {
41778
- size: "large"
41779
- }, "Margin"), /* @__PURE__ */ React__default.createElement(Stack$6, {
41780
- wrap: false
41781
- }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
41782
- fill: true
41783
- }, /* @__PURE__ */ React__default.createElement(TextField, {
41784
- label: "Top",
41785
- quickchange: true,
41786
- name: `${focusIdx2}.attributes.marginTop`,
41787
- inline: true
41788
- })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
41789
- fill: true
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$3 = {
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$2 = {
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$2.drag);
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$2.drag);
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$2.wrapper,
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$2.mask,
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$3.BlocksPanel,
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$3.closeBtn
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$3.blockItem
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(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
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(BlocksPanel, null, /* @__PURE__ */ React__default.createElement(IconFont, {
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
- boxShadow: "0 0 12px -3px rgb(0 0 0 / 20%), 0 2px 7px -1px rgb(0 0 0 / 14%), 0 2px 4px -1px rgb(0 0 0 / 20%)",
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 onChaneCode = useCallback((event) => {
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: onChaneCode
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: "#1890ff",
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: "#1890ff",
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$1("iconfont", props.iconName)
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, null, /* @__PURE__ */ React__default.createElement("div", {
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
- borderLeft: "none",
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
- bodyStyle: { padding: 0, paddingBottom: 50 },
44641
- style: { borderBottom: "none" }
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)))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, 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