easy-email-extensions 3.0.6 → 3.0.10

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 (143) 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/components/BlockTreeItem/index.d.ts +23 -23
  69. package/lib/BlockLayer/components/BlockTree/components/TreeCollapse.d.ts +6 -6
  70. package/lib/BlockLayer/components/BlockTree/index.d.ts +29 -29
  71. package/lib/BlockLayer/components/ContextMenu/index.d.ts +14 -14
  72. package/lib/BlockLayer/components/EyeIcon/index.d.ts +7 -7
  73. package/lib/BlockLayer/index.d.ts +7 -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/{ChexkBoxGroup.d.ts → 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 -8
  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 +3 -3
  117. package/lib/components/Form/RichTextToolBar/RichTextToolBar.d.ts +1 -0
  118. package/lib/components/Form/{RichTextField → RichTextToolBar}/components/FontFamily/index.d.ts +3 -3
  119. package/lib/components/Form/{RichTextField → RichTextToolBar}/components/FontSizeList/index.d.ts +3 -3
  120. package/lib/components/Form/{RichTextField → RichTextToolBar}/components/Heading/index.d.ts +3 -3
  121. package/lib/components/Form/{RichTextField → RichTextToolBar}/components/Link/index.d.ts +12 -12
  122. package/lib/components/Form/{RichTextField/components/TextToolbar → RichTextToolBar/components/MergeTags}/MergeTags.d.ts +6 -6
  123. package/lib/components/Form/RichTextToolBar/components/MergeTags/index.d.ts +1 -0
  124. package/lib/components/Form/{RichTextField → RichTextToolBar}/components/ToolItem/index.d.ts +7 -7
  125. package/lib/components/Form/RichTextToolBar/components/Tools/Tools.d.ts +5 -0
  126. package/lib/components/Form/RichTextToolBar/components/Tools/index.d.ts +1 -0
  127. package/lib/components/Form/RichTextToolBar/index.d.ts +1 -0
  128. package/lib/components/Form/Select.d.ts +11 -11
  129. package/lib/components/Form/UploadField.d.ts +8 -8
  130. package/lib/components/Form/enhancer.d.ts +20 -20
  131. package/lib/components/Form/index.d.ts +29 -29
  132. package/lib/components/RenderCount/index.d.ts +1 -0
  133. package/lib/components/ShadowDom/index.d.ts +2 -2
  134. package/lib/hooks/useAddToCollection.d.ts +6 -6
  135. package/lib/index.d.ts +8 -8
  136. package/lib/index2.js +335 -295
  137. package/lib/index2.js.map +1 -1
  138. package/lib/index3.js.map +1 -1
  139. package/lib/utils/awaitForElement.d.ts +4 -4
  140. package/lib/utils/classnames.d.ts +1 -1
  141. package/package.json +13 -3
  142. package/readme.md +138 -138
  143. package/lib/components/Form/RichTextField/components/TextToolbar/index.d.ts +0 -5
package/lib/index2.js CHANGED
@@ -55,10 +55,10 @@ var __async = (__this, __arguments, generator) => {
55
55
  };
56
56
  import * as React from "react";
57
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, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useFocusIdx, useActiveTab, scrollBlockEleIntoView, useEditorContext, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, ActiveTabKeys } from "easy-email-editor";
58
+ import { IconFont, Stack as Stack$6, TextStyle, getBlockNodeByIdx, useBlock, getEditNode, getShadowRoot, FIXED_CONTAINER_ID, getEditContent, getEditorRoot, useEditorProps, useEditorContext, useFocusIdx, scrollBlockEleIntoView, useHoverIdx, DATA_ATTRIBUTE_DROP_CONTAINER, BlockAvatarWrapper, useActiveTab, ActiveTabKeys } from "easy-email-editor";
59
59
  import { BasicType, ImageManager, getIndexByIdx, getSiblingIdx, BlockManager, getPageIdx, getChildIdx, createBlockDataByType, getParentByIdx, getValueByIdx, MjmlToJson, JsonToMjml, getParentIdx, getNodeTypeFromClassName } from "easy-email-core";
60
60
  import { ReactSortable } from "react-sortablejs";
61
- import { useForm as useForm$1, useField, Form as Form$3, version as version$2 } from "react-final-form";
61
+ import { useField, Field, useForm as useForm$1, Form as Form$3, version as version$2, useFormState } from "react-final-form";
62
62
  import ReactDOM, { findDOMNode, createPortal } from "react-dom";
63
63
  var arco = "";
64
64
  const title = "_title_1gyaq_1";
@@ -38483,75 +38483,88 @@ function enhancer(Component2, changeAdapter) {
38483
38483
  "wrapper",
38484
38484
  "debounceTime"
38485
38485
  ]);
38486
- const id = useMemo(() => {
38487
- return `enhancer-${primaryId++}`;
38488
- }, []);
38489
- const { change, mutators } = useForm$1();
38490
38486
  const {
38491
- input: { value, onBlur: onBlur3 },
38492
- meta: { touched, error: error2 }
38487
+ input: { value, onChange }
38493
38488
  } = useField(name, {
38494
38489
  validate: validate3
38495
38490
  });
38496
- const onFieldChange = useCallback(lodash.exports.debounce((e) => {
38497
- const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
38498
- change(name, newVal);
38499
- onBlur3();
38500
- }), [change, name, onBlur3, onChangeAdapter]);
38501
- if (!wrapper2)
38502
- return /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({}, rest), {
38503
- mutators,
38491
+ const [currentValue, setCurrentValue] = useState(value);
38492
+ const debounceCallbackChange = useCallback(lodash.exports.debounce((val) => {
38493
+ onChange(val);
38494
+ }, 100, {
38495
+ maxWait: 500
38496
+ }), []);
38497
+ useEffect(() => {
38498
+ setCurrentValue(value);
38499
+ }, [value]);
38500
+ const id = useMemo(() => {
38501
+ return `enhancer-${primaryId++}`;
38502
+ }, []);
38503
+ return /* @__PURE__ */ React__default.createElement(Field, {
38504
+ name,
38505
+ validate: validate3
38506
+ }, ({ input: { onBlur: onBlur3 }, meta: { touched, error: error2 } }) => {
38507
+ const onFieldChange = useCallback((e) => {
38508
+ const newVal = onChangeAdapter ? onChangeAdapter(changeAdapter(e)) : changeAdapter(e);
38509
+ setCurrentValue(newVal);
38510
+ debounceCallbackChange(newVal);
38511
+ onBlur3();
38512
+ }, [onBlur3, onChangeAdapter, debounceCallbackChange]);
38513
+ if (!wrapper2)
38514
+ return /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({}, rest), {
38515
+ id,
38516
+ name,
38517
+ checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
38518
+ value: valueAdapter ? valueAdapter(currentValue) : currentValue,
38519
+ onChange: onFieldChange
38520
+ }));
38521
+ return /* @__PURE__ */ React__default.createElement(Form.Item, {
38522
+ noStyle: true,
38523
+ validateStatus: touched && error2 ? "error" : void 0,
38524
+ help: touched && error2
38525
+ }, /* @__PURE__ */ React__default.createElement(Stack$6, {
38526
+ vertical: true,
38527
+ spacing: "extraTight"
38528
+ }, /* @__PURE__ */ React__default.createElement(Stack$6, {
38529
+ spacing: inline ? void 0 : "extraTight",
38530
+ wrap: false,
38531
+ vertical: !inline,
38532
+ alignment: alignment ? alignment : inline ? "center" : void 0,
38533
+ distribution
38534
+ }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
38535
+ className: labelHidden2 ? styles$5["label-hidden"] : void 0,
38536
+ htmlFor: id
38537
+ }, /* @__PURE__ */ React__default.createElement("span", {
38538
+ style: { whiteSpace: "pre" }
38539
+ }, required && /* @__PURE__ */ React__default.createElement("span", {
38540
+ style: { color: "#ff4d4f" }
38541
+ }, "* "), /* @__PURE__ */ React__default.createElement(TextStyle, {
38542
+ size: size === "small" ? "smallest" : "small"
38543
+ }, label)))), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
38544
+ fill: inline
38545
+ }, /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
38546
+ size
38547
+ }, rest), {
38504
38548
  id,
38505
38549
  name,
38506
- checked: valueAdapter ? valueAdapter(value) : value,
38507
- value: valueAdapter ? valueAdapter(value) : value,
38550
+ checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
38551
+ value: valueAdapter ? valueAdapter(currentValue) : currentValue,
38508
38552
  onChange: onFieldChange
38509
- }));
38510
- return /* @__PURE__ */ React__default.createElement(Form.Item, {
38511
- noStyle: true,
38512
- validateStatus: touched && error2 ? "error" : void 0,
38513
- help: touched && error2
38514
- }, /* @__PURE__ */ React__default.createElement(Stack$6, {
38515
- vertical: true,
38516
- spacing: "extraTight"
38517
- }, /* @__PURE__ */ React__default.createElement(Stack$6, {
38518
- spacing: inline ? void 0 : "extraTight",
38519
- wrap: false,
38520
- vertical: !inline,
38521
- alignment: alignment ? alignment : inline ? "center" : void 0,
38522
- distribution
38523
- }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null, /* @__PURE__ */ React__default.createElement("label", {
38524
- className: labelHidden2 ? styles$5["label-hidden"] : void 0,
38525
- htmlFor: id
38526
- }, /* @__PURE__ */ React__default.createElement("span", {
38527
- style: { whiteSpace: "pre" }
38528
- }, required && /* @__PURE__ */ React__default.createElement("span", {
38529
- style: { color: "#ff4d4f" }
38530
- }, "* "), /* @__PURE__ */ React__default.createElement(TextStyle, {
38531
- size: size === "small" ? "smallest" : "small"
38532
- }, label)))), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
38533
- fill: inline
38534
- }, /* @__PURE__ */ React__default.createElement(Component2, __spreadProps(__spreadValues({
38535
- size
38536
- }, rest), {
38537
- mutators,
38538
- id,
38539
- name,
38540
- checked: valueAdapter ? valueAdapter(value) : value,
38541
- value: valueAdapter ? valueAdapter(value) : value,
38542
- onChange: onFieldChange
38543
- })))), /* @__PURE__ */ React__default.createElement("div", {
38544
- className: styles$5.helperText
38545
- }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
38553
+ })))), /* @__PURE__ */ React__default.createElement("div", {
38554
+ className: styles$5.helperText
38555
+ }, /* @__PURE__ */ React__default.createElement("small", null, helpText))));
38556
+ });
38546
38557
  };
38547
38558
  }
38548
38559
  function Input(props) {
38549
38560
  const { quickchange, value = "", onKeyDown: onPropsKeyDown } = props;
38550
38561
  const onChange = useCallback((val) => {
38551
38562
  props.onChange(val);
38552
- }, [props]);
38563
+ }, [props.onChange]);
38553
38564
  const onKeyDown = useCallback((ev) => {
38554
- onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
38565
+ if (onPropsKeyDown) {
38566
+ onPropsKeyDown == null ? void 0 : onPropsKeyDown(ev);
38567
+ }
38555
38568
  if (quickchange) {
38556
38569
  let step = 0;
38557
38570
  if (ev.key === "ArrowUp") {
@@ -38562,6 +38575,7 @@ function Input(props) {
38562
38575
  }
38563
38576
  if (step) {
38564
38577
  if (/^\d+/.test(value)) {
38578
+ ev.preventDefault();
38565
38579
  onChange(String(value).replace(/^(\d+)/, (_, match) => {
38566
38580
  return (Number(match) + step).toString();
38567
38581
  }));
@@ -38574,7 +38588,7 @@ function Input(props) {
38574
38588
  onKeyDown
38575
38589
  }));
38576
38590
  }
38577
- function ChexkBoxGroup(props) {
38591
+ function CheckBoxGroup(props) {
38578
38592
  const _a = props, { vertical = false } = _a, rest = __objRest(_a, ["vertical"]);
38579
38593
  return /* @__PURE__ */ React__default.createElement(Checkbox$1.Group, {
38580
38594
  style: lodash.exports.merge({ width: "100%" }, rest.style),
@@ -38637,12 +38651,10 @@ function awaitForElement$1(idx) {
38637
38651
  });
38638
38652
  return promiseObj;
38639
38653
  }
38640
- function InlineText({
38641
- idx,
38642
- onChange,
38643
- children,
38644
- mutators: { setFieldTouched }
38645
- }) {
38654
+ function InlineText({ idx, onChange, children }) {
38655
+ const {
38656
+ mutators: { setFieldTouched }
38657
+ } = useForm$1();
38646
38658
  const [isFocus, setIsFocus] = useState(false);
38647
38659
  const [textContainer, setTextContainer] = useState(null);
38648
38660
  useField(idx);
@@ -38733,64 +38745,46 @@ function InlineText({
38733
38745
  }
38734
38746
  function AutoComplete(props) {
38735
38747
  const options2 = useMemo(() => {
38748
+ const selectedValue = (props.value || "").toLowerCase();
38736
38749
  return props.options.filter((item2) => {
38737
- return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(props.value.toLowerCase()) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(props.value.toLowerCase());
38750
+ return lodash.exports.isString(item2.value) && item2.value.toLowerCase().startsWith(selectedValue) || lodash.exports.isString(item2.label) && item2.label.toLowerCase().startsWith(selectedValue);
38738
38751
  }).map((item2) => __spreadProps(__spreadValues({}, item2), { name: item2.label }));
38739
38752
  }, [props.options, props.value]);
38740
38753
  return /* @__PURE__ */ React__default.createElement(ArcoAutoComplete, __spreadProps(__spreadValues({}, props), {
38741
38754
  data: options2
38742
38755
  }));
38743
38756
  }
38744
- const isMouseEvent = (event2) => !!(event2.type.indexOf("mouse") !== -1);
38745
- const onDrag = ({
38746
- event: event2,
38747
- onMove,
38748
- onEnd
38749
- }) => {
38750
- event2.preventDefault();
38751
- event2.stopPropagation();
38752
- let initX = 0;
38753
- let initY = 0;
38754
- if (isMouseEvent(event2)) {
38755
- initX = event2.clientX;
38756
- initY = event2.clientY;
38757
- } else {
38758
- initX = event2.touches[0].clientX;
38759
- initY = event2.touches[0].clientY;
38760
- }
38761
- const onDragMove = lodash.exports.debounce((mEvt) => {
38762
- let movX = 0;
38763
- let movY = 0;
38764
- if (isMouseEvent(mEvt)) {
38765
- movX = mEvt.clientX;
38766
- movY = mEvt.clientY;
38767
- } else {
38768
- movX = mEvt.touches[0].clientX;
38769
- movY = mEvt.touches[0].clientY;
38757
+ function awaitForElement(idx) {
38758
+ let promiseObj = {
38759
+ cancel: () => {
38760
+ },
38761
+ promise: Promise.resolve()
38762
+ };
38763
+ promiseObj.promise = new Promise((resolve) => {
38764
+ const ele = getBlockNodeByIdx(idx);
38765
+ if (ele) {
38766
+ resolve(ele);
38767
+ return;
38770
38768
  }
38771
- const diffX = movX - initX;
38772
- const diffY = movY - initY;
38773
- onMove(diffX, diffY);
38769
+ const timer = setInterval(() => {
38770
+ const ele2 = getBlockNodeByIdx(idx);
38771
+ if (ele2) {
38772
+ resolve(ele2);
38773
+ clearInterval(timer);
38774
+ }
38775
+ }, 50);
38776
+ promiseObj.cancel = () => {
38777
+ clearInterval(timer);
38778
+ };
38774
38779
  });
38775
- const onDragEnd = () => {
38776
- onEnd && onEnd();
38777
- document.removeEventListener("touchmove", onDragMove);
38778
- document.removeEventListener("touchend", onDragEnd);
38779
- document.removeEventListener("mousemove", onDragMove);
38780
- document.removeEventListener("mousemove", onDragEnd);
38781
- };
38782
- document.addEventListener("touchmove", onDragMove);
38783
- document.addEventListener("touchend", onDragEnd);
38784
- document.addEventListener("mousemove", onDragMove);
38785
- document.addEventListener("mouseup", onDragEnd);
38786
- };
38780
+ return promiseObj;
38781
+ }
38787
38782
  const ToolItem$1 = (props) => {
38788
- return /* @__PURE__ */ React__default.createElement(Button$4, {
38783
+ return /* @__PURE__ */ React__default.createElement("button", {
38784
+ className: "easy-email-extensions-emailToolItem",
38789
38785
  title: props.title,
38790
- size: "mini",
38791
- icon: props.icon,
38792
38786
  onClick: props.onClick
38793
- });
38787
+ }, props.icon);
38794
38788
  };
38795
38789
  function getAnchorElement(node, matchLength) {
38796
38790
  var _a, _b;
@@ -38823,7 +38817,7 @@ function Link$1(props) {
38823
38817
  const initialValues = useMemo(() => {
38824
38818
  let link = "";
38825
38819
  let blank = true;
38826
- let underline = false;
38820
+ let underline = true;
38827
38821
  let linkNode = getLinkNode(props.currentRange);
38828
38822
  if (linkNode) {
38829
38823
  link = linkNode.href;
@@ -38850,14 +38844,16 @@ function Link$1(props) {
38850
38844
  trigger: "click",
38851
38845
  color: "#fff",
38852
38846
  position: "tl",
38853
- content: /* @__PURE__ */ React__default.createElement(Stack$6, {
38847
+ content: /* @__PURE__ */ React__default.createElement("div", {
38848
+ style: { color: "#333" }
38849
+ }, /* @__PURE__ */ React__default.createElement(Stack$6, {
38854
38850
  vertical: true,
38855
38851
  spacing: "tight"
38856
38852
  }, /* @__PURE__ */ React__default.createElement(Stack$6.Item, null), /* @__PURE__ */ React__default.createElement(SearchField, {
38857
38853
  name: "link",
38858
38854
  label: "Link",
38859
38855
  labelHidden: true,
38860
- enterButton: "Apply",
38856
+ searchButton: "Apply",
38861
38857
  placeholder: "https://www.example.com",
38862
38858
  onSearch: () => handleSubmit()
38863
38859
  }), /* @__PURE__ */ React__default.createElement(Stack$6, null, /* @__PURE__ */ React__default.createElement(SwitchField, {
@@ -38872,10 +38868,9 @@ function Link$1(props) {
38872
38868
  checkedText: "off",
38873
38869
  uncheckedText: "on",
38874
38870
  inline: true
38875
- })))
38876
- }), /* @__PURE__ */ React__default.createElement(Button$4, {
38871
+ }))))
38872
+ }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
38877
38873
  title: "Link",
38878
- size: "mini",
38879
38874
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
38880
38875
  iconName: "icon-link"
38881
38876
  })
@@ -38913,7 +38908,14 @@ function FontSizeList(props) {
38913
38908
  label: "48px"
38914
38909
  }
38915
38910
  ];
38916
- return /* @__PURE__ */ React__default.createElement(Menu$1, {
38911
+ return /* @__PURE__ */ React__default.createElement("div", {
38912
+ style: {
38913
+ maxWidth: 150,
38914
+ maxHeight: 350,
38915
+ overflowY: "auto",
38916
+ overflowX: "hidden"
38917
+ }
38918
+ }, /* @__PURE__ */ React__default.createElement(Menu$1, {
38917
38919
  onClickMenuItem: (item2) => {
38918
38920
  props.onChange(item2);
38919
38921
  },
@@ -38922,13 +38924,13 @@ function FontSizeList(props) {
38922
38924
  }, list2.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
38923
38925
  style: { lineHeight: "30px", height: 30 },
38924
38926
  key: item2.value
38925
- }, item2.label)));
38927
+ }, item2.label))));
38926
38928
  }
38927
38929
  function FontFamily$1(props) {
38928
38930
  const { fontList: fontList2 = [] } = useEditorProps();
38929
38931
  return /* @__PURE__ */ React__default.createElement("div", {
38930
38932
  style: {
38931
- width: 100,
38933
+ maxWidth: 150,
38932
38934
  maxHeight: 350,
38933
38935
  overflowY: "auto",
38934
38936
  overflowX: "hidden"
@@ -38938,7 +38940,7 @@ function FontFamily$1(props) {
38938
38940
  props.onChange(item2);
38939
38941
  },
38940
38942
  selectedKeys: [],
38941
- style: { border: "none" }
38943
+ style: { border: "none", padding: 0 }
38942
38944
  }, fontList2.map((item2) => /* @__PURE__ */ React__default.createElement(Menu$1.Item, {
38943
38945
  style: { lineHeight: "30px", height: 30 },
38944
38946
  key: item2.value
@@ -38984,7 +38986,8 @@ const MergeTags$1 = React__default.memo((props) => {
38984
38986
  onSelect: (vals) => onSelect(vals[0])
38985
38987
  }));
38986
38988
  });
38987
- function TextToolbar(props) {
38989
+ 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";
38990
+ function Tools(props) {
38988
38991
  const { container: container2 } = props;
38989
38992
  const { mergeTags } = useEditorProps();
38990
38993
  const [selectionRange, setSelectionRange] = useState(null);
@@ -39050,47 +39053,60 @@ function TextToolbar(props) {
39050
39053
  };
39051
39054
  const getPopoverMountNode = () => document.getElementById(FIXED_CONTAINER_ID);
39052
39055
  return /* @__PURE__ */ React__default.createElement("div", {
39053
- id: "TextToolbar",
39056
+ id: "Tools",
39054
39057
  style: { display: "flex", flexWrap: "nowrap" }
39055
- }, /* @__PURE__ */ React__default.createElement(Stack$6, {
39056
- vertical: true,
39057
- spacing: "extraTight"
39058
- }, /* @__PURE__ */ React__default.createElement(Stack$6, {
39059
- spacing: "extraTight"
39060
- }, /* @__PURE__ */ React__default.createElement(Tooltip$1, {
39061
- color: "#fff",
39062
- content: /* @__PURE__ */ React__default.createElement(FontFamily$1, {
39058
+ }, /* @__PURE__ */ React__default.createElement("div", {
39059
+ style: {
39060
+ display: "flex",
39061
+ alignItems: "center"
39062
+ }
39063
+ }, /* @__PURE__ */ React__default.createElement("div", {
39064
+ className: "easy-email-extensions-divider"
39065
+ }), /* @__PURE__ */ React__default.createElement(Popover$1, {
39066
+ className: "easy-email-extensions-Tools-Popover",
39067
+ trigger: "click",
39068
+ content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontFamily$1, {
39063
39069
  onChange: (val) => execCommand("fontName", val)
39064
- }),
39070
+ })),
39065
39071
  getPopupContainer: getPopoverMountNode
39066
- }, /* @__PURE__ */ React__default.createElement(Button$4, {
39067
- size: "mini",
39072
+ }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39073
+ title: "font family",
39068
39074
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39069
39075
  iconName: "icon-font-family"
39070
39076
  })
39071
- })), /* @__PURE__ */ React__default.createElement(Tooltip$1, {
39077
+ })), /* @__PURE__ */ React__default.createElement("div", {
39078
+ className: "easy-email-extensions-divider"
39079
+ }), /* @__PURE__ */ React__default.createElement(Popover$1, {
39080
+ className: "easy-email-extensions-Tools-Popover",
39072
39081
  color: "#fff",
39073
- content: /* @__PURE__ */ React__default.createElement(FontSizeList, {
39082
+ trigger: "click",
39083
+ content: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styleText$1), /* @__PURE__ */ React__default.createElement(FontSizeList, {
39074
39084
  onChange: (val) => execCommand("fontSize", val)
39075
- }),
39085
+ })),
39076
39086
  getPopupContainer: getPopoverMountNode
39077
- }, /* @__PURE__ */ React__default.createElement(Button$4, {
39078
- size: "mini",
39087
+ }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39088
+ title: "line-height",
39079
39089
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39080
39090
  iconName: "icon-line-height"
39081
39091
  })
39082
- })), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39092
+ })), /* @__PURE__ */ React__default.createElement("div", {
39093
+ className: "easy-email-extensions-divider"
39094
+ }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39083
39095
  onClick: () => execCommand("bold"),
39084
39096
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39085
39097
  iconName: "icon-bold"
39086
39098
  }),
39087
39099
  title: "Bold"
39100
+ }), /* @__PURE__ */ React__default.createElement("div", {
39101
+ className: "easy-email-extensions-divider"
39088
39102
  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39089
39103
  onClick: () => execCommand("italic"),
39090
39104
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39091
39105
  iconName: "icon-italic"
39092
39106
  }),
39093
39107
  title: "Italic"
39108
+ }), /* @__PURE__ */ React__default.createElement("div", {
39109
+ className: "easy-email-extensions-divider"
39094
39110
  }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
39095
39111
  label: "",
39096
39112
  position: "tl",
@@ -39102,7 +39118,9 @@ function TextToolbar(props) {
39102
39118
  iconName: "icon-font-color"
39103
39119
  }),
39104
39120
  title: "Text color"
39105
- })), /* @__PURE__ */ React__default.createElement(ColorPicker, {
39121
+ })), /* @__PURE__ */ React__default.createElement("div", {
39122
+ className: "easy-email-extensions-divider"
39123
+ }), /* @__PURE__ */ React__default.createElement(ColorPicker, {
39106
39124
  label: "",
39107
39125
  showInput: false,
39108
39126
  position: "tl",
@@ -39113,10 +39131,14 @@ function TextToolbar(props) {
39113
39131
  iconName: "icon-bg-colors"
39114
39132
  }),
39115
39133
  title: "Background color"
39116
- })), /* @__PURE__ */ React__default.createElement(Link$1, {
39134
+ })), /* @__PURE__ */ React__default.createElement("div", {
39135
+ className: "easy-email-extensions-divider"
39136
+ }), /* @__PURE__ */ React__default.createElement(Link$1, {
39117
39137
  currentRange: selectionRange,
39118
39138
  onChange: (values2) => execCommand("createLink", values2),
39119
39139
  getPopupContainer: getPopoverMountNode
39140
+ }), /* @__PURE__ */ React__default.createElement("div", {
39141
+ className: "easy-email-extensions-divider"
39120
39142
  }), mergeTags && /* @__PURE__ */ React__default.createElement(Tooltip$1, {
39121
39143
  color: "#fff",
39122
39144
  position: "bottom",
@@ -39125,21 +39147,14 @@ function TextToolbar(props) {
39125
39147
  onChange: (val) => execCommand("insertHTML", val)
39126
39148
  }),
39127
39149
  getPopupContainer: getPopoverMountNode
39128
- }, /* @__PURE__ */ React__default.createElement(Button$4, {
39129
- size: "mini",
39150
+ }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39130
39151
  title: "Merge tag",
39131
39152
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39132
39153
  iconName: "icon-merge-tags"
39133
39154
  })
39134
- })), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39135
- onClick: () => execCommand("removeFormat"),
39136
- icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39137
- iconName: "icon-close"
39138
- }),
39139
- title: "Remove format"
39140
- })), /* @__PURE__ */ React__default.createElement(Stack$6, {
39141
- spacing: "extraTight"
39142
- }, /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39155
+ })), /* @__PURE__ */ React__default.createElement("div", {
39156
+ className: "easy-email-extensions-divider"
39157
+ }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39143
39158
  onClick: () => execCommand("justifyLeft"),
39144
39159
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39145
39160
  iconName: "icon-align-left"
@@ -39157,6 +39172,8 @@ function TextToolbar(props) {
39157
39172
  iconName: "icon-align-right"
39158
39173
  }),
39159
39174
  title: "Align right"
39175
+ }), /* @__PURE__ */ React__default.createElement("div", {
39176
+ className: "easy-email-extensions-divider"
39160
39177
  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39161
39178
  onClick: () => execCommand("insertOrderedList"),
39162
39179
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -39169,6 +39186,8 @@ function TextToolbar(props) {
39169
39186
  iconName: "icon-list-ul"
39170
39187
  }),
39171
39188
  title: "Unorderlist"
39189
+ }), /* @__PURE__ */ React__default.createElement("div", {
39190
+ className: "easy-email-extensions-divider"
39172
39191
  }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39173
39192
  onClick: () => execCommand("strikeThrough"),
39174
39193
  icon: /* @__PURE__ */ React__default.createElement(IconFont, {
@@ -39187,77 +39206,109 @@ function TextToolbar(props) {
39187
39206
  iconName: "icon-line"
39188
39207
  }),
39189
39208
  title: "Line"
39190
- }))));
39209
+ }), /* @__PURE__ */ React__default.createElement("div", {
39210
+ className: "easy-email-extensions-divider"
39211
+ }), /* @__PURE__ */ React__default.createElement(ToolItem$1, {
39212
+ onClick: () => execCommand("removeFormat"),
39213
+ icon: /* @__PURE__ */ React__default.createElement(IconFont, {
39214
+ iconName: "icon-close"
39215
+ }),
39216
+ title: "Remove format"
39217
+ }), /* @__PURE__ */ React__default.createElement("div", {
39218
+ className: "easy-email-extensions-divider"
39219
+ })));
39191
39220
  }
39192
- const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
39193
- const RichTextFieldItem = (props) => {
39194
- const { activeTab } = useActiveTab();
39195
- const isActive = activeTab === "EDIT";
39196
- const [position, setPosition] = useState({ top: 0, left: 0 });
39197
- const [locationState, setLocationState] = useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
39198
- const { idx } = props;
39199
- const container2 = getBlockNodeByIdx(idx);
39221
+ 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";
39222
+ function RichTextToolBar() {
39223
+ const [direction, setDirection] = useState("top");
39224
+ const [blockNode, setBlockNode] = useState(null);
39225
+ const [offsetX, setOffsetX] = useState(0);
39226
+ const { focusBlock: focusBlock2 } = useBlock();
39227
+ const { pageData: pageData2 } = useEditorContext();
39228
+ const { focusIdx: focusIdx2 } = useFocusIdx();
39229
+ const pageWidth = +(pageData2.attributes.width || "600").replace("px", "");
39200
39230
  useEffect(() => {
39201
- const fixContainer = getEditorRoot();
39202
- if (fixContainer && idx) {
39203
- const { left, top } = fixContainer.getBoundingClientRect();
39204
- setPosition({
39205
- left: (locationState == null ? void 0 : locationState.left) || left,
39206
- top: (locationState == null ? void 0 : locationState.top) || top - 46
39207
- });
39208
- }
39209
- }, [idx, locationState == null ? void 0 : locationState.left, locationState == null ? void 0 : locationState.top]);
39210
- const onChange = useCallback(() => {
39211
- }, []);
39212
- const editorContainer = container2 && getEditNode(container2);
39213
- const textToolbar = useMemo(() => {
39214
- const onMoveTextToolbar = (event2) => {
39215
- onDrag({
39216
- event: event2,
39217
- onMove(x, y) {
39218
- setPosition({
39219
- left: position.left + x,
39220
- top: position.top + y
39221
- });
39222
- setLocationState({
39223
- left: position.left + x,
39224
- top: position.top + y
39225
- });
39226
- },
39227
- onEnd() {
39228
- }
39229
- });
39231
+ const promiseObj = awaitForElement(focusIdx2);
39232
+ promiseObj.promise.then((blockNode2) => {
39233
+ setBlockNode(blockNode2);
39234
+ });
39235
+ return () => {
39236
+ promiseObj.cancel();
39230
39237
  };
39231
- return createPortal(/* @__PURE__ */ React__default.createElement("div", {
39232
- key: idx,
39233
- style: __spreadProps(__spreadValues({
39234
- position: "fixed"
39235
- }, position), {
39236
- transform: "translate(0,-100%)",
39237
- padding: 16,
39238
- boxSizing: "border-box",
39239
- zIndex: 100,
39240
- display: Boolean(isActive) ? void 0 : "none"
39241
- })
39242
- }, /* @__PURE__ */ React__default.createElement("div", {
39243
- style: {
39244
- position: "absolute",
39245
- backgroundColor: "#41444d",
39246
- height: "100%",
39247
- width: "100%",
39248
- left: 0,
39249
- top: 0,
39250
- cursor: "move"
39251
- },
39252
- onMouseDown: onMoveTextToolbar
39253
- }), /* @__PURE__ */ React__default.createElement("div", {
39254
- style: { position: "relative", zIndex: 1 }
39255
- }, /* @__PURE__ */ React__default.createElement(TextToolbar, {
39256
- container: editorContainer,
39257
- onChange
39258
- }))), document.getElementById(FIXED_CONTAINER_ID));
39259
- }, [idx, position, isActive, editorContainer, onChange, setLocationState]);
39260
- return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)), editorContainer && textToolbar);
39238
+ }, [focusIdx2, focusBlock2]);
39239
+ useEffect(() => {
39240
+ if (blockNode) {
39241
+ const options2 = {
39242
+ rootMargin: "-84px 0px 0px 0px",
39243
+ root: getShadowRoot().firstChild,
39244
+ threshold: [0, 1e-3, 0.1, 0.999, 0.8, 0.9, 1]
39245
+ };
39246
+ const checkDirection = (ev) => {
39247
+ const [current] = ev;
39248
+ const { top } = current.intersectionRect;
39249
+ const boundingClientRect = current.boundingClientRect;
39250
+ const rootBounds = current.rootBounds;
39251
+ const intersectionRatio = current.intersectionRatio;
39252
+ if (!rootBounds)
39253
+ return;
39254
+ const paddingLeft = (rootBounds.width - pageWidth) / 2;
39255
+ const offsetLeft = boundingClientRect.left - rootBounds.left;
39256
+ setOffsetX(paddingLeft - offsetLeft);
39257
+ if (intersectionRatio === 1) {
39258
+ setDirection("top");
39259
+ } else {
39260
+ if (top) {
39261
+ if (top > rootBounds.top) {
39262
+ setDirection("top");
39263
+ } else {
39264
+ setDirection("bottom");
39265
+ }
39266
+ }
39267
+ }
39268
+ };
39269
+ const observer = new IntersectionObserver(checkDirection, options2);
39270
+ observer.observe(blockNode);
39271
+ return () => {
39272
+ observer.unobserve(blockNode);
39273
+ };
39274
+ }
39275
+ }, [blockNode, pageWidth]);
39276
+ if (!blockNode)
39277
+ return null;
39278
+ const editorContainer = blockNode && getEditNode(blockNode);
39279
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, createPortal(/* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", {
39280
+ dangerouslySetInnerHTML: { __html: styleText }
39281
+ }), /* @__PURE__ */ React__default.createElement("div", {
39282
+ style: {
39283
+ transform: direction === "top" ? "translate(0,-100%)" : void 0,
39284
+ padding: "4px 8px",
39285
+ boxSizing: "border-box",
39286
+ position: "absolute",
39287
+ zIndex: 100,
39288
+ top: direction === "top" ? -40 : "calc(100% + 40px)",
39289
+ left: offsetX,
39290
+ width: pageWidth
39291
+ }
39292
+ }, /* @__PURE__ */ React__default.createElement("div", {
39293
+ style: {
39294
+ position: "absolute",
39295
+ backgroundColor: "#41444d",
39296
+ height: "100%",
39297
+ width: "100%",
39298
+ left: 0,
39299
+ top: 0,
39300
+ cursor: "move"
39301
+ }
39302
+ }), /* @__PURE__ */ React__default.createElement(Tools, {
39303
+ container: editorContainer,
39304
+ onChange: () => {
39305
+ }
39306
+ }))), blockNode));
39307
+ }
39308
+ const TEXT_BAR_LOCATION_KEY = "TEXT_BAR_LOCATION_KEY";
39309
+ const RichTextFieldItem = (props) => {
39310
+ useLocalStorage$1(TEXT_BAR_LOCATION_KEY, { left: 0, top: 0 });
39311
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(RichTextToolBar, null), /* @__PURE__ */ React__default.createElement(InlineTextField, __spreadValues({}, props)));
39261
39312
  };
39262
39313
  const RichTextField = (props) => {
39263
39314
  const { focusBlock: focusBlock2 } = useBlock();
@@ -39269,8 +39320,8 @@ const RichTextField = (props) => {
39269
39320
  }, props));
39270
39321
  };
39271
39322
  const TextField = enhancer(Input, (value) => value);
39272
- const SearchField = enhancer(Input$5.Search, (e) => e.target.value);
39273
- const TextAreaField = enhancer(Input$5.TextArea, (e) => e.target.value);
39323
+ const SearchField = enhancer(Input$5.Search, (val) => val);
39324
+ const TextAreaField = enhancer(Input$5.TextArea, (val) => val);
39274
39325
  const NumberField = enhancer(InputNumber$1, (e) => e);
39275
39326
  const SliderField = enhancer(Slider$2, (e) => e);
39276
39327
  const ColorPickerField = enhancer(ColorPicker, (e) => e);
@@ -39281,7 +39332,7 @@ const AutoCompleteField = enhancer(AutoComplete, (e) => e);
39281
39332
  const RadioGroupField = enhancer(RadioGroup, (value) => value);
39282
39333
  const SwitchField = enhancer(Switch$1, (e) => e);
39283
39334
  const DatePickerField = enhancer(DatePicker$1, (date) => date);
39284
- const CheckboxField = enhancer(ChexkBoxGroup, (e) => e);
39335
+ const CheckboxField = enhancer(CheckBoxGroup, (e) => e);
39285
39336
  const EditTabField = enhancer(EditTab, (e) => e);
39286
39337
  const InlineTextField = enhancer(InlineText, (value) => value);
39287
39338
  const AddToCollection = ({ visible, setVisible }) => {
@@ -39967,32 +40018,39 @@ function Page() {
39967
40018
  }
39968
40019
  function Padding(props = {}) {
39969
40020
  const { title: title2 = "Padding", attributeName = "padding" } = props;
39970
- const { focusBlock: focusBlock2 } = useBlock();
40021
+ const { focusBlock: focusBlock2, change } = useBlock();
39971
40022
  const { focusIdx: focusIdx2 } = useFocusIdx();
39972
- const defaultConfig = useMemo(() => focusBlock2 && createBlockDataByType(focusBlock2.type), [focusBlock2]);
39973
- const getVal = useCallback((index2) => {
39974
- return () => {
39975
- var _a, _b;
39976
- return ((_a = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName]) == null ? void 0 : _a.split(" ")[index2]) || ((_b = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName]) == null ? void 0 : _b.split(" ")[index2]);
39977
- };
39978
- }, [attributeName, defaultConfig == null ? void 0 : defaultConfig.attributes, focusBlock2 == null ? void 0 : focusBlock2.attributes]);
39979
- const setVal = useCallback((index2) => {
39980
- return (newVal) => {
39981
- if (newVal === "") {
39982
- newVal = "0px";
39983
- }
39984
- const vals = [
39985
- getVal(0)(),
39986
- getVal(1)(),
39987
- getVal(2)(),
39988
- getVal(3)()
39989
- ];
39990
- vals[index2] = newVal;
39991
- return vals.join(" ");
40023
+ const type = focusBlock2 && focusBlock2.type;
40024
+ const defaultConfig = useMemo(() => type ? createBlockDataByType(type) : void 0, [type]);
40025
+ const paddingValue = focusBlock2 == null ? void 0 : focusBlock2.attributes[attributeName];
40026
+ const defaultPaddingValue = defaultConfig == null ? void 0 : defaultConfig.attributes[attributeName];
40027
+ const paddingList = paddingValue == null ? void 0 : paddingValue.split(" ");
40028
+ const defaultPaddingList = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
40029
+ const paddingFormValues = useMemo(() => {
40030
+ const paddingList2 = paddingValue == null ? void 0 : paddingValue.split(" ");
40031
+ const defaultPaddingList2 = defaultPaddingValue == null ? void 0 : defaultPaddingValue.split(" ");
40032
+ const top = paddingList2 ? paddingList2[0] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[0]) || "";
40033
+ const right = paddingList2 ? paddingList2[1] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[1]) || "";
40034
+ const bottom = paddingList2 ? paddingList2[2] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[2]) || "";
40035
+ const left = paddingList2 ? paddingList2[3] : (defaultPaddingList2 == null ? void 0 : defaultPaddingList2[3]) || "";
40036
+ return {
40037
+ top,
40038
+ left,
40039
+ bottom,
40040
+ right
39992
40041
  };
39993
- }, [getVal]);
39994
- return useMemo(() => {
39995
- return /* @__PURE__ */ React__default.createElement(Stack$6, {
40042
+ }, [paddingList, defaultPaddingList]);
40043
+ const onChancePadding = useCallback((val) => {
40044
+ change(focusIdx2 + `.attributes[${attributeName}]`, val);
40045
+ }, [focusIdx2, attributeName]);
40046
+ return /* @__PURE__ */ React__default.createElement(Form$3, {
40047
+ initialValues: paddingFormValues,
40048
+ subscription: { submitting: true, pristine: true },
40049
+ enableReinitialize: true,
40050
+ onSubmit: () => {
40051
+ }
40052
+ }, () => {
40053
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Stack$6, {
39996
40054
  vertical: true,
39997
40055
  spacing: "extraTight"
39998
40056
  }, /* @__PURE__ */ React__default.createElement(TextStyle, {
@@ -40004,18 +40062,14 @@ function Padding(props = {}) {
40004
40062
  }, /* @__PURE__ */ React__default.createElement(TextField, {
40005
40063
  label: /* @__PURE__ */ React__default.createElement("span", null, "Top\xA0"),
40006
40064
  quickchange: true,
40007
- name: `${focusIdx2}.attributes.${attributeName}`,
40008
- valueAdapter: getVal(0),
40009
- onChangeAdapter: setVal(0),
40065
+ name: "top",
40010
40066
  inline: true
40011
40067
  })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
40012
40068
  fill: true
40013
40069
  }, /* @__PURE__ */ React__default.createElement(TextField, {
40014
40070
  label: "Bottom",
40015
40071
  quickchange: true,
40016
- name: `${focusIdx2}.attributes.${attributeName}`,
40017
- valueAdapter: getVal(2),
40018
- onChangeAdapter: setVal(2),
40072
+ name: "bottom",
40019
40073
  inline: true
40020
40074
  }))), /* @__PURE__ */ React__default.createElement(Stack$6, {
40021
40075
  wrap: false
@@ -40024,22 +40078,29 @@ function Padding(props = {}) {
40024
40078
  }, /* @__PURE__ */ React__default.createElement(TextField, {
40025
40079
  label: /* @__PURE__ */ React__default.createElement("span", null, "Left"),
40026
40080
  quickchange: true,
40027
- name: `${focusIdx2}.attributes.${attributeName}`,
40028
- valueAdapter: getVal(3),
40029
- onChangeAdapter: setVal(3),
40081
+ name: "left",
40030
40082
  inline: true
40031
40083
  })), /* @__PURE__ */ React__default.createElement(Stack$6.Item, {
40032
40084
  fill: true
40033
40085
  }, /* @__PURE__ */ React__default.createElement(TextField, {
40034
40086
  label: /* @__PURE__ */ React__default.createElement("span", null, "Right\xA0"),
40035
40087
  quickchange: true,
40036
- name: `${focusIdx2}.attributes.${attributeName}`,
40037
- valueAdapter: getVal(1),
40038
- onChangeAdapter: setVal(1),
40088
+ name: "right",
40039
40089
  inline: true
40040
- }))));
40041
- }, [attributeName, focusIdx2, getVal, setVal, title2]);
40090
+ })))), /* @__PURE__ */ React__default.createElement(PaddingChangeWrapper, {
40091
+ onChange: onChancePadding
40092
+ }));
40093
+ });
40042
40094
  }
40095
+ const PaddingChangeWrapper = (props) => {
40096
+ const {
40097
+ values: { top, right, bottom, left }
40098
+ } = useFormState();
40099
+ useEffect(() => {
40100
+ props.onChange([top, right, bottom, left].join(" "));
40101
+ }, [top, right, bottom, left]);
40102
+ return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
40103
+ };
40043
40104
  function BackgroundColor({
40044
40105
  title: title2 = "Background color"
40045
40106
  }) {
@@ -43974,7 +44035,6 @@ const BlocksPanel = (props) => {
43974
44035
  tabPosition: "left",
43975
44036
  size: "large"
43976
44037
  }, filterCategories.map((category, index2) => /* @__PURE__ */ React__default.createElement(Tabs$1.TabPane, {
43977
- className: "no-scrollbar",
43978
44038
  style: {
43979
44039
  padding: 0,
43980
44040
  overflow: "auto"
@@ -44161,31 +44221,6 @@ function SourceCodePanel() {
44161
44221
  onBlur: onMjmlChange
44162
44222
  })));
44163
44223
  }
44164
- function awaitForElement(idx) {
44165
- let promiseObj = {
44166
- cancel: () => {
44167
- },
44168
- promise: Promise.resolve()
44169
- };
44170
- promiseObj.promise = new Promise((resolve) => {
44171
- const ele = getBlockNodeByIdx(idx);
44172
- if (ele) {
44173
- resolve(ele);
44174
- return;
44175
- }
44176
- const timer = setInterval(() => {
44177
- const ele2 = getBlockNodeByIdx(idx);
44178
- if (ele2) {
44179
- resolve(ele2);
44180
- clearInterval(timer);
44181
- }
44182
- }, 50);
44183
- promiseObj.cancel = () => {
44184
- clearInterval(timer);
44185
- };
44186
- });
44187
- return promiseObj;
44188
- }
44189
44224
  function Toolbar({
44190
44225
  block: block2,
44191
44226
  direction
@@ -44298,22 +44333,27 @@ function FocusTooltip() {
44298
44333
  useEffect(() => {
44299
44334
  if (blockNode) {
44300
44335
  const options2 = {
44301
- rootMargin: "-24px 0px -24px 0px",
44302
- root: getShadowRoot().host,
44303
- threshold: [0, 1e-3, 0.1, 0.999, 0.9, 1]
44336
+ rootMargin: "-24px 0px 0px 0px",
44337
+ root: getShadowRoot().firstChild,
44338
+ threshold: [0, 1e-3, 0.1, 0.5, 0.999, 1]
44304
44339
  };
44305
44340
  const checkDirection = (ev) => {
44306
44341
  const [current] = ev;
44307
- const { top, bottom } = current.intersectionRect;
44342
+ const { top } = current.intersectionRect;
44308
44343
  const rootBounds = current.rootBounds;
44344
+ const intersectionRatio = current.intersectionRatio;
44309
44345
  if (!rootBounds)
44310
44346
  return;
44311
- if (rootBounds.bottom === bottom) {
44347
+ if (intersectionRatio === 1) {
44312
44348
  setDirection("top");
44313
- } else if (rootBounds.top === top) {
44314
- setDirection("bottom");
44315
44349
  } else {
44316
- setDirection("top");
44350
+ if (top) {
44351
+ if (top > rootBounds.top) {
44352
+ setDirection("top");
44353
+ } else {
44354
+ setDirection("bottom");
44355
+ }
44356
+ }
44317
44357
  }
44318
44358
  };
44319
44359
  const observer = new IntersectionObserver(checkDirection, options2);