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.
- package/lib/AttributePanel/AttributePanel.d.ts +3 -3
- package/lib/AttributePanel/components/UI/Help/index.d.ts +7 -7
- package/lib/AttributePanel/components/UI/HtmlEditor.d.ts +5 -5
- package/lib/AttributePanel/components/attributes/Align.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/AttributesPanelWrapper/index.d.ts +6 -6
- package/lib/AttributePanel/components/attributes/Background.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/BackgroundColor.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Border.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/BorderColor.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/BorderStyle.d.ts +5 -5
- package/lib/AttributePanel/components/attributes/BorderWidth.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Color.d.ts +4 -4
- package/lib/AttributePanel/components/attributes/ContainerBackgroundColor.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Decoration.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Direction.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/FontFamily.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/FontSize.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/FontStyle.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/FontWeight.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Height.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/LetterSpacing.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/LineHeight.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Link.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/Margin.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/MergeTags.d.ts +6 -6
- package/lib/AttributePanel/components/attributes/NavbarLinkPadding.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Padding.d.ts +5 -5
- package/lib/AttributePanel/components/attributes/TextAlign.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/TextDecoration.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/TextTransform.d.ts +1 -1
- package/lib/AttributePanel/components/attributes/VerticalAlign.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/Width.d.ts +3 -3
- package/lib/AttributePanel/components/attributes/index.d.ts +29 -29
- package/lib/AttributePanel/components/blocks/Accordion/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/AccordionElement/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/AccordionText/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/AccordionTitle/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Button/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Carousel/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Column/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Divider/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Group/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Hero/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Image/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Navbar/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Page/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Raw/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Section/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Social/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Spacer/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Table/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Text/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/Wrapper/index.d.ts +1 -1
- package/lib/AttributePanel/components/blocks/index.d.ts +42 -42
- package/lib/AttributePanel/components/provider/PresetColorsProvider/index.d.ts +6 -6
- package/lib/AttributePanel/components/provider/SelectionRangeProvider/index.d.ts +6 -6
- package/lib/AttributePanel/hooks/useSelectionRange.d.ts +6 -6
- package/lib/AttributePanel/index.d.ts +3 -3
- package/lib/AttributePanel/utils/BlockAttributeConfigurationManager.d.ts +10 -10
- package/lib/AttributePanel/utils/InputNumberAdapter.d.ts +2 -2
- package/lib/AttributePanel/utils/PromiseEach.d.ts +1 -1
- package/lib/AttributePanel/utils/Uploader.d.ts +35 -35
- package/lib/AttributePanel/utils/awaitForElement.d.ts +4 -4
- package/lib/AttributePanel/utils/classnames.d.ts +1 -1
- package/lib/AttributePanel/utils/getImg.d.ts +8 -8
- package/lib/AttributePanel/utils/onDrag.d.ts +10 -10
- package/lib/AttributePanel/utils/previewLoadImage.d.ts +1 -1
- package/lib/BlockLayer/components/BlockTree/components/BlockTreeItem/index.d.ts +23 -23
- package/lib/BlockLayer/components/BlockTree/components/TreeCollapse.d.ts +6 -6
- package/lib/BlockLayer/components/BlockTree/index.d.ts +29 -29
- package/lib/BlockLayer/components/ContextMenu/index.d.ts +14 -14
- package/lib/BlockLayer/components/EyeIcon/index.d.ts +7 -7
- package/lib/BlockLayer/index.d.ts +7 -7
- package/lib/InteractivePrompt/components/FocusTooltip.d.ts +1 -1
- package/lib/InteractivePrompt/components/HoverTooltip.d.ts +1 -1
- package/lib/InteractivePrompt/components/Toolbar.d.ts +5 -5
- package/lib/InteractivePrompt/index.d.ts +1 -1
- package/lib/InteractivePrompt/utils/awaitForElement.d.ts +4 -4
- package/lib/ShortcutToolbar/ShortcutToolbar.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlockMaskWrapper/index.d.ts +6 -6
- package/lib/ShortcutToolbar/components/BlocksPanel/index.d.ts +2 -2
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/AccordionBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ButtonBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/CarouselBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ColumnBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/DividerBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/GroupBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/HeroBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/ImageBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/NavbarBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/RawBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SectionBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SocialBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/SpacerBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/TextBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/WrapperBlockItem/index.d.ts +1 -1
- package/lib/ShortcutToolbar/components/BlocksPanel/presetTemplate/index.d.ts +18 -18
- package/lib/ShortcutToolbar/components/Picture/index.d.ts +7 -7
- package/lib/ShortcutToolbar/index.d.ts +4 -4
- package/lib/ShortcutToolbar/utils/BlockMarketManager.d.ts +32 -32
- package/lib/ShortcutToolbar/utils/getImg.d.ts +68 -68
- package/lib/SimpleLayout/SimpleLayout.d.ts +2 -2
- package/lib/SimpleLayout/index.d.ts +1 -1
- package/lib/SourceCodePanel/index.d.ts +1 -1
- package/lib/components/AddToCollection/index.d.ts +5 -5
- package/lib/components/Form/AddFont.d.ts +1 -1
- package/lib/components/Form/AutoComplete.d.ts +11 -11
- package/lib/components/Form/{ChexkBoxGroup.d.ts → CheckBoxGroup.d.ts} +14 -14
- package/lib/components/Form/CodemirrorEditor/index.d.ts +8 -8
- package/lib/components/Form/ColorPicker.d.ts +10 -10
- package/lib/components/Form/EditTab.d.ts +10 -10
- package/lib/components/Form/ImageUploader/index.d.ts +8 -8
- package/lib/components/Form/InlineTextField/index.d.ts +7 -8
- package/lib/components/Form/Input.d.ts +7 -7
- package/lib/components/Form/RadioGroup.d.ts +13 -13
- package/lib/components/Form/RichTextField/index.d.ts +3 -3
- package/lib/components/Form/RichTextToolBar/RichTextToolBar.d.ts +1 -0
- package/lib/components/Form/{RichTextField → RichTextToolBar}/components/FontFamily/index.d.ts +3 -3
- package/lib/components/Form/{RichTextField → RichTextToolBar}/components/FontSizeList/index.d.ts +3 -3
- package/lib/components/Form/{RichTextField → RichTextToolBar}/components/Heading/index.d.ts +3 -3
- package/lib/components/Form/{RichTextField → RichTextToolBar}/components/Link/index.d.ts +12 -12
- package/lib/components/Form/{RichTextField/components/TextToolbar → RichTextToolBar/components/MergeTags}/MergeTags.d.ts +6 -6
- package/lib/components/Form/RichTextToolBar/components/MergeTags/index.d.ts +1 -0
- package/lib/components/Form/{RichTextField → RichTextToolBar}/components/ToolItem/index.d.ts +7 -7
- package/lib/components/Form/RichTextToolBar/components/Tools/Tools.d.ts +5 -0
- package/lib/components/Form/RichTextToolBar/components/Tools/index.d.ts +1 -0
- package/lib/components/Form/RichTextToolBar/index.d.ts +1 -0
- package/lib/components/Form/Select.d.ts +11 -11
- package/lib/components/Form/UploadField.d.ts +8 -8
- package/lib/components/Form/enhancer.d.ts +20 -20
- package/lib/components/Form/index.d.ts +29 -29
- package/lib/components/RenderCount/index.d.ts +1 -0
- package/lib/components/ShadowDom/index.d.ts +2 -2
- package/lib/hooks/useAddToCollection.d.ts +6 -6
- package/lib/index.d.ts +8 -8
- package/lib/index2.js +335 -295
- package/lib/index2.js.map +1 -1
- package/lib/index3.js.map +1 -1
- package/lib/utils/awaitForElement.d.ts +4 -4
- package/lib/utils/classnames.d.ts +1 -1
- package/package.json +13 -3
- package/readme.md +138 -138
- 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,
|
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,
|
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,
|
38492
|
-
meta: { touched, error: error2 }
|
38487
|
+
input: { value, onChange }
|
38493
38488
|
} = useField(name, {
|
38494
38489
|
validate: validate3
|
38495
38490
|
});
|
38496
|
-
const
|
38497
|
-
|
38498
|
-
|
38499
|
-
|
38500
|
-
|
38501
|
-
|
38502
|
-
|
38503
|
-
|
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(
|
38507
|
-
value: valueAdapter ? valueAdapter(
|
38550
|
+
checked: valueAdapter ? valueAdapter(currentValue) : currentValue,
|
38551
|
+
value: valueAdapter ? valueAdapter(currentValue) : currentValue,
|
38508
38552
|
onChange: onFieldChange
|
38509
|
-
}))
|
38510
|
-
|
38511
|
-
|
38512
|
-
|
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
|
-
|
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
|
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
|
-
|
38642
|
-
|
38643
|
-
|
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(
|
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
|
-
|
38745
|
-
|
38746
|
-
|
38747
|
-
|
38748
|
-
|
38749
|
-
}
|
38750
|
-
|
38751
|
-
|
38752
|
-
|
38753
|
-
|
38754
|
-
|
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
|
38772
|
-
|
38773
|
-
|
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
|
-
|
38776
|
-
|
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(
|
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 =
|
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(
|
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
|
-
|
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(
|
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(
|
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
|
-
|
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
|
-
|
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: "
|
39056
|
+
id: "Tools",
|
39054
39057
|
style: { display: "flex", flexWrap: "nowrap" }
|
39055
|
-
}, /* @__PURE__ */ React__default.createElement(
|
39056
|
-
|
39057
|
-
|
39058
|
-
|
39059
|
-
|
39060
|
-
}, /* @__PURE__ */ React__default.createElement(
|
39061
|
-
|
39062
|
-
|
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(
|
39067
|
-
|
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(
|
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
|
-
|
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(
|
39078
|
-
|
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(
|
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(
|
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(
|
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(
|
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(
|
39135
|
-
|
39136
|
-
|
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
|
-
|
39193
|
-
|
39194
|
-
const
|
39195
|
-
const
|
39196
|
-
const [
|
39197
|
-
const
|
39198
|
-
const {
|
39199
|
-
const
|
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
|
39202
|
-
|
39203
|
-
|
39204
|
-
|
39205
|
-
|
39206
|
-
|
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
|
-
|
39232
|
-
|
39233
|
-
|
39234
|
-
|
39235
|
-
|
39236
|
-
|
39237
|
-
|
39238
|
-
|
39239
|
-
|
39240
|
-
|
39241
|
-
|
39242
|
-
|
39243
|
-
|
39244
|
-
|
39245
|
-
|
39246
|
-
|
39247
|
-
width
|
39248
|
-
left
|
39249
|
-
|
39250
|
-
|
39251
|
-
|
39252
|
-
|
39253
|
-
|
39254
|
-
|
39255
|
-
|
39256
|
-
|
39257
|
-
|
39258
|
-
|
39259
|
-
|
39260
|
-
|
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, (
|
39273
|
-
const TextAreaField = enhancer(Input$5.TextArea, (
|
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(
|
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
|
39973
|
-
const
|
39974
|
-
|
39975
|
-
|
39976
|
-
|
39977
|
-
|
39978
|
-
|
39979
|
-
|
39980
|
-
|
39981
|
-
|
39982
|
-
|
39983
|
-
|
39984
|
-
|
39985
|
-
|
39986
|
-
|
39987
|
-
|
39988
|
-
|
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
|
-
}, [
|
39994
|
-
|
39995
|
-
|
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:
|
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:
|
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:
|
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:
|
40037
|
-
valueAdapter: getVal(1),
|
40038
|
-
onChangeAdapter: setVal(1),
|
40088
|
+
name: "right",
|
40039
40089
|
inline: true
|
40040
|
-
}))))
|
40041
|
-
|
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
|
44302
|
-
root: getShadowRoot().
|
44303
|
-
threshold: [0, 1e-3, 0.1, 0.
|
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
|
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 (
|
44347
|
+
if (intersectionRatio === 1) {
|
44312
44348
|
setDirection("top");
|
44313
|
-
} else if (rootBounds.top === top) {
|
44314
|
-
setDirection("bottom");
|
44315
44349
|
} else {
|
44316
|
-
|
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);
|