easy-email-extensions 3.0.14 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/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, getShadowRoot, FIXED_CONTAINER_ID, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, useDataTransfer, getBlockNodeByChildEle, getDirectionPosition, DATA_ATTRIBUTE_ID, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, getEditorRoot, useActiveTab, ActiveTabKeys } from "easy-email-editor";
59
+ import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getNodeIdxFromClassName, getParentIdx, getNodeIdxClassName, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, 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
@@ -39411,46 +39238,46 @@ function ContextMenu({
39411
39238
  left,
39412
39239
  top
39413
39240
  },
39414
- className: styles$7.wrap,
39241
+ className: styles$5.wrap,
39415
39242
  onClick: (e) => e.stopPropagation()
39416
39243
  }, !isFirst && /* @__PURE__ */ React__default.createElement("div", {
39417
- className: styles$7.listItem,
39244
+ className: styles$5.listItem,
39418
39245
  onClick: handleMoveUp
39419
39246
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
39420
39247
  iconName: "icon-top",
39421
39248
  style: { marginRight: 10 }
39422
39249
  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move up")), /* @__PURE__ */ React__default.createElement("div", {
39423
- className: styles$7.listItem,
39250
+ className: styles$5.listItem,
39424
39251
  onClick: handleMoveDown
39425
39252
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
39426
39253
  iconName: "icon-bottom",
39427
39254
  style: { marginRight: 10 }
39428
39255
  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Move down")), /* @__PURE__ */ React__default.createElement("div", {
39429
- className: styles$7.listItem,
39256
+ className: styles$5.listItem,
39430
39257
  onClick: handleCopy
39431
39258
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
39432
39259
  iconName: "icon-copy",
39433
39260
  style: { marginRight: 10 }
39434
39261
  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Copy")), /* @__PURE__ */ React__default.createElement("div", {
39435
- className: styles$7.listItem,
39262
+ className: styles$5.listItem,
39436
39263
  onClick: handleAddToCollection
39437
39264
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
39438
39265
  iconName: "icon-start",
39439
39266
  style: { marginRight: 10 }
39440
39267
  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection")), /* @__PURE__ */ React__default.createElement("div", {
39441
- className: styles$7.listItem,
39268
+ className: styles$5.listItem,
39442
39269
  onClick: handleDelete
39443
39270
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
39444
39271
  iconName: "icon-delete",
39445
39272
  style: { marginRight: 10 }
39446
39273
  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Delete")), /* @__PURE__ */ React__default.createElement("div", {
39447
- className: styles$7.listItem,
39274
+ className: styles$5.listItem,
39448
39275
  onClick: handleAddToCollection
39449
39276
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
39450
39277
  iconName: "icon-start",
39451
39278
  style: { marginRight: 10 }
39452
39279
  }), " ", /* @__PURE__ */ React__default.createElement(TextStyle, null, "Add to collection"))), /* @__PURE__ */ React__default.createElement("div", {
39453
- className: styles$7.contextmenuMark,
39280
+ className: styles$5.contextmenuMark,
39454
39281
  onClick: onClose,
39455
39282
  onContextMenu: (e) => {
39456
39283
  e.preventDefault();
@@ -39458,6 +39285,173 @@ function ContextMenu({
39458
39285
  }
39459
39286
  }), modal);
39460
39287
  }
39288
+ function useAvatarWrapperDrop() {
39289
+ const [blockLayerRef, setBlockLayerRef] = useState(null);
39290
+ const { setHoverIdx, setDirection } = useHoverIdx();
39291
+ const { dataTransfer, setDataTransfer } = useDataTransfer();
39292
+ const {
39293
+ formState: { values: values2 }
39294
+ } = useEditorContext();
39295
+ const valuesRef = useRef(values2);
39296
+ const dataTransferRef = useRef(dataTransfer);
39297
+ useEffect(() => {
39298
+ valuesRef.current = values2;
39299
+ }, [values2]);
39300
+ useEffect(() => {
39301
+ dataTransferRef.current = dataTransfer;
39302
+ }, [dataTransfer]);
39303
+ function isKeyObject(o) {
39304
+ return o.key !== void 0;
39305
+ }
39306
+ const removeHightLightClassName = useCallback(() => {
39307
+ if (!blockLayerRef)
39308
+ return;
39309
+ blockLayerRef.querySelectorAll(".arco-tree-node-title-gap-top, .arco-tree-node-title-gap-bottom, .arco-tree-node-title-highlight").forEach((item2) => {
39310
+ item2.classList.remove("arco-tree-node-title-gap-top", "arco-tree-node-title-gap-bottom", "arco-tree-node-title-highlight");
39311
+ });
39312
+ }, [blockLayerRef]);
39313
+ const allowDrop = useCallback((params) => {
39314
+ const { dragNode, dropNode, dropPosition } = params;
39315
+ let dragType;
39316
+ if (isKeyObject(dragNode)) {
39317
+ const blockData = lodash.exports.get(valuesRef.current, dragNode.key);
39318
+ if (!blockData)
39319
+ return false;
39320
+ dragType = blockData.type;
39321
+ } else {
39322
+ dragType = dragNode.type;
39323
+ }
39324
+ const dragBlock = BlockManager.getBlockByType(dragType);
39325
+ if (!dragBlock)
39326
+ return false;
39327
+ if (dropPosition === 0) {
39328
+ if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
39329
+ return {
39330
+ position: 0,
39331
+ key: dropNode.key
39332
+ };
39333
+ } else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
39334
+ return {
39335
+ position: -1,
39336
+ key: dropNode.key
39337
+ };
39338
+ }
39339
+ } else {
39340
+ if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
39341
+ return {
39342
+ position: dropPosition,
39343
+ key: dropNode.key
39344
+ };
39345
+ }
39346
+ }
39347
+ setDirection("");
39348
+ setHoverIdx("");
39349
+ return false;
39350
+ }, [setDirection, setHoverIdx, removeHightLightClassName]);
39351
+ useEffect(() => {
39352
+ if (blockLayerRef) {
39353
+ const onDragOver = lodash.exports.debounce((ev) => {
39354
+ var _a, _b, _c, _d;
39355
+ if (!dataTransferRef.current)
39356
+ return;
39357
+ const blockNode = getBlockNodeByChildEle(ev.target);
39358
+ if (!blockNode || !ev.target)
39359
+ return;
39360
+ const directionPosition = getDirectionPosition(ev, 5);
39361
+ const treeNodeEle = (_b = (_a = blockNode.parentNode) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
39362
+ if (!treeNodeEle)
39363
+ return;
39364
+ removeHightLightClassName();
39365
+ const dropIdx = getNodeIdxFromClassName(blockNode.classList);
39366
+ if (!dropIdx)
39367
+ return;
39368
+ const dropParentIdx = getParentIdx(dropIdx);
39369
+ const dropBlockData = lodash.exports.get(valuesRef.current, dropIdx);
39370
+ const dropParentBlockData = dropParentIdx ? lodash.exports.get(valuesRef.current, dropParentIdx) : null;
39371
+ let dropPosition = 0;
39372
+ if (directionPosition.vertical.direction === "top" && directionPosition.vertical.isEdge) {
39373
+ dropPosition = -1;
39374
+ } else if (directionPosition.vertical.direction === "bottom" && directionPosition.vertical.isEdge) {
39375
+ dropPosition = 1;
39376
+ }
39377
+ const dropResult = allowDrop({
39378
+ dragNode: {
39379
+ type: dataTransferRef.current.type
39380
+ },
39381
+ dropNode: {
39382
+ dataRef: dropBlockData,
39383
+ key: dropIdx,
39384
+ parent: dropParentBlockData
39385
+ },
39386
+ dropPosition
39387
+ });
39388
+ if (!dropResult)
39389
+ return;
39390
+ const node = (_d = (_c = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _c.parentNode) == null ? void 0 : _d.parentNode;
39391
+ if (node instanceof HTMLElement) {
39392
+ removeHightLightClassName();
39393
+ node.classList.add("arco-tree-node-title-gap-bottom");
39394
+ }
39395
+ setDirection(getDirectionFormDropPosition(dropResult.position));
39396
+ setHoverIdx(dropResult.key);
39397
+ if (dropResult.position === -1) {
39398
+ treeNodeEle.classList.add("arco-tree-node-title-gap-top");
39399
+ setDataTransfer((dataTransfer2) => {
39400
+ return __spreadProps(__spreadValues({}, dataTransfer2), {
39401
+ parentIdx: dropParentIdx,
39402
+ positionIndex: getIndexByIdx(dropIdx)
39403
+ });
39404
+ });
39405
+ } else if (dropResult.position === 1) {
39406
+ setDataTransfer((dataTransfer2) => {
39407
+ return __spreadProps(__spreadValues({}, dataTransfer2), {
39408
+ parentIdx: dropParentIdx,
39409
+ positionIndex: getIndexByIdx(dropIdx) + 1
39410
+ });
39411
+ });
39412
+ treeNodeEle.classList.add("arco-tree-node-title-gap-bottom");
39413
+ } else {
39414
+ treeNodeEle.classList.add("arco-tree-node-title-highlight");
39415
+ setDataTransfer((dataTransfer2) => {
39416
+ return __spreadProps(__spreadValues({}, dataTransfer2), {
39417
+ parentIdx: getIndexByIdx(dropIdx),
39418
+ positionIndex: 0
39419
+ });
39420
+ });
39421
+ }
39422
+ });
39423
+ const onDragend = (ev) => {
39424
+ removeHightLightClassName();
39425
+ };
39426
+ const onDrop = (ev) => {
39427
+ setTimeout(() => {
39428
+ removeHightLightClassName();
39429
+ }, 0);
39430
+ };
39431
+ blockLayerRef.addEventListener("dragover", onDragOver);
39432
+ blockLayerRef.addEventListener("drop", onDrop);
39433
+ blockLayerRef.addEventListener("dragleave", onDragend);
39434
+ return () => {
39435
+ blockLayerRef.removeEventListener("dragover", onDragOver);
39436
+ blockLayerRef.removeEventListener("drop", onDrop);
39437
+ blockLayerRef.removeEventListener("dragleave", onDragend);
39438
+ };
39439
+ }
39440
+ }, [blockLayerRef, dataTransferRef, valuesRef, removeHightLightClassName]);
39441
+ return {
39442
+ setBlockLayerRef,
39443
+ blockLayerRef,
39444
+ allowDrop,
39445
+ removeHightLightClassName
39446
+ };
39447
+ }
39448
+ function getDirectionFormDropPosition(position) {
39449
+ if (position === -1)
39450
+ return "top";
39451
+ if (position === 1)
39452
+ return "bottom";
39453
+ return "";
39454
+ }
39461
39455
  function BlockLayer() {
39462
39456
  const {
39463
39457
  pageData: pageData2,
@@ -39465,8 +39459,14 @@ function BlockLayer() {
39465
39459
  } = useEditorContext();
39466
39460
  const { onUploadImage, onAddCollection } = useEditorProps();
39467
39461
  const { focusIdx: focusIdx2, setFocusIdx } = useFocusIdx();
39468
- const { setHoverIdx } = useHoverIdx();
39462
+ const { setHoverIdx, setIsDragging, setDirection } = useHoverIdx();
39469
39463
  const { moveBlock, setValueByIdx: setValueByIdx2, copyBlock, removeBlock } = useBlock();
39464
+ const {
39465
+ setBlockLayerRef,
39466
+ allowDrop,
39467
+ blockLayerRef,
39468
+ removeHightLightClassName
39469
+ } = useAvatarWrapperDrop();
39470
39470
  const [contextMenuData, setContextMenuData] = useState(null);
39471
39471
  const onToggleVisible = useCallback(({ id }, e) => {
39472
39472
  e.stopPropagation();
@@ -39478,12 +39478,14 @@ function BlockLayer() {
39478
39478
  }, [setValueByIdx2, values2]);
39479
39479
  const renderTitle = useCallback((data) => {
39480
39480
  const block2 = BlockManager.getBlockByType(data.type);
39481
+ const isPage = data.type === BasicType.PAGE;
39481
39482
  return /* @__PURE__ */ React__default.createElement("div", {
39482
- className: styles$9.title
39483
+ "data-tree-idx": data.id,
39484
+ className: classnames(styles$6.title, !isPage && getNodeIdxClassName(data.id), !isPage && "email-block")
39483
39485
  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
39484
39486
  size: "smallest"
39485
39487
  }, block2 == null ? void 0 : block2.name), /* @__PURE__ */ React__default.createElement("div", {
39486
- className: styles$9.eyeIcon
39488
+ className: styles$6.eyeIcon
39487
39489
  }, /* @__PURE__ */ React__default.createElement(EyeIcon$1, {
39488
39490
  blockData: data,
39489
39491
  onToggleVisible
@@ -39516,35 +39518,63 @@ function BlockLayer() {
39516
39518
  const onMouseLeave = useCallback(() => {
39517
39519
  setHoverIdx("");
39518
39520
  }, [setHoverIdx]);
39519
- const allowDrop = useCallback((params) => {
39520
- const { dragNode, dropNode, willInsertAfter } = params;
39521
- const dragBlock = BlockManager.getBlockByType(dragNode.type);
39522
- if (!dragBlock)
39523
- return false;
39524
- if (dragBlock.validParentType.includes(dropNode.type) && willInsertAfter) {
39525
- return true;
39526
- }
39527
- if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
39528
- return true;
39529
- }
39530
- return false;
39531
- }, []);
39521
+ const onDragStart = useCallback(() => {
39522
+ setIsDragging(true);
39523
+ }, [setIsDragging]);
39524
+ const onDragEnd = useCallback(() => {
39525
+ setIsDragging(false);
39526
+ }, [setIsDragging]);
39532
39527
  const onDrop = useCallback((params) => {
39533
- const { dragNode, dropNode, willInsertAfter } = params;
39534
- const dragBlock = BlockManager.getBlockByType(dragNode.type);
39528
+ const { dragNode, dropNode, dropPosition } = params;
39529
+ const dragBlock = BlockManager.getBlockByType(dragNode.dataRef.type);
39535
39530
  if (!dragBlock)
39536
- return;
39537
- if (dragBlock.validParentType.includes(dropNode.type) && willInsertAfter) {
39538
- moveBlock(dragNode.id, getChildIdx(dropNode.id, 0));
39531
+ return false;
39532
+ const dropIndex = getIndexByIdx(dropNode.key);
39533
+ if (dropPosition === 0) {
39534
+ if (dragBlock.validParentType.includes(dropNode.dataRef.type) && dropNode.dataRef.children.length === 0) {
39535
+ moveBlock(dragNode.key, getChildIdx(dropNode.key, 0));
39536
+ } else if (dropNode.parent && dragBlock.validParentType.includes(dropNode.parent.type)) {
39537
+ moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropIndex));
39538
+ }
39539
39539
  } else {
39540
- moveBlock(dragNode.id, willInsertAfter ? getSiblingIdx(dropNode.id, 1) : dropNode.id);
39540
+ moveBlock(dragNode.key, getChildIdx(dropNode.parentKey, dropPosition > 0 ? dropIndex + 1 : dropIndex));
39541
39541
  }
39542
39542
  }, [moveBlock]);
39543
+ useEffect(() => {
39544
+ if (!blockLayerRef)
39545
+ return;
39546
+ if (focusIdx2) {
39547
+ setTimeout(() => {
39548
+ const selectedNode = blockLayerRef.querySelector(`[${DATA_ATTRIBUTE_ID}="${focusIdx2}"]`);
39549
+ if (selectedNode) {
39550
+ selectedNode.scrollIntoView({
39551
+ block: "center",
39552
+ behavior: "smooth"
39553
+ });
39554
+ }
39555
+ }, 50);
39556
+ }
39557
+ }, [blockLayerRef, focusIdx2]);
39558
+ const blockTreeAllowDrop = useCallback((data) => {
39559
+ var _a, _b;
39560
+ const dropResult = allowDrop(data);
39561
+ if (dropResult) {
39562
+ const node = (_b = (_a = document.querySelector(`[data-tree-idx="${dropResult.key}"]`)) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.parentNode;
39563
+ if (node instanceof HTMLElement) {
39564
+ removeHightLightClassName();
39565
+ node.classList.add("arco-tree-node-title-gap-bottom");
39566
+ }
39567
+ setDirection(getDirectionFormDropPosition(dropResult.position));
39568
+ setHoverIdx(dropResult.key);
39569
+ }
39570
+ return dropResult;
39571
+ }, [allowDrop]);
39543
39572
  const hasFocus = Boolean(focusIdx2);
39544
39573
  return useMemo(() => {
39545
39574
  if (!hasFocus)
39546
39575
  return null;
39547
39576
  return /* @__PURE__ */ React__default.createElement("div", __spreadValues({
39577
+ ref: setBlockLayerRef,
39548
39578
  id: "BlockLayerManager"
39549
39579
  }, {
39550
39580
  [DATA_ATTRIBUTE_DROP_CONTAINER]: "true"
@@ -39553,9 +39583,11 @@ function BlockLayer() {
39553
39583
  defaultExpandAll: true,
39554
39584
  treeData,
39555
39585
  renderTitle,
39556
- allowDrop,
39586
+ allowDrop: blockTreeAllowDrop,
39557
39587
  onContextMenu,
39558
39588
  onDrop,
39589
+ onDragStart,
39590
+ onDragEnd,
39559
39591
  onSelect,
39560
39592
  onMouseEnter,
39561
39593
  onMouseLeave
@@ -39583,7 +39615,9 @@ function BlockLayer() {
39583
39615
  onAddCollection,
39584
39616
  moveBlock,
39585
39617
  copyBlock,
39586
- removeBlock
39618
+ removeBlock,
39619
+ onDragEnd,
39620
+ onDragStart
39587
39621
  ]);
39588
39622
  }
39589
39623
  function Help(props) {
@@ -39815,10 +39849,6 @@ const MergeTags = React__default.memo((props) => {
39815
39849
  onSelect: (vals) => onSelect(vals[0])
39816
39850
  }));
39817
39851
  });
39818
- const wrapper = "_wrapper_j840r_1";
39819
- var styles$4 = {
39820
- wrapper
39821
- };
39822
39852
  const AttributesPanelWrapper = (props) => {
39823
39853
  const { focusBlock: focusBlock2, setFocusBlock } = useBlock();
39824
39854
  const { mergeTags } = useEditorProps();
@@ -39831,11 +39861,9 @@ const AttributesPanelWrapper = (props) => {
39831
39861
  }, [focusBlock2, setFocusBlock]);
39832
39862
  if (!focusBlock2 || !block2)
39833
39863
  return null;
39834
- return /* @__PURE__ */ React__default.createElement("div", {
39835
- className: styles$4.wrapper
39836
- }, /* @__PURE__ */ React__default.createElement("div", {
39864
+ return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
39837
39865
  style: {
39838
- border: "1px solid #f0f0f0",
39866
+ border: "1px solid var(--color-neutral-3, rgb(229, 230, 235))",
39839
39867
  borderBottom: "none",
39840
39868
  padding: "12px 24px"
39841
39869
  }
@@ -39850,7 +39878,10 @@ const AttributesPanelWrapper = (props) => {
39850
39878
  }, /* @__PURE__ */ React__default.createElement(Stack$6, {
39851
39879
  spacing: "extraTight",
39852
39880
  alignment: "center"
39853
- }, /* @__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, {
39881
+ }, /* @__PURE__ */ React__default.createElement(EyeIcon, null), /* @__PURE__ */ React__default.createElement(TextStyle, {
39882
+ variation: "strong",
39883
+ size: "large"
39884
+ }, `${block2.name} attributes`)), /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, props.extra))), Boolean(focusBlock2.data.hidden) && mergeTags && /* @__PURE__ */ React__default.createElement(Stack$6, {
39854
39885
  spacing: "extraTight"
39855
39886
  }, /* @__PURE__ */ React__default.createElement(TextStyle, null, "Hide if"), /* @__PURE__ */ React__default.createElement(MergeTags, {
39856
39887
  isSelect: true,
@@ -39877,8 +39908,10 @@ function EyeIcon() {
39877
39908
  if (focusBlock2.type === BasicType.PAGE)
39878
39909
  return null;
39879
39910
  return focusBlock2.data.hidden ? /* @__PURE__ */ React__default.createElement(IconEyeInvisible$1, {
39911
+ style: { cursor: "pointer", fontSize: 18 },
39880
39912
  onClick: onToggleVisible
39881
39913
  }) : /* @__PURE__ */ React__default.createElement(IconEye$1, {
39914
+ style: { cursor: "pointer", fontSize: 18 },
39882
39915
  onClick: onToggleVisible
39883
39916
  });
39884
39917
  }
@@ -40005,10 +40038,10 @@ function Padding(props = {}) {
40005
40038
  bottom,
40006
40039
  right
40007
40040
  };
40008
- }, [paddingList, defaultPaddingList]);
40041
+ }, [paddingList, defaultPaddingList, defaultPaddingValue, paddingValue]);
40009
40042
  const onChancePadding = useCallback((val) => {
40010
40043
  change(focusIdx2 + `.attributes[${attributeName}]`, val);
40011
- }, [focusIdx2, attributeName]);
40044
+ }, [focusIdx2, attributeName, change]);
40012
40045
  return /* @__PURE__ */ React__default.createElement(Form$3, {
40013
40046
  initialValues: paddingFormValues,
40014
40047
  subscription: { submitting: true, pristine: true },
@@ -41821,7 +41854,7 @@ function Margin() {
41821
41854
  const BlocksPanel$1 = "_BlocksPanel_15fho_1";
41822
41855
  const blockItem = "_blockItem_15fho_5";
41823
41856
  const closeBtn = "_closeBtn_15fho_12";
41824
- var styles$3 = {
41857
+ var styles$2 = {
41825
41858
  BlocksPanel: BlocksPanel$1,
41826
41859
  blockItem,
41827
41860
  closeBtn
@@ -41879,7 +41912,7 @@ __publicField(BlockMarketManager, "category", []);
41879
41912
  __publicField(BlockMarketManager, "subscriptHandles", []);
41880
41913
  const mask = "_mask_1a0xw_1";
41881
41914
  const drag = "_drag_1a0xw_12";
41882
- var styles$2 = {
41915
+ var styles$1 = {
41883
41916
  mask,
41884
41917
  drag
41885
41918
  };
@@ -41889,7 +41922,7 @@ const BlockMaskWrapper = (props) => {
41889
41922
  const { type, payload } = props;
41890
41923
  const onMouseDown = useCallback(() => {
41891
41924
  if (ref.current) {
41892
- ref.current.classList.add(styles$2.drag);
41925
+ ref.current.classList.add(styles$1.drag);
41893
41926
  }
41894
41927
  }, []);
41895
41928
  const onMaskMouseDown = useCallback((ev) => {
@@ -41901,7 +41934,7 @@ const BlockMaskWrapper = (props) => {
41901
41934
  useEffect(() => {
41902
41935
  const mouseup = () => {
41903
41936
  if (ref.current) {
41904
- ref.current.classList.remove(styles$2.drag);
41937
+ ref.current.classList.remove(styles$1.drag);
41905
41938
  }
41906
41939
  };
41907
41940
  document.addEventListener("mouseup", mouseup);
@@ -41912,7 +41945,7 @@ const BlockMaskWrapper = (props) => {
41912
41945
  return /* @__PURE__ */ React__default.createElement("div", {
41913
41946
  style: { position: "relative" }
41914
41947
  }, props.children, /* @__PURE__ */ React__default.createElement("div", {
41915
- className: styles$2.wrapper,
41948
+ className: styles$1.wrapper,
41916
41949
  style: {
41917
41950
  position: "absolute",
41918
41951
  height: "100%",
@@ -41927,7 +41960,7 @@ const BlockMaskWrapper = (props) => {
41927
41960
  payload
41928
41961
  }, /* @__PURE__ */ React__default.createElement("div", {
41929
41962
  ref,
41930
- className: styles$2.mask,
41963
+ className: styles$1.mask,
41931
41964
  onMouseDown: onMaskMouseDown
41932
41965
  }, /* @__PURE__ */ React__default.createElement("div", {
41933
41966
  ref: dragRef,
@@ -43973,13 +44006,13 @@ const BlocksPanel = (props) => {
43973
44006
  }, /* @__PURE__ */ React__default.createElement("div", {
43974
44007
  onClick: toggleVisible
43975
44008
  }, props.children), ele && visible && createPortal(/* @__PURE__ */ React__default.createElement("div", {
43976
- className: styles$3.BlocksPanel,
44009
+ className: styles$2.BlocksPanel,
43977
44010
  style: {
43978
44011
  pointerEvents: isDragging ? "none" : void 0,
43979
44012
  position: "fixed",
43980
44013
  width: isDragging ? 0 : 650,
44014
+ backgroundColor: "var(--color-bg-2)",
43981
44015
  zIndex: 200,
43982
- top: 0,
43983
44016
  left: 60,
43984
44017
  maxHeight: "85vh",
43985
44018
  transition: "width .5s",
@@ -43989,7 +44022,7 @@ const BlocksPanel = (props) => {
43989
44022
  bodyStyle: { padding: 0 },
43990
44023
  title: "Drag block",
43991
44024
  extra: /* @__PURE__ */ React__default.createElement("div", {
43992
- className: styles$3.closeBtn
44025
+ className: styles$2.closeBtn
43993
44026
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
43994
44027
  iconName: "icon-close",
43995
44028
  onClick: toggleVisible
@@ -44000,7 +44033,8 @@ const BlocksPanel = (props) => {
44000
44033
  }, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
44001
44034
  style: {
44002
44035
  padding: 0,
44003
- overflow: "auto"
44036
+ overflow: "auto",
44037
+ height: 500
44004
44038
  },
44005
44039
  key: category.title,
44006
44040
  title: /* @__PURE__ */ React__default.createElement("div", {
@@ -44015,17 +44049,16 @@ const BlocksPanel = (props) => {
44015
44049
  };
44016
44050
  const BlockPanelItem = React__default.memo((props) => {
44017
44051
  return /* @__PURE__ */ React__default.createElement(Tabs$1, {
44018
- style: { padding: "20px 0" },
44019
44052
  tabPosition: "left"
44020
44053
  }, props.category.blocks.map((block2, index2) => {
44021
44054
  return /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
44022
- style: { padding: 0 },
44055
+ style: { padding: 0, height: 500 },
44023
44056
  key: block2.title,
44024
44057
  title: /* @__PURE__ */ React__default.createElement(Stack$6, {
44025
44058
  alignment: "center",
44026
44059
  spacing: "extraTight"
44027
44060
  }, /* @__PURE__ */ React__default.createElement("div", {
44028
- className: styles$3.blockItem
44061
+ className: styles$2.blockItem
44029
44062
  }, block2.title), block2.description && /* @__PURE__ */ React__default.createElement(Help, {
44030
44063
  title: block2.description
44031
44064
  }))
@@ -44042,11 +44075,14 @@ const BlockPanelItem = React__default.memo((props) => {
44042
44075
  }));
44043
44076
  });
44044
44077
  function ShortcutToolbar() {
44078
+ const blocksPanelRef = useRef(null);
44045
44079
  return /* @__PURE__ */ React__default.createElement(Stack$6, {
44046
44080
  vertical: true,
44047
44081
  alignment: "center",
44048
44082
  distribution: "center"
44049
- }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
44083
+ }, /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement("div", {
44084
+ ref: blocksPanelRef
44085
+ })), /* @__PURE__ */ React__default.createElement(BlockAvatarWrapper, {
44050
44086
  type: BasicType.TEXT
44051
44087
  }, /* @__PURE__ */ React__default.createElement(IconFont, {
44052
44088
  title: "Text",
@@ -44090,22 +44126,25 @@ function ShortcutToolbar() {
44090
44126
  cursor: "move",
44091
44127
  color: "#e5afe5"
44092
44128
  }
44093
- })), /* @__PURE__ */ React__default.createElement(BlocksPanel, null, /* @__PURE__ */ React__default.createElement(IconFont, {
44129
+ })), /* @__PURE__ */ React__default.createElement(IconFont, {
44130
+ onClick: () => {
44131
+ var _a;
44132
+ return (_a = blocksPanelRef.current) == null ? void 0 : _a.click();
44133
+ },
44094
44134
  iconName: "icon-more",
44095
44135
  style: {
44096
44136
  display: "flex",
44097
44137
  alignItems: "center",
44098
44138
  justifyContent: "center",
44099
- color: "#000",
44100
44139
  width: 30,
44101
44140
  height: 30,
44102
44141
  borderRadius: "50%",
44103
- 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%)",
44142
+ color: "var(--color-text-2)",
44143
+ boxShadow: "0 0 12px -3px var(--color-text-2)",
44104
44144
  fontSize: 18
44105
44145
  }
44106
- })));
44146
+ }));
44107
44147
  }
44108
- var styles$1 = {};
44109
44148
  function SourceCodePanel() {
44110
44149
  const { setValueByIdx, focusBlock, values } = useBlock();
44111
44150
  const { focusIdx } = useFocusIdx();
@@ -44116,7 +44155,7 @@ function SourceCodePanel() {
44116
44155
  return "";
44117
44156
  return JSON.stringify(focusBlock, null, 2) || "";
44118
44157
  }, [focusBlock]);
44119
- const onChaneCode = useCallback((event) => {
44158
+ const onChangeCode = useCallback((event) => {
44120
44159
  try {
44121
44160
  const parseValue = JSON.parse(JSON.stringify(eval("(" + event.target.value + ")")));
44122
44161
  const block = BlockManager.getBlockByType(parseValue.type);
@@ -44161,9 +44200,7 @@ function SourceCodePanel() {
44161
44200
  }, [focusBlock, focusIdx, pageData]);
44162
44201
  if (!focusBlock)
44163
44202
  return null;
44164
- return /* @__PURE__ */ React__default.createElement(Collapse$1, {
44165
- className: styles$1.wrapper
44166
- }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
44203
+ return /* @__PURE__ */ React__default.createElement(Collapse$1, null, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
44167
44204
  name: "json",
44168
44205
  header: "Json source",
44169
44206
  contentStyle: { padding: "8px 13px" }
@@ -44171,7 +44208,7 @@ function SourceCodePanel() {
44171
44208
  key: code,
44172
44209
  defaultValue: code,
44173
44210
  autoSize: { maxRows: 25 },
44174
- onBlur: onChaneCode
44211
+ onBlur: onChangeCode
44175
44212
  })), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
44176
44213
  name: "mjml",
44177
44214
  header: "MJML source",
@@ -44225,7 +44262,7 @@ function Toolbar({
44225
44262
  }, /* @__PURE__ */ React__default.createElement("div", {
44226
44263
  style: {
44227
44264
  color: "#ffffff",
44228
- backgroundColor: "#1890ff",
44265
+ backgroundColor: "var(--selected-color)",
44229
44266
  height: "22px",
44230
44267
  display: "inline-flex",
44231
44268
  padding: "1px 5px",
@@ -44265,7 +44302,7 @@ function ToolItem(props) {
44265
44302
  onClick: props.onClick,
44266
44303
  style: {
44267
44304
  color: "#ffffff",
44268
- backgroundColor: "#1890ff",
44305
+ backgroundColor: "var(--selected-color)",
44269
44306
  height: 22,
44270
44307
  fontSize: props.width || 14,
44271
44308
  lineHeight: "22px",
@@ -44275,7 +44312,7 @@ function ToolItem(props) {
44275
44312
  cursor: "pointer",
44276
44313
  justifyContent: "center"
44277
44314
  },
44278
- className: classnames$1("iconfont", props.iconName)
44315
+ className: classnames("iconfont", props.iconName)
44279
44316
  });
44280
44317
  }
44281
44318
  function FocusTooltip() {
@@ -44620,10 +44657,9 @@ var styles = {
44620
44657
  container,
44621
44658
  customScrollBar
44622
44659
  };
44623
- const { TabPane } = Tabs$1;
44624
44660
  const SimpleLayout = (props) => {
44625
44661
  const { height: containerHeight } = useEditorProps();
44626
- return /* @__PURE__ */ React__default.createElement(Layout$1, null, /* @__PURE__ */ React__default.createElement("div", {
44662
+ return /* @__PURE__ */ React__default.createElement(Layout$1, {
44627
44663
  style: {
44628
44664
  display: "flex",
44629
44665
  width: "100vw",
@@ -44631,40 +44667,38 @@ const SimpleLayout = (props) => {
44631
44667
  minWidth: 1400
44632
44668
  }
44633
44669
  }, /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
44634
- theme: "light",
44635
- width: 60,
44636
- style: { border: "1px solid #f0f0f0" }
44637
- }, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
44638
44670
  style: {
44639
- borderLeft: "none",
44671
+ width: 360
44672
+ }
44673
+ }, /* @__PURE__ */ React__default.createElement(Card$1, {
44674
+ bodyStyle: { padding: 0 },
44675
+ style: { border: "none" }
44676
+ }, /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
44677
+ style: { width: 60 }
44678
+ }, /* @__PURE__ */ React__default.createElement(ShortcutToolbar, null)), /* @__PURE__ */ React__default.createElement(Card$1.Grid, {
44679
+ className: styles.customScrollBar,
44680
+ style: {
44681
+ width: 300,
44682
+ paddingBottom: 50,
44683
+ border: "none",
44640
44684
  height: containerHeight,
44641
44685
  overflow: "auto"
44642
- },
44643
- className: styles.customScrollBar,
44644
- theme: "light",
44645
- width: 300
44686
+ }
44646
44687
  }, /* @__PURE__ */ React__default.createElement(Card$1, {
44647
- bodyStyle: { padding: 0, paddingBottom: 50 },
44648
- style: { borderBottom: "none" }
44649
- }, /* @__PURE__ */ React__default.createElement(Tabs$1, {
44650
- style: { borderLeft: "none" },
44651
- defaultActiveTab: "Layout"
44652
- }, /* @__PURE__ */ React__default.createElement(TabPane, {
44653
- style: { paddingTop: 10 },
44654
- key: "Layout",
44655
- title: "Layout"
44688
+ title: "Layout",
44689
+ style: { border: "none" }
44656
44690
  }, /* @__PURE__ */ React__default.createElement(BlockLayer, null))))), /* @__PURE__ */ React__default.createElement(Layout$1, {
44657
44691
  style: { height: containerHeight }
44658
44692
  }, props.children), /* @__PURE__ */ React__default.createElement(Layout$1.Sider, {
44659
44693
  style: { height: containerHeight },
44660
- theme: "light",
44661
44694
  width: 350
44662
44695
  }, /* @__PURE__ */ React__default.createElement(Card$1, {
44663
44696
  size: "small",
44664
44697
  id: "rightSide",
44665
44698
  style: {
44666
44699
  maxHeight: "100%",
44667
- height: "100%"
44700
+ height: "100%",
44701
+ borderLeft: "none"
44668
44702
  },
44669
44703
  bodyStyle: { padding: 0 },
44670
44704
  className: styles.customScrollBar
@@ -44675,7 +44709,7 @@ const SimpleLayout = (props) => {
44675
44709
  }, /* @__PURE__ */ React__default.createElement(AttributePanel, null)), /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
44676
44710
  key: "Source code",
44677
44711
  title: "Source code"
44678
- }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null)))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
44712
+ }, /* @__PURE__ */ React__default.createElement(SourceCodePanel, null))))), /* @__PURE__ */ React__default.createElement(InteractivePrompt, null));
44679
44713
  };
44680
44714
  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 };
44681
44715
  //# sourceMappingURL=index2.js.map