@elementor/editor-controls 4.3.0-1058 → 4.3.0-1060
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/dist/index.d.mts +30 -24
- package/dist/index.d.ts +30 -24
- package/dist/index.js +826 -666
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +811 -641
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/components/inline-editor-toolbar.tsx +34 -3
- package/src/components/inline-editor.tsx +3 -0
- package/src/controls/inline-editing-control.tsx +53 -29
- package/src/controls/open-icon-library.ts +82 -0
- package/src/controls/svg-media-control.tsx +124 -18
package/dist/index.js
CHANGED
|
@@ -5379,7 +5379,7 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5379
5379
|
var React81 = __toESM(require("react"));
|
|
5380
5380
|
var import_react49 = require("react");
|
|
5381
5381
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
5382
|
-
var
|
|
5382
|
+
var import_editor_props35 = require("@elementor/editor-props");
|
|
5383
5383
|
var import_icons21 = require("@elementor/icons");
|
|
5384
5384
|
var import_ui64 = require("@elementor/ui");
|
|
5385
5385
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
@@ -5435,10 +5435,49 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
5435
5435
|
isPending ? /* @__PURE__ */ React80.createElement(import_ui63.CircularProgress, { size: 24 }) : (0, import_i18n31.__)("Enable", "elementor")
|
|
5436
5436
|
)));
|
|
5437
5437
|
|
|
5438
|
+
// src/controls/open-icon-library.ts
|
|
5439
|
+
var import_editor_props34 = require("@elementor/editor-props");
|
|
5440
|
+
var SVG_ICON_LIBRARY = "svg";
|
|
5441
|
+
function isSvgLibrarySelection(icon) {
|
|
5442
|
+
return icon.library === SVG_ICON_LIBRARY && typeof icon.value === "object" && icon.value !== null;
|
|
5443
|
+
}
|
|
5444
|
+
function openIconLibrary({ selected, onSelect } = {}) {
|
|
5445
|
+
const iconManager = window.elementor?.iconManager;
|
|
5446
|
+
if (!iconManager) {
|
|
5447
|
+
return;
|
|
5448
|
+
}
|
|
5449
|
+
iconManager.loadIconLibraries();
|
|
5450
|
+
iconManager.show({
|
|
5451
|
+
view: createIconManagerControlView(selected, onSelect)
|
|
5452
|
+
});
|
|
5453
|
+
}
|
|
5454
|
+
function enqueueIconFonts(library) {
|
|
5455
|
+
window.elementor?.helpers?.enqueueIconFonts?.(library);
|
|
5456
|
+
}
|
|
5457
|
+
function createIconManagerControlView(selected, onSelect) {
|
|
5458
|
+
return {
|
|
5459
|
+
model: {
|
|
5460
|
+
get: () => false
|
|
5461
|
+
},
|
|
5462
|
+
getControlValue: () => selected ?? { value: "", library: "" },
|
|
5463
|
+
setValue: (icon) => {
|
|
5464
|
+
onSelect?.(icon);
|
|
5465
|
+
},
|
|
5466
|
+
applySavedValue: () => void 0
|
|
5467
|
+
};
|
|
5468
|
+
}
|
|
5469
|
+
function createIconPropValue(icon, library) {
|
|
5470
|
+
return {
|
|
5471
|
+
value: import_editor_props34.stringPropTypeUtil.create(icon),
|
|
5472
|
+
library: import_editor_props34.stringPropTypeUtil.create(library)
|
|
5473
|
+
};
|
|
5474
|
+
}
|
|
5475
|
+
|
|
5438
5476
|
// src/controls/svg-media-control.tsx
|
|
5439
5477
|
var TILE_SIZE = 8;
|
|
5440
5478
|
var TILE_WHITE = "transparent";
|
|
5441
5479
|
var TILE_BLACK = "#c1c1c1";
|
|
5480
|
+
var ICON_PREVIEW_FONT_SIZE = 50;
|
|
5442
5481
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
5443
5482
|
var StyledCard = (0, import_ui64.styled)(import_ui64.Card)`
|
|
5444
5483
|
background-color: white;
|
|
@@ -5460,26 +5499,29 @@ var StyledCardMediaContainer = (0, import_ui64.styled)(import_ui64.Stack)`
|
|
|
5460
5499
|
`;
|
|
5461
5500
|
var MODE_BROWSE = { mode: "browse" };
|
|
5462
5501
|
var MODE_UPLOAD = { mode: "upload" };
|
|
5463
|
-
var SvgMediaControl = createControl(() => {
|
|
5464
|
-
const { value, setValue } = useBoundProp(
|
|
5465
|
-
const
|
|
5466
|
-
const
|
|
5502
|
+
var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
5503
|
+
const { value: svgValue, setValue: setSvgValue } = useBoundProp(import_editor_props35.svgSrcPropTypeUtil);
|
|
5504
|
+
const { value: iconValue, setValue: setIconValue } = useBoundProp(import_editor_props35.iconPropTypeUtil);
|
|
5505
|
+
const id = svgValue?.id;
|
|
5506
|
+
const url = svgValue?.url;
|
|
5467
5507
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
5468
5508
|
const src = attachment?.url ?? url?.value ?? null;
|
|
5469
5509
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
5470
5510
|
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react49.useState)(false);
|
|
5471
5511
|
const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
5512
|
+
const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
|
|
5513
|
+
const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
|
|
5472
5514
|
const { open } = (0, import_wp_media2.useWpMediaFrame)({
|
|
5473
5515
|
mediaTypes: ["svg"],
|
|
5474
5516
|
multiple: false,
|
|
5475
5517
|
selected: id?.value || null,
|
|
5476
5518
|
onSelect: (selectedAttachment) => {
|
|
5477
|
-
|
|
5519
|
+
setSvgValue({
|
|
5478
5520
|
id: {
|
|
5479
5521
|
$$type: "image-attachment-id",
|
|
5480
5522
|
value: selectedAttachment.id
|
|
5481
5523
|
},
|
|
5482
|
-
url:
|
|
5524
|
+
url: import_editor_props35.urlPropTypeUtil.create(selectedAttachment.url)
|
|
5483
5525
|
});
|
|
5484
5526
|
}
|
|
5485
5527
|
});
|
|
@@ -5496,18 +5538,36 @@ var SvgMediaControl = createControl(() => {
|
|
|
5496
5538
|
open(openOptions);
|
|
5497
5539
|
}
|
|
5498
5540
|
};
|
|
5541
|
+
const handleIconLibrarySelect = (icon) => {
|
|
5542
|
+
if (!showIconLibrary) {
|
|
5543
|
+
return;
|
|
5544
|
+
}
|
|
5545
|
+
if (isSvgLibrarySelection(icon)) {
|
|
5546
|
+
setSvgValue({
|
|
5547
|
+
id: icon.value.id ? {
|
|
5548
|
+
$$type: "image-attachment-id",
|
|
5549
|
+
value: icon.value.id
|
|
5550
|
+
} : null,
|
|
5551
|
+
url: icon.value.url ? import_editor_props35.urlPropTypeUtil.create(icon.value.url) : null
|
|
5552
|
+
});
|
|
5553
|
+
return;
|
|
5554
|
+
}
|
|
5555
|
+
if (typeof icon.value === "string") {
|
|
5556
|
+
setIconValue(createIconPropValue(icon.value, icon.library));
|
|
5557
|
+
}
|
|
5558
|
+
};
|
|
5499
5559
|
const infotipProps = {
|
|
5500
5560
|
title: (0, import_i18n32.__)("Sorry, you can't upload that file yet.", "elementor"),
|
|
5501
5561
|
description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, (0, import_i18n32.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), (0, import_i18n32.__)("file uploads.", "elementor")),
|
|
5502
5562
|
isEnabled: !isAdmin
|
|
5503
5563
|
};
|
|
5504
|
-
return /* @__PURE__ */ React81.createElement(import_ui64.Stack, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null,
|
|
5505
|
-
|
|
5564
|
+
return /* @__PURE__ */ React81.createElement(import_ui64.Stack, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React81.createElement(
|
|
5565
|
+
SvgMediaPreview,
|
|
5506
5566
|
{
|
|
5507
|
-
|
|
5508
|
-
|
|
5509
|
-
|
|
5510
|
-
|
|
5567
|
+
isFetching,
|
|
5568
|
+
src,
|
|
5569
|
+
iconClassName: selectedIconClass,
|
|
5570
|
+
iconLibrary: selectedIconLibrary
|
|
5511
5571
|
}
|
|
5512
5572
|
)), /* @__PURE__ */ React81.createElement(
|
|
5513
5573
|
import_ui64.CardOverlay,
|
|
@@ -5528,7 +5588,20 @@ var SvgMediaControl = createControl(() => {
|
|
|
5528
5588
|
"aria-label": "Select SVG"
|
|
5529
5589
|
},
|
|
5530
5590
|
(0, import_i18n32.__)("Select SVG", "elementor")
|
|
5531
|
-
),
|
|
5591
|
+
), showIconLibrary ? /* @__PURE__ */ React81.createElement(
|
|
5592
|
+
import_ui64.Button,
|
|
5593
|
+
{
|
|
5594
|
+
size: "tiny",
|
|
5595
|
+
variant: "text",
|
|
5596
|
+
color: "inherit",
|
|
5597
|
+
onClick: () => openIconLibrary({
|
|
5598
|
+
selected: selectedIconClass && selectedIconLibrary ? { value: selectedIconClass, library: selectedIconLibrary } : void 0,
|
|
5599
|
+
onSelect: handleIconLibrarySelect
|
|
5600
|
+
}),
|
|
5601
|
+
"aria-label": (0, import_i18n32.__)("Icon library", "elementor")
|
|
5602
|
+
},
|
|
5603
|
+
(0, import_i18n32.__)("Icon library", "elementor")
|
|
5604
|
+
) : null, /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(import_ui64.ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
|
|
5532
5605
|
import_ui64.Button,
|
|
5533
5606
|
{
|
|
5534
5607
|
size: "tiny",
|
|
@@ -5543,21 +5616,56 @@ var SvgMediaControl = createControl(() => {
|
|
|
5543
5616
|
)))))
|
|
5544
5617
|
))));
|
|
5545
5618
|
});
|
|
5619
|
+
function SvgMediaPreview({
|
|
5620
|
+
isFetching,
|
|
5621
|
+
src,
|
|
5622
|
+
iconClassName,
|
|
5623
|
+
iconLibrary
|
|
5624
|
+
}) {
|
|
5625
|
+
(0, import_react49.useEffect)(() => {
|
|
5626
|
+
if (iconLibrary) {
|
|
5627
|
+
enqueueIconFonts(iconLibrary);
|
|
5628
|
+
}
|
|
5629
|
+
}, [iconLibrary]);
|
|
5630
|
+
if (isFetching) {
|
|
5631
|
+
return /* @__PURE__ */ React81.createElement(import_ui64.CircularProgress, { role: "progressbar" });
|
|
5632
|
+
}
|
|
5633
|
+
if (iconClassName) {
|
|
5634
|
+
return /* @__PURE__ */ React81.createElement(
|
|
5635
|
+
import_ui64.Box,
|
|
5636
|
+
{
|
|
5637
|
+
component: "i",
|
|
5638
|
+
className: iconClassName,
|
|
5639
|
+
"aria-label": (0, import_i18n32.__)("Preview icon", "elementor"),
|
|
5640
|
+
sx: { fontSize: ICON_PREVIEW_FONT_SIZE }
|
|
5641
|
+
}
|
|
5642
|
+
);
|
|
5643
|
+
}
|
|
5644
|
+
return /* @__PURE__ */ React81.createElement(
|
|
5645
|
+
import_ui64.CardMedia,
|
|
5646
|
+
{
|
|
5647
|
+
component: "img",
|
|
5648
|
+
image: src,
|
|
5649
|
+
alt: (0, import_i18n32.__)("Preview SVG", "elementor"),
|
|
5650
|
+
sx: { maxHeight: "140px", width: `${ICON_PREVIEW_FONT_SIZE}px` }
|
|
5651
|
+
}
|
|
5652
|
+
);
|
|
5653
|
+
}
|
|
5546
5654
|
|
|
5547
5655
|
// src/controls/video-media-control.tsx
|
|
5548
5656
|
var React82 = __toESM(require("react"));
|
|
5549
|
-
var
|
|
5657
|
+
var import_editor_props36 = require("@elementor/editor-props");
|
|
5550
5658
|
var import_icons22 = require("@elementor/icons");
|
|
5551
5659
|
var import_ui65 = require("@elementor/ui");
|
|
5552
5660
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
5553
5661
|
var import_i18n33 = require("@wordpress/i18n");
|
|
5554
5662
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
5555
5663
|
var VideoMediaControl = createControl(() => {
|
|
5556
|
-
const { value, setValue, propType } = useBoundProp(
|
|
5664
|
+
const { value, setValue, propType } = useBoundProp(import_editor_props36.videoSrcPropTypeUtil);
|
|
5557
5665
|
const { id, url } = value ?? {};
|
|
5558
5666
|
const { data: attachment, isFetching } = (0, import_wp_media3.useWpMediaAttachment)(id?.value || null);
|
|
5559
5667
|
const videoUrl = attachment?.url ?? url?.value ?? null;
|
|
5560
|
-
const defaultUrl =
|
|
5668
|
+
const defaultUrl = import_editor_props36.videoSrcPropTypeUtil.extract(propType.default ?? null)?.url?.value;
|
|
5561
5669
|
const currentUrlForModal = url?.value && url.value !== defaultUrl ? url.value : void 0;
|
|
5562
5670
|
const { open } = (0, import_wp_media3.useWpMediaFrame)({
|
|
5563
5671
|
mediaTypes: ["video"],
|
|
@@ -5576,7 +5684,7 @@ var VideoMediaControl = createControl(() => {
|
|
|
5576
5684
|
onSelectUrl: (selectedUrl) => {
|
|
5577
5685
|
setValue({
|
|
5578
5686
|
id: null,
|
|
5579
|
-
url:
|
|
5687
|
+
url: import_editor_props36.urlPropTypeUtil.create(selectedUrl)
|
|
5580
5688
|
});
|
|
5581
5689
|
}
|
|
5582
5690
|
});
|
|
@@ -5652,13 +5760,13 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
5652
5760
|
|
|
5653
5761
|
// src/controls/background-control/background-control.tsx
|
|
5654
5762
|
var React89 = __toESM(require("react"));
|
|
5655
|
-
var
|
|
5763
|
+
var import_editor_props42 = require("@elementor/editor-props");
|
|
5656
5764
|
var import_ui73 = require("@elementor/ui");
|
|
5657
5765
|
var import_i18n39 = require("@wordpress/i18n");
|
|
5658
5766
|
|
|
5659
5767
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
5660
5768
|
var React88 = __toESM(require("react"));
|
|
5661
|
-
var
|
|
5769
|
+
var import_editor_props41 = require("@elementor/editor-props");
|
|
5662
5770
|
var import_ui72 = require("@elementor/ui");
|
|
5663
5771
|
var import_wp_media4 = require("@elementor/wp-media");
|
|
5664
5772
|
var import_i18n38 = require("@wordpress/i18n");
|
|
@@ -5669,26 +5777,26 @@ var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
|
5669
5777
|
|
|
5670
5778
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
5671
5779
|
var React83 = __toESM(require("react"));
|
|
5672
|
-
var
|
|
5780
|
+
var import_editor_props37 = require("@elementor/editor-props");
|
|
5673
5781
|
var import_ui66 = require("@elementor/ui");
|
|
5674
5782
|
var BackgroundGradientColorControl = createControl(() => {
|
|
5675
|
-
const { value, setValue } = useBoundProp(
|
|
5783
|
+
const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
|
|
5676
5784
|
const handleChange = (newValue) => {
|
|
5677
5785
|
const transformedValue = createTransformableValue(newValue);
|
|
5678
5786
|
if (transformedValue.positions) {
|
|
5679
|
-
transformedValue.positions =
|
|
5787
|
+
transformedValue.positions = import_editor_props37.stringPropTypeUtil.create(newValue.positions.join(" "));
|
|
5680
5788
|
}
|
|
5681
5789
|
setValue(transformedValue);
|
|
5682
5790
|
};
|
|
5683
5791
|
const createTransformableValue = (newValue) => ({
|
|
5684
5792
|
...newValue,
|
|
5685
|
-
type:
|
|
5686
|
-
angle:
|
|
5687
|
-
stops:
|
|
5793
|
+
type: import_editor_props37.stringPropTypeUtil.create(newValue.type),
|
|
5794
|
+
angle: import_editor_props37.numberPropTypeUtil.create(newValue.angle),
|
|
5795
|
+
stops: import_editor_props37.gradientColorStopPropTypeUtil.create(
|
|
5688
5796
|
newValue.stops.map(
|
|
5689
|
-
({ color, offset }) =>
|
|
5690
|
-
color:
|
|
5691
|
-
offset:
|
|
5797
|
+
({ color, offset }) => import_editor_props37.colorStopPropTypeUtil.create({
|
|
5798
|
+
color: import_editor_props37.colorPropTypeUtil.create(color),
|
|
5799
|
+
offset: import_editor_props37.numberPropTypeUtil.create(offset)
|
|
5692
5800
|
})
|
|
5693
5801
|
)
|
|
5694
5802
|
)
|
|
@@ -5717,17 +5825,17 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5717
5825
|
}
|
|
5718
5826
|
);
|
|
5719
5827
|
});
|
|
5720
|
-
var initialBackgroundGradientOverlay =
|
|
5721
|
-
type:
|
|
5722
|
-
angle:
|
|
5723
|
-
stops:
|
|
5724
|
-
|
|
5725
|
-
color:
|
|
5726
|
-
offset:
|
|
5828
|
+
var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientOverlayPropTypeUtil.create({
|
|
5829
|
+
type: import_editor_props37.stringPropTypeUtil.create("linear"),
|
|
5830
|
+
angle: import_editor_props37.numberPropTypeUtil.create(180),
|
|
5831
|
+
stops: import_editor_props37.gradientColorStopPropTypeUtil.create([
|
|
5832
|
+
import_editor_props37.colorStopPropTypeUtil.create({
|
|
5833
|
+
color: import_editor_props37.colorPropTypeUtil.create("rgb(0,0,0)"),
|
|
5834
|
+
offset: import_editor_props37.numberPropTypeUtil.create(0)
|
|
5727
5835
|
}),
|
|
5728
|
-
|
|
5729
|
-
color:
|
|
5730
|
-
offset:
|
|
5836
|
+
import_editor_props37.colorStopPropTypeUtil.create({
|
|
5837
|
+
color: import_editor_props37.colorPropTypeUtil.create("rgb(255,255,255)"),
|
|
5838
|
+
offset: import_editor_props37.numberPropTypeUtil.create(100)
|
|
5731
5839
|
})
|
|
5732
5840
|
])
|
|
5733
5841
|
});
|
|
@@ -5758,7 +5866,7 @@ var BackgroundImageOverlayAttachment = () => {
|
|
|
5758
5866
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
5759
5867
|
var React85 = __toESM(require("react"));
|
|
5760
5868
|
var import_react50 = require("react");
|
|
5761
|
-
var
|
|
5869
|
+
var import_editor_props38 = require("@elementor/editor-props");
|
|
5762
5870
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
5763
5871
|
var import_icons24 = require("@elementor/icons");
|
|
5764
5872
|
var import_ui68 = require("@elementor/ui");
|
|
@@ -5776,8 +5884,8 @@ var backgroundPositionOptions = [
|
|
|
5776
5884
|
{ label: (0, import_i18n35.__)("Custom", "elementor"), value: "custom" }
|
|
5777
5885
|
];
|
|
5778
5886
|
var BackgroundImageOverlayPosition = () => {
|
|
5779
|
-
const backgroundImageOffsetContext = useBoundProp(
|
|
5780
|
-
const stringPropContext = useBoundProp(
|
|
5887
|
+
const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
|
|
5888
|
+
const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
|
|
5781
5889
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
5782
5890
|
const rowRef = (0, import_react50.useRef)(null);
|
|
5783
5891
|
const handlePositionChange = (event) => {
|
|
@@ -5853,7 +5961,7 @@ var BackgroundImageOverlayRepeat = () => {
|
|
|
5853
5961
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
5854
5962
|
var React87 = __toESM(require("react"));
|
|
5855
5963
|
var import_react51 = require("react");
|
|
5856
|
-
var
|
|
5964
|
+
var import_editor_props39 = require("@elementor/editor-props");
|
|
5857
5965
|
var import_icons26 = require("@elementor/icons");
|
|
5858
5966
|
var import_ui70 = require("@elementor/ui");
|
|
5859
5967
|
var import_i18n37 = require("@wordpress/i18n");
|
|
@@ -5884,8 +5992,8 @@ var sizeControlOptions = [
|
|
|
5884
5992
|
}
|
|
5885
5993
|
];
|
|
5886
5994
|
var BackgroundImageOverlaySize = () => {
|
|
5887
|
-
const backgroundImageScaleContext = useBoundProp(
|
|
5888
|
-
const stringPropContext = useBoundProp(
|
|
5995
|
+
const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
|
|
5996
|
+
const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
|
|
5889
5997
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
5890
5998
|
const rowRef = (0, import_react51.useRef)(null);
|
|
5891
5999
|
const handleSizeChange = (size) => {
|
|
@@ -5923,16 +6031,16 @@ var BackgroundImageOverlaySize = () => {
|
|
|
5923
6031
|
|
|
5924
6032
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
5925
6033
|
var import_react52 = require("react");
|
|
5926
|
-
var
|
|
6034
|
+
var import_editor_props40 = require("@elementor/editor-props");
|
|
5927
6035
|
var import_ui71 = require("@elementor/ui");
|
|
5928
6036
|
var useBackgroundTabsHistory = ({
|
|
5929
6037
|
color: initialBackgroundColorOverlay2,
|
|
5930
6038
|
image: initialBackgroundImageOverlay,
|
|
5931
6039
|
gradient: initialBackgroundGradientOverlay2
|
|
5932
6040
|
}) => {
|
|
5933
|
-
const { value: imageValue, setValue: setImageValue } = useBoundProp(
|
|
5934
|
-
const { value: colorValue, setValue: setColorValue } = useBoundProp(
|
|
5935
|
-
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(
|
|
6041
|
+
const { value: imageValue, setValue: setImageValue } = useBoundProp(import_editor_props40.backgroundImageOverlayPropTypeUtil);
|
|
6042
|
+
const { value: colorValue, setValue: setColorValue } = useBoundProp(import_editor_props40.backgroundColorOverlayPropTypeUtil);
|
|
6043
|
+
const { value: gradientValue, setValue: setGradientValue } = useBoundProp(import_editor_props40.backgroundGradientOverlayPropTypeUtil);
|
|
5936
6044
|
const getCurrentOverlayType = () => {
|
|
5937
6045
|
if (colorValue) {
|
|
5938
6046
|
return "color";
|
|
@@ -5981,9 +6089,9 @@ var useBackgroundTabsHistory = ({
|
|
|
5981
6089
|
|
|
5982
6090
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
5983
6091
|
var DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = "#00000033";
|
|
5984
|
-
var initialBackgroundColorOverlay =
|
|
6092
|
+
var initialBackgroundColorOverlay = import_editor_props41.backgroundColorOverlayPropTypeUtil.create(
|
|
5985
6093
|
{
|
|
5986
|
-
color:
|
|
6094
|
+
color: import_editor_props41.colorPropTypeUtil.create(DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR)
|
|
5987
6095
|
}
|
|
5988
6096
|
);
|
|
5989
6097
|
var getInitialBackgroundOverlay = () => ({
|
|
@@ -6017,12 +6125,12 @@ var backgroundResolutionOptions = [
|
|
|
6017
6125
|
{ label: (0, import_i18n38.__)("Full", "elementor"), value: "full" }
|
|
6018
6126
|
];
|
|
6019
6127
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
6020
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
6128
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
|
|
6021
6129
|
return /* @__PURE__ */ React88.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React88.createElement(
|
|
6022
6130
|
ControlRepeater,
|
|
6023
6131
|
{
|
|
6024
6132
|
initial: getInitialBackgroundOverlay(),
|
|
6025
|
-
propTypeUtil:
|
|
6133
|
+
propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
|
|
6026
6134
|
},
|
|
6027
6135
|
/* @__PURE__ */ React88.createElement(RepeaterHeader, { label: (0, import_i18n38.__)("Overlay", "elementor") }, /* @__PURE__ */ React88.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
6028
6136
|
/* @__PURE__ */ React88.createElement(ItemsContainer, null, /* @__PURE__ */ React88.createElement(
|
|
@@ -6124,11 +6232,11 @@ var ItemLabelGradient = ({ value }) => {
|
|
|
6124
6232
|
return /* @__PURE__ */ React88.createElement("span", null, (0, import_i18n38.__)("Radial Gradient", "elementor"));
|
|
6125
6233
|
};
|
|
6126
6234
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
6127
|
-
const propContext = useBoundProp(
|
|
6235
|
+
const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
|
|
6128
6236
|
return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React88.createElement(ColorControl, { anchorEl })));
|
|
6129
6237
|
};
|
|
6130
6238
|
var ImageOverlayContent = () => {
|
|
6131
|
-
const propContext = useBoundProp(
|
|
6239
|
+
const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
|
|
6132
6240
|
return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React88.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayAttachment, null)));
|
|
6133
6241
|
};
|
|
6134
6242
|
var StyledUnstableColorIndicator3 = (0, import_ui72.styled)(import_ui72.UnstableColorIndicator)(({ theme }) => ({
|
|
@@ -6178,7 +6286,7 @@ var clipOptions = [
|
|
|
6178
6286
|
var colorLabel = (0, import_i18n39.__)("Color", "elementor");
|
|
6179
6287
|
var clipLabel = (0, import_i18n39.__)("Clipping", "elementor");
|
|
6180
6288
|
var BackgroundControl = createControl(() => {
|
|
6181
|
-
const propContext = useBoundProp(
|
|
6289
|
+
const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
|
|
6182
6290
|
return /* @__PURE__ */ React89.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React89.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React89.createElement(BackgroundColorField, null), /* @__PURE__ */ React89.createElement(BackgroundClipField, null));
|
|
6183
6291
|
});
|
|
6184
6292
|
var BackgroundColorField = () => {
|
|
@@ -6191,7 +6299,7 @@ var BackgroundClipField = () => {
|
|
|
6191
6299
|
// src/controls/repeatable-control.tsx
|
|
6192
6300
|
var React90 = __toESM(require("react"));
|
|
6193
6301
|
var import_react53 = require("react");
|
|
6194
|
-
var
|
|
6302
|
+
var import_editor_props43 = require("@elementor/editor-props");
|
|
6195
6303
|
var import_ui74 = require("@elementor/ui");
|
|
6196
6304
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
6197
6305
|
var RepeatableControl = createControl(
|
|
@@ -6212,7 +6320,7 @@ var RepeatableControl = createControl(
|
|
|
6212
6320
|
return null;
|
|
6213
6321
|
}
|
|
6214
6322
|
const childArrayPropTypeUtil2 = (0, import_react53.useMemo)(
|
|
6215
|
-
() => (0,
|
|
6323
|
+
() => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
6216
6324
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
6217
6325
|
);
|
|
6218
6326
|
const contextValue = (0, import_react53.useMemo)(
|
|
@@ -6348,7 +6456,7 @@ var getAllProperties = (pattern) => {
|
|
|
6348
6456
|
// src/controls/key-value-control.tsx
|
|
6349
6457
|
var React91 = __toESM(require("react"));
|
|
6350
6458
|
var import_react54 = require("react");
|
|
6351
|
-
var
|
|
6459
|
+
var import_editor_props44 = require("@elementor/editor-props");
|
|
6352
6460
|
var import_ui75 = require("@elementor/ui");
|
|
6353
6461
|
var import_i18n40 = require("@wordpress/i18n");
|
|
6354
6462
|
|
|
@@ -6373,7 +6481,7 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
6373
6481
|
return transformableValue.value || "";
|
|
6374
6482
|
};
|
|
6375
6483
|
var KeyValueControl = createControl((props = {}) => {
|
|
6376
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
6484
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
|
|
6377
6485
|
const [keyError, setKeyError] = (0, import_react54.useState)("");
|
|
6378
6486
|
const [valueError, setValueError] = (0, import_react54.useState)("");
|
|
6379
6487
|
const [sessionState, setSessionState] = (0, import_react54.useState)({
|
|
@@ -6412,14 +6520,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6412
6520
|
return;
|
|
6413
6521
|
}
|
|
6414
6522
|
const newChangedValue = newValue[fieldType];
|
|
6415
|
-
if ((0,
|
|
6523
|
+
if ((0, import_editor_props44.isTransformable)(newChangedValue) && newChangedValue.$$type === "dynamic") {
|
|
6416
6524
|
setValue({
|
|
6417
6525
|
...value,
|
|
6418
6526
|
[fieldType]: newChangedValue
|
|
6419
6527
|
});
|
|
6420
6528
|
return;
|
|
6421
6529
|
}
|
|
6422
|
-
const extractedValue =
|
|
6530
|
+
const extractedValue = import_editor_props44.stringPropTypeUtil.extract(newChangedValue);
|
|
6423
6531
|
setSessionState((prev) => ({
|
|
6424
6532
|
...prev,
|
|
6425
6533
|
[fieldType]: extractedValue
|
|
@@ -6459,7 +6567,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6459
6567
|
|
|
6460
6568
|
// src/controls/position-control.tsx
|
|
6461
6569
|
var React92 = __toESM(require("react"));
|
|
6462
|
-
var
|
|
6570
|
+
var import_editor_props45 = require("@elementor/editor-props");
|
|
6463
6571
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
6464
6572
|
var import_icons27 = require("@elementor/icons");
|
|
6465
6573
|
var import_ui76 = require("@elementor/ui");
|
|
@@ -6477,8 +6585,8 @@ var positionOptions = [
|
|
|
6477
6585
|
{ label: (0, import_i18n41.__)("Custom", "elementor"), value: "custom" }
|
|
6478
6586
|
];
|
|
6479
6587
|
var PositionControl = () => {
|
|
6480
|
-
const positionContext = useBoundProp(
|
|
6481
|
-
const stringPropContext = useBoundProp(
|
|
6588
|
+
const positionContext = useBoundProp(import_editor_props45.positionPropTypeUtil);
|
|
6589
|
+
const stringPropContext = useBoundProp(import_editor_props45.stringPropTypeUtil);
|
|
6482
6590
|
const isCustom = !!positionContext.value;
|
|
6483
6591
|
const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
|
|
6484
6592
|
const handlePositionChange = (event) => {
|
|
@@ -6519,13 +6627,13 @@ var PositionControl = () => {
|
|
|
6519
6627
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
6520
6628
|
var React105 = __toESM(require("react"));
|
|
6521
6629
|
var import_react62 = require("react");
|
|
6522
|
-
var
|
|
6630
|
+
var import_editor_props54 = require("@elementor/editor-props");
|
|
6523
6631
|
var import_icons34 = require("@elementor/icons");
|
|
6524
6632
|
var import_ui89 = require("@elementor/ui");
|
|
6525
6633
|
var import_i18n51 = require("@wordpress/i18n");
|
|
6526
6634
|
|
|
6527
6635
|
// src/controls/transform-control/initial-values.ts
|
|
6528
|
-
var
|
|
6636
|
+
var import_editor_props46 = require("@elementor/editor-props");
|
|
6529
6637
|
var TransformFunctionKeys = {
|
|
6530
6638
|
move: "transform-move",
|
|
6531
6639
|
scale: "transform-scale",
|
|
@@ -6555,17 +6663,17 @@ var initialTransformValue = {
|
|
|
6555
6663
|
z: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } }
|
|
6556
6664
|
}
|
|
6557
6665
|
};
|
|
6558
|
-
var initialScaleValue =
|
|
6559
|
-
x:
|
|
6560
|
-
y:
|
|
6561
|
-
z:
|
|
6666
|
+
var initialScaleValue = import_editor_props46.scaleTransformPropTypeUtil.create({
|
|
6667
|
+
x: import_editor_props46.numberPropTypeUtil.create(defaultValues.scale),
|
|
6668
|
+
y: import_editor_props46.numberPropTypeUtil.create(defaultValues.scale),
|
|
6669
|
+
z: import_editor_props46.numberPropTypeUtil.create(defaultValues.scale)
|
|
6562
6670
|
});
|
|
6563
|
-
var initialRotateValue =
|
|
6671
|
+
var initialRotateValue = import_editor_props46.rotateTransformPropTypeUtil.create({
|
|
6564
6672
|
x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
6565
6673
|
y: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
|
|
6566
6674
|
z: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } }
|
|
6567
6675
|
});
|
|
6568
|
-
var initialSkewValue =
|
|
6676
|
+
var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
|
|
6569
6677
|
x: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } },
|
|
6570
6678
|
y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
|
|
6571
6679
|
});
|
|
@@ -6578,7 +6686,7 @@ var import_i18n46 = require("@wordpress/i18n");
|
|
|
6578
6686
|
// src/controls/transform-control/functions/move.tsx
|
|
6579
6687
|
var React94 = __toESM(require("react"));
|
|
6580
6688
|
var import_react55 = require("react");
|
|
6581
|
-
var
|
|
6689
|
+
var import_editor_props47 = require("@elementor/editor-props");
|
|
6582
6690
|
var import_icons28 = require("@elementor/icons");
|
|
6583
6691
|
var import_ui78 = require("@elementor/ui");
|
|
6584
6692
|
var import_i18n42 = require("@wordpress/i18n");
|
|
@@ -6623,7 +6731,7 @@ var moveAxisControls = [
|
|
|
6623
6731
|
}
|
|
6624
6732
|
];
|
|
6625
6733
|
var Move = () => {
|
|
6626
|
-
const context = useBoundProp(
|
|
6734
|
+
const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
|
|
6627
6735
|
const rowRefs = [(0, import_react55.useRef)(null), (0, import_react55.useRef)(null), (0, import_react55.useRef)(null)];
|
|
6628
6736
|
return /* @__PURE__ */ React94.createElement(import_ui78.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(
|
|
6629
6737
|
AxisRow,
|
|
@@ -6640,7 +6748,7 @@ var Move = () => {
|
|
|
6640
6748
|
// src/controls/transform-control/functions/rotate.tsx
|
|
6641
6749
|
var React95 = __toESM(require("react"));
|
|
6642
6750
|
var import_react56 = require("react");
|
|
6643
|
-
var
|
|
6751
|
+
var import_editor_props48 = require("@elementor/editor-props");
|
|
6644
6752
|
var import_icons29 = require("@elementor/icons");
|
|
6645
6753
|
var import_ui79 = require("@elementor/ui");
|
|
6646
6754
|
var import_i18n43 = require("@wordpress/i18n");
|
|
@@ -6663,7 +6771,7 @@ var rotateAxisControls = [
|
|
|
6663
6771
|
];
|
|
6664
6772
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
6665
6773
|
var Rotate = () => {
|
|
6666
|
-
const context = useBoundProp(
|
|
6774
|
+
const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
|
|
6667
6775
|
const rowRefs = [(0, import_react56.useRef)(null), (0, import_react56.useRef)(null), (0, import_react56.useRef)(null)];
|
|
6668
6776
|
return /* @__PURE__ */ React95.createElement(import_ui79.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
|
|
6669
6777
|
AxisRow,
|
|
@@ -6679,7 +6787,7 @@ var Rotate = () => {
|
|
|
6679
6787
|
// src/controls/transform-control/functions/scale.tsx
|
|
6680
6788
|
var React97 = __toESM(require("react"));
|
|
6681
6789
|
var import_react57 = require("react");
|
|
6682
|
-
var
|
|
6790
|
+
var import_editor_props49 = require("@elementor/editor-props");
|
|
6683
6791
|
var import_icons30 = require("@elementor/icons");
|
|
6684
6792
|
var import_ui81 = require("@elementor/ui");
|
|
6685
6793
|
var import_i18n44 = require("@wordpress/i18n");
|
|
@@ -6710,7 +6818,7 @@ var scaleAxisControls = [
|
|
|
6710
6818
|
}
|
|
6711
6819
|
];
|
|
6712
6820
|
var Scale = () => {
|
|
6713
|
-
const context = useBoundProp(
|
|
6821
|
+
const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
|
|
6714
6822
|
const rowRefs = [(0, import_react57.useRef)(null), (0, import_react57.useRef)(null), (0, import_react57.useRef)(null)];
|
|
6715
6823
|
return /* @__PURE__ */ React97.createElement(import_ui81.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(PropProvider, { ...context }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React97.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
6716
6824
|
};
|
|
@@ -6718,7 +6826,7 @@ var Scale = () => {
|
|
|
6718
6826
|
// src/controls/transform-control/functions/skew.tsx
|
|
6719
6827
|
var React98 = __toESM(require("react"));
|
|
6720
6828
|
var import_react58 = require("react");
|
|
6721
|
-
var
|
|
6829
|
+
var import_editor_props50 = require("@elementor/editor-props");
|
|
6722
6830
|
var import_icons31 = require("@elementor/icons");
|
|
6723
6831
|
var import_ui82 = require("@elementor/ui");
|
|
6724
6832
|
var import_i18n45 = require("@wordpress/i18n");
|
|
@@ -6736,7 +6844,7 @@ var skewAxisControls = [
|
|
|
6736
6844
|
];
|
|
6737
6845
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
6738
6846
|
var Skew = () => {
|
|
6739
|
-
const context = useBoundProp(
|
|
6847
|
+
const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
|
|
6740
6848
|
const rowRefs = [(0, import_react58.useRef)(null), (0, import_react58.useRef)(null), (0, import_react58.useRef)(null)];
|
|
6741
6849
|
return /* @__PURE__ */ React98.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(PropProvider, { ...context }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React98.createElement(
|
|
6742
6850
|
AxisRow,
|
|
@@ -6751,7 +6859,7 @@ var Skew = () => {
|
|
|
6751
6859
|
|
|
6752
6860
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
6753
6861
|
var import_react59 = require("react");
|
|
6754
|
-
var
|
|
6862
|
+
var import_editor_props51 = require("@elementor/editor-props");
|
|
6755
6863
|
var import_ui83 = require("@elementor/ui");
|
|
6756
6864
|
var useTransformTabsHistory = ({
|
|
6757
6865
|
move: initialMove,
|
|
@@ -6759,10 +6867,10 @@ var useTransformTabsHistory = ({
|
|
|
6759
6867
|
rotate: initialRotate,
|
|
6760
6868
|
skew: initialSkew
|
|
6761
6869
|
}) => {
|
|
6762
|
-
const { value: moveValue, setValue: setMoveValue } = useBoundProp(
|
|
6763
|
-
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(
|
|
6764
|
-
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(
|
|
6765
|
-
const { value: skewValue, setValue: setSkewValue } = useBoundProp(
|
|
6870
|
+
const { value: moveValue, setValue: setMoveValue } = useBoundProp(import_editor_props51.moveTransformPropTypeUtil);
|
|
6871
|
+
const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props51.scaleTransformPropTypeUtil);
|
|
6872
|
+
const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props51.rotateTransformPropTypeUtil);
|
|
6873
|
+
const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props51.skewTransformPropTypeUtil);
|
|
6766
6874
|
const { openItemIndex, items: items2 } = useRepeaterContext();
|
|
6767
6875
|
const getCurrentTransformType = () => {
|
|
6768
6876
|
switch (true) {
|
|
@@ -6922,7 +7030,7 @@ var import_i18n50 = require("@wordpress/i18n");
|
|
|
6922
7030
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
6923
7031
|
var React102 = __toESM(require("react"));
|
|
6924
7032
|
var import_react60 = require("react");
|
|
6925
|
-
var
|
|
7033
|
+
var import_editor_props52 = require("@elementor/editor-props");
|
|
6926
7034
|
var import_ui86 = require("@elementor/ui");
|
|
6927
7035
|
var import_i18n48 = require("@wordpress/i18n");
|
|
6928
7036
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
@@ -6949,7 +7057,7 @@ var ChildrenPerspectiveControl = () => {
|
|
|
6949
7057
|
var PerspectiveControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React102.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
6950
7058
|
var PerspectiveOriginControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React102.createElement(PerspectiveOriginControlProvider, null));
|
|
6951
7059
|
var PerspectiveOriginControlProvider = () => {
|
|
6952
|
-
const context = useBoundProp(
|
|
7060
|
+
const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
|
|
6953
7061
|
return /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React102.createElement(ControlFields, { control }))));
|
|
6954
7062
|
};
|
|
6955
7063
|
var ControlFields = ({ control }) => {
|
|
@@ -6960,7 +7068,7 @@ var ControlFields = ({ control }) => {
|
|
|
6960
7068
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
6961
7069
|
var React103 = __toESM(require("react"));
|
|
6962
7070
|
var import_react61 = require("react");
|
|
6963
|
-
var
|
|
7071
|
+
var import_editor_props53 = require("@elementor/editor-props");
|
|
6964
7072
|
var import_ui87 = require("@elementor/ui");
|
|
6965
7073
|
var import_i18n49 = require("@wordpress/i18n");
|
|
6966
7074
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
@@ -6986,7 +7094,7 @@ var TransformOriginControl = () => {
|
|
|
6986
7094
|
return /* @__PURE__ */ React103.createElement(import_ui87.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, (0, import_i18n49.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React103.createElement(ControlFields2, { control, key: control.bind })));
|
|
6987
7095
|
};
|
|
6988
7096
|
var ControlFields2 = ({ control }) => {
|
|
6989
|
-
const context = useBoundProp(
|
|
7097
|
+
const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
|
|
6990
7098
|
const rowRef = (0, import_react61.useRef)(null);
|
|
6991
7099
|
return /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
6992
7100
|
};
|
|
@@ -7034,7 +7142,7 @@ var TransformSettingsControl = ({
|
|
|
7034
7142
|
var SIZE11 = "tiny";
|
|
7035
7143
|
var TransformRepeaterControl = createControl(
|
|
7036
7144
|
({ showChildrenPerspective }) => {
|
|
7037
|
-
const context = useBoundProp(
|
|
7145
|
+
const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
|
|
7038
7146
|
const headerRef = (0, import_react62.useRef)(null);
|
|
7039
7147
|
const popupState = (0, import_ui89.usePopupState)({ variant: "popover" });
|
|
7040
7148
|
return /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(
|
|
@@ -7062,7 +7170,7 @@ var Repeater2 = ({
|
|
|
7062
7170
|
propType,
|
|
7063
7171
|
popupState
|
|
7064
7172
|
}) => {
|
|
7065
|
-
const transformFunctionsContext = useBoundProp(
|
|
7173
|
+
const transformFunctionsContext = useBoundProp(import_editor_props54.transformFunctionsPropTypeUtil);
|
|
7066
7174
|
const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
|
|
7067
7175
|
const { value: transformValues, bind } = transformFunctionsContext;
|
|
7068
7176
|
const getInitialValue2 = () => {
|
|
@@ -7073,7 +7181,7 @@ var Repeater2 = ({
|
|
|
7073
7181
|
ControlRepeater,
|
|
7074
7182
|
{
|
|
7075
7183
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
7076
|
-
propTypeUtil:
|
|
7184
|
+
propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
|
|
7077
7185
|
},
|
|
7078
7186
|
/* @__PURE__ */ React105.createElement(
|
|
7079
7187
|
RepeaterHeader,
|
|
@@ -7116,7 +7224,7 @@ var TransformBasePopoverTrigger = ({
|
|
|
7116
7224
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
7117
7225
|
var React108 = __toESM(require("react"));
|
|
7118
7226
|
var import_react65 = require("react");
|
|
7119
|
-
var
|
|
7227
|
+
var import_editor_props57 = require("@elementor/editor-props");
|
|
7120
7228
|
var import_icons36 = require("@elementor/icons");
|
|
7121
7229
|
var import_ui92 = require("@elementor/ui");
|
|
7122
7230
|
var import_utils7 = require("@elementor/utils");
|
|
@@ -7125,11 +7233,11 @@ var import_i18n54 = require("@wordpress/i18n");
|
|
|
7125
7233
|
// src/controls/selection-size-control.tsx
|
|
7126
7234
|
var React106 = __toESM(require("react"));
|
|
7127
7235
|
var import_react63 = require("react");
|
|
7128
|
-
var
|
|
7236
|
+
var import_editor_props55 = require("@elementor/editor-props");
|
|
7129
7237
|
var import_ui90 = require("@elementor/ui");
|
|
7130
7238
|
var SelectionSizeControl = createControl(
|
|
7131
7239
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
7132
|
-
const { value, setValue, propType } = useBoundProp(
|
|
7240
|
+
const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
|
|
7133
7241
|
const rowRef = (0, import_react63.useRef)(null);
|
|
7134
7242
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
7135
7243
|
const currentSizeConfig = (0, import_react63.useMemo)(() => {
|
|
@@ -7346,7 +7454,7 @@ function subscribeToTransitionEvent() {
|
|
|
7346
7454
|
// src/controls/transition-control/transition-selector.tsx
|
|
7347
7455
|
var React107 = __toESM(require("react"));
|
|
7348
7456
|
var import_react64 = require("react");
|
|
7349
|
-
var
|
|
7457
|
+
var import_editor_props56 = require("@elementor/editor-props");
|
|
7350
7458
|
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
7351
7459
|
var import_icons35 = require("@elementor/icons");
|
|
7352
7460
|
var import_ui91 = require("@elementor/ui");
|
|
@@ -7427,7 +7535,7 @@ var TransitionSelector = ({
|
|
|
7427
7535
|
disabledItems = [],
|
|
7428
7536
|
showPromotion = false
|
|
7429
7537
|
}) => {
|
|
7430
|
-
const { value, setValue } = useBoundProp(
|
|
7538
|
+
const { value, setValue } = useBoundProp(import_editor_props56.keyValuePropTypeUtil);
|
|
7431
7539
|
const {
|
|
7432
7540
|
key: { value: transitionLabel }
|
|
7433
7541
|
} = value;
|
|
@@ -7546,9 +7654,9 @@ var DURATION_CONFIG = {
|
|
|
7546
7654
|
units: ["s", "ms"],
|
|
7547
7655
|
defaultUnit: "ms"
|
|
7548
7656
|
};
|
|
7549
|
-
var childArrayPropTypeUtil = (0,
|
|
7550
|
-
|
|
7551
|
-
|
|
7657
|
+
var childArrayPropTypeUtil = (0, import_editor_props57.createArrayPropUtils)(
|
|
7658
|
+
import_editor_props57.selectionSizePropTypeUtil.key,
|
|
7659
|
+
import_editor_props57.selectionSizePropTypeUtil.schema,
|
|
7552
7660
|
"transition"
|
|
7553
7661
|
);
|
|
7554
7662
|
subscribeToTransitionEvent();
|
|
@@ -7592,7 +7700,7 @@ var isItemDisabled = (item) => {
|
|
|
7592
7700
|
};
|
|
7593
7701
|
var getChildControlConfig = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
7594
7702
|
return {
|
|
7595
|
-
propTypeUtil:
|
|
7703
|
+
propTypeUtil: import_editor_props57.selectionSizePropTypeUtil,
|
|
7596
7704
|
component: SelectionSizeControl,
|
|
7597
7705
|
props: getSelectionSizeProps(recentlyUsedList, disabledItems, showPromotion),
|
|
7598
7706
|
isItemDisabled
|
|
@@ -7723,17 +7831,17 @@ var TransitionRepeaterControl = createControl(
|
|
|
7723
7831
|
// src/controls/date-time-control.tsx
|
|
7724
7832
|
var React109 = __toESM(require("react"));
|
|
7725
7833
|
var dayjs = __toESM(require("dayjs"));
|
|
7726
|
-
var import_editor_props57 = require("@elementor/editor-props");
|
|
7727
7834
|
var import_editor_props58 = require("@elementor/editor-props");
|
|
7835
|
+
var import_editor_props59 = require("@elementor/editor-props");
|
|
7728
7836
|
var import_ui93 = require("@elementor/ui");
|
|
7729
7837
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
7730
7838
|
var TIME_FORMAT = "HH:mm";
|
|
7731
7839
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
7732
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
7840
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props59.DateTimePropTypeUtil);
|
|
7733
7841
|
const handleChange = (newValue, meta) => {
|
|
7734
7842
|
const field = meta.bind;
|
|
7735
7843
|
const fieldValue = newValue[field];
|
|
7736
|
-
if ((0,
|
|
7844
|
+
if ((0, import_editor_props58.isTransformable)(fieldValue)) {
|
|
7737
7845
|
return setValue({ ...value, [field]: fieldValue });
|
|
7738
7846
|
}
|
|
7739
7847
|
let formattedValue = "";
|
|
@@ -7772,7 +7880,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7772
7880
|
return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(import_ui93.LocalizationProvider, null, /* @__PURE__ */ React109.createElement(import_ui93.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
|
|
7773
7881
|
import_ui93.DatePicker,
|
|
7774
7882
|
{
|
|
7775
|
-
value: parseDateValue(
|
|
7883
|
+
value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
|
|
7776
7884
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
7777
7885
|
disabled: inputDisabled,
|
|
7778
7886
|
slotProps: {
|
|
@@ -7784,7 +7892,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7784
7892
|
)), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
|
|
7785
7893
|
import_ui93.TimePicker,
|
|
7786
7894
|
{
|
|
7787
|
-
value: parseTimeValue(
|
|
7895
|
+
value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
|
|
7788
7896
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
7789
7897
|
disabled: inputDisabled,
|
|
7790
7898
|
slotProps: {
|
|
@@ -7798,13 +7906,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7798
7906
|
|
|
7799
7907
|
// src/controls/date-range-control.tsx
|
|
7800
7908
|
var React111 = __toESM(require("react"));
|
|
7801
|
-
var
|
|
7909
|
+
var import_editor_props61 = require("@elementor/editor-props");
|
|
7802
7910
|
var import_ui95 = require("@elementor/ui");
|
|
7803
7911
|
var import_i18n55 = require("@wordpress/i18n");
|
|
7804
7912
|
|
|
7805
7913
|
// src/controls/date-string-control.tsx
|
|
7806
7914
|
var React110 = __toESM(require("react"));
|
|
7807
|
-
var
|
|
7915
|
+
var import_editor_props60 = require("@elementor/editor-props");
|
|
7808
7916
|
var import_ui94 = require("@elementor/ui");
|
|
7809
7917
|
|
|
7810
7918
|
// src/utils/date-time.ts
|
|
@@ -7839,7 +7947,7 @@ function parseTimeString(raw) {
|
|
|
7839
7947
|
// src/controls/date-string-control.tsx
|
|
7840
7948
|
var DateStringControl = createControl(
|
|
7841
7949
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
7842
|
-
const { value, setValue, disabled } = useBoundProp(
|
|
7950
|
+
const { value, setValue, disabled } = useBoundProp(import_editor_props60.dateStringPropTypeUtil);
|
|
7843
7951
|
const isDisabled = inputDisabled ?? disabled;
|
|
7844
7952
|
const slotProps = {
|
|
7845
7953
|
textField: {
|
|
@@ -7887,9 +7995,9 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
7887
7995
|
};
|
|
7888
7996
|
var RANGE_ERROR_MESSAGE = (0, import_i18n55.__)("Max date must be on or after Min date", "elementor");
|
|
7889
7997
|
var DateRangeControl = createControl(() => {
|
|
7890
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
7891
|
-
const minString =
|
|
7892
|
-
const maxString =
|
|
7998
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props61.dateRangePropTypeUtil);
|
|
7999
|
+
const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
|
|
8000
|
+
const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
|
|
7893
8001
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
7894
8002
|
return /* @__PURE__ */ React111.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { gap: 0.75 }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
|
|
7895
8003
|
BoundDateStringControl,
|
|
@@ -7917,11 +8025,11 @@ var BoundDateStringControl = ({
|
|
|
7917
8025
|
|
|
7918
8026
|
// src/controls/time-string-control.tsx
|
|
7919
8027
|
var React112 = __toESM(require("react"));
|
|
7920
|
-
var
|
|
8028
|
+
var import_editor_props62 = require("@elementor/editor-props");
|
|
7921
8029
|
var import_ui96 = require("@elementor/ui");
|
|
7922
8030
|
var TimeStringControl = createControl(
|
|
7923
8031
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
7924
|
-
const { value, setValue, disabled } = useBoundProp(
|
|
8032
|
+
const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
|
|
7925
8033
|
const isDisabled = inputDisabled ?? disabled;
|
|
7926
8034
|
const slotProps = {
|
|
7927
8035
|
textField: {
|
|
@@ -7958,7 +8066,7 @@ var TimeStringControl = createControl(
|
|
|
7958
8066
|
|
|
7959
8067
|
// src/controls/time-range-control.tsx
|
|
7960
8068
|
var React113 = __toESM(require("react"));
|
|
7961
|
-
var
|
|
8069
|
+
var import_editor_props63 = require("@elementor/editor-props");
|
|
7962
8070
|
var import_ui97 = require("@elementor/ui");
|
|
7963
8071
|
var import_i18n56 = require("@wordpress/i18n");
|
|
7964
8072
|
var RANGE_LABELS2 = {
|
|
@@ -7966,7 +8074,7 @@ var RANGE_LABELS2 = {
|
|
|
7966
8074
|
max: (0, import_i18n56.__)("End time", "elementor")
|
|
7967
8075
|
};
|
|
7968
8076
|
var TimeRangeControl = createControl(() => {
|
|
7969
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
8077
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
|
|
7970
8078
|
return /* @__PURE__ */ React113.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React113.createElement(import_ui97.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
7971
8079
|
});
|
|
7972
8080
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
@@ -7974,10 +8082,10 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
|
7974
8082
|
};
|
|
7975
8083
|
|
|
7976
8084
|
// src/controls/inline-editing-control.tsx
|
|
7977
|
-
var
|
|
7978
|
-
var
|
|
7979
|
-
var
|
|
7980
|
-
var
|
|
8085
|
+
var React117 = __toESM(require("react"));
|
|
8086
|
+
var import_react71 = require("react");
|
|
8087
|
+
var import_editor_props65 = require("@elementor/editor-props");
|
|
8088
|
+
var import_ui101 = require("@elementor/ui");
|
|
7981
8089
|
|
|
7982
8090
|
// src/components/inline-editor.tsx
|
|
7983
8091
|
var React114 = __toESM(require("react"));
|
|
@@ -7998,7 +8106,7 @@ var import_extension_underline = __toESM(require("@tiptap/extension-underline"))
|
|
|
7998
8106
|
var import_react67 = require("@tiptap/react");
|
|
7999
8107
|
|
|
8000
8108
|
// src/utils/inline-editing.ts
|
|
8001
|
-
var
|
|
8109
|
+
var import_editor_props64 = require("@elementor/editor-props");
|
|
8002
8110
|
function isEmpty(value = "") {
|
|
8003
8111
|
if (!value) {
|
|
8004
8112
|
return true;
|
|
@@ -8016,11 +8124,11 @@ function htmlToPlainText(html) {
|
|
|
8016
8124
|
return doc.body.textContent ?? "";
|
|
8017
8125
|
}
|
|
8018
8126
|
function extractInlineHtmlContent(propValue) {
|
|
8019
|
-
if (
|
|
8020
|
-
return
|
|
8127
|
+
if (import_editor_props64.escapedHtmlPropTypeUtil.isValid(propValue)) {
|
|
8128
|
+
return import_editor_props64.escapedHtmlPropTypeUtil.extract(propValue) ?? "";
|
|
8021
8129
|
}
|
|
8022
|
-
const htmlV3 =
|
|
8023
|
-
return
|
|
8130
|
+
const htmlV3 = import_editor_props64.htmlV3PropTypeUtil.extract(propValue);
|
|
8131
|
+
return import_editor_props64.stringPropTypeUtil.extract(htmlV3?.content ?? null) ?? "";
|
|
8024
8132
|
}
|
|
8025
8133
|
|
|
8026
8134
|
// src/components/inline-editor.tsx
|
|
@@ -8039,6 +8147,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
|
|
|
8039
8147
|
onBlur = void 0,
|
|
8040
8148
|
expectedTag = null,
|
|
8041
8149
|
onEditorCreate,
|
|
8150
|
+
onEditorDestroy,
|
|
8042
8151
|
wrapperClassName,
|
|
8043
8152
|
onSelectionEnd,
|
|
8044
8153
|
mountElement = null
|
|
@@ -8123,6 +8232,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
|
|
|
8123
8232
|
}
|
|
8124
8233
|
},
|
|
8125
8234
|
onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
|
|
8235
|
+
onDestroy: onEditorDestroy ? () => onEditorDestroy() : void 0,
|
|
8126
8236
|
onBlur: mountElement ? void 0 : () => onBlurRef.current?.(),
|
|
8127
8237
|
onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
|
|
8128
8238
|
});
|
|
@@ -8151,151 +8261,471 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
8151
8261
|
}, dependencies);
|
|
8152
8262
|
};
|
|
8153
8263
|
|
|
8154
|
-
// src/
|
|
8155
|
-
var
|
|
8156
|
-
|
|
8157
|
-
|
|
8158
|
-
|
|
8159
|
-
|
|
8160
|
-
|
|
8161
|
-
const { setValue, placeholder, value } = useBoundProp(import_editor_props64.escapedHtmlPropTypeUtil);
|
|
8162
|
-
const { value: rawValue } = usePropKeyContext();
|
|
8163
|
-
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
8164
|
-
const handleChange = (0, import_react68.useCallback)(
|
|
8165
|
-
(newValue) => {
|
|
8166
|
-
const html = newValue ?? "";
|
|
8167
|
-
setValue(html);
|
|
8168
|
-
},
|
|
8169
|
-
[setValue]
|
|
8170
|
-
);
|
|
8171
|
-
return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
|
|
8172
|
-
import_ui99.Box,
|
|
8173
|
-
{
|
|
8174
|
-
sx: {
|
|
8175
|
-
p: 0.8,
|
|
8176
|
-
border: "1px solid",
|
|
8177
|
-
borderColor: "grey.200",
|
|
8178
|
-
borderRadius: "8px",
|
|
8179
|
-
transition: "border-color .2s ease, box-shadow .2s ease",
|
|
8180
|
-
"&:hover": {
|
|
8181
|
-
borderColor: "black"
|
|
8182
|
-
},
|
|
8183
|
-
"&:focus-within": {
|
|
8184
|
-
borderColor: "black",
|
|
8185
|
-
boxShadow: "0 0 0 1px black"
|
|
8186
|
-
},
|
|
8187
|
-
"& .ProseMirror:focus": {
|
|
8188
|
-
outline: "none"
|
|
8189
|
-
},
|
|
8190
|
-
"& .ProseMirror": {
|
|
8191
|
-
minHeight: "70px",
|
|
8192
|
-
fontSize: "12px",
|
|
8193
|
-
"& a": {
|
|
8194
|
-
color: "inherit"
|
|
8195
|
-
},
|
|
8196
|
-
"& .elementor-inline-editor-reset": {
|
|
8197
|
-
margin: 0,
|
|
8198
|
-
padding: 0
|
|
8199
|
-
},
|
|
8200
|
-
"&.is-empty::before": {
|
|
8201
|
-
content: "attr(data-placeholder)",
|
|
8202
|
-
color: "text.tertiary",
|
|
8203
|
-
pointerEvents: "none",
|
|
8204
|
-
position: "absolute",
|
|
8205
|
-
opacity: 0.6
|
|
8206
|
-
}
|
|
8207
|
-
},
|
|
8208
|
-
".strip-styles *": {
|
|
8209
|
-
all: "unset"
|
|
8210
|
-
},
|
|
8211
|
-
...sx
|
|
8212
|
-
},
|
|
8213
|
-
...attributes,
|
|
8214
|
-
...props
|
|
8215
|
-
},
|
|
8216
|
-
/* @__PURE__ */ React115.createElement(InlineEditor, { value: content, setValue: handleChange, placeholder: placeholder ?? null })
|
|
8217
|
-
));
|
|
8218
|
-
}
|
|
8219
|
-
);
|
|
8220
|
-
|
|
8221
|
-
// src/controls/email-form-action-control/index.tsx
|
|
8222
|
-
var React119 = __toESM(require("react"));
|
|
8223
|
-
var import_editor_props67 = require("@elementor/editor-props");
|
|
8224
|
-
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
8225
|
-
var import_ui103 = require("@elementor/ui");
|
|
8264
|
+
// src/components/inline-editor-toolbar.tsx
|
|
8265
|
+
var React116 = __toESM(require("react"));
|
|
8266
|
+
var import_react69 = require("react");
|
|
8267
|
+
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8268
|
+
var import_icons38 = require("@elementor/icons");
|
|
8269
|
+
var import_ui100 = require("@elementor/ui");
|
|
8270
|
+
var import_react70 = require("@tiptap/react");
|
|
8226
8271
|
var import_i18n58 = require("@wordpress/i18n");
|
|
8227
8272
|
|
|
8228
|
-
// src/
|
|
8229
|
-
var
|
|
8230
|
-
var
|
|
8231
|
-
var
|
|
8273
|
+
// src/components/url-popover.tsx
|
|
8274
|
+
var React115 = __toESM(require("react"));
|
|
8275
|
+
var import_react68 = require("react");
|
|
8276
|
+
var import_icons37 = require("@elementor/icons");
|
|
8277
|
+
var import_ui99 = require("@elementor/ui");
|
|
8232
8278
|
var import_i18n57 = require("@wordpress/i18n");
|
|
8233
|
-
|
|
8234
|
-
|
|
8235
|
-
|
|
8236
|
-
|
|
8237
|
-
|
|
8238
|
-
|
|
8239
|
-
|
|
8240
|
-
|
|
8241
|
-
|
|
8242
|
-
|
|
8243
|
-
|
|
8244
|
-
|
|
8245
|
-
|
|
8246
|
-
];
|
|
8247
|
-
var FORM_ELEMENT_TYPE = "e-form";
|
|
8248
|
-
var CSS_ID_PROP_KEY = "_cssid";
|
|
8249
|
-
function isFormFieldWidgetType(widgetType) {
|
|
8250
|
-
return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
|
|
8251
|
-
}
|
|
8252
|
-
function extractStringPropValue(value) {
|
|
8253
|
-
return import_editor_props65.stringPropTypeUtil.extract(value);
|
|
8254
|
-
}
|
|
8255
|
-
function getSettingWithDefault(child, widgetType, key) {
|
|
8256
|
-
const fromGet = child.settings.get(key);
|
|
8257
|
-
if (fromGet !== null && fromGet !== void 0) {
|
|
8258
|
-
return fromGet;
|
|
8259
|
-
}
|
|
8260
|
-
const schema = (0, import_editor_elements7.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
|
|
8261
|
-
return schema?.[key]?.default ?? null;
|
|
8262
|
-
}
|
|
8263
|
-
function getFieldCssId(child, widgetType) {
|
|
8264
|
-
return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
|
|
8265
|
-
}
|
|
8266
|
-
function getFormContainer(elementId) {
|
|
8267
|
-
let container = (0, import_editor_elements7.getContainer)(elementId);
|
|
8268
|
-
while (container) {
|
|
8269
|
-
if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
|
|
8270
|
-
return container;
|
|
8279
|
+
var UrlPopover = ({
|
|
8280
|
+
popupState,
|
|
8281
|
+
restoreValue,
|
|
8282
|
+
anchorRef,
|
|
8283
|
+
value,
|
|
8284
|
+
onChange,
|
|
8285
|
+
openInNewTab,
|
|
8286
|
+
onToggleNewTab
|
|
8287
|
+
}) => {
|
|
8288
|
+
const inputRef = (0, import_react68.useRef)(null);
|
|
8289
|
+
(0, import_react68.useEffect)(() => {
|
|
8290
|
+
if (popupState.isOpen) {
|
|
8291
|
+
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8271
8292
|
}
|
|
8272
|
-
|
|
8273
|
-
|
|
8274
|
-
|
|
8275
|
-
|
|
8276
|
-
|
|
8277
|
-
return
|
|
8278
|
-
|
|
8279
|
-
|
|
8280
|
-
|
|
8281
|
-
|
|
8282
|
-
|
|
8283
|
-
|
|
8284
|
-
|
|
8285
|
-
|
|
8286
|
-
|
|
8287
|
-
|
|
8288
|
-
|
|
8289
|
-
|
|
8290
|
-
|
|
8291
|
-
|
|
8292
|
-
|
|
8293
|
+
}, [popupState.isOpen]);
|
|
8294
|
+
const handleClose = () => {
|
|
8295
|
+
restoreValue();
|
|
8296
|
+
popupState.close();
|
|
8297
|
+
};
|
|
8298
|
+
return /* @__PURE__ */ React115.createElement(
|
|
8299
|
+
import_ui99.Popover,
|
|
8300
|
+
{
|
|
8301
|
+
slotProps: {
|
|
8302
|
+
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8303
|
+
},
|
|
8304
|
+
...(0, import_ui99.bindPopover)(popupState),
|
|
8305
|
+
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8306
|
+
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8307
|
+
onClose: handleClose
|
|
8308
|
+
},
|
|
8309
|
+
/* @__PURE__ */ React115.createElement(import_ui99.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
|
|
8310
|
+
import_ui99.TextField,
|
|
8311
|
+
{
|
|
8312
|
+
value,
|
|
8313
|
+
onChange,
|
|
8314
|
+
size: "tiny",
|
|
8315
|
+
fullWidth: true,
|
|
8316
|
+
placeholder: (0, import_i18n57.__)("Type a URL", "elementor"),
|
|
8317
|
+
inputProps: { ref: inputRef },
|
|
8318
|
+
color: "secondary",
|
|
8319
|
+
InputProps: { sx: { borderRadius: "8px" } },
|
|
8320
|
+
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8293
8321
|
}
|
|
8294
|
-
|
|
8295
|
-
|
|
8296
|
-
|
|
8297
|
-
|
|
8298
|
-
|
|
8322
|
+
), /* @__PURE__ */ React115.createElement(import_ui99.Tooltip, { title: (0, import_i18n57.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
|
|
8323
|
+
import_ui99.ToggleButton,
|
|
8324
|
+
{
|
|
8325
|
+
size: "tiny",
|
|
8326
|
+
value: "newTab",
|
|
8327
|
+
selected: openInNewTab,
|
|
8328
|
+
onClick: onToggleNewTab,
|
|
8329
|
+
"aria-label": (0, import_i18n57.__)("Open in a new tab", "elementor"),
|
|
8330
|
+
sx: { borderRadius: "8px" }
|
|
8331
|
+
},
|
|
8332
|
+
/* @__PURE__ */ React115.createElement(import_icons37.ExternalLinkIcon, { fontSize: "tiny" })
|
|
8333
|
+
)))
|
|
8334
|
+
);
|
|
8335
|
+
};
|
|
8336
|
+
|
|
8337
|
+
// src/components/inline-editor-toolbar.tsx
|
|
8338
|
+
var InlineEditorToolbar = ({
|
|
8339
|
+
editor,
|
|
8340
|
+
elementId,
|
|
8341
|
+
sx = {},
|
|
8342
|
+
inControlPanel = false
|
|
8343
|
+
}) => {
|
|
8344
|
+
const [urlValue, setUrlValue] = (0, import_react69.useState)("");
|
|
8345
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react69.useState)(false);
|
|
8346
|
+
const toolbarRef = (0, import_react69.useRef)(null);
|
|
8347
|
+
const linkPopupState = (0, import_ui100.usePopupState)({ variant: "popover" });
|
|
8348
|
+
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8349
|
+
const editorState = (0, import_react70.useEditorState)({
|
|
8350
|
+
editor,
|
|
8351
|
+
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
8352
|
+
});
|
|
8353
|
+
const formatButtonsList = (0, import_react69.useMemo)(() => {
|
|
8354
|
+
const buttons = Object.values(formatButtons);
|
|
8355
|
+
if (isElementClickable) {
|
|
8356
|
+
return buttons.filter((button) => button.action !== "link");
|
|
8357
|
+
}
|
|
8358
|
+
return buttons;
|
|
8359
|
+
}, [isElementClickable]);
|
|
8360
|
+
const handleLinkClick = () => {
|
|
8361
|
+
const linkAttrs = editor.getAttributes("link");
|
|
8362
|
+
setUrlValue(linkAttrs.href || "");
|
|
8363
|
+
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
8364
|
+
linkPopupState.open(toolbarRef.current);
|
|
8365
|
+
};
|
|
8366
|
+
const handleUrlChange = (event) => {
|
|
8367
|
+
setUrlValue(event.target.value);
|
|
8368
|
+
};
|
|
8369
|
+
const handleToggleNewTab = () => {
|
|
8370
|
+
setOpenInNewTab(!openInNewTab);
|
|
8371
|
+
};
|
|
8372
|
+
const handleUrlSubmit = () => {
|
|
8373
|
+
if (urlValue) {
|
|
8374
|
+
editor.chain().focus().setLink({
|
|
8375
|
+
href: urlValue,
|
|
8376
|
+
target: openInNewTab ? "_blank" : "_self"
|
|
8377
|
+
}).run();
|
|
8378
|
+
} else {
|
|
8379
|
+
editor.chain().focus().unsetLink().run();
|
|
8380
|
+
}
|
|
8381
|
+
if (elementId) {
|
|
8382
|
+
window.dispatchEvent(
|
|
8383
|
+
new CustomEvent("elementor:inline-link-changed", {
|
|
8384
|
+
detail: { elementId }
|
|
8385
|
+
})
|
|
8386
|
+
);
|
|
8387
|
+
}
|
|
8388
|
+
linkPopupState.close();
|
|
8389
|
+
};
|
|
8390
|
+
(0, import_react69.useEffect)(() => {
|
|
8391
|
+
if (!inControlPanel) {
|
|
8392
|
+
editor?.commands?.focus();
|
|
8393
|
+
}
|
|
8394
|
+
}, [editor, inControlPanel]);
|
|
8395
|
+
return /* @__PURE__ */ React116.createElement(
|
|
8396
|
+
import_ui100.Box,
|
|
8397
|
+
{
|
|
8398
|
+
ref: toolbarRef,
|
|
8399
|
+
sx: {
|
|
8400
|
+
display: "inline-flex",
|
|
8401
|
+
gap: 0.5,
|
|
8402
|
+
padding: 0.5,
|
|
8403
|
+
borderRadius: "8px",
|
|
8404
|
+
backgroundColor: "background.paper",
|
|
8405
|
+
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
8406
|
+
alignItems: "center",
|
|
8407
|
+
visibility: linkPopupState.isOpen ? "hidden" : "visible",
|
|
8408
|
+
pointerEvents: linkPopupState.isOpen ? "none" : "all",
|
|
8409
|
+
...sx,
|
|
8410
|
+
...inControlPanel && {
|
|
8411
|
+
width: "100%",
|
|
8412
|
+
justifyContent: "center",
|
|
8413
|
+
flexDirection: "row",
|
|
8414
|
+
backgroundColor: "transparent",
|
|
8415
|
+
boxShadow: "none",
|
|
8416
|
+
borderWidth: "0",
|
|
8417
|
+
borderBottom: "1px solid",
|
|
8418
|
+
borderBottomColor: "grey.200",
|
|
8419
|
+
borderRadius: "0",
|
|
8420
|
+
position: "absolute",
|
|
8421
|
+
top: "0",
|
|
8422
|
+
left: "0"
|
|
8423
|
+
}
|
|
8424
|
+
}
|
|
8425
|
+
},
|
|
8426
|
+
/* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(import_ui100.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
8427
|
+
/* @__PURE__ */ React116.createElement(
|
|
8428
|
+
import_ui100.ToggleButtonGroup,
|
|
8429
|
+
{
|
|
8430
|
+
value: editorState,
|
|
8431
|
+
size: "tiny",
|
|
8432
|
+
sx: {
|
|
8433
|
+
display: "flex",
|
|
8434
|
+
gap: 0.5,
|
|
8435
|
+
border: "none",
|
|
8436
|
+
[`& .${import_ui100.toggleButtonGroupClasses.firstButton}, & .${import_ui100.toggleButtonGroupClasses.middleButton}, & .${import_ui100.toggleButtonGroupClasses.lastButton}`]: {
|
|
8437
|
+
borderRadius: "8px",
|
|
8438
|
+
border: "none",
|
|
8439
|
+
marginLeft: 0,
|
|
8440
|
+
"&.Mui-selected": {
|
|
8441
|
+
marginLeft: 0
|
|
8442
|
+
},
|
|
8443
|
+
"& + &.Mui-selected": {
|
|
8444
|
+
marginLeft: 0
|
|
8445
|
+
}
|
|
8446
|
+
},
|
|
8447
|
+
...inControlPanel && {
|
|
8448
|
+
justifyContent: "space-between",
|
|
8449
|
+
width: "100%",
|
|
8450
|
+
"& svg": {
|
|
8451
|
+
width: "0.7rem",
|
|
8452
|
+
height: "0.7rem",
|
|
8453
|
+
fill: "black"
|
|
8454
|
+
}
|
|
8455
|
+
}
|
|
8456
|
+
}
|
|
8457
|
+
},
|
|
8458
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
|
|
8459
|
+
import_ui100.ToggleButton,
|
|
8460
|
+
{
|
|
8461
|
+
value: button.action,
|
|
8462
|
+
"aria-label": button.label,
|
|
8463
|
+
size: "tiny",
|
|
8464
|
+
onClick: () => {
|
|
8465
|
+
if (button.action === "link") {
|
|
8466
|
+
handleLinkClick();
|
|
8467
|
+
} else {
|
|
8468
|
+
button.method?.(editor);
|
|
8469
|
+
}
|
|
8470
|
+
editor?.commands?.focus();
|
|
8471
|
+
}
|
|
8472
|
+
},
|
|
8473
|
+
button.icon
|
|
8474
|
+
)))
|
|
8475
|
+
),
|
|
8476
|
+
/* @__PURE__ */ React116.createElement(
|
|
8477
|
+
UrlPopover,
|
|
8478
|
+
{
|
|
8479
|
+
popupState: linkPopupState,
|
|
8480
|
+
anchorRef: toolbarRef,
|
|
8481
|
+
restoreValue: handleUrlSubmit,
|
|
8482
|
+
value: urlValue,
|
|
8483
|
+
onChange: handleUrlChange,
|
|
8484
|
+
openInNewTab,
|
|
8485
|
+
onToggleNewTab: handleToggleNewTab
|
|
8486
|
+
}
|
|
8487
|
+
)
|
|
8488
|
+
);
|
|
8489
|
+
};
|
|
8490
|
+
var checkIfElementIsClickable = (elementId) => {
|
|
8491
|
+
const container = (0, import_editor_elements7.getContainer)(elementId);
|
|
8492
|
+
const type = container?.model.get("widgetType");
|
|
8493
|
+
const isButton = type === "e-button";
|
|
8494
|
+
const hasLink = !!(0, import_editor_elements7.getElementSetting)(elementId, "link")?.value?.destination;
|
|
8495
|
+
return isButton || hasLink;
|
|
8496
|
+
};
|
|
8497
|
+
var toolbarButtons = {
|
|
8498
|
+
clear: {
|
|
8499
|
+
label: (0, import_i18n58.__)("Clear", "elementor"),
|
|
8500
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.MinusIcon, { fontSize: "tiny" }),
|
|
8501
|
+
action: "clear",
|
|
8502
|
+
method: (editor) => {
|
|
8503
|
+
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
8504
|
+
}
|
|
8505
|
+
},
|
|
8506
|
+
bold: {
|
|
8507
|
+
label: (0, import_i18n58.__)("Bold", "elementor"),
|
|
8508
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.BoldIcon, { fontSize: "tiny" }),
|
|
8509
|
+
action: "bold",
|
|
8510
|
+
method: (editor) => {
|
|
8511
|
+
editor.chain().focus().toggleBold().run();
|
|
8512
|
+
}
|
|
8513
|
+
},
|
|
8514
|
+
italic: {
|
|
8515
|
+
label: (0, import_i18n58.__)("Italic", "elementor"),
|
|
8516
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.ItalicIcon, { fontSize: "tiny" }),
|
|
8517
|
+
action: "italic",
|
|
8518
|
+
method: (editor) => {
|
|
8519
|
+
editor.chain().focus().toggleItalic().run();
|
|
8520
|
+
}
|
|
8521
|
+
},
|
|
8522
|
+
underline: {
|
|
8523
|
+
label: (0, import_i18n58.__)("Underline", "elementor"),
|
|
8524
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.UnderlineIcon, { fontSize: "tiny" }),
|
|
8525
|
+
action: "underline",
|
|
8526
|
+
method: (editor) => {
|
|
8527
|
+
editor.chain().focus().toggleUnderline().run();
|
|
8528
|
+
}
|
|
8529
|
+
},
|
|
8530
|
+
strike: {
|
|
8531
|
+
label: (0, import_i18n58.__)("Strikethrough", "elementor"),
|
|
8532
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.StrikethroughIcon, { fontSize: "tiny" }),
|
|
8533
|
+
action: "strike",
|
|
8534
|
+
method: (editor) => {
|
|
8535
|
+
editor.chain().focus().toggleStrike().run();
|
|
8536
|
+
}
|
|
8537
|
+
},
|
|
8538
|
+
superscript: {
|
|
8539
|
+
label: (0, import_i18n58.__)("Superscript", "elementor"),
|
|
8540
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.SuperscriptIcon, { fontSize: "tiny" }),
|
|
8541
|
+
action: "superscript",
|
|
8542
|
+
method: (editor) => {
|
|
8543
|
+
editor.chain().focus().toggleSuperscript().run();
|
|
8544
|
+
}
|
|
8545
|
+
},
|
|
8546
|
+
subscript: {
|
|
8547
|
+
label: (0, import_i18n58.__)("Subscript", "elementor"),
|
|
8548
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.SubscriptIcon, { fontSize: "tiny" }),
|
|
8549
|
+
action: "subscript",
|
|
8550
|
+
method: (editor) => {
|
|
8551
|
+
editor.chain().focus().toggleSubscript().run();
|
|
8552
|
+
}
|
|
8553
|
+
},
|
|
8554
|
+
link: {
|
|
8555
|
+
label: (0, import_i18n58.__)("Link", "elementor"),
|
|
8556
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons38.LinkIcon, { fontSize: "tiny" }),
|
|
8557
|
+
action: "link",
|
|
8558
|
+
method: null
|
|
8559
|
+
}
|
|
8560
|
+
};
|
|
8561
|
+
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
8562
|
+
var possibleFormats = Object.keys(formatButtons);
|
|
8563
|
+
|
|
8564
|
+
// src/controls/inline-editing-control.tsx
|
|
8565
|
+
var InlineEditingControl = createControl(({ sx, attributes, props, context: { elementId } }) => {
|
|
8566
|
+
const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
|
|
8567
|
+
const { value: rawValue } = usePropKeyContext();
|
|
8568
|
+
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
8569
|
+
const [editor, setEditor] = (0, import_react71.useState)(null);
|
|
8570
|
+
const handleChange = (0, import_react71.useCallback)(
|
|
8571
|
+
(newValue) => {
|
|
8572
|
+
const html = newValue ?? "";
|
|
8573
|
+
setValue(html);
|
|
8574
|
+
},
|
|
8575
|
+
[setValue]
|
|
8576
|
+
);
|
|
8577
|
+
return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(import_ui101.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
|
|
8578
|
+
InlineEditorToolbar,
|
|
8579
|
+
{
|
|
8580
|
+
editor,
|
|
8581
|
+
elementId,
|
|
8582
|
+
sx: {
|
|
8583
|
+
boxShadow: "none",
|
|
8584
|
+
border: "1px solid",
|
|
8585
|
+
borderColor: "grey.200",
|
|
8586
|
+
mb: 0.5
|
|
8587
|
+
},
|
|
8588
|
+
inControlPanel: true
|
|
8589
|
+
}
|
|
8590
|
+
), /* @__PURE__ */ React117.createElement(
|
|
8591
|
+
import_ui101.Box,
|
|
8592
|
+
{
|
|
8593
|
+
sx: {
|
|
8594
|
+
p: 0.8,
|
|
8595
|
+
border: "1px solid",
|
|
8596
|
+
borderColor: "grey.200",
|
|
8597
|
+
borderRadius: "8px",
|
|
8598
|
+
transition: "border-color .2s ease, box-shadow .2s ease",
|
|
8599
|
+
"&:hover": {
|
|
8600
|
+
borderColor: "black"
|
|
8601
|
+
},
|
|
8602
|
+
"&:focus-within": {
|
|
8603
|
+
borderColor: "black",
|
|
8604
|
+
boxShadow: "0 0 0 1px black"
|
|
8605
|
+
},
|
|
8606
|
+
"& .ProseMirror:focus": {
|
|
8607
|
+
outline: "none"
|
|
8608
|
+
},
|
|
8609
|
+
"& .ProseMirror": {
|
|
8610
|
+
minHeight: "100px",
|
|
8611
|
+
fontSize: "12px",
|
|
8612
|
+
"& a": {
|
|
8613
|
+
color: "inherit"
|
|
8614
|
+
},
|
|
8615
|
+
"& .elementor-inline-editor-reset": {
|
|
8616
|
+
margin: 0,
|
|
8617
|
+
padding: 0
|
|
8618
|
+
},
|
|
8619
|
+
"&.is-empty::before": {
|
|
8620
|
+
content: "attr(data-placeholder)",
|
|
8621
|
+
color: "text.tertiary",
|
|
8622
|
+
pointerEvents: "none",
|
|
8623
|
+
position: "absolute",
|
|
8624
|
+
opacity: 0.6
|
|
8625
|
+
}
|
|
8626
|
+
},
|
|
8627
|
+
".strip-styles *": {
|
|
8628
|
+
all: "unset"
|
|
8629
|
+
},
|
|
8630
|
+
...sx
|
|
8631
|
+
},
|
|
8632
|
+
...attributes,
|
|
8633
|
+
...props
|
|
8634
|
+
},
|
|
8635
|
+
/* @__PURE__ */ React117.createElement(
|
|
8636
|
+
InlineEditor,
|
|
8637
|
+
{
|
|
8638
|
+
value: content,
|
|
8639
|
+
setValue: handleChange,
|
|
8640
|
+
placeholder: placeholder ?? null,
|
|
8641
|
+
onEditorCreate: setEditor,
|
|
8642
|
+
onEditorDestroy: () => setEditor(null),
|
|
8643
|
+
sx: {
|
|
8644
|
+
paddingBlockStart: 5
|
|
8645
|
+
}
|
|
8646
|
+
}
|
|
8647
|
+
)
|
|
8648
|
+
)));
|
|
8649
|
+
});
|
|
8650
|
+
|
|
8651
|
+
// src/controls/email-form-action-control/index.tsx
|
|
8652
|
+
var React121 = __toESM(require("react"));
|
|
8653
|
+
var import_editor_props68 = require("@elementor/editor-props");
|
|
8654
|
+
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
8655
|
+
var import_ui105 = require("@elementor/ui");
|
|
8656
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
8657
|
+
|
|
8658
|
+
// src/controls/email-form-action-control/fields.tsx
|
|
8659
|
+
var React120 = __toESM(require("react"));
|
|
8660
|
+
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
8661
|
+
var import_ui104 = require("@elementor/ui");
|
|
8662
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8663
|
+
|
|
8664
|
+
// src/hooks/use-form-field-suggestions.ts
|
|
8665
|
+
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
8666
|
+
var import_editor_props66 = require("@elementor/editor-props");
|
|
8667
|
+
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
8668
|
+
var FORM_FIELD_WIDGET_TYPES = [
|
|
8669
|
+
"e-form-input",
|
|
8670
|
+
"e-form-textarea",
|
|
8671
|
+
"e-form-checkbox",
|
|
8672
|
+
"e-form-radio-button",
|
|
8673
|
+
"e-form-select",
|
|
8674
|
+
"e-form-date-picker",
|
|
8675
|
+
"e-form-time-picker"
|
|
8676
|
+
];
|
|
8677
|
+
var FORM_ELEMENT_TYPE = "e-form";
|
|
8678
|
+
var CSS_ID_PROP_KEY = "_cssid";
|
|
8679
|
+
function isFormFieldWidgetType(widgetType) {
|
|
8680
|
+
return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
|
|
8681
|
+
}
|
|
8682
|
+
function extractStringPropValue(value) {
|
|
8683
|
+
return import_editor_props66.stringPropTypeUtil.extract(value);
|
|
8684
|
+
}
|
|
8685
|
+
function getSettingWithDefault(child, widgetType, key) {
|
|
8686
|
+
const fromGet = child.settings.get(key);
|
|
8687
|
+
if (fromGet !== null && fromGet !== void 0) {
|
|
8688
|
+
return fromGet;
|
|
8689
|
+
}
|
|
8690
|
+
const schema = (0, import_editor_elements8.getWidgetsCache)()?.[widgetType]?.atomic_props_schema;
|
|
8691
|
+
return schema?.[key]?.default ?? null;
|
|
8692
|
+
}
|
|
8693
|
+
function getFieldCssId(child, widgetType) {
|
|
8694
|
+
return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
|
|
8695
|
+
}
|
|
8696
|
+
function getFormContainer(elementId) {
|
|
8697
|
+
let container = (0, import_editor_elements8.getContainer)(elementId);
|
|
8698
|
+
while (container) {
|
|
8699
|
+
if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
|
|
8700
|
+
return container;
|
|
8701
|
+
}
|
|
8702
|
+
container = container.parent ?? null;
|
|
8703
|
+
}
|
|
8704
|
+
return null;
|
|
8705
|
+
}
|
|
8706
|
+
function useFormFieldSuggestions(options) {
|
|
8707
|
+
return (0, import_editor_v1_adapters2.__privateUseListenTo)(
|
|
8708
|
+
[
|
|
8709
|
+
(0, import_editor_v1_adapters2.v1ReadyEvent)(),
|
|
8710
|
+
(0, import_editor_v1_adapters2.commandEndEvent)("document/elements/create"),
|
|
8711
|
+
(0, import_editor_v1_adapters2.commandEndEvent)("document/elements/delete"),
|
|
8712
|
+
(0, import_editor_v1_adapters2.commandEndEvent)("document/elements/set-settings")
|
|
8713
|
+
],
|
|
8714
|
+
() => {
|
|
8715
|
+
const selectedElements = (0, import_editor_elements8.getSelectedElements)();
|
|
8716
|
+
const selectedElement = selectedElements[0];
|
|
8717
|
+
if (!selectedElement) {
|
|
8718
|
+
return [];
|
|
8719
|
+
}
|
|
8720
|
+
const formContainer = getFormContainer(selectedElement.id);
|
|
8721
|
+
if (!formContainer?.children) {
|
|
8722
|
+
return [];
|
|
8723
|
+
}
|
|
8724
|
+
const suggestions = [];
|
|
8725
|
+
const seenCssIds = /* @__PURE__ */ new Set();
|
|
8726
|
+
formContainer.children.forEachRecursive?.((child) => {
|
|
8727
|
+
const widgetType = child.model.get("widgetType");
|
|
8728
|
+
if (!widgetType || !isFormFieldWidgetType(widgetType)) {
|
|
8299
8729
|
return;
|
|
8300
8730
|
}
|
|
8301
8731
|
if (options?.inputType) {
|
|
@@ -8318,10 +8748,10 @@ function useFormFieldSuggestions(options) {
|
|
|
8318
8748
|
}
|
|
8319
8749
|
|
|
8320
8750
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
8321
|
-
var
|
|
8322
|
-
var
|
|
8323
|
-
var
|
|
8324
|
-
var
|
|
8751
|
+
var React118 = __toESM(require("react"));
|
|
8752
|
+
var import_react72 = require("react");
|
|
8753
|
+
var import_editor_props67 = require("@elementor/editor-props");
|
|
8754
|
+
var import_ui102 = require("@elementor/ui");
|
|
8325
8755
|
|
|
8326
8756
|
// src/controls/email-form-action-control/utils.ts
|
|
8327
8757
|
var import_schema = require("@elementor/schema");
|
|
@@ -8356,11 +8786,11 @@ function resolveMention(raw, suggestions) {
|
|
|
8356
8786
|
return match ? `[${match.value}]` : raw;
|
|
8357
8787
|
}
|
|
8358
8788
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
8359
|
-
const { value, setValue, disabled } = useBoundProp(
|
|
8360
|
-
const [inputValue, setInputValue] = (0,
|
|
8789
|
+
const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
|
|
8790
|
+
const [inputValue, setInputValue] = (0, import_react72.useState)("");
|
|
8361
8791
|
const items2 = value || [];
|
|
8362
|
-
const selectedValues = items2.map((item) =>
|
|
8363
|
-
const suggestionOptions = (0,
|
|
8792
|
+
const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
8793
|
+
const suggestionOptions = (0, import_react72.useMemo)(
|
|
8364
8794
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
8365
8795
|
[suggestions]
|
|
8366
8796
|
);
|
|
@@ -8369,7 +8799,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8369
8799
|
if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
|
|
8370
8800
|
return;
|
|
8371
8801
|
}
|
|
8372
|
-
setValue([...items2,
|
|
8802
|
+
setValue([...items2, import_editor_props67.stringPropTypeUtil.create(address)]);
|
|
8373
8803
|
setInputValue("");
|
|
8374
8804
|
};
|
|
8375
8805
|
const handleChange = (_, newValue) => {
|
|
@@ -8379,7 +8809,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8379
8809
|
if (!address || !isValidRecipient(address)) {
|
|
8380
8810
|
continue;
|
|
8381
8811
|
}
|
|
8382
|
-
updated.push(
|
|
8812
|
+
updated.push(import_editor_props67.stringPropTypeUtil.create(address));
|
|
8383
8813
|
}
|
|
8384
8814
|
setValue(updated);
|
|
8385
8815
|
setInputValue("");
|
|
@@ -8395,8 +8825,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8395
8825
|
tryAddChip(inputValue);
|
|
8396
8826
|
}
|
|
8397
8827
|
};
|
|
8398
|
-
return /* @__PURE__ */
|
|
8399
|
-
|
|
8828
|
+
return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
|
|
8829
|
+
import_ui102.Autocomplete,
|
|
8400
8830
|
{
|
|
8401
8831
|
fullWidth: true,
|
|
8402
8832
|
multiple: true,
|
|
@@ -8420,99 +8850,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8420
8850
|
onBlur: handleBlur,
|
|
8421
8851
|
getOptionLabel: (option) => option,
|
|
8422
8852
|
isOptionEqualToValue: (option, val) => option === val,
|
|
8423
|
-
renderInput: (params) => /* @__PURE__ */
|
|
8424
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
8853
|
+
renderInput: (params) => /* @__PURE__ */ React118.createElement(import_ui102.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
8854
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React118.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
8425
8855
|
}
|
|
8426
8856
|
));
|
|
8427
8857
|
});
|
|
8428
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
8858
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
8429
8859
|
|
|
8430
8860
|
// src/controls/email-form-action-control/email-field.tsx
|
|
8431
|
-
var
|
|
8432
|
-
var
|
|
8433
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
8861
|
+
var React119 = __toESM(require("react"));
|
|
8862
|
+
var import_ui103 = require("@elementor/ui");
|
|
8863
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true }, /* @__PURE__ */ React119.createElement(TextControl, { placeholder }))));
|
|
8434
8864
|
|
|
8435
8865
|
// src/controls/email-form-action-control/fields.tsx
|
|
8436
8866
|
var SendToField = ({ placeholder }) => {
|
|
8437
8867
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8438
|
-
return /* @__PURE__ */
|
|
8868
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(
|
|
8439
8869
|
EmailChipsField,
|
|
8440
8870
|
{
|
|
8441
|
-
fieldLabel: (0,
|
|
8871
|
+
fieldLabel: (0, import_i18n59.__)("Send to", "elementor"),
|
|
8442
8872
|
placeholder,
|
|
8443
8873
|
suggestions
|
|
8444
8874
|
}
|
|
8445
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
8875
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React120.createElement(import_editor_ui15.InfoAlert, null, (0, import_i18n59.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
8446
8876
|
};
|
|
8447
|
-
var SubjectField = () => /* @__PURE__ */
|
|
8877
|
+
var SubjectField = () => /* @__PURE__ */ React120.createElement(
|
|
8448
8878
|
EmailField,
|
|
8449
8879
|
{
|
|
8450
8880
|
bind: "subject",
|
|
8451
|
-
label: (0,
|
|
8452
|
-
placeholder: (0,
|
|
8881
|
+
label: (0, import_i18n59.__)("Email subject", "elementor"),
|
|
8882
|
+
placeholder: (0, import_i18n59.__)("New form submission", "elementor")
|
|
8453
8883
|
}
|
|
8454
8884
|
);
|
|
8455
8885
|
var MessageField = () => {
|
|
8456
8886
|
const suggestions = useFormFieldSuggestions();
|
|
8457
|
-
return /* @__PURE__ */
|
|
8887
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Message", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(import_editor_ui15.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n59.__)(
|
|
8458
8888
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
8459
8889
|
"elementor"
|
|
8460
|
-
) : (0,
|
|
8890
|
+
) : (0, import_i18n59.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
8461
8891
|
};
|
|
8462
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
8892
|
+
var FromEmailField = () => /* @__PURE__ */ React120.createElement(
|
|
8463
8893
|
EmailField,
|
|
8464
8894
|
{
|
|
8465
8895
|
bind: "from",
|
|
8466
|
-
label: (0,
|
|
8467
|
-
placeholder: (0,
|
|
8896
|
+
label: (0, import_i18n59.__)("From email", "elementor"),
|
|
8897
|
+
placeholder: (0, import_i18n59.__)("What email should appear as the sender?", "elementor")
|
|
8468
8898
|
}
|
|
8469
8899
|
);
|
|
8470
|
-
var FromNameField = () => /* @__PURE__ */
|
|
8900
|
+
var FromNameField = () => /* @__PURE__ */ React120.createElement(
|
|
8471
8901
|
EmailField,
|
|
8472
8902
|
{
|
|
8473
8903
|
bind: "from-name",
|
|
8474
|
-
label: (0,
|
|
8475
|
-
placeholder: (0,
|
|
8904
|
+
label: (0, import_i18n59.__)("From name", "elementor"),
|
|
8905
|
+
placeholder: (0, import_i18n59.__)("What name should appear as the sender?", "elementor")
|
|
8476
8906
|
}
|
|
8477
8907
|
);
|
|
8478
8908
|
var ReplyToField = () => {
|
|
8479
8909
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8480
|
-
return /* @__PURE__ */
|
|
8910
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Reply-to", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(
|
|
8481
8911
|
MentionTextAreaControl,
|
|
8482
8912
|
{
|
|
8483
8913
|
suggestions: emailSuggestions,
|
|
8484
8914
|
rows: 1,
|
|
8485
8915
|
triggerPosition: "start",
|
|
8486
|
-
placeholder: (0,
|
|
8916
|
+
placeholder: (0, import_i18n59.__)("You can type @ to insert an email field", "elementor")
|
|
8487
8917
|
}
|
|
8488
8918
|
))));
|
|
8489
8919
|
};
|
|
8490
8920
|
var CcField = () => {
|
|
8491
8921
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8492
|
-
return /* @__PURE__ */
|
|
8922
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: (0, import_i18n59.__)("Cc", "elementor"), suggestions }));
|
|
8493
8923
|
};
|
|
8494
8924
|
var BccField = () => {
|
|
8495
8925
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8496
|
-
return /* @__PURE__ */
|
|
8926
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: (0, import_i18n59.__)("Bcc", "elementor"), suggestions }));
|
|
8497
8927
|
};
|
|
8498
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
8928
|
+
var MetaDataField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Metadata", "elementor")), /* @__PURE__ */ React120.createElement(
|
|
8499
8929
|
ChipsControl,
|
|
8500
8930
|
{
|
|
8501
8931
|
options: [
|
|
8502
|
-
{ label: (0,
|
|
8503
|
-
{ label: (0,
|
|
8504
|
-
{ label: (0,
|
|
8505
|
-
{ label: (0,
|
|
8506
|
-
{ label: (0,
|
|
8932
|
+
{ label: (0, import_i18n59.__)("Date", "elementor"), value: "date" },
|
|
8933
|
+
{ label: (0, import_i18n59.__)("Time", "elementor"), value: "time" },
|
|
8934
|
+
{ label: (0, import_i18n59.__)("Page URL", "elementor"), value: "page-url" },
|
|
8935
|
+
{ label: (0, import_i18n59.__)("User agent", "elementor"), value: "user-agent" },
|
|
8936
|
+
{ label: (0, import_i18n59.__)("Credit", "elementor"), value: "credit" }
|
|
8507
8937
|
]
|
|
8508
8938
|
}
|
|
8509
8939
|
)));
|
|
8510
|
-
var SendAsField = () => /* @__PURE__ */
|
|
8940
|
+
var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, (0, import_i18n59.__)("Send as", "elementor"))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(
|
|
8511
8941
|
SelectControl,
|
|
8512
8942
|
{
|
|
8513
8943
|
options: [
|
|
8514
|
-
{ label: (0,
|
|
8515
|
-
{ label: (0,
|
|
8944
|
+
{ label: (0, import_i18n59.__)("HTML", "elementor"), value: "html" },
|
|
8945
|
+
{ label: (0, import_i18n59.__)("Plain Text", "elementor"), value: "plain" }
|
|
8516
8946
|
]
|
|
8517
8947
|
}
|
|
8518
8948
|
))));
|
|
@@ -8520,28 +8950,28 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
|
|
|
8520
8950
|
// src/controls/email-form-action-control/index.tsx
|
|
8521
8951
|
var EmailFormActionControl = createControl(
|
|
8522
8952
|
({ toPlaceholder, label }) => {
|
|
8523
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
8524
|
-
return /* @__PURE__ */
|
|
8953
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
|
|
8954
|
+
return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n60.__)("settings", "elementor") : (0, import_i18n60.__)("Email settings", "elementor")), /* @__PURE__ */ React121.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React121.createElement(SubjectField, null), /* @__PURE__ */ React121.createElement(MessageField, null), /* @__PURE__ */ React121.createElement(FromEmailField, null), /* @__PURE__ */ React121.createElement(AdvancedSettings, null)));
|
|
8525
8955
|
}
|
|
8526
8956
|
);
|
|
8527
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
8957
|
+
var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(import_editor_ui16.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(import_ui105.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { gap: 2 }, /* @__PURE__ */ React121.createElement(FromNameField, null), /* @__PURE__ */ React121.createElement(ReplyToField, null), /* @__PURE__ */ React121.createElement(CcField, null), /* @__PURE__ */ React121.createElement(BccField, null), /* @__PURE__ */ React121.createElement(import_ui105.Divider, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
|
|
8528
8958
|
|
|
8529
8959
|
// src/controls/attachment-type-control.tsx
|
|
8530
|
-
var
|
|
8960
|
+
var React122 = __toESM(require("react"));
|
|
8531
8961
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
8532
|
-
var
|
|
8533
|
-
var
|
|
8962
|
+
var import_ui106 = require("@elementor/ui");
|
|
8963
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
8534
8964
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
8535
|
-
return /* @__PURE__ */
|
|
8965
|
+
return /* @__PURE__ */ React122.createElement(import_ui106.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(SelectControl, { options })), /* @__PURE__ */ React122.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React122.createElement(import_editor_ui17.InfoAlert, null, (0, import_i18n61.__)(
|
|
8536
8966
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
8537
8967
|
"elementor"
|
|
8538
8968
|
))));
|
|
8539
8969
|
});
|
|
8540
8970
|
|
|
8541
8971
|
// src/controls/grid-span-control.tsx
|
|
8542
|
-
var
|
|
8543
|
-
var
|
|
8544
|
-
var
|
|
8972
|
+
var React123 = __toESM(require("react"));
|
|
8973
|
+
var import_editor_props69 = require("@elementor/editor-props");
|
|
8974
|
+
var import_ui107 = require("@elementor/ui");
|
|
8545
8975
|
var GridSpanControl = createControl(
|
|
8546
8976
|
({
|
|
8547
8977
|
placeholder: propPlaceholder,
|
|
@@ -8552,14 +8982,14 @@ var GridSpanControl = createControl(
|
|
|
8552
8982
|
sx,
|
|
8553
8983
|
ariaLabel
|
|
8554
8984
|
}) => {
|
|
8555
|
-
const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(
|
|
8985
|
+
const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props69.spanPropTypeUtil);
|
|
8556
8986
|
const handleChange = (event) => {
|
|
8557
8987
|
const next = event.target.value;
|
|
8558
8988
|
setValue(next === "" ? null : next);
|
|
8559
8989
|
};
|
|
8560
8990
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
8561
|
-
return /* @__PURE__ */
|
|
8562
|
-
|
|
8991
|
+
return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
|
|
8992
|
+
import_ui107.TextField,
|
|
8563
8993
|
{
|
|
8564
8994
|
size: "tiny",
|
|
8565
8995
|
fullWidth: true,
|
|
@@ -8578,26 +9008,26 @@ var GridSpanControl = createControl(
|
|
|
8578
9008
|
}
|
|
8579
9009
|
);
|
|
8580
9010
|
|
|
8581
|
-
// src/components/promotions/display-conditions-control.tsx
|
|
8582
|
-
var
|
|
8583
|
-
var
|
|
8584
|
-
var
|
|
8585
|
-
var
|
|
8586
|
-
var
|
|
9011
|
+
// src/components/promotions/display-conditions-control.tsx
|
|
9012
|
+
var React125 = __toESM(require("react"));
|
|
9013
|
+
var import_react74 = require("react");
|
|
9014
|
+
var import_icons39 = require("@elementor/icons");
|
|
9015
|
+
var import_ui109 = require("@elementor/ui");
|
|
9016
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
8587
9017
|
|
|
8588
9018
|
// src/components/promotions/promotion-trigger.tsx
|
|
8589
|
-
var
|
|
8590
|
-
var
|
|
9019
|
+
var React124 = __toESM(require("react"));
|
|
9020
|
+
var import_react73 = require("react");
|
|
8591
9021
|
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
8592
|
-
var
|
|
9022
|
+
var import_ui108 = require("@elementor/ui");
|
|
8593
9023
|
function getV4Promotion(key) {
|
|
8594
9024
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
8595
9025
|
}
|
|
8596
|
-
var PromotionTrigger = (0,
|
|
9026
|
+
var PromotionTrigger = (0, import_react73.forwardRef)(
|
|
8597
9027
|
({ promotionKey, children, trackingData }, ref) => {
|
|
8598
|
-
const [isOpen, setIsOpen] = (0,
|
|
9028
|
+
const [isOpen, setIsOpen] = (0, import_react73.useState)(false);
|
|
8599
9029
|
const promotion = getV4Promotion(promotionKey);
|
|
8600
|
-
const toggle = (0,
|
|
9030
|
+
const toggle = (0, import_react73.useCallback)(() => {
|
|
8601
9031
|
setIsOpen((prev) => {
|
|
8602
9032
|
if (!prev) {
|
|
8603
9033
|
trackViewPromotion(trackingData);
|
|
@@ -8605,8 +9035,8 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
|
|
|
8605
9035
|
return !prev;
|
|
8606
9036
|
});
|
|
8607
9037
|
}, [trackingData]);
|
|
8608
|
-
(0,
|
|
8609
|
-
return /* @__PURE__ */
|
|
9038
|
+
(0, import_react73.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
9039
|
+
return /* @__PURE__ */ React124.createElement(React124.Fragment, null, promotion && /* @__PURE__ */ React124.createElement(
|
|
8610
9040
|
import_editor_ui18.PromotionInfotip,
|
|
8611
9041
|
{
|
|
8612
9042
|
title: promotion.title,
|
|
@@ -8620,8 +9050,8 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
|
|
|
8620
9050
|
},
|
|
8621
9051
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
8622
9052
|
},
|
|
8623
|
-
/* @__PURE__ */
|
|
8624
|
-
|
|
9053
|
+
/* @__PURE__ */ React124.createElement(
|
|
9054
|
+
import_ui108.Box,
|
|
8625
9055
|
{
|
|
8626
9056
|
onClick: (e) => {
|
|
8627
9057
|
e.stopPropagation();
|
|
@@ -8629,19 +9059,19 @@ var PromotionTrigger = (0, import_react70.forwardRef)(
|
|
|
8629
9059
|
},
|
|
8630
9060
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
8631
9061
|
},
|
|
8632
|
-
children ?? /* @__PURE__ */
|
|
9062
|
+
children ?? /* @__PURE__ */ React124.createElement(import_editor_ui18.PromotionChip, null)
|
|
8633
9063
|
)
|
|
8634
9064
|
));
|
|
8635
9065
|
}
|
|
8636
9066
|
);
|
|
8637
9067
|
|
|
8638
9068
|
// src/components/promotions/display-conditions-control.tsx
|
|
8639
|
-
var ARIA_LABEL = (0,
|
|
9069
|
+
var ARIA_LABEL = (0, import_i18n62.__)("Display Conditions", "elementor");
|
|
8640
9070
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
8641
9071
|
var DisplayConditionsControl = createControl(() => {
|
|
8642
|
-
const triggerRef = (0,
|
|
8643
|
-
return /* @__PURE__ */
|
|
8644
|
-
|
|
9072
|
+
const triggerRef = (0, import_react74.useRef)(null);
|
|
9073
|
+
return /* @__PURE__ */ React125.createElement(
|
|
9074
|
+
import_ui109.Stack,
|
|
8645
9075
|
{
|
|
8646
9076
|
direction: "row",
|
|
8647
9077
|
spacing: 2,
|
|
@@ -8650,9 +9080,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8650
9080
|
alignItems: "center"
|
|
8651
9081
|
}
|
|
8652
9082
|
},
|
|
8653
|
-
/* @__PURE__ */
|
|
8654
|
-
/* @__PURE__ */
|
|
8655
|
-
|
|
9083
|
+
/* @__PURE__ */ React125.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
9084
|
+
/* @__PURE__ */ React125.createElement(import_ui109.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React125.createElement(
|
|
9085
|
+
import_ui109.IconButton,
|
|
8656
9086
|
{
|
|
8657
9087
|
size: "tiny",
|
|
8658
9088
|
"aria-label": ARIA_LABEL,
|
|
@@ -8664,23 +9094,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8664
9094
|
borderRadius: 1
|
|
8665
9095
|
}
|
|
8666
9096
|
},
|
|
8667
|
-
/* @__PURE__ */
|
|
9097
|
+
/* @__PURE__ */ React125.createElement(import_icons39.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
8668
9098
|
))
|
|
8669
9099
|
);
|
|
8670
9100
|
});
|
|
8671
9101
|
|
|
8672
9102
|
// src/components/promotions/attributes-control.tsx
|
|
8673
|
-
var
|
|
8674
|
-
var
|
|
8675
|
-
var
|
|
8676
|
-
var
|
|
8677
|
-
var
|
|
8678
|
-
var ARIA_LABEL2 = (0,
|
|
9103
|
+
var React126 = __toESM(require("react"));
|
|
9104
|
+
var import_react75 = require("react");
|
|
9105
|
+
var import_icons40 = require("@elementor/icons");
|
|
9106
|
+
var import_ui110 = require("@elementor/ui");
|
|
9107
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
9108
|
+
var ARIA_LABEL2 = (0, import_i18n63.__)("Attributes", "elementor");
|
|
8679
9109
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
8680
9110
|
var AttributesControl = createControl(() => {
|
|
8681
|
-
const triggerRef = (0,
|
|
8682
|
-
return /* @__PURE__ */
|
|
8683
|
-
|
|
9111
|
+
const triggerRef = (0, import_react75.useRef)(null);
|
|
9112
|
+
return /* @__PURE__ */ React126.createElement(
|
|
9113
|
+
import_ui110.Stack,
|
|
8684
9114
|
{
|
|
8685
9115
|
direction: "row",
|
|
8686
9116
|
spacing: 2,
|
|
@@ -8689,9 +9119,9 @@ var AttributesControl = createControl(() => {
|
|
|
8689
9119
|
alignItems: "center"
|
|
8690
9120
|
}
|
|
8691
9121
|
},
|
|
8692
|
-
/* @__PURE__ */
|
|
8693
|
-
/* @__PURE__ */
|
|
8694
|
-
|
|
9122
|
+
/* @__PURE__ */ React126.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
9123
|
+
/* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React126.createElement(
|
|
9124
|
+
import_icons40.PlusIcon,
|
|
8695
9125
|
{
|
|
8696
9126
|
"aria-label": ARIA_LABEL2,
|
|
8697
9127
|
fontSize: "tiny",
|
|
@@ -8704,21 +9134,21 @@ var AttributesControl = createControl(() => {
|
|
|
8704
9134
|
});
|
|
8705
9135
|
|
|
8706
9136
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
8707
|
-
var
|
|
8708
|
-
var
|
|
8709
|
-
var
|
|
8710
|
-
var CustomIconButton = (0,
|
|
9137
|
+
var React127 = __toESM(require("react"));
|
|
9138
|
+
var import_icons41 = require("@elementor/icons");
|
|
9139
|
+
var import_ui111 = require("@elementor/ui");
|
|
9140
|
+
var CustomIconButton = (0, import_ui111.styled)(import_ui111.IconButton)(({ theme }) => ({
|
|
8711
9141
|
width: theme.spacing(2.5),
|
|
8712
9142
|
height: theme.spacing(2.5)
|
|
8713
9143
|
}));
|
|
8714
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
9144
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React127.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React127.createElement(import_icons41.BrushBigIcon, { fontSize: size })));
|
|
8715
9145
|
|
|
8716
9146
|
// src/components/repeater/repeater.tsx
|
|
8717
|
-
var
|
|
8718
|
-
var
|
|
8719
|
-
var
|
|
8720
|
-
var
|
|
8721
|
-
var
|
|
9147
|
+
var React128 = __toESM(require("react"));
|
|
9148
|
+
var import_react76 = require("react");
|
|
9149
|
+
var import_icons42 = require("@elementor/icons");
|
|
9150
|
+
var import_ui112 = require("@elementor/ui");
|
|
9151
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
8722
9152
|
var SIZE12 = "tiny";
|
|
8723
9153
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
8724
9154
|
var Repeater3 = ({
|
|
@@ -8737,7 +9167,7 @@ var Repeater3 = ({
|
|
|
8737
9167
|
isSortable = true,
|
|
8738
9168
|
adornment = ControlAdornments
|
|
8739
9169
|
}) => {
|
|
8740
|
-
const [openItem, setOpenItem] = (0,
|
|
9170
|
+
const [openItem, setOpenItem] = (0, import_react76.useState)(initialOpenItem);
|
|
8741
9171
|
const uniqueKeys = items2.map(
|
|
8742
9172
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
8743
9173
|
);
|
|
@@ -8800,8 +9230,8 @@ var Repeater3 = ({
|
|
|
8800
9230
|
};
|
|
8801
9231
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
8802
9232
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
8803
|
-
const addButton = /* @__PURE__ */
|
|
8804
|
-
|
|
9233
|
+
const addButton = /* @__PURE__ */ React128.createElement(
|
|
9234
|
+
import_ui112.IconButton,
|
|
8805
9235
|
{
|
|
8806
9236
|
size: SIZE12,
|
|
8807
9237
|
sx: {
|
|
@@ -8809,32 +9239,32 @@ var Repeater3 = ({
|
|
|
8809
9239
|
},
|
|
8810
9240
|
disabled: isButtonDisabled,
|
|
8811
9241
|
onClick: addRepeaterItem,
|
|
8812
|
-
"aria-label": (0,
|
|
9242
|
+
"aria-label": (0, import_i18n64.__)("Add item", "elementor")
|
|
8813
9243
|
},
|
|
8814
|
-
/* @__PURE__ */
|
|
9244
|
+
/* @__PURE__ */ React128.createElement(import_icons42.PlusIcon, { fontSize: SIZE12 })
|
|
8815
9245
|
);
|
|
8816
|
-
return /* @__PURE__ */
|
|
8817
|
-
|
|
9246
|
+
return /* @__PURE__ */ React128.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React128.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React128.createElement(
|
|
9247
|
+
import_ui112.Infotip,
|
|
8818
9248
|
{
|
|
8819
9249
|
placement: "right",
|
|
8820
9250
|
content: addButtonInfotipContent,
|
|
8821
9251
|
color: "secondary",
|
|
8822
9252
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
8823
9253
|
},
|
|
8824
|
-
/* @__PURE__ */
|
|
8825
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
9254
|
+
/* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
9255
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React128.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
8826
9256
|
const index = uniqueKeys.indexOf(key);
|
|
8827
9257
|
const value = items2[index];
|
|
8828
9258
|
if (!value) {
|
|
8829
9259
|
return null;
|
|
8830
9260
|
}
|
|
8831
|
-
return /* @__PURE__ */
|
|
9261
|
+
return /* @__PURE__ */ React128.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React128.createElement(
|
|
8832
9262
|
RepeaterItem,
|
|
8833
9263
|
{
|
|
8834
9264
|
disabled,
|
|
8835
9265
|
propDisabled: value?.disabled,
|
|
8836
|
-
label: /* @__PURE__ */
|
|
8837
|
-
startIcon: /* @__PURE__ */
|
|
9266
|
+
label: /* @__PURE__ */ React128.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Label, { value, index })),
|
|
9267
|
+
startIcon: /* @__PURE__ */ React128.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Icon, { value })),
|
|
8838
9268
|
removeItem: () => removeRepeaterItem(index),
|
|
8839
9269
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
8840
9270
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -8848,7 +9278,7 @@ var Repeater3 = ({
|
|
|
8848
9278
|
actions: itemSettings.actions,
|
|
8849
9279
|
value
|
|
8850
9280
|
},
|
|
8851
|
-
(props) => /* @__PURE__ */
|
|
9281
|
+
(props) => /* @__PURE__ */ React128.createElement(
|
|
8852
9282
|
itemSettings.Content,
|
|
8853
9283
|
{
|
|
8854
9284
|
...props,
|
|
@@ -8888,18 +9318,18 @@ var RepeaterItem = ({
|
|
|
8888
9318
|
},
|
|
8889
9319
|
wrappedOnPopoverClose
|
|
8890
9320
|
);
|
|
8891
|
-
const triggerProps = (0,
|
|
9321
|
+
const triggerProps = (0, import_ui112.bindTrigger)(popoverState);
|
|
8892
9322
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
8893
|
-
const duplicateLabel = (0,
|
|
8894
|
-
const toggleLabel = propDisabled ? (0,
|
|
8895
|
-
const removeLabel = (0,
|
|
8896
|
-
return /* @__PURE__ */
|
|
9323
|
+
const duplicateLabel = (0, import_i18n64.__)("Duplicate", "elementor");
|
|
9324
|
+
const toggleLabel = propDisabled ? (0, import_i18n64.__)("Show", "elementor") : (0, import_i18n64.__)("Hide", "elementor");
|
|
9325
|
+
const removeLabel = (0, import_i18n64.__)("Remove", "elementor");
|
|
9326
|
+
return /* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
|
|
8897
9327
|
RepeaterTag,
|
|
8898
9328
|
{
|
|
8899
9329
|
disabled,
|
|
8900
9330
|
label,
|
|
8901
9331
|
ref: setRef,
|
|
8902
|
-
"aria-label": (0,
|
|
9332
|
+
"aria-label": (0, import_i18n64.__)("Open item", "elementor"),
|
|
8903
9333
|
...triggerProps,
|
|
8904
9334
|
onClick: (e) => {
|
|
8905
9335
|
triggerProps.onClick(e);
|
|
@@ -8908,15 +9338,15 @@ var RepeaterItem = ({
|
|
|
8908
9338
|
}
|
|
8909
9339
|
},
|
|
8910
9340
|
startIcon,
|
|
8911
|
-
actions: /* @__PURE__ */
|
|
9341
|
+
actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(import_icons42.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(import_icons42.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(import_icons42.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(import_icons42.XIcon, { fontSize: SIZE12 }))))
|
|
8912
9342
|
}
|
|
8913
|
-
), /* @__PURE__ */
|
|
9343
|
+
), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(import_ui112.Box, null, children({ anchorEl: ref }))));
|
|
8914
9344
|
};
|
|
8915
9345
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
8916
|
-
const [ref, setRef] = (0,
|
|
8917
|
-
const popoverState = (0,
|
|
8918
|
-
const popoverProps = (0,
|
|
8919
|
-
(0,
|
|
9346
|
+
const [ref, setRef] = (0, import_react76.useState)(null);
|
|
9347
|
+
const popoverState = (0, import_ui112.usePopupState)({ variant: "popover" });
|
|
9348
|
+
const popoverProps = (0, import_ui112.bindPopover)(popoverState);
|
|
9349
|
+
(0, import_react76.useEffect)(() => {
|
|
8920
9350
|
if (openOnMount && ref) {
|
|
8921
9351
|
popoverState.open(ref);
|
|
8922
9352
|
onOpen?.();
|
|
@@ -8934,276 +9364,6 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
8934
9364
|
};
|
|
8935
9365
|
};
|
|
8936
9366
|
|
|
8937
|
-
// src/components/inline-editor-toolbar.tsx
|
|
8938
|
-
var React128 = __toESM(require("react"));
|
|
8939
|
-
var import_react75 = require("react");
|
|
8940
|
-
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
8941
|
-
var import_icons42 = require("@elementor/icons");
|
|
8942
|
-
var import_ui112 = require("@elementor/ui");
|
|
8943
|
-
var import_react76 = require("@tiptap/react");
|
|
8944
|
-
var import_i18n64 = require("@wordpress/i18n");
|
|
8945
|
-
|
|
8946
|
-
// src/components/url-popover.tsx
|
|
8947
|
-
var React127 = __toESM(require("react"));
|
|
8948
|
-
var import_react74 = require("react");
|
|
8949
|
-
var import_icons41 = require("@elementor/icons");
|
|
8950
|
-
var import_ui111 = require("@elementor/ui");
|
|
8951
|
-
var import_i18n63 = require("@wordpress/i18n");
|
|
8952
|
-
var UrlPopover = ({
|
|
8953
|
-
popupState,
|
|
8954
|
-
restoreValue,
|
|
8955
|
-
anchorRef,
|
|
8956
|
-
value,
|
|
8957
|
-
onChange,
|
|
8958
|
-
openInNewTab,
|
|
8959
|
-
onToggleNewTab
|
|
8960
|
-
}) => {
|
|
8961
|
-
const inputRef = (0, import_react74.useRef)(null);
|
|
8962
|
-
(0, import_react74.useEffect)(() => {
|
|
8963
|
-
if (popupState.isOpen) {
|
|
8964
|
-
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8965
|
-
}
|
|
8966
|
-
}, [popupState.isOpen]);
|
|
8967
|
-
const handleClose = () => {
|
|
8968
|
-
restoreValue();
|
|
8969
|
-
popupState.close();
|
|
8970
|
-
};
|
|
8971
|
-
return /* @__PURE__ */ React127.createElement(
|
|
8972
|
-
import_ui111.Popover,
|
|
8973
|
-
{
|
|
8974
|
-
slotProps: {
|
|
8975
|
-
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8976
|
-
},
|
|
8977
|
-
...(0, import_ui111.bindPopover)(popupState),
|
|
8978
|
-
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8979
|
-
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8980
|
-
onClose: handleClose
|
|
8981
|
-
},
|
|
8982
|
-
/* @__PURE__ */ React127.createElement(import_ui111.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
|
|
8983
|
-
import_ui111.TextField,
|
|
8984
|
-
{
|
|
8985
|
-
value,
|
|
8986
|
-
onChange,
|
|
8987
|
-
size: "tiny",
|
|
8988
|
-
fullWidth: true,
|
|
8989
|
-
placeholder: (0, import_i18n63.__)("Type a URL", "elementor"),
|
|
8990
|
-
inputProps: { ref: inputRef },
|
|
8991
|
-
color: "secondary",
|
|
8992
|
-
InputProps: { sx: { borderRadius: "8px" } },
|
|
8993
|
-
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8994
|
-
}
|
|
8995
|
-
), /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
|
|
8996
|
-
import_ui111.ToggleButton,
|
|
8997
|
-
{
|
|
8998
|
-
size: "tiny",
|
|
8999
|
-
value: "newTab",
|
|
9000
|
-
selected: openInNewTab,
|
|
9001
|
-
onClick: onToggleNewTab,
|
|
9002
|
-
"aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
|
|
9003
|
-
sx: { borderRadius: "8px" }
|
|
9004
|
-
},
|
|
9005
|
-
/* @__PURE__ */ React127.createElement(import_icons41.ExternalLinkIcon, { fontSize: "tiny" })
|
|
9006
|
-
)))
|
|
9007
|
-
);
|
|
9008
|
-
};
|
|
9009
|
-
|
|
9010
|
-
// src/components/inline-editor-toolbar.tsx
|
|
9011
|
-
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
9012
|
-
const [urlValue, setUrlValue] = (0, import_react75.useState)("");
|
|
9013
|
-
const [openInNewTab, setOpenInNewTab] = (0, import_react75.useState)(false);
|
|
9014
|
-
const toolbarRef = (0, import_react75.useRef)(null);
|
|
9015
|
-
const linkPopupState = (0, import_ui112.usePopupState)({ variant: "popover" });
|
|
9016
|
-
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
9017
|
-
const editorState = (0, import_react76.useEditorState)({
|
|
9018
|
-
editor,
|
|
9019
|
-
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
9020
|
-
});
|
|
9021
|
-
const formatButtonsList = (0, import_react75.useMemo)(() => {
|
|
9022
|
-
const buttons = Object.values(formatButtons);
|
|
9023
|
-
if (isElementClickable) {
|
|
9024
|
-
return buttons.filter((button) => button.action !== "link");
|
|
9025
|
-
}
|
|
9026
|
-
return buttons;
|
|
9027
|
-
}, [isElementClickable]);
|
|
9028
|
-
const handleLinkClick = () => {
|
|
9029
|
-
const linkAttrs = editor.getAttributes("link");
|
|
9030
|
-
setUrlValue(linkAttrs.href || "");
|
|
9031
|
-
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
9032
|
-
linkPopupState.open(toolbarRef.current);
|
|
9033
|
-
};
|
|
9034
|
-
const handleUrlChange = (event) => {
|
|
9035
|
-
setUrlValue(event.target.value);
|
|
9036
|
-
};
|
|
9037
|
-
const handleToggleNewTab = () => {
|
|
9038
|
-
setOpenInNewTab(!openInNewTab);
|
|
9039
|
-
};
|
|
9040
|
-
const handleUrlSubmit = () => {
|
|
9041
|
-
if (urlValue) {
|
|
9042
|
-
editor.chain().focus().setLink({
|
|
9043
|
-
href: urlValue,
|
|
9044
|
-
target: openInNewTab ? "_blank" : "_self"
|
|
9045
|
-
}).run();
|
|
9046
|
-
} else {
|
|
9047
|
-
editor.chain().focus().unsetLink().run();
|
|
9048
|
-
}
|
|
9049
|
-
if (elementId) {
|
|
9050
|
-
window.dispatchEvent(
|
|
9051
|
-
new CustomEvent("elementor:inline-link-changed", {
|
|
9052
|
-
detail: { elementId }
|
|
9053
|
-
})
|
|
9054
|
-
);
|
|
9055
|
-
}
|
|
9056
|
-
linkPopupState.close();
|
|
9057
|
-
};
|
|
9058
|
-
(0, import_react75.useEffect)(() => {
|
|
9059
|
-
editor?.commands?.focus();
|
|
9060
|
-
}, [editor]);
|
|
9061
|
-
return /* @__PURE__ */ React128.createElement(
|
|
9062
|
-
import_ui112.Box,
|
|
9063
|
-
{
|
|
9064
|
-
ref: toolbarRef,
|
|
9065
|
-
sx: {
|
|
9066
|
-
display: "inline-flex",
|
|
9067
|
-
gap: 0.5,
|
|
9068
|
-
padding: 0.5,
|
|
9069
|
-
borderRadius: "8px",
|
|
9070
|
-
backgroundColor: "background.paper",
|
|
9071
|
-
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
9072
|
-
alignItems: "center",
|
|
9073
|
-
visibility: linkPopupState.isOpen ? "hidden" : "visible",
|
|
9074
|
-
pointerEvents: linkPopupState.isOpen ? "none" : "all",
|
|
9075
|
-
...sx
|
|
9076
|
-
}
|
|
9077
|
-
},
|
|
9078
|
-
/* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
9079
|
-
/* @__PURE__ */ React128.createElement(
|
|
9080
|
-
import_ui112.ToggleButtonGroup,
|
|
9081
|
-
{
|
|
9082
|
-
value: editorState,
|
|
9083
|
-
size: "tiny",
|
|
9084
|
-
sx: {
|
|
9085
|
-
display: "flex",
|
|
9086
|
-
gap: 0.5,
|
|
9087
|
-
border: "none",
|
|
9088
|
-
[`& .${import_ui112.toggleButtonGroupClasses.firstButton}, & .${import_ui112.toggleButtonGroupClasses.middleButton}, & .${import_ui112.toggleButtonGroupClasses.lastButton}`]: {
|
|
9089
|
-
borderRadius: "8px",
|
|
9090
|
-
border: "none",
|
|
9091
|
-
marginLeft: 0,
|
|
9092
|
-
"&.Mui-selected": {
|
|
9093
|
-
marginLeft: 0
|
|
9094
|
-
},
|
|
9095
|
-
"& + &.Mui-selected": {
|
|
9096
|
-
marginLeft: 0
|
|
9097
|
-
}
|
|
9098
|
-
}
|
|
9099
|
-
}
|
|
9100
|
-
},
|
|
9101
|
-
formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
|
|
9102
|
-
import_ui112.ToggleButton,
|
|
9103
|
-
{
|
|
9104
|
-
value: button.action,
|
|
9105
|
-
"aria-label": button.label,
|
|
9106
|
-
size: "tiny",
|
|
9107
|
-
onClick: () => {
|
|
9108
|
-
if (button.action === "link") {
|
|
9109
|
-
handleLinkClick();
|
|
9110
|
-
} else {
|
|
9111
|
-
button.method?.(editor);
|
|
9112
|
-
}
|
|
9113
|
-
editor?.commands?.focus();
|
|
9114
|
-
}
|
|
9115
|
-
},
|
|
9116
|
-
button.icon
|
|
9117
|
-
)))
|
|
9118
|
-
),
|
|
9119
|
-
/* @__PURE__ */ React128.createElement(
|
|
9120
|
-
UrlPopover,
|
|
9121
|
-
{
|
|
9122
|
-
popupState: linkPopupState,
|
|
9123
|
-
anchorRef: toolbarRef,
|
|
9124
|
-
restoreValue: handleUrlSubmit,
|
|
9125
|
-
value: urlValue,
|
|
9126
|
-
onChange: handleUrlChange,
|
|
9127
|
-
openInNewTab,
|
|
9128
|
-
onToggleNewTab: handleToggleNewTab
|
|
9129
|
-
}
|
|
9130
|
-
)
|
|
9131
|
-
);
|
|
9132
|
-
};
|
|
9133
|
-
var checkIfElementIsClickable = (elementId) => {
|
|
9134
|
-
const container = (0, import_editor_elements8.getContainer)(elementId);
|
|
9135
|
-
const type = container?.model.get("widgetType");
|
|
9136
|
-
const isButton = type === "e-button";
|
|
9137
|
-
const hasLink = !!(0, import_editor_elements8.getElementSetting)(elementId, "link")?.value?.destination;
|
|
9138
|
-
return isButton || hasLink;
|
|
9139
|
-
};
|
|
9140
|
-
var toolbarButtons = {
|
|
9141
|
-
clear: {
|
|
9142
|
-
label: (0, import_i18n64.__)("Clear", "elementor"),
|
|
9143
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.MinusIcon, { fontSize: "tiny" }),
|
|
9144
|
-
action: "clear",
|
|
9145
|
-
method: (editor) => {
|
|
9146
|
-
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
9147
|
-
}
|
|
9148
|
-
},
|
|
9149
|
-
bold: {
|
|
9150
|
-
label: (0, import_i18n64.__)("Bold", "elementor"),
|
|
9151
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.BoldIcon, { fontSize: "tiny" }),
|
|
9152
|
-
action: "bold",
|
|
9153
|
-
method: (editor) => {
|
|
9154
|
-
editor.chain().focus().toggleBold().run();
|
|
9155
|
-
}
|
|
9156
|
-
},
|
|
9157
|
-
italic: {
|
|
9158
|
-
label: (0, import_i18n64.__)("Italic", "elementor"),
|
|
9159
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.ItalicIcon, { fontSize: "tiny" }),
|
|
9160
|
-
action: "italic",
|
|
9161
|
-
method: (editor) => {
|
|
9162
|
-
editor.chain().focus().toggleItalic().run();
|
|
9163
|
-
}
|
|
9164
|
-
},
|
|
9165
|
-
underline: {
|
|
9166
|
-
label: (0, import_i18n64.__)("Underline", "elementor"),
|
|
9167
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.UnderlineIcon, { fontSize: "tiny" }),
|
|
9168
|
-
action: "underline",
|
|
9169
|
-
method: (editor) => {
|
|
9170
|
-
editor.chain().focus().toggleUnderline().run();
|
|
9171
|
-
}
|
|
9172
|
-
},
|
|
9173
|
-
strike: {
|
|
9174
|
-
label: (0, import_i18n64.__)("Strikethrough", "elementor"),
|
|
9175
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.StrikethroughIcon, { fontSize: "tiny" }),
|
|
9176
|
-
action: "strike",
|
|
9177
|
-
method: (editor) => {
|
|
9178
|
-
editor.chain().focus().toggleStrike().run();
|
|
9179
|
-
}
|
|
9180
|
-
},
|
|
9181
|
-
superscript: {
|
|
9182
|
-
label: (0, import_i18n64.__)("Superscript", "elementor"),
|
|
9183
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.SuperscriptIcon, { fontSize: "tiny" }),
|
|
9184
|
-
action: "superscript",
|
|
9185
|
-
method: (editor) => {
|
|
9186
|
-
editor.chain().focus().toggleSuperscript().run();
|
|
9187
|
-
}
|
|
9188
|
-
},
|
|
9189
|
-
subscript: {
|
|
9190
|
-
label: (0, import_i18n64.__)("Subscript", "elementor"),
|
|
9191
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.SubscriptIcon, { fontSize: "tiny" }),
|
|
9192
|
-
action: "subscript",
|
|
9193
|
-
method: (editor) => {
|
|
9194
|
-
editor.chain().focus().toggleSubscript().run();
|
|
9195
|
-
}
|
|
9196
|
-
},
|
|
9197
|
-
link: {
|
|
9198
|
-
label: (0, import_i18n64.__)("Link", "elementor"),
|
|
9199
|
-
icon: /* @__PURE__ */ React128.createElement(import_icons42.LinkIcon, { fontSize: "tiny" }),
|
|
9200
|
-
action: "link",
|
|
9201
|
-
method: null
|
|
9202
|
-
}
|
|
9203
|
-
};
|
|
9204
|
-
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
9205
|
-
var possibleFormats = Object.keys(formatButtons);
|
|
9206
|
-
|
|
9207
9367
|
// src/components/size/unstable-size-field.tsx
|
|
9208
9368
|
var React131 = __toESM(require("react"));
|
|
9209
9369
|
var import_ui114 = require("@elementor/ui");
|