@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.mjs
CHANGED
|
@@ -5315,11 +5315,21 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5315
5315
|
|
|
5316
5316
|
// src/controls/svg-media-control.tsx
|
|
5317
5317
|
import * as React81 from "react";
|
|
5318
|
-
import { useState as useState16 } from "react";
|
|
5318
|
+
import { useEffect as useEffect16, useState as useState16 } from "react";
|
|
5319
5319
|
import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
|
|
5320
|
-
import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
|
|
5320
|
+
import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
|
|
5321
5321
|
import { UploadIcon as UploadIcon2 } from "@elementor/icons";
|
|
5322
|
-
import {
|
|
5322
|
+
import {
|
|
5323
|
+
Box as Box15,
|
|
5324
|
+
Button as Button5,
|
|
5325
|
+
Card as Card2,
|
|
5326
|
+
CardMedia as CardMedia2,
|
|
5327
|
+
CardOverlay as CardOverlay2,
|
|
5328
|
+
CircularProgress as CircularProgress3,
|
|
5329
|
+
Stack as Stack13,
|
|
5330
|
+
styled as styled9,
|
|
5331
|
+
ThemeProvider
|
|
5332
|
+
} from "@elementor/ui";
|
|
5323
5333
|
import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
|
|
5324
5334
|
import { __ as __32 } from "@wordpress/i18n";
|
|
5325
5335
|
|
|
@@ -5383,10 +5393,49 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
|
|
|
5383
5393
|
isPending ? /* @__PURE__ */ React80.createElement(CircularProgress2, { size: 24 }) : __31("Enable", "elementor")
|
|
5384
5394
|
)));
|
|
5385
5395
|
|
|
5396
|
+
// src/controls/open-icon-library.ts
|
|
5397
|
+
import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
|
|
5398
|
+
var SVG_ICON_LIBRARY = "svg";
|
|
5399
|
+
function isSvgLibrarySelection(icon) {
|
|
5400
|
+
return icon.library === SVG_ICON_LIBRARY && typeof icon.value === "object" && icon.value !== null;
|
|
5401
|
+
}
|
|
5402
|
+
function openIconLibrary({ selected, onSelect } = {}) {
|
|
5403
|
+
const iconManager = window.elementor?.iconManager;
|
|
5404
|
+
if (!iconManager) {
|
|
5405
|
+
return;
|
|
5406
|
+
}
|
|
5407
|
+
iconManager.loadIconLibraries();
|
|
5408
|
+
iconManager.show({
|
|
5409
|
+
view: createIconManagerControlView(selected, onSelect)
|
|
5410
|
+
});
|
|
5411
|
+
}
|
|
5412
|
+
function enqueueIconFonts(library) {
|
|
5413
|
+
window.elementor?.helpers?.enqueueIconFonts?.(library);
|
|
5414
|
+
}
|
|
5415
|
+
function createIconManagerControlView(selected, onSelect) {
|
|
5416
|
+
return {
|
|
5417
|
+
model: {
|
|
5418
|
+
get: () => false
|
|
5419
|
+
},
|
|
5420
|
+
getControlValue: () => selected ?? { value: "", library: "" },
|
|
5421
|
+
setValue: (icon) => {
|
|
5422
|
+
onSelect?.(icon);
|
|
5423
|
+
},
|
|
5424
|
+
applySavedValue: () => void 0
|
|
5425
|
+
};
|
|
5426
|
+
}
|
|
5427
|
+
function createIconPropValue(icon, library) {
|
|
5428
|
+
return {
|
|
5429
|
+
value: stringPropTypeUtil14.create(icon),
|
|
5430
|
+
library: stringPropTypeUtil14.create(library)
|
|
5431
|
+
};
|
|
5432
|
+
}
|
|
5433
|
+
|
|
5386
5434
|
// src/controls/svg-media-control.tsx
|
|
5387
5435
|
var TILE_SIZE = 8;
|
|
5388
5436
|
var TILE_WHITE = "transparent";
|
|
5389
5437
|
var TILE_BLACK = "#c1c1c1";
|
|
5438
|
+
var ICON_PREVIEW_FONT_SIZE = 50;
|
|
5390
5439
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
5391
5440
|
var StyledCard = styled9(Card2)`
|
|
5392
5441
|
background-color: white;
|
|
@@ -5408,21 +5457,24 @@ var StyledCardMediaContainer = styled9(Stack13)`
|
|
|
5408
5457
|
`;
|
|
5409
5458
|
var MODE_BROWSE = { mode: "browse" };
|
|
5410
5459
|
var MODE_UPLOAD = { mode: "upload" };
|
|
5411
|
-
var SvgMediaControl = createControl(() => {
|
|
5412
|
-
const { value, setValue } = useBoundProp(svgSrcPropTypeUtil);
|
|
5413
|
-
const
|
|
5414
|
-
const
|
|
5460
|
+
var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
5461
|
+
const { value: svgValue, setValue: setSvgValue } = useBoundProp(svgSrcPropTypeUtil);
|
|
5462
|
+
const { value: iconValue, setValue: setIconValue } = useBoundProp(iconPropTypeUtil);
|
|
5463
|
+
const id = svgValue?.id;
|
|
5464
|
+
const url = svgValue?.url;
|
|
5415
5465
|
const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
|
|
5416
5466
|
const src = attachment?.url ?? url?.value ?? null;
|
|
5417
5467
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
5418
5468
|
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState16(false);
|
|
5419
5469
|
const { isAdmin } = useCurrentUserCapabilities();
|
|
5470
|
+
const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
|
|
5471
|
+
const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
|
|
5420
5472
|
const { open } = useWpMediaFrame2({
|
|
5421
5473
|
mediaTypes: ["svg"],
|
|
5422
5474
|
multiple: false,
|
|
5423
5475
|
selected: id?.value || null,
|
|
5424
5476
|
onSelect: (selectedAttachment) => {
|
|
5425
|
-
|
|
5477
|
+
setSvgValue({
|
|
5426
5478
|
id: {
|
|
5427
5479
|
$$type: "image-attachment-id",
|
|
5428
5480
|
value: selectedAttachment.id
|
|
@@ -5444,18 +5496,36 @@ var SvgMediaControl = createControl(() => {
|
|
|
5444
5496
|
open(openOptions);
|
|
5445
5497
|
}
|
|
5446
5498
|
};
|
|
5499
|
+
const handleIconLibrarySelect = (icon) => {
|
|
5500
|
+
if (!showIconLibrary) {
|
|
5501
|
+
return;
|
|
5502
|
+
}
|
|
5503
|
+
if (isSvgLibrarySelection(icon)) {
|
|
5504
|
+
setSvgValue({
|
|
5505
|
+
id: icon.value.id ? {
|
|
5506
|
+
$$type: "image-attachment-id",
|
|
5507
|
+
value: icon.value.id
|
|
5508
|
+
} : null,
|
|
5509
|
+
url: icon.value.url ? urlPropTypeUtil4.create(icon.value.url) : null
|
|
5510
|
+
});
|
|
5511
|
+
return;
|
|
5512
|
+
}
|
|
5513
|
+
if (typeof icon.value === "string") {
|
|
5514
|
+
setIconValue(createIconPropValue(icon.value, icon.library));
|
|
5515
|
+
}
|
|
5516
|
+
};
|
|
5447
5517
|
const infotipProps = {
|
|
5448
5518
|
title: __32("Sorry, you can't upload that file yet.", "elementor"),
|
|
5449
5519
|
description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, __32("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), __32("file uploads.", "elementor")),
|
|
5450
5520
|
isEnabled: !isAdmin
|
|
5451
5521
|
};
|
|
5452
|
-
return /* @__PURE__ */ React81.createElement(Stack13, { 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,
|
|
5453
|
-
|
|
5522
|
+
return /* @__PURE__ */ React81.createElement(Stack13, { 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(
|
|
5523
|
+
SvgMediaPreview,
|
|
5454
5524
|
{
|
|
5455
|
-
|
|
5456
|
-
|
|
5457
|
-
|
|
5458
|
-
|
|
5525
|
+
isFetching,
|
|
5526
|
+
src,
|
|
5527
|
+
iconClassName: selectedIconClass,
|
|
5528
|
+
iconLibrary: selectedIconLibrary
|
|
5459
5529
|
}
|
|
5460
5530
|
)), /* @__PURE__ */ React81.createElement(
|
|
5461
5531
|
CardOverlay2,
|
|
@@ -5476,7 +5546,20 @@ var SvgMediaControl = createControl(() => {
|
|
|
5476
5546
|
"aria-label": "Select SVG"
|
|
5477
5547
|
},
|
|
5478
5548
|
__32("Select SVG", "elementor")
|
|
5479
|
-
),
|
|
5549
|
+
), showIconLibrary ? /* @__PURE__ */ React81.createElement(
|
|
5550
|
+
Button5,
|
|
5551
|
+
{
|
|
5552
|
+
size: "tiny",
|
|
5553
|
+
variant: "text",
|
|
5554
|
+
color: "inherit",
|
|
5555
|
+
onClick: () => openIconLibrary({
|
|
5556
|
+
selected: selectedIconClass && selectedIconLibrary ? { value: selectedIconClass, library: selectedIconLibrary } : void 0,
|
|
5557
|
+
onSelect: handleIconLibrarySelect
|
|
5558
|
+
}),
|
|
5559
|
+
"aria-label": __32("Icon library", "elementor")
|
|
5560
|
+
},
|
|
5561
|
+
__32("Icon library", "elementor")
|
|
5562
|
+
) : null, /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
|
|
5480
5563
|
Button5,
|
|
5481
5564
|
{
|
|
5482
5565
|
size: "tiny",
|
|
@@ -5491,6 +5574,41 @@ var SvgMediaControl = createControl(() => {
|
|
|
5491
5574
|
)))))
|
|
5492
5575
|
))));
|
|
5493
5576
|
});
|
|
5577
|
+
function SvgMediaPreview({
|
|
5578
|
+
isFetching,
|
|
5579
|
+
src,
|
|
5580
|
+
iconClassName,
|
|
5581
|
+
iconLibrary
|
|
5582
|
+
}) {
|
|
5583
|
+
useEffect16(() => {
|
|
5584
|
+
if (iconLibrary) {
|
|
5585
|
+
enqueueIconFonts(iconLibrary);
|
|
5586
|
+
}
|
|
5587
|
+
}, [iconLibrary]);
|
|
5588
|
+
if (isFetching) {
|
|
5589
|
+
return /* @__PURE__ */ React81.createElement(CircularProgress3, { role: "progressbar" });
|
|
5590
|
+
}
|
|
5591
|
+
if (iconClassName) {
|
|
5592
|
+
return /* @__PURE__ */ React81.createElement(
|
|
5593
|
+
Box15,
|
|
5594
|
+
{
|
|
5595
|
+
component: "i",
|
|
5596
|
+
className: iconClassName,
|
|
5597
|
+
"aria-label": __32("Preview icon", "elementor"),
|
|
5598
|
+
sx: { fontSize: ICON_PREVIEW_FONT_SIZE }
|
|
5599
|
+
}
|
|
5600
|
+
);
|
|
5601
|
+
}
|
|
5602
|
+
return /* @__PURE__ */ React81.createElement(
|
|
5603
|
+
CardMedia2,
|
|
5604
|
+
{
|
|
5605
|
+
component: "img",
|
|
5606
|
+
image: src,
|
|
5607
|
+
alt: __32("Preview SVG", "elementor"),
|
|
5608
|
+
sx: { maxHeight: "140px", width: `${ICON_PREVIEW_FONT_SIZE}px` }
|
|
5609
|
+
}
|
|
5610
|
+
);
|
|
5611
|
+
}
|
|
5494
5612
|
|
|
5495
5613
|
// src/controls/video-media-control.tsx
|
|
5496
5614
|
import * as React82 from "react";
|
|
@@ -5612,7 +5730,7 @@ import {
|
|
|
5612
5730
|
backgroundOverlayPropTypeUtil,
|
|
5613
5731
|
colorPropTypeUtil as colorPropTypeUtil3
|
|
5614
5732
|
} from "@elementor/editor-props";
|
|
5615
|
-
import { Box as
|
|
5733
|
+
import { Box as Box16, CardMedia as CardMedia4, styled as styled10, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
|
|
5616
5734
|
import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
|
|
5617
5735
|
import { __ as __38 } from "@wordpress/i18n";
|
|
5618
5736
|
|
|
@@ -5628,7 +5746,7 @@ import {
|
|
|
5628
5746
|
colorStopPropTypeUtil,
|
|
5629
5747
|
gradientColorStopPropTypeUtil,
|
|
5630
5748
|
numberPropTypeUtil as numberPropTypeUtil5,
|
|
5631
|
-
stringPropTypeUtil as
|
|
5749
|
+
stringPropTypeUtil as stringPropTypeUtil15
|
|
5632
5750
|
} from "@elementor/editor-props";
|
|
5633
5751
|
import { UnstableGradientBox } from "@elementor/ui";
|
|
5634
5752
|
var BackgroundGradientColorControl = createControl(() => {
|
|
@@ -5636,13 +5754,13 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5636
5754
|
const handleChange = (newValue) => {
|
|
5637
5755
|
const transformedValue = createTransformableValue(newValue);
|
|
5638
5756
|
if (transformedValue.positions) {
|
|
5639
|
-
transformedValue.positions =
|
|
5757
|
+
transformedValue.positions = stringPropTypeUtil15.create(newValue.positions.join(" "));
|
|
5640
5758
|
}
|
|
5641
5759
|
setValue(transformedValue);
|
|
5642
5760
|
};
|
|
5643
5761
|
const createTransformableValue = (newValue) => ({
|
|
5644
5762
|
...newValue,
|
|
5645
|
-
type:
|
|
5763
|
+
type: stringPropTypeUtil15.create(newValue.type),
|
|
5646
5764
|
angle: numberPropTypeUtil5.create(newValue.angle),
|
|
5647
5765
|
stops: gradientColorStopPropTypeUtil.create(
|
|
5648
5766
|
newValue.stops.map(
|
|
@@ -5678,7 +5796,7 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
5678
5796
|
);
|
|
5679
5797
|
});
|
|
5680
5798
|
var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
|
|
5681
|
-
type:
|
|
5799
|
+
type: stringPropTypeUtil15.create("linear"),
|
|
5682
5800
|
angle: numberPropTypeUtil5.create(180),
|
|
5683
5801
|
stops: gradientColorStopPropTypeUtil.create([
|
|
5684
5802
|
colorStopPropTypeUtil.create({
|
|
@@ -5718,7 +5836,7 @@ var BackgroundImageOverlayAttachment = () => {
|
|
|
5718
5836
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
5719
5837
|
import * as React85 from "react";
|
|
5720
5838
|
import { useRef as useRef15 } from "react";
|
|
5721
|
-
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as
|
|
5839
|
+
import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
|
|
5722
5840
|
import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
|
|
5723
5841
|
import { LetterXIcon, LetterYIcon } from "@elementor/icons";
|
|
5724
5842
|
import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
|
|
@@ -5737,7 +5855,7 @@ var backgroundPositionOptions = [
|
|
|
5737
5855
|
];
|
|
5738
5856
|
var BackgroundImageOverlayPosition = () => {
|
|
5739
5857
|
const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
|
|
5740
|
-
const stringPropContext = useBoundProp(
|
|
5858
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil16);
|
|
5741
5859
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
5742
5860
|
const rowRef = useRef15(null);
|
|
5743
5861
|
const handlePositionChange = (event) => {
|
|
@@ -5813,7 +5931,7 @@ var BackgroundImageOverlayRepeat = () => {
|
|
|
5813
5931
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
5814
5932
|
import * as React87 from "react";
|
|
5815
5933
|
import { useRef as useRef16 } from "react";
|
|
5816
|
-
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as
|
|
5934
|
+
import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
|
|
5817
5935
|
import {
|
|
5818
5936
|
ArrowBarBothIcon,
|
|
5819
5937
|
ArrowsMaximizeIcon,
|
|
@@ -5852,7 +5970,7 @@ var sizeControlOptions = [
|
|
|
5852
5970
|
];
|
|
5853
5971
|
var BackgroundImageOverlaySize = () => {
|
|
5854
5972
|
const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
|
|
5855
|
-
const stringPropContext = useBoundProp(
|
|
5973
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil17);
|
|
5856
5974
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
5857
5975
|
const rowRef = useRef16(null);
|
|
5858
5976
|
const handleSizeChange = (size) => {
|
|
@@ -6014,7 +6132,7 @@ var ItemContent2 = () => {
|
|
|
6014
6132
|
gradient: initialBackgroundGradientOverlay.value
|
|
6015
6133
|
});
|
|
6016
6134
|
const { rowRef } = useRepeaterContext();
|
|
6017
|
-
return /* @__PURE__ */ React88.createElement(
|
|
6135
|
+
return /* @__PURE__ */ React88.createElement(Box16, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box16, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
|
|
6018
6136
|
Tabs,
|
|
6019
6137
|
{
|
|
6020
6138
|
size: "small",
|
|
@@ -6163,7 +6281,7 @@ var BackgroundClipField = () => {
|
|
|
6163
6281
|
import * as React90 from "react";
|
|
6164
6282
|
import { useMemo as useMemo12 } from "react";
|
|
6165
6283
|
import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
|
|
6166
|
-
import { Box as
|
|
6284
|
+
import { Box as Box17 } from "@elementor/ui";
|
|
6167
6285
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
6168
6286
|
var RepeatableControl = createControl(
|
|
6169
6287
|
({
|
|
@@ -6309,7 +6427,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
6309
6427
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
6310
6428
|
const isReadOnly = !!childProps?.readOnly;
|
|
6311
6429
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
6312
|
-
return /* @__PURE__ */ React90.createElement(
|
|
6430
|
+
return /* @__PURE__ */ React90.createElement(Box17, { component: "span", color }, label);
|
|
6313
6431
|
};
|
|
6314
6432
|
var getAllProperties = (pattern) => {
|
|
6315
6433
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -6322,7 +6440,7 @@ import { useMemo as useMemo13, useState as useState17 } from "react";
|
|
|
6322
6440
|
import {
|
|
6323
6441
|
isTransformable,
|
|
6324
6442
|
keyValuePropTypeUtil,
|
|
6325
|
-
stringPropTypeUtil as
|
|
6443
|
+
stringPropTypeUtil as stringPropTypeUtil18
|
|
6326
6444
|
} from "@elementor/editor-props";
|
|
6327
6445
|
import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
|
|
6328
6446
|
import { __ as __40 } from "@wordpress/i18n";
|
|
@@ -6394,7 +6512,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6394
6512
|
});
|
|
6395
6513
|
return;
|
|
6396
6514
|
}
|
|
6397
|
-
const extractedValue =
|
|
6515
|
+
const extractedValue = stringPropTypeUtil18.extract(newChangedValue);
|
|
6398
6516
|
setSessionState((prev) => ({
|
|
6399
6517
|
...prev,
|
|
6400
6518
|
[fieldType]: extractedValue
|
|
@@ -6434,7 +6552,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
6434
6552
|
|
|
6435
6553
|
// src/controls/position-control.tsx
|
|
6436
6554
|
import * as React92 from "react";
|
|
6437
|
-
import { positionPropTypeUtil, stringPropTypeUtil as
|
|
6555
|
+
import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
|
|
6438
6556
|
import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
|
|
6439
6557
|
import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
|
|
6440
6558
|
import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
|
|
@@ -6453,7 +6571,7 @@ var positionOptions = [
|
|
|
6453
6571
|
];
|
|
6454
6572
|
var PositionControl = () => {
|
|
6455
6573
|
const positionContext = useBoundProp(positionPropTypeUtil);
|
|
6456
|
-
const stringPropContext = useBoundProp(
|
|
6574
|
+
const stringPropContext = useBoundProp(stringPropTypeUtil19);
|
|
6457
6575
|
const isCustom = !!positionContext.value;
|
|
6458
6576
|
const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
|
|
6459
6577
|
const handlePositionChange = (event) => {
|
|
@@ -6496,7 +6614,7 @@ import * as React105 from "react";
|
|
|
6496
6614
|
import { useRef as useRef25 } from "react";
|
|
6497
6615
|
import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
|
|
6498
6616
|
import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
|
|
6499
|
-
import { bindTrigger as bindTrigger5, Box as
|
|
6617
|
+
import { bindTrigger as bindTrigger5, Box as Box21, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
|
|
6500
6618
|
import { __ as __51 } from "@wordpress/i18n";
|
|
6501
6619
|
|
|
6502
6620
|
// src/controls/transform-control/initial-values.ts
|
|
@@ -6552,7 +6670,7 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
|
|
|
6552
6670
|
|
|
6553
6671
|
// src/controls/transform-control/transform-content.tsx
|
|
6554
6672
|
import * as React99 from "react";
|
|
6555
|
-
import { Box as
|
|
6673
|
+
import { Box as Box18, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
|
|
6556
6674
|
import { __ as __46 } from "@wordpress/i18n";
|
|
6557
6675
|
|
|
6558
6676
|
// src/controls/transform-control/functions/move.tsx
|
|
@@ -6823,7 +6941,7 @@ var TransformContent = () => {
|
|
|
6823
6941
|
rotate: initialRotateValue.value,
|
|
6824
6942
|
skew: initialSkewValue.value
|
|
6825
6943
|
});
|
|
6826
|
-
return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(
|
|
6944
|
+
return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(Box18, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(Box18, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
|
|
6827
6945
|
Tabs2,
|
|
6828
6946
|
{
|
|
6829
6947
|
size: "small",
|
|
@@ -6863,7 +6981,7 @@ var TransformIcon = ({ value }) => {
|
|
|
6863
6981
|
|
|
6864
6982
|
// src/controls/transform-control/transform-label.tsx
|
|
6865
6983
|
import * as React101 from "react";
|
|
6866
|
-
import { Box as
|
|
6984
|
+
import { Box as Box19 } from "@elementor/ui";
|
|
6867
6985
|
import { __ as __47 } from "@wordpress/i18n";
|
|
6868
6986
|
var orderedAxis = ["x", "y", "z"];
|
|
6869
6987
|
var formatLabel = (value, functionType) => {
|
|
@@ -6894,14 +7012,14 @@ var TransformLabel = (props) => {
|
|
|
6894
7012
|
}
|
|
6895
7013
|
};
|
|
6896
7014
|
var Label2 = ({ label, value }) => {
|
|
6897
|
-
return /* @__PURE__ */ React101.createElement(
|
|
7015
|
+
return /* @__PURE__ */ React101.createElement(Box19, { component: "span" }, label, ": ", value);
|
|
6898
7016
|
};
|
|
6899
7017
|
|
|
6900
7018
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
6901
7019
|
import * as React104 from "react";
|
|
6902
7020
|
import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
|
|
6903
7021
|
import { AdjustmentsIcon } from "@elementor/icons";
|
|
6904
|
-
import { bindPopover as bindPopover6, Box as
|
|
7022
|
+
import { bindPopover as bindPopover6, Box as Box20, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
|
|
6905
7023
|
import { __ as __50 } from "@wordpress/i18n";
|
|
6906
7024
|
|
|
6907
7025
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
@@ -7011,7 +7129,7 @@ var TransformSettingsControl = ({
|
|
|
7011
7129
|
}
|
|
7012
7130
|
),
|
|
7013
7131
|
/* @__PURE__ */ React104.createElement(Divider4, null),
|
|
7014
|
-
/* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
|
|
7132
|
+
/* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(Box20, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(Divider4, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
|
|
7015
7133
|
);
|
|
7016
7134
|
};
|
|
7017
7135
|
|
|
@@ -7033,7 +7151,7 @@ var TransformRepeaterControl = createControl(
|
|
|
7033
7151
|
}
|
|
7034
7152
|
);
|
|
7035
7153
|
var ToolTip = /* @__PURE__ */ React105.createElement(
|
|
7036
|
-
|
|
7154
|
+
Box21,
|
|
7037
7155
|
{
|
|
7038
7156
|
component: "span",
|
|
7039
7157
|
"aria-label": void 0,
|
|
@@ -7100,13 +7218,13 @@ var TransformBasePopoverTrigger = ({
|
|
|
7100
7218
|
|
|
7101
7219
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
7102
7220
|
import * as React108 from "react";
|
|
7103
|
-
import { useEffect as
|
|
7221
|
+
import { useEffect as useEffect17, useMemo as useMemo16, useState as useState18 } from "react";
|
|
7104
7222
|
import {
|
|
7105
7223
|
createArrayPropUtils as createArrayPropUtils3,
|
|
7106
7224
|
selectionSizePropTypeUtil as selectionSizePropTypeUtil2
|
|
7107
7225
|
} from "@elementor/editor-props";
|
|
7108
7226
|
import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
|
|
7109
|
-
import { Alert as Alert2, AlertTitle as AlertTitle3, Box as
|
|
7227
|
+
import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box23, Typography as Typography8 } from "@elementor/ui";
|
|
7110
7228
|
import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
|
|
7111
7229
|
import { __ as __54 } from "@wordpress/i18n";
|
|
7112
7230
|
|
|
@@ -7337,7 +7455,7 @@ import { useMemo as useMemo15, useRef as useRef27 } from "react";
|
|
|
7337
7455
|
import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
|
|
7338
7456
|
import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
|
|
7339
7457
|
import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
|
|
7340
|
-
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as
|
|
7458
|
+
import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box22, Popover as Popover7, UnstableTag as UnstableTag3, usePopupState as usePopupState9 } from "@elementor/ui";
|
|
7341
7459
|
import { __ as __53 } from "@wordpress/i18n";
|
|
7342
7460
|
|
|
7343
7461
|
// src/utils/tracking.ts
|
|
@@ -7465,7 +7583,7 @@ var TransitionSelector = ({
|
|
|
7465
7583
|
left: rect.right + 36
|
|
7466
7584
|
};
|
|
7467
7585
|
};
|
|
7468
|
-
return /* @__PURE__ */ React107.createElement(
|
|
7586
|
+
return /* @__PURE__ */ React107.createElement(Box22, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
|
|
7469
7587
|
UnstableTag3,
|
|
7470
7588
|
{
|
|
7471
7589
|
variant: "outlined",
|
|
@@ -7497,7 +7615,7 @@ var TransitionSelector = ({
|
|
|
7497
7615
|
icon: VariationsIcon,
|
|
7498
7616
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
7499
7617
|
categoryItemContentTemplate: (item) => /* @__PURE__ */ React107.createElement(
|
|
7500
|
-
|
|
7618
|
+
Box22,
|
|
7501
7619
|
{
|
|
7502
7620
|
sx: {
|
|
7503
7621
|
display: "flex",
|
|
@@ -7639,7 +7757,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React108.createElement(
|
|
|
7639
7757
|
icon: /* @__PURE__ */ React108.createElement(InfoCircleFilledIcon3, null)
|
|
7640
7758
|
},
|
|
7641
7759
|
/* @__PURE__ */ React108.createElement(AlertTitle3, null, __54("Transitions", "elementor")),
|
|
7642
|
-
/* @__PURE__ */ React108.createElement(
|
|
7760
|
+
/* @__PURE__ */ React108.createElement(Box23, { component: "span" }, /* @__PURE__ */ React108.createElement(Typography8, { variant: "body2" }, __54("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
7643
7761
|
);
|
|
7644
7762
|
var TransitionRepeaterControl = createControl(
|
|
7645
7763
|
({
|
|
@@ -7665,7 +7783,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
7665
7783
|
});
|
|
7666
7784
|
return set;
|
|
7667
7785
|
}, [proInstalled]);
|
|
7668
|
-
|
|
7786
|
+
useEffect17(() => {
|
|
7669
7787
|
if (!value || value.length === 0) {
|
|
7670
7788
|
return;
|
|
7671
7789
|
}
|
|
@@ -7677,7 +7795,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
7677
7795
|
setValue(sanitized);
|
|
7678
7796
|
}
|
|
7679
7797
|
}, [allowedTransitionSet]);
|
|
7680
|
-
|
|
7798
|
+
useEffect17(() => {
|
|
7681
7799
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
7682
7800
|
}, [recentlyUsedListGetter]);
|
|
7683
7801
|
const allPropertiesUsed = useMemo16(() => areAllPropertiesUsed(value), [value]);
|
|
@@ -7711,9 +7829,9 @@ var TransitionRepeaterControl = createControl(
|
|
|
7711
7829
|
// src/controls/date-time-control.tsx
|
|
7712
7830
|
import * as React109 from "react";
|
|
7713
7831
|
import * as dayjs from "dayjs";
|
|
7714
|
-
import { isTransformable as isTransformable2, stringPropTypeUtil as
|
|
7832
|
+
import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
|
|
7715
7833
|
import { DateTimePropTypeUtil } from "@elementor/editor-props";
|
|
7716
|
-
import { Box as
|
|
7834
|
+
import { Box as Box24, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
|
|
7717
7835
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
7718
7836
|
var TIME_FORMAT = "HH:mm";
|
|
7719
7837
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
@@ -7757,10 +7875,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7757
7875
|
const base = dayjs.default();
|
|
7758
7876
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
7759
7877
|
};
|
|
7760
|
-
return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(
|
|
7878
|
+
return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(Box24, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
|
|
7761
7879
|
DatePicker,
|
|
7762
7880
|
{
|
|
7763
|
-
value: parseDateValue(
|
|
7881
|
+
value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
|
|
7764
7882
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
7765
7883
|
disabled: inputDisabled,
|
|
7766
7884
|
slotProps: {
|
|
@@ -7772,7 +7890,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7772
7890
|
)), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
|
|
7773
7891
|
TimePicker,
|
|
7774
7892
|
{
|
|
7775
|
-
value: parseTimeValue(
|
|
7893
|
+
value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
|
|
7776
7894
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
7777
7895
|
disabled: inputDisabled,
|
|
7778
7896
|
slotProps: {
|
|
@@ -7962,15 +8080,15 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
|
7962
8080
|
};
|
|
7963
8081
|
|
|
7964
8082
|
// src/controls/inline-editing-control.tsx
|
|
7965
|
-
import * as
|
|
7966
|
-
import { useCallback as useCallback4 } from "react";
|
|
8083
|
+
import * as React117 from "react";
|
|
8084
|
+
import { useCallback as useCallback4, useState as useState20 } from "react";
|
|
7967
8085
|
import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
|
|
7968
|
-
import { Box as
|
|
8086
|
+
import { Box as Box27 } from "@elementor/ui";
|
|
7969
8087
|
|
|
7970
8088
|
// src/components/inline-editor.tsx
|
|
7971
8089
|
import * as React114 from "react";
|
|
7972
|
-
import { useEffect as
|
|
7973
|
-
import { Box as
|
|
8090
|
+
import { useEffect as useEffect18, useRef as useRef28 } from "react";
|
|
8091
|
+
import { Box as Box25 } from "@elementor/ui";
|
|
7974
8092
|
import Bold from "@tiptap/extension-bold";
|
|
7975
8093
|
import Document from "@tiptap/extension-document";
|
|
7976
8094
|
import HardBreak from "@tiptap/extension-hard-break";
|
|
@@ -7986,7 +8104,7 @@ import Underline from "@tiptap/extension-underline";
|
|
|
7986
8104
|
import { EditorContent, useEditor } from "@tiptap/react";
|
|
7987
8105
|
|
|
7988
8106
|
// src/utils/inline-editing.ts
|
|
7989
|
-
import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as
|
|
8107
|
+
import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
|
|
7990
8108
|
function isEmpty(value = "") {
|
|
7991
8109
|
if (!value) {
|
|
7992
8110
|
return true;
|
|
@@ -8008,7 +8126,7 @@ function extractInlineHtmlContent(propValue) {
|
|
|
8008
8126
|
return escapedHtmlPropTypeUtil.extract(propValue) ?? "";
|
|
8009
8127
|
}
|
|
8010
8128
|
const htmlV3 = htmlV3PropTypeUtil.extract(propValue);
|
|
8011
|
-
return
|
|
8129
|
+
return stringPropTypeUtil21.extract(htmlV3?.content ?? null) ?? "";
|
|
8012
8130
|
}
|
|
8013
8131
|
|
|
8014
8132
|
// src/components/inline-editor.tsx
|
|
@@ -8027,6 +8145,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
|
|
|
8027
8145
|
onBlur = void 0,
|
|
8028
8146
|
expectedTag = null,
|
|
8029
8147
|
onEditorCreate,
|
|
8148
|
+
onEditorDestroy,
|
|
8030
8149
|
wrapperClassName,
|
|
8031
8150
|
onSelectionEnd,
|
|
8032
8151
|
mountElement = null
|
|
@@ -8111,6 +8230,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
|
|
|
8111
8230
|
}
|
|
8112
8231
|
},
|
|
8113
8232
|
onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
|
|
8233
|
+
onDestroy: onEditorDestroy ? () => onEditorDestroy() : void 0,
|
|
8114
8234
|
onBlur: mountElement ? void 0 : () => onBlurRef.current?.(),
|
|
8115
8235
|
onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
|
|
8116
8236
|
});
|
|
@@ -8126,11 +8246,11 @@ var InlineEditor = React114.forwardRef((props, ref) => {
|
|
|
8126
8246
|
if (mountElement) {
|
|
8127
8247
|
return null;
|
|
8128
8248
|
}
|
|
8129
|
-
return /* @__PURE__ */ React114.createElement(
|
|
8249
|
+
return /* @__PURE__ */ React114.createElement(Box25, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(EditorContent, { ref, editor }));
|
|
8130
8250
|
});
|
|
8131
8251
|
var useOnUpdate = (callback, dependencies) => {
|
|
8132
8252
|
const hasMounted = useRef28(false);
|
|
8133
|
-
|
|
8253
|
+
useEffect18(() => {
|
|
8134
8254
|
if (hasMounted.current) {
|
|
8135
8255
|
callback();
|
|
8136
8256
|
} else {
|
|
@@ -8139,194 +8259,531 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
8139
8259
|
}, dependencies);
|
|
8140
8260
|
};
|
|
8141
8261
|
|
|
8142
|
-
// src/
|
|
8143
|
-
|
|
8144
|
-
|
|
8145
|
-
|
|
8146
|
-
|
|
8147
|
-
|
|
8148
|
-
|
|
8149
|
-
|
|
8150
|
-
|
|
8151
|
-
|
|
8152
|
-
|
|
8153
|
-
|
|
8154
|
-
|
|
8155
|
-
|
|
8156
|
-
|
|
8157
|
-
|
|
8158
|
-
|
|
8159
|
-
|
|
8160
|
-
|
|
8161
|
-
|
|
8162
|
-
|
|
8163
|
-
|
|
8164
|
-
|
|
8165
|
-
|
|
8166
|
-
borderRadius: "8px",
|
|
8167
|
-
transition: "border-color .2s ease, box-shadow .2s ease",
|
|
8168
|
-
"&:hover": {
|
|
8169
|
-
borderColor: "black"
|
|
8170
|
-
},
|
|
8171
|
-
"&:focus-within": {
|
|
8172
|
-
borderColor: "black",
|
|
8173
|
-
boxShadow: "0 0 0 1px black"
|
|
8174
|
-
},
|
|
8175
|
-
"& .ProseMirror:focus": {
|
|
8176
|
-
outline: "none"
|
|
8177
|
-
},
|
|
8178
|
-
"& .ProseMirror": {
|
|
8179
|
-
minHeight: "70px",
|
|
8180
|
-
fontSize: "12px",
|
|
8181
|
-
"& a": {
|
|
8182
|
-
color: "inherit"
|
|
8183
|
-
},
|
|
8184
|
-
"& .elementor-inline-editor-reset": {
|
|
8185
|
-
margin: 0,
|
|
8186
|
-
padding: 0
|
|
8187
|
-
},
|
|
8188
|
-
"&.is-empty::before": {
|
|
8189
|
-
content: "attr(data-placeholder)",
|
|
8190
|
-
color: "text.tertiary",
|
|
8191
|
-
pointerEvents: "none",
|
|
8192
|
-
position: "absolute",
|
|
8193
|
-
opacity: 0.6
|
|
8194
|
-
}
|
|
8195
|
-
},
|
|
8196
|
-
".strip-styles *": {
|
|
8197
|
-
all: "unset"
|
|
8198
|
-
},
|
|
8199
|
-
...sx
|
|
8200
|
-
},
|
|
8201
|
-
...attributes,
|
|
8202
|
-
...props
|
|
8203
|
-
},
|
|
8204
|
-
/* @__PURE__ */ React115.createElement(InlineEditor, { value: content, setValue: handleChange, placeholder: placeholder ?? null })
|
|
8205
|
-
));
|
|
8206
|
-
}
|
|
8207
|
-
);
|
|
8208
|
-
|
|
8209
|
-
// src/controls/email-form-action-control/index.tsx
|
|
8210
|
-
import * as React119 from "react";
|
|
8211
|
-
import { emailsPropTypeUtil } from "@elementor/editor-props";
|
|
8212
|
-
import { CollapsibleContent } from "@elementor/editor-ui";
|
|
8213
|
-
import { Box as Box26, Divider as Divider5, Stack as Stack20 } from "@elementor/ui";
|
|
8262
|
+
// src/components/inline-editor-toolbar.tsx
|
|
8263
|
+
import * as React116 from "react";
|
|
8264
|
+
import { useEffect as useEffect20, useMemo as useMemo17, useRef as useRef30, useState as useState19 } from "react";
|
|
8265
|
+
import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
|
|
8266
|
+
import {
|
|
8267
|
+
BoldIcon,
|
|
8268
|
+
ItalicIcon,
|
|
8269
|
+
LinkIcon as LinkIcon3,
|
|
8270
|
+
MinusIcon as MinusIcon2,
|
|
8271
|
+
StrikethroughIcon,
|
|
8272
|
+
SubscriptIcon,
|
|
8273
|
+
SuperscriptIcon,
|
|
8274
|
+
UnderlineIcon
|
|
8275
|
+
} from "@elementor/icons";
|
|
8276
|
+
import {
|
|
8277
|
+
Box as Box26,
|
|
8278
|
+
IconButton as IconButton9,
|
|
8279
|
+
ToggleButton as ToggleButton3,
|
|
8280
|
+
ToggleButtonGroup as ToggleButtonGroup2,
|
|
8281
|
+
toggleButtonGroupClasses,
|
|
8282
|
+
Tooltip as Tooltip10,
|
|
8283
|
+
usePopupState as usePopupState10
|
|
8284
|
+
} from "@elementor/ui";
|
|
8285
|
+
import { useEditorState } from "@tiptap/react";
|
|
8214
8286
|
import { __ as __58 } from "@wordpress/i18n";
|
|
8215
8287
|
|
|
8216
|
-
// src/
|
|
8217
|
-
import * as
|
|
8218
|
-
import {
|
|
8219
|
-
import {
|
|
8288
|
+
// src/components/url-popover.tsx
|
|
8289
|
+
import * as React115 from "react";
|
|
8290
|
+
import { useEffect as useEffect19, useRef as useRef29 } from "react";
|
|
8291
|
+
import { ExternalLinkIcon } from "@elementor/icons";
|
|
8292
|
+
import { bindPopover as bindPopover8, Popover as Popover8, Stack as Stack19, TextField as TextField11, ToggleButton as ToggleButton2, Tooltip as Tooltip9 } from "@elementor/ui";
|
|
8220
8293
|
import { __ as __57 } from "@wordpress/i18n";
|
|
8221
|
-
|
|
8222
|
-
|
|
8223
|
-
|
|
8224
|
-
|
|
8225
|
-
|
|
8226
|
-
|
|
8227
|
-
|
|
8228
|
-
|
|
8229
|
-
|
|
8230
|
-
|
|
8231
|
-
|
|
8232
|
-
|
|
8233
|
-
|
|
8234
|
-
];
|
|
8235
|
-
var FORM_ELEMENT_TYPE = "e-form";
|
|
8236
|
-
var CSS_ID_PROP_KEY = "_cssid";
|
|
8237
|
-
function isFormFieldWidgetType(widgetType) {
|
|
8238
|
-
return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
|
|
8239
|
-
}
|
|
8240
|
-
function extractStringPropValue(value) {
|
|
8241
|
-
return stringPropTypeUtil21.extract(value);
|
|
8242
|
-
}
|
|
8243
|
-
function getSettingWithDefault(child, widgetType, key) {
|
|
8244
|
-
const fromGet = child.settings.get(key);
|
|
8245
|
-
if (fromGet !== null && fromGet !== void 0) {
|
|
8246
|
-
return fromGet;
|
|
8247
|
-
}
|
|
8248
|
-
const schema = getWidgetsCache()?.[widgetType]?.atomic_props_schema;
|
|
8249
|
-
return schema?.[key]?.default ?? null;
|
|
8250
|
-
}
|
|
8251
|
-
function getFieldCssId(child, widgetType) {
|
|
8252
|
-
return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
|
|
8253
|
-
}
|
|
8254
|
-
function getFormContainer(elementId) {
|
|
8255
|
-
let container = getContainer2(elementId);
|
|
8256
|
-
while (container) {
|
|
8257
|
-
if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
|
|
8258
|
-
return container;
|
|
8294
|
+
var UrlPopover = ({
|
|
8295
|
+
popupState,
|
|
8296
|
+
restoreValue,
|
|
8297
|
+
anchorRef,
|
|
8298
|
+
value,
|
|
8299
|
+
onChange,
|
|
8300
|
+
openInNewTab,
|
|
8301
|
+
onToggleNewTab
|
|
8302
|
+
}) => {
|
|
8303
|
+
const inputRef = useRef29(null);
|
|
8304
|
+
useEffect19(() => {
|
|
8305
|
+
if (popupState.isOpen) {
|
|
8306
|
+
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8259
8307
|
}
|
|
8260
|
-
|
|
8261
|
-
|
|
8262
|
-
|
|
8263
|
-
|
|
8264
|
-
|
|
8265
|
-
return
|
|
8266
|
-
|
|
8267
|
-
|
|
8268
|
-
|
|
8269
|
-
|
|
8270
|
-
|
|
8271
|
-
|
|
8272
|
-
|
|
8273
|
-
|
|
8274
|
-
|
|
8275
|
-
if (!selectedElement) {
|
|
8276
|
-
return [];
|
|
8277
|
-
}
|
|
8278
|
-
const formContainer = getFormContainer(selectedElement.id);
|
|
8279
|
-
if (!formContainer?.children) {
|
|
8280
|
-
return [];
|
|
8281
|
-
}
|
|
8282
|
-
const suggestions = [];
|
|
8283
|
-
const seenCssIds = /* @__PURE__ */ new Set();
|
|
8284
|
-
formContainer.children.forEachRecursive?.((child) => {
|
|
8285
|
-
const widgetType = child.model.get("widgetType");
|
|
8286
|
-
if (!widgetType || !isFormFieldWidgetType(widgetType)) {
|
|
8287
|
-
return;
|
|
8288
|
-
}
|
|
8289
|
-
if (options?.inputType) {
|
|
8290
|
-
const typeValue = extractStringPropValue(getSettingWithDefault(child, widgetType, "type"));
|
|
8291
|
-
if (typeValue !== options.inputType) {
|
|
8292
|
-
return;
|
|
8293
|
-
}
|
|
8294
|
-
}
|
|
8295
|
-
const cssId = getFieldCssId(child, widgetType);
|
|
8296
|
-
if (!cssId || seenCssIds.has(cssId)) {
|
|
8297
|
-
return;
|
|
8298
|
-
}
|
|
8299
|
-
seenCssIds.add(cssId);
|
|
8300
|
-
suggestions.push({ label: cssId, value: cssId });
|
|
8301
|
-
});
|
|
8302
|
-
return suggestions;
|
|
8308
|
+
}, [popupState.isOpen]);
|
|
8309
|
+
const handleClose = () => {
|
|
8310
|
+
restoreValue();
|
|
8311
|
+
popupState.close();
|
|
8312
|
+
};
|
|
8313
|
+
return /* @__PURE__ */ React115.createElement(
|
|
8314
|
+
Popover8,
|
|
8315
|
+
{
|
|
8316
|
+
slotProps: {
|
|
8317
|
+
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8318
|
+
},
|
|
8319
|
+
...bindPopover8(popupState),
|
|
8320
|
+
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8321
|
+
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8322
|
+
onClose: handleClose
|
|
8303
8323
|
},
|
|
8304
|
-
|
|
8324
|
+
/* @__PURE__ */ React115.createElement(Stack19, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
|
|
8325
|
+
TextField11,
|
|
8326
|
+
{
|
|
8327
|
+
value,
|
|
8328
|
+
onChange,
|
|
8329
|
+
size: "tiny",
|
|
8330
|
+
fullWidth: true,
|
|
8331
|
+
placeholder: __57("Type a URL", "elementor"),
|
|
8332
|
+
inputProps: { ref: inputRef },
|
|
8333
|
+
color: "secondary",
|
|
8334
|
+
InputProps: { sx: { borderRadius: "8px" } },
|
|
8335
|
+
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8336
|
+
}
|
|
8337
|
+
), /* @__PURE__ */ React115.createElement(Tooltip9, { title: __57("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
|
|
8338
|
+
ToggleButton2,
|
|
8339
|
+
{
|
|
8340
|
+
size: "tiny",
|
|
8341
|
+
value: "newTab",
|
|
8342
|
+
selected: openInNewTab,
|
|
8343
|
+
onClick: onToggleNewTab,
|
|
8344
|
+
"aria-label": __57("Open in a new tab", "elementor"),
|
|
8345
|
+
sx: { borderRadius: "8px" }
|
|
8346
|
+
},
|
|
8347
|
+
/* @__PURE__ */ React115.createElement(ExternalLinkIcon, { fontSize: "tiny" })
|
|
8348
|
+
)))
|
|
8305
8349
|
);
|
|
8306
|
-
}
|
|
8307
|
-
|
|
8308
|
-
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
8309
|
-
import * as React116 from "react";
|
|
8310
|
-
import { useMemo as useMemo17, useState as useState19 } from "react";
|
|
8311
|
-
import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
|
|
8312
|
-
import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField11 } from "@elementor/ui";
|
|
8350
|
+
};
|
|
8313
8351
|
|
|
8314
|
-
// src/
|
|
8315
|
-
|
|
8316
|
-
|
|
8317
|
-
|
|
8318
|
-
|
|
8319
|
-
|
|
8320
|
-
|
|
8321
|
-
|
|
8322
|
-
|
|
8323
|
-
|
|
8324
|
-
|
|
8325
|
-
|
|
8326
|
-
|
|
8327
|
-
|
|
8328
|
-
|
|
8329
|
-
}
|
|
8352
|
+
// src/components/inline-editor-toolbar.tsx
|
|
8353
|
+
var InlineEditorToolbar = ({
|
|
8354
|
+
editor,
|
|
8355
|
+
elementId,
|
|
8356
|
+
sx = {},
|
|
8357
|
+
inControlPanel = false
|
|
8358
|
+
}) => {
|
|
8359
|
+
const [urlValue, setUrlValue] = useState19("");
|
|
8360
|
+
const [openInNewTab, setOpenInNewTab] = useState19(false);
|
|
8361
|
+
const toolbarRef = useRef30(null);
|
|
8362
|
+
const linkPopupState = usePopupState10({ variant: "popover" });
|
|
8363
|
+
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8364
|
+
const editorState = useEditorState({
|
|
8365
|
+
editor,
|
|
8366
|
+
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
8367
|
+
});
|
|
8368
|
+
const formatButtonsList = useMemo17(() => {
|
|
8369
|
+
const buttons = Object.values(formatButtons);
|
|
8370
|
+
if (isElementClickable) {
|
|
8371
|
+
return buttons.filter((button) => button.action !== "link");
|
|
8372
|
+
}
|
|
8373
|
+
return buttons;
|
|
8374
|
+
}, [isElementClickable]);
|
|
8375
|
+
const handleLinkClick = () => {
|
|
8376
|
+
const linkAttrs = editor.getAttributes("link");
|
|
8377
|
+
setUrlValue(linkAttrs.href || "");
|
|
8378
|
+
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
8379
|
+
linkPopupState.open(toolbarRef.current);
|
|
8380
|
+
};
|
|
8381
|
+
const handleUrlChange = (event) => {
|
|
8382
|
+
setUrlValue(event.target.value);
|
|
8383
|
+
};
|
|
8384
|
+
const handleToggleNewTab = () => {
|
|
8385
|
+
setOpenInNewTab(!openInNewTab);
|
|
8386
|
+
};
|
|
8387
|
+
const handleUrlSubmit = () => {
|
|
8388
|
+
if (urlValue) {
|
|
8389
|
+
editor.chain().focus().setLink({
|
|
8390
|
+
href: urlValue,
|
|
8391
|
+
target: openInNewTab ? "_blank" : "_self"
|
|
8392
|
+
}).run();
|
|
8393
|
+
} else {
|
|
8394
|
+
editor.chain().focus().unsetLink().run();
|
|
8395
|
+
}
|
|
8396
|
+
if (elementId) {
|
|
8397
|
+
window.dispatchEvent(
|
|
8398
|
+
new CustomEvent("elementor:inline-link-changed", {
|
|
8399
|
+
detail: { elementId }
|
|
8400
|
+
})
|
|
8401
|
+
);
|
|
8402
|
+
}
|
|
8403
|
+
linkPopupState.close();
|
|
8404
|
+
};
|
|
8405
|
+
useEffect20(() => {
|
|
8406
|
+
if (!inControlPanel) {
|
|
8407
|
+
editor?.commands?.focus();
|
|
8408
|
+
}
|
|
8409
|
+
}, [editor, inControlPanel]);
|
|
8410
|
+
return /* @__PURE__ */ React116.createElement(
|
|
8411
|
+
Box26,
|
|
8412
|
+
{
|
|
8413
|
+
ref: toolbarRef,
|
|
8414
|
+
sx: {
|
|
8415
|
+
display: "inline-flex",
|
|
8416
|
+
gap: 0.5,
|
|
8417
|
+
padding: 0.5,
|
|
8418
|
+
borderRadius: "8px",
|
|
8419
|
+
backgroundColor: "background.paper",
|
|
8420
|
+
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
8421
|
+
alignItems: "center",
|
|
8422
|
+
visibility: linkPopupState.isOpen ? "hidden" : "visible",
|
|
8423
|
+
pointerEvents: linkPopupState.isOpen ? "none" : "all",
|
|
8424
|
+
...sx,
|
|
8425
|
+
...inControlPanel && {
|
|
8426
|
+
width: "100%",
|
|
8427
|
+
justifyContent: "center",
|
|
8428
|
+
flexDirection: "row",
|
|
8429
|
+
backgroundColor: "transparent",
|
|
8430
|
+
boxShadow: "none",
|
|
8431
|
+
borderWidth: "0",
|
|
8432
|
+
borderBottom: "1px solid",
|
|
8433
|
+
borderBottomColor: "grey.200",
|
|
8434
|
+
borderRadius: "0",
|
|
8435
|
+
position: "absolute",
|
|
8436
|
+
top: "0",
|
|
8437
|
+
left: "0"
|
|
8438
|
+
}
|
|
8439
|
+
}
|
|
8440
|
+
},
|
|
8441
|
+
/* @__PURE__ */ React116.createElement(Tooltip10, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(IconButton9, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
8442
|
+
/* @__PURE__ */ React116.createElement(
|
|
8443
|
+
ToggleButtonGroup2,
|
|
8444
|
+
{
|
|
8445
|
+
value: editorState,
|
|
8446
|
+
size: "tiny",
|
|
8447
|
+
sx: {
|
|
8448
|
+
display: "flex",
|
|
8449
|
+
gap: 0.5,
|
|
8450
|
+
border: "none",
|
|
8451
|
+
[`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]: {
|
|
8452
|
+
borderRadius: "8px",
|
|
8453
|
+
border: "none",
|
|
8454
|
+
marginLeft: 0,
|
|
8455
|
+
"&.Mui-selected": {
|
|
8456
|
+
marginLeft: 0
|
|
8457
|
+
},
|
|
8458
|
+
"& + &.Mui-selected": {
|
|
8459
|
+
marginLeft: 0
|
|
8460
|
+
}
|
|
8461
|
+
},
|
|
8462
|
+
...inControlPanel && {
|
|
8463
|
+
justifyContent: "space-between",
|
|
8464
|
+
width: "100%",
|
|
8465
|
+
"& svg": {
|
|
8466
|
+
width: "0.7rem",
|
|
8467
|
+
height: "0.7rem",
|
|
8468
|
+
fill: "black"
|
|
8469
|
+
}
|
|
8470
|
+
}
|
|
8471
|
+
}
|
|
8472
|
+
},
|
|
8473
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(Tooltip10, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
|
|
8474
|
+
ToggleButton3,
|
|
8475
|
+
{
|
|
8476
|
+
value: button.action,
|
|
8477
|
+
"aria-label": button.label,
|
|
8478
|
+
size: "tiny",
|
|
8479
|
+
onClick: () => {
|
|
8480
|
+
if (button.action === "link") {
|
|
8481
|
+
handleLinkClick();
|
|
8482
|
+
} else {
|
|
8483
|
+
button.method?.(editor);
|
|
8484
|
+
}
|
|
8485
|
+
editor?.commands?.focus();
|
|
8486
|
+
}
|
|
8487
|
+
},
|
|
8488
|
+
button.icon
|
|
8489
|
+
)))
|
|
8490
|
+
),
|
|
8491
|
+
/* @__PURE__ */ React116.createElement(
|
|
8492
|
+
UrlPopover,
|
|
8493
|
+
{
|
|
8494
|
+
popupState: linkPopupState,
|
|
8495
|
+
anchorRef: toolbarRef,
|
|
8496
|
+
restoreValue: handleUrlSubmit,
|
|
8497
|
+
value: urlValue,
|
|
8498
|
+
onChange: handleUrlChange,
|
|
8499
|
+
openInNewTab,
|
|
8500
|
+
onToggleNewTab: handleToggleNewTab
|
|
8501
|
+
}
|
|
8502
|
+
)
|
|
8503
|
+
);
|
|
8504
|
+
};
|
|
8505
|
+
var checkIfElementIsClickable = (elementId) => {
|
|
8506
|
+
const container = getContainer2(elementId);
|
|
8507
|
+
const type = container?.model.get("widgetType");
|
|
8508
|
+
const isButton = type === "e-button";
|
|
8509
|
+
const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
|
|
8510
|
+
return isButton || hasLink;
|
|
8511
|
+
};
|
|
8512
|
+
var toolbarButtons = {
|
|
8513
|
+
clear: {
|
|
8514
|
+
label: __58("Clear", "elementor"),
|
|
8515
|
+
icon: /* @__PURE__ */ React116.createElement(MinusIcon2, { fontSize: "tiny" }),
|
|
8516
|
+
action: "clear",
|
|
8517
|
+
method: (editor) => {
|
|
8518
|
+
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
8519
|
+
}
|
|
8520
|
+
},
|
|
8521
|
+
bold: {
|
|
8522
|
+
label: __58("Bold", "elementor"),
|
|
8523
|
+
icon: /* @__PURE__ */ React116.createElement(BoldIcon, { fontSize: "tiny" }),
|
|
8524
|
+
action: "bold",
|
|
8525
|
+
method: (editor) => {
|
|
8526
|
+
editor.chain().focus().toggleBold().run();
|
|
8527
|
+
}
|
|
8528
|
+
},
|
|
8529
|
+
italic: {
|
|
8530
|
+
label: __58("Italic", "elementor"),
|
|
8531
|
+
icon: /* @__PURE__ */ React116.createElement(ItalicIcon, { fontSize: "tiny" }),
|
|
8532
|
+
action: "italic",
|
|
8533
|
+
method: (editor) => {
|
|
8534
|
+
editor.chain().focus().toggleItalic().run();
|
|
8535
|
+
}
|
|
8536
|
+
},
|
|
8537
|
+
underline: {
|
|
8538
|
+
label: __58("Underline", "elementor"),
|
|
8539
|
+
icon: /* @__PURE__ */ React116.createElement(UnderlineIcon, { fontSize: "tiny" }),
|
|
8540
|
+
action: "underline",
|
|
8541
|
+
method: (editor) => {
|
|
8542
|
+
editor.chain().focus().toggleUnderline().run();
|
|
8543
|
+
}
|
|
8544
|
+
},
|
|
8545
|
+
strike: {
|
|
8546
|
+
label: __58("Strikethrough", "elementor"),
|
|
8547
|
+
icon: /* @__PURE__ */ React116.createElement(StrikethroughIcon, { fontSize: "tiny" }),
|
|
8548
|
+
action: "strike",
|
|
8549
|
+
method: (editor) => {
|
|
8550
|
+
editor.chain().focus().toggleStrike().run();
|
|
8551
|
+
}
|
|
8552
|
+
},
|
|
8553
|
+
superscript: {
|
|
8554
|
+
label: __58("Superscript", "elementor"),
|
|
8555
|
+
icon: /* @__PURE__ */ React116.createElement(SuperscriptIcon, { fontSize: "tiny" }),
|
|
8556
|
+
action: "superscript",
|
|
8557
|
+
method: (editor) => {
|
|
8558
|
+
editor.chain().focus().toggleSuperscript().run();
|
|
8559
|
+
}
|
|
8560
|
+
},
|
|
8561
|
+
subscript: {
|
|
8562
|
+
label: __58("Subscript", "elementor"),
|
|
8563
|
+
icon: /* @__PURE__ */ React116.createElement(SubscriptIcon, { fontSize: "tiny" }),
|
|
8564
|
+
action: "subscript",
|
|
8565
|
+
method: (editor) => {
|
|
8566
|
+
editor.chain().focus().toggleSubscript().run();
|
|
8567
|
+
}
|
|
8568
|
+
},
|
|
8569
|
+
link: {
|
|
8570
|
+
label: __58("Link", "elementor"),
|
|
8571
|
+
icon: /* @__PURE__ */ React116.createElement(LinkIcon3, { fontSize: "tiny" }),
|
|
8572
|
+
action: "link",
|
|
8573
|
+
method: null
|
|
8574
|
+
}
|
|
8575
|
+
};
|
|
8576
|
+
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
8577
|
+
var possibleFormats = Object.keys(formatButtons);
|
|
8578
|
+
|
|
8579
|
+
// src/controls/inline-editing-control.tsx
|
|
8580
|
+
var InlineEditingControl = createControl(({ sx, attributes, props, context: { elementId } }) => {
|
|
8581
|
+
const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
|
|
8582
|
+
const { value: rawValue } = usePropKeyContext();
|
|
8583
|
+
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
8584
|
+
const [editor, setEditor] = useState20(null);
|
|
8585
|
+
const handleChange = useCallback4(
|
|
8586
|
+
(newValue) => {
|
|
8587
|
+
const html = newValue ?? "";
|
|
8588
|
+
setValue(html);
|
|
8589
|
+
},
|
|
8590
|
+
[setValue]
|
|
8591
|
+
);
|
|
8592
|
+
return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(Box27, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
|
|
8593
|
+
InlineEditorToolbar,
|
|
8594
|
+
{
|
|
8595
|
+
editor,
|
|
8596
|
+
elementId,
|
|
8597
|
+
sx: {
|
|
8598
|
+
boxShadow: "none",
|
|
8599
|
+
border: "1px solid",
|
|
8600
|
+
borderColor: "grey.200",
|
|
8601
|
+
mb: 0.5
|
|
8602
|
+
},
|
|
8603
|
+
inControlPanel: true
|
|
8604
|
+
}
|
|
8605
|
+
), /* @__PURE__ */ React117.createElement(
|
|
8606
|
+
Box27,
|
|
8607
|
+
{
|
|
8608
|
+
sx: {
|
|
8609
|
+
p: 0.8,
|
|
8610
|
+
border: "1px solid",
|
|
8611
|
+
borderColor: "grey.200",
|
|
8612
|
+
borderRadius: "8px",
|
|
8613
|
+
transition: "border-color .2s ease, box-shadow .2s ease",
|
|
8614
|
+
"&:hover": {
|
|
8615
|
+
borderColor: "black"
|
|
8616
|
+
},
|
|
8617
|
+
"&:focus-within": {
|
|
8618
|
+
borderColor: "black",
|
|
8619
|
+
boxShadow: "0 0 0 1px black"
|
|
8620
|
+
},
|
|
8621
|
+
"& .ProseMirror:focus": {
|
|
8622
|
+
outline: "none"
|
|
8623
|
+
},
|
|
8624
|
+
"& .ProseMirror": {
|
|
8625
|
+
minHeight: "100px",
|
|
8626
|
+
fontSize: "12px",
|
|
8627
|
+
"& a": {
|
|
8628
|
+
color: "inherit"
|
|
8629
|
+
},
|
|
8630
|
+
"& .elementor-inline-editor-reset": {
|
|
8631
|
+
margin: 0,
|
|
8632
|
+
padding: 0
|
|
8633
|
+
},
|
|
8634
|
+
"&.is-empty::before": {
|
|
8635
|
+
content: "attr(data-placeholder)",
|
|
8636
|
+
color: "text.tertiary",
|
|
8637
|
+
pointerEvents: "none",
|
|
8638
|
+
position: "absolute",
|
|
8639
|
+
opacity: 0.6
|
|
8640
|
+
}
|
|
8641
|
+
},
|
|
8642
|
+
".strip-styles *": {
|
|
8643
|
+
all: "unset"
|
|
8644
|
+
},
|
|
8645
|
+
...sx
|
|
8646
|
+
},
|
|
8647
|
+
...attributes,
|
|
8648
|
+
...props
|
|
8649
|
+
},
|
|
8650
|
+
/* @__PURE__ */ React117.createElement(
|
|
8651
|
+
InlineEditor,
|
|
8652
|
+
{
|
|
8653
|
+
value: content,
|
|
8654
|
+
setValue: handleChange,
|
|
8655
|
+
placeholder: placeholder ?? null,
|
|
8656
|
+
onEditorCreate: setEditor,
|
|
8657
|
+
onEditorDestroy: () => setEditor(null),
|
|
8658
|
+
sx: {
|
|
8659
|
+
paddingBlockStart: 5
|
|
8660
|
+
}
|
|
8661
|
+
}
|
|
8662
|
+
)
|
|
8663
|
+
)));
|
|
8664
|
+
});
|
|
8665
|
+
|
|
8666
|
+
// src/controls/email-form-action-control/index.tsx
|
|
8667
|
+
import * as React121 from "react";
|
|
8668
|
+
import { emailsPropTypeUtil } from "@elementor/editor-props";
|
|
8669
|
+
import { CollapsibleContent } from "@elementor/editor-ui";
|
|
8670
|
+
import { Box as Box28, Divider as Divider5, Stack as Stack21 } from "@elementor/ui";
|
|
8671
|
+
import { __ as __60 } from "@wordpress/i18n";
|
|
8672
|
+
|
|
8673
|
+
// src/controls/email-form-action-control/fields.tsx
|
|
8674
|
+
import * as React120 from "react";
|
|
8675
|
+
import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
|
|
8676
|
+
import { Grid as Grid34, Stack as Stack20 } from "@elementor/ui";
|
|
8677
|
+
import { __ as __59 } from "@wordpress/i18n";
|
|
8678
|
+
|
|
8679
|
+
// src/hooks/use-form-field-suggestions.ts
|
|
8680
|
+
import { getContainer as getContainer3, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
|
|
8681
|
+
import { stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
|
|
8682
|
+
import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
|
|
8683
|
+
var FORM_FIELD_WIDGET_TYPES = [
|
|
8684
|
+
"e-form-input",
|
|
8685
|
+
"e-form-textarea",
|
|
8686
|
+
"e-form-checkbox",
|
|
8687
|
+
"e-form-radio-button",
|
|
8688
|
+
"e-form-select",
|
|
8689
|
+
"e-form-date-picker",
|
|
8690
|
+
"e-form-time-picker"
|
|
8691
|
+
];
|
|
8692
|
+
var FORM_ELEMENT_TYPE = "e-form";
|
|
8693
|
+
var CSS_ID_PROP_KEY = "_cssid";
|
|
8694
|
+
function isFormFieldWidgetType(widgetType) {
|
|
8695
|
+
return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
|
|
8696
|
+
}
|
|
8697
|
+
function extractStringPropValue(value) {
|
|
8698
|
+
return stringPropTypeUtil22.extract(value);
|
|
8699
|
+
}
|
|
8700
|
+
function getSettingWithDefault(child, widgetType, key) {
|
|
8701
|
+
const fromGet = child.settings.get(key);
|
|
8702
|
+
if (fromGet !== null && fromGet !== void 0) {
|
|
8703
|
+
return fromGet;
|
|
8704
|
+
}
|
|
8705
|
+
const schema = getWidgetsCache()?.[widgetType]?.atomic_props_schema;
|
|
8706
|
+
return schema?.[key]?.default ?? null;
|
|
8707
|
+
}
|
|
8708
|
+
function getFieldCssId(child, widgetType) {
|
|
8709
|
+
return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
|
|
8710
|
+
}
|
|
8711
|
+
function getFormContainer(elementId) {
|
|
8712
|
+
let container = getContainer3(elementId);
|
|
8713
|
+
while (container) {
|
|
8714
|
+
if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
|
|
8715
|
+
return container;
|
|
8716
|
+
}
|
|
8717
|
+
container = container.parent ?? null;
|
|
8718
|
+
}
|
|
8719
|
+
return null;
|
|
8720
|
+
}
|
|
8721
|
+
function useFormFieldSuggestions(options) {
|
|
8722
|
+
return useListenTo2(
|
|
8723
|
+
[
|
|
8724
|
+
v1ReadyEvent(),
|
|
8725
|
+
commandEndEvent2("document/elements/create"),
|
|
8726
|
+
commandEndEvent2("document/elements/delete"),
|
|
8727
|
+
commandEndEvent2("document/elements/set-settings")
|
|
8728
|
+
],
|
|
8729
|
+
() => {
|
|
8730
|
+
const selectedElements = getSelectedElements3();
|
|
8731
|
+
const selectedElement = selectedElements[0];
|
|
8732
|
+
if (!selectedElement) {
|
|
8733
|
+
return [];
|
|
8734
|
+
}
|
|
8735
|
+
const formContainer = getFormContainer(selectedElement.id);
|
|
8736
|
+
if (!formContainer?.children) {
|
|
8737
|
+
return [];
|
|
8738
|
+
}
|
|
8739
|
+
const suggestions = [];
|
|
8740
|
+
const seenCssIds = /* @__PURE__ */ new Set();
|
|
8741
|
+
formContainer.children.forEachRecursive?.((child) => {
|
|
8742
|
+
const widgetType = child.model.get("widgetType");
|
|
8743
|
+
if (!widgetType || !isFormFieldWidgetType(widgetType)) {
|
|
8744
|
+
return;
|
|
8745
|
+
}
|
|
8746
|
+
if (options?.inputType) {
|
|
8747
|
+
const typeValue = extractStringPropValue(getSettingWithDefault(child, widgetType, "type"));
|
|
8748
|
+
if (typeValue !== options.inputType) {
|
|
8749
|
+
return;
|
|
8750
|
+
}
|
|
8751
|
+
}
|
|
8752
|
+
const cssId = getFieldCssId(child, widgetType);
|
|
8753
|
+
if (!cssId || seenCssIds.has(cssId)) {
|
|
8754
|
+
return;
|
|
8755
|
+
}
|
|
8756
|
+
seenCssIds.add(cssId);
|
|
8757
|
+
suggestions.push({ label: cssId, value: cssId });
|
|
8758
|
+
});
|
|
8759
|
+
return suggestions;
|
|
8760
|
+
},
|
|
8761
|
+
[]
|
|
8762
|
+
);
|
|
8763
|
+
}
|
|
8764
|
+
|
|
8765
|
+
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
8766
|
+
import * as React118 from "react";
|
|
8767
|
+
import { useMemo as useMemo18, useState as useState21 } from "react";
|
|
8768
|
+
import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
|
|
8769
|
+
import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
|
|
8770
|
+
|
|
8771
|
+
// src/controls/email-form-action-control/utils.ts
|
|
8772
|
+
import { z } from "@elementor/schema";
|
|
8773
|
+
import { hasProInstalled as hasProInstalled3, isVersionGreaterOrEqual as isVersionGreaterOrEqual2 } from "@elementor/utils";
|
|
8774
|
+
var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
|
|
8775
|
+
var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
|
|
8776
|
+
function isValidEmail(email) {
|
|
8777
|
+
return z.string().email().safeParse(email).success;
|
|
8778
|
+
}
|
|
8779
|
+
var FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
|
|
8780
|
+
function isFormFieldShortcode(value) {
|
|
8781
|
+
return FORM_FIELD_SHORTCODE_PATTERN.test(value);
|
|
8782
|
+
}
|
|
8783
|
+
var shouldShowMentionsInfo = () => {
|
|
8784
|
+
if (!hasProInstalled3()) {
|
|
8785
|
+
return true;
|
|
8786
|
+
}
|
|
8330
8787
|
const proVersion = window.elementorPro?.config?.version;
|
|
8331
8788
|
if (!proVersion) {
|
|
8332
8789
|
return false;
|
|
@@ -8345,10 +8802,10 @@ function resolveMention(raw, suggestions) {
|
|
|
8345
8802
|
}
|
|
8346
8803
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
8347
8804
|
const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
|
|
8348
|
-
const [inputValue, setInputValue] =
|
|
8805
|
+
const [inputValue, setInputValue] = useState21("");
|
|
8349
8806
|
const items2 = value || [];
|
|
8350
|
-
const selectedValues = items2.map((item) =>
|
|
8351
|
-
const suggestionOptions =
|
|
8807
|
+
const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
|
|
8808
|
+
const suggestionOptions = useMemo18(
|
|
8352
8809
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
8353
8810
|
[suggestions]
|
|
8354
8811
|
);
|
|
@@ -8357,7 +8814,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8357
8814
|
if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
|
|
8358
8815
|
return;
|
|
8359
8816
|
}
|
|
8360
|
-
setValue([...items2,
|
|
8817
|
+
setValue([...items2, stringPropTypeUtil23.create(address)]);
|
|
8361
8818
|
setInputValue("");
|
|
8362
8819
|
};
|
|
8363
8820
|
const handleChange = (_, newValue) => {
|
|
@@ -8367,7 +8824,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8367
8824
|
if (!address || !isValidRecipient(address)) {
|
|
8368
8825
|
continue;
|
|
8369
8826
|
}
|
|
8370
|
-
updated.push(
|
|
8827
|
+
updated.push(stringPropTypeUtil23.create(address));
|
|
8371
8828
|
}
|
|
8372
8829
|
setValue(updated);
|
|
8373
8830
|
setInputValue("");
|
|
@@ -8383,7 +8840,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8383
8840
|
tryAddChip(inputValue);
|
|
8384
8841
|
}
|
|
8385
8842
|
};
|
|
8386
|
-
return /* @__PURE__ */
|
|
8843
|
+
return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
|
|
8387
8844
|
Autocomplete4,
|
|
8388
8845
|
{
|
|
8389
8846
|
fullWidth: true,
|
|
@@ -8408,99 +8865,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
8408
8865
|
onBlur: handleBlur,
|
|
8409
8866
|
getOptionLabel: (option) => option,
|
|
8410
8867
|
isOptionEqualToValue: (option, val) => option === val,
|
|
8411
|
-
renderInput: (params) => /* @__PURE__ */
|
|
8412
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
8868
|
+
renderInput: (params) => /* @__PURE__ */ React118.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
8869
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React118.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
8413
8870
|
}
|
|
8414
8871
|
));
|
|
8415
8872
|
});
|
|
8416
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
8873
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React118.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
8417
8874
|
|
|
8418
8875
|
// src/controls/email-form-action-control/email-field.tsx
|
|
8419
|
-
import * as
|
|
8876
|
+
import * as React119 from "react";
|
|
8420
8877
|
import { Grid as Grid33 } from "@elementor/ui";
|
|
8421
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
8878
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(TextControl, { placeholder }))));
|
|
8422
8879
|
|
|
8423
8880
|
// src/controls/email-form-action-control/fields.tsx
|
|
8424
8881
|
var SendToField = ({ placeholder }) => {
|
|
8425
8882
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8426
|
-
return /* @__PURE__ */
|
|
8883
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(
|
|
8427
8884
|
EmailChipsField,
|
|
8428
8885
|
{
|
|
8429
|
-
fieldLabel:
|
|
8886
|
+
fieldLabel: __59("Send to", "elementor"),
|
|
8430
8887
|
placeholder,
|
|
8431
8888
|
suggestions
|
|
8432
8889
|
}
|
|
8433
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
8890
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React120.createElement(InfoAlert2, null, __59("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
8434
8891
|
};
|
|
8435
|
-
var SubjectField = () => /* @__PURE__ */
|
|
8892
|
+
var SubjectField = () => /* @__PURE__ */ React120.createElement(
|
|
8436
8893
|
EmailField,
|
|
8437
8894
|
{
|
|
8438
8895
|
bind: "subject",
|
|
8439
|
-
label:
|
|
8440
|
-
placeholder:
|
|
8896
|
+
label: __59("Email subject", "elementor"),
|
|
8897
|
+
placeholder: __59("New form submission", "elementor")
|
|
8441
8898
|
}
|
|
8442
8899
|
);
|
|
8443
8900
|
var MessageField = () => {
|
|
8444
8901
|
const suggestions = useFormFieldSuggestions();
|
|
8445
|
-
return /* @__PURE__ */
|
|
8902
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Message", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __59(
|
|
8446
8903
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
8447
8904
|
"elementor"
|
|
8448
|
-
) :
|
|
8905
|
+
) : __59("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
8449
8906
|
};
|
|
8450
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
8907
|
+
var FromEmailField = () => /* @__PURE__ */ React120.createElement(
|
|
8451
8908
|
EmailField,
|
|
8452
8909
|
{
|
|
8453
8910
|
bind: "from",
|
|
8454
|
-
label:
|
|
8455
|
-
placeholder:
|
|
8911
|
+
label: __59("From email", "elementor"),
|
|
8912
|
+
placeholder: __59("What email should appear as the sender?", "elementor")
|
|
8456
8913
|
}
|
|
8457
8914
|
);
|
|
8458
|
-
var FromNameField = () => /* @__PURE__ */
|
|
8915
|
+
var FromNameField = () => /* @__PURE__ */ React120.createElement(
|
|
8459
8916
|
EmailField,
|
|
8460
8917
|
{
|
|
8461
8918
|
bind: "from-name",
|
|
8462
|
-
label:
|
|
8463
|
-
placeholder:
|
|
8919
|
+
label: __59("From name", "elementor"),
|
|
8920
|
+
placeholder: __59("What name should appear as the sender?", "elementor")
|
|
8464
8921
|
}
|
|
8465
8922
|
);
|
|
8466
8923
|
var ReplyToField = () => {
|
|
8467
8924
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8468
|
-
return /* @__PURE__ */
|
|
8925
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Reply-to", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
|
|
8469
8926
|
MentionTextAreaControl,
|
|
8470
8927
|
{
|
|
8471
8928
|
suggestions: emailSuggestions,
|
|
8472
8929
|
rows: 1,
|
|
8473
8930
|
triggerPosition: "start",
|
|
8474
|
-
placeholder:
|
|
8931
|
+
placeholder: __59("You can type @ to insert an email field", "elementor")
|
|
8475
8932
|
}
|
|
8476
8933
|
))));
|
|
8477
8934
|
};
|
|
8478
8935
|
var CcField = () => {
|
|
8479
8936
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8480
|
-
return /* @__PURE__ */
|
|
8937
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Cc", "elementor"), suggestions }));
|
|
8481
8938
|
};
|
|
8482
8939
|
var BccField = () => {
|
|
8483
8940
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8484
|
-
return /* @__PURE__ */
|
|
8941
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Bcc", "elementor"), suggestions }));
|
|
8485
8942
|
};
|
|
8486
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
8943
|
+
var MetaDataField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Metadata", "elementor")), /* @__PURE__ */ React120.createElement(
|
|
8487
8944
|
ChipsControl,
|
|
8488
8945
|
{
|
|
8489
8946
|
options: [
|
|
8490
|
-
{ label:
|
|
8491
|
-
{ label:
|
|
8492
|
-
{ label:
|
|
8493
|
-
{ label:
|
|
8494
|
-
{ label:
|
|
8947
|
+
{ label: __59("Date", "elementor"), value: "date" },
|
|
8948
|
+
{ label: __59("Time", "elementor"), value: "time" },
|
|
8949
|
+
{ label: __59("Page URL", "elementor"), value: "page-url" },
|
|
8950
|
+
{ label: __59("User agent", "elementor"), value: "user-agent" },
|
|
8951
|
+
{ label: __59("Credit", "elementor"), value: "credit" }
|
|
8495
8952
|
]
|
|
8496
8953
|
}
|
|
8497
8954
|
)));
|
|
8498
|
-
var SendAsField = () => /* @__PURE__ */
|
|
8955
|
+
var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Send as", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
|
|
8499
8956
|
SelectControl,
|
|
8500
8957
|
{
|
|
8501
8958
|
options: [
|
|
8502
|
-
{ label:
|
|
8503
|
-
{ label:
|
|
8959
|
+
{ label: __59("HTML", "elementor"), value: "html" },
|
|
8960
|
+
{ label: __59("Plain Text", "elementor"), value: "plain" }
|
|
8504
8961
|
]
|
|
8505
8962
|
}
|
|
8506
8963
|
))));
|
|
@@ -8509,27 +8966,27 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
|
|
|
8509
8966
|
var EmailFormActionControl = createControl(
|
|
8510
8967
|
({ toPlaceholder, label }) => {
|
|
8511
8968
|
const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
|
|
8512
|
-
return /* @__PURE__ */
|
|
8969
|
+
return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + __60("settings", "elementor") : __60("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)));
|
|
8513
8970
|
}
|
|
8514
8971
|
);
|
|
8515
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
8972
|
+
var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(Box28, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(Stack21, { 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(Divider5, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
|
|
8516
8973
|
|
|
8517
8974
|
// src/controls/attachment-type-control.tsx
|
|
8518
|
-
import * as
|
|
8975
|
+
import * as React122 from "react";
|
|
8519
8976
|
import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
|
|
8520
8977
|
import { Grid as Grid35 } from "@elementor/ui";
|
|
8521
|
-
import { __ as
|
|
8978
|
+
import { __ as __61 } from "@wordpress/i18n";
|
|
8522
8979
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
8523
|
-
return /* @__PURE__ */
|
|
8980
|
+
return /* @__PURE__ */ React122.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(SelectControl, { options })), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(InfoAlert3, null, __61(
|
|
8524
8981
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
8525
8982
|
"elementor"
|
|
8526
8983
|
))));
|
|
8527
8984
|
});
|
|
8528
8985
|
|
|
8529
8986
|
// src/controls/grid-span-control.tsx
|
|
8530
|
-
import * as
|
|
8987
|
+
import * as React123 from "react";
|
|
8531
8988
|
import { spanPropTypeUtil } from "@elementor/editor-props";
|
|
8532
|
-
import { TextField as
|
|
8989
|
+
import { TextField as TextField13 } from "@elementor/ui";
|
|
8533
8990
|
var GridSpanControl = createControl(
|
|
8534
8991
|
({
|
|
8535
8992
|
placeholder: propPlaceholder,
|
|
@@ -8546,8 +9003,8 @@ var GridSpanControl = createControl(
|
|
|
8546
9003
|
setValue(next === "" ? null : next);
|
|
8547
9004
|
};
|
|
8548
9005
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
8549
|
-
return /* @__PURE__ */
|
|
8550
|
-
|
|
9006
|
+
return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
|
|
9007
|
+
TextField13,
|
|
8551
9008
|
{
|
|
8552
9009
|
size: "tiny",
|
|
8553
9010
|
fullWidth: true,
|
|
@@ -8567,23 +9024,23 @@ var GridSpanControl = createControl(
|
|
|
8567
9024
|
);
|
|
8568
9025
|
|
|
8569
9026
|
// src/components/promotions/display-conditions-control.tsx
|
|
8570
|
-
import * as
|
|
8571
|
-
import { useRef as
|
|
9027
|
+
import * as React125 from "react";
|
|
9028
|
+
import { useRef as useRef31 } from "react";
|
|
8572
9029
|
import { SitemapIcon } from "@elementor/icons";
|
|
8573
|
-
import { IconButton as
|
|
8574
|
-
import { __ as
|
|
9030
|
+
import { IconButton as IconButton10, Stack as Stack22, Tooltip as Tooltip11 } from "@elementor/ui";
|
|
9031
|
+
import { __ as __62 } from "@wordpress/i18n";
|
|
8575
9032
|
|
|
8576
9033
|
// src/components/promotions/promotion-trigger.tsx
|
|
8577
|
-
import * as
|
|
8578
|
-
import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as
|
|
9034
|
+
import * as React124 from "react";
|
|
9035
|
+
import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState22 } from "react";
|
|
8579
9036
|
import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
|
|
8580
|
-
import { Box as
|
|
9037
|
+
import { Box as Box29 } from "@elementor/ui";
|
|
8581
9038
|
function getV4Promotion(key) {
|
|
8582
9039
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
8583
9040
|
}
|
|
8584
9041
|
var PromotionTrigger = forwardRef12(
|
|
8585
9042
|
({ promotionKey, children, trackingData }, ref) => {
|
|
8586
|
-
const [isOpen, setIsOpen] =
|
|
9043
|
+
const [isOpen, setIsOpen] = useState22(false);
|
|
8587
9044
|
const promotion = getV4Promotion(promotionKey);
|
|
8588
9045
|
const toggle = useCallback5(() => {
|
|
8589
9046
|
setIsOpen((prev) => {
|
|
@@ -8594,7 +9051,7 @@ var PromotionTrigger = forwardRef12(
|
|
|
8594
9051
|
});
|
|
8595
9052
|
}, [trackingData]);
|
|
8596
9053
|
useImperativeHandle(ref, () => ({ toggle }), [toggle]);
|
|
8597
|
-
return /* @__PURE__ */
|
|
9054
|
+
return /* @__PURE__ */ React124.createElement(React124.Fragment, null, promotion && /* @__PURE__ */ React124.createElement(
|
|
8598
9055
|
PromotionInfotip,
|
|
8599
9056
|
{
|
|
8600
9057
|
title: promotion.title,
|
|
@@ -8608,8 +9065,8 @@ var PromotionTrigger = forwardRef12(
|
|
|
8608
9065
|
},
|
|
8609
9066
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
8610
9067
|
},
|
|
8611
|
-
/* @__PURE__ */
|
|
8612
|
-
|
|
9068
|
+
/* @__PURE__ */ React124.createElement(
|
|
9069
|
+
Box29,
|
|
8613
9070
|
{
|
|
8614
9071
|
onClick: (e) => {
|
|
8615
9072
|
e.stopPropagation();
|
|
@@ -8617,19 +9074,19 @@ var PromotionTrigger = forwardRef12(
|
|
|
8617
9074
|
},
|
|
8618
9075
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
8619
9076
|
},
|
|
8620
|
-
children ?? /* @__PURE__ */
|
|
9077
|
+
children ?? /* @__PURE__ */ React124.createElement(PromotionChip2, null)
|
|
8621
9078
|
)
|
|
8622
9079
|
));
|
|
8623
9080
|
}
|
|
8624
9081
|
);
|
|
8625
9082
|
|
|
8626
9083
|
// src/components/promotions/display-conditions-control.tsx
|
|
8627
|
-
var ARIA_LABEL =
|
|
9084
|
+
var ARIA_LABEL = __62("Display Conditions", "elementor");
|
|
8628
9085
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
8629
9086
|
var DisplayConditionsControl = createControl(() => {
|
|
8630
|
-
const triggerRef =
|
|
8631
|
-
return /* @__PURE__ */
|
|
8632
|
-
|
|
9087
|
+
const triggerRef = useRef31(null);
|
|
9088
|
+
return /* @__PURE__ */ React125.createElement(
|
|
9089
|
+
Stack22,
|
|
8633
9090
|
{
|
|
8634
9091
|
direction: "row",
|
|
8635
9092
|
spacing: 2,
|
|
@@ -8638,9 +9095,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8638
9095
|
alignItems: "center"
|
|
8639
9096
|
}
|
|
8640
9097
|
},
|
|
8641
|
-
/* @__PURE__ */
|
|
8642
|
-
/* @__PURE__ */
|
|
8643
|
-
|
|
9098
|
+
/* @__PURE__ */ React125.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
9099
|
+
/* @__PURE__ */ React125.createElement(Tooltip11, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React125.createElement(
|
|
9100
|
+
IconButton10,
|
|
8644
9101
|
{
|
|
8645
9102
|
size: "tiny",
|
|
8646
9103
|
"aria-label": ARIA_LABEL,
|
|
@@ -8652,23 +9109,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8652
9109
|
borderRadius: 1
|
|
8653
9110
|
}
|
|
8654
9111
|
},
|
|
8655
|
-
/* @__PURE__ */
|
|
9112
|
+
/* @__PURE__ */ React125.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
8656
9113
|
))
|
|
8657
9114
|
);
|
|
8658
9115
|
});
|
|
8659
9116
|
|
|
8660
9117
|
// src/components/promotions/attributes-control.tsx
|
|
8661
|
-
import * as
|
|
8662
|
-
import { useRef as
|
|
9118
|
+
import * as React126 from "react";
|
|
9119
|
+
import { useRef as useRef32 } from "react";
|
|
8663
9120
|
import { PlusIcon as PlusIcon4 } from "@elementor/icons";
|
|
8664
|
-
import { Stack as
|
|
8665
|
-
import { __ as
|
|
8666
|
-
var ARIA_LABEL2 =
|
|
9121
|
+
import { Stack as Stack23, Tooltip as Tooltip12 } from "@elementor/ui";
|
|
9122
|
+
import { __ as __63 } from "@wordpress/i18n";
|
|
9123
|
+
var ARIA_LABEL2 = __63("Attributes", "elementor");
|
|
8667
9124
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
8668
9125
|
var AttributesControl = createControl(() => {
|
|
8669
|
-
const triggerRef =
|
|
8670
|
-
return /* @__PURE__ */
|
|
8671
|
-
|
|
9126
|
+
const triggerRef = useRef32(null);
|
|
9127
|
+
return /* @__PURE__ */ React126.createElement(
|
|
9128
|
+
Stack23,
|
|
8672
9129
|
{
|
|
8673
9130
|
direction: "row",
|
|
8674
9131
|
spacing: 2,
|
|
@@ -8677,8 +9134,8 @@ var AttributesControl = createControl(() => {
|
|
|
8677
9134
|
alignItems: "center"
|
|
8678
9135
|
}
|
|
8679
9136
|
},
|
|
8680
|
-
/* @__PURE__ */
|
|
8681
|
-
/* @__PURE__ */
|
|
9137
|
+
/* @__PURE__ */ React126.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
9138
|
+
/* @__PURE__ */ React126.createElement(Tooltip12, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React126.createElement(
|
|
8682
9139
|
PlusIcon4,
|
|
8683
9140
|
{
|
|
8684
9141
|
"aria-label": ARIA_LABEL2,
|
|
@@ -8692,29 +9149,29 @@ var AttributesControl = createControl(() => {
|
|
|
8692
9149
|
});
|
|
8693
9150
|
|
|
8694
9151
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
8695
|
-
import * as
|
|
9152
|
+
import * as React127 from "react";
|
|
8696
9153
|
import { BrushBigIcon } from "@elementor/icons";
|
|
8697
|
-
import { IconButton as
|
|
8698
|
-
var CustomIconButton = styled11(
|
|
9154
|
+
import { IconButton as IconButton11, styled as styled11, Tooltip as Tooltip13 } from "@elementor/ui";
|
|
9155
|
+
var CustomIconButton = styled11(IconButton11)(({ theme }) => ({
|
|
8699
9156
|
width: theme.spacing(2.5),
|
|
8700
9157
|
height: theme.spacing(2.5)
|
|
8701
9158
|
}));
|
|
8702
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
9159
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React127.createElement(Tooltip13, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React127.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React127.createElement(BrushBigIcon, { fontSize: size })));
|
|
8703
9160
|
|
|
8704
9161
|
// src/components/repeater/repeater.tsx
|
|
8705
|
-
import * as
|
|
8706
|
-
import { useEffect as
|
|
9162
|
+
import * as React128 from "react";
|
|
9163
|
+
import { useEffect as useEffect21, useState as useState23 } from "react";
|
|
8707
9164
|
import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
|
|
8708
9165
|
import {
|
|
8709
|
-
bindPopover as
|
|
9166
|
+
bindPopover as bindPopover9,
|
|
8710
9167
|
bindTrigger as bindTrigger7,
|
|
8711
|
-
Box as
|
|
8712
|
-
IconButton as
|
|
9168
|
+
Box as Box30,
|
|
9169
|
+
IconButton as IconButton12,
|
|
8713
9170
|
Infotip as Infotip4,
|
|
8714
|
-
Tooltip as
|
|
8715
|
-
usePopupState as
|
|
9171
|
+
Tooltip as Tooltip14,
|
|
9172
|
+
usePopupState as usePopupState11
|
|
8716
9173
|
} from "@elementor/ui";
|
|
8717
|
-
import { __ as
|
|
9174
|
+
import { __ as __64 } from "@wordpress/i18n";
|
|
8718
9175
|
var SIZE12 = "tiny";
|
|
8719
9176
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
8720
9177
|
var Repeater3 = ({
|
|
@@ -8733,7 +9190,7 @@ var Repeater3 = ({
|
|
|
8733
9190
|
isSortable = true,
|
|
8734
9191
|
adornment = ControlAdornments
|
|
8735
9192
|
}) => {
|
|
8736
|
-
const [openItem, setOpenItem] =
|
|
9193
|
+
const [openItem, setOpenItem] = useState23(initialOpenItem);
|
|
8737
9194
|
const uniqueKeys = items2.map(
|
|
8738
9195
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
8739
9196
|
);
|
|
@@ -8796,8 +9253,8 @@ var Repeater3 = ({
|
|
|
8796
9253
|
};
|
|
8797
9254
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
8798
9255
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
8799
|
-
const addButton = /* @__PURE__ */
|
|
8800
|
-
|
|
9256
|
+
const addButton = /* @__PURE__ */ React128.createElement(
|
|
9257
|
+
IconButton12,
|
|
8801
9258
|
{
|
|
8802
9259
|
size: SIZE12,
|
|
8803
9260
|
sx: {
|
|
@@ -8805,11 +9262,11 @@ var Repeater3 = ({
|
|
|
8805
9262
|
},
|
|
8806
9263
|
disabled: isButtonDisabled,
|
|
8807
9264
|
onClick: addRepeaterItem,
|
|
8808
|
-
"aria-label":
|
|
9265
|
+
"aria-label": __64("Add item", "elementor")
|
|
8809
9266
|
},
|
|
8810
|
-
/* @__PURE__ */
|
|
9267
|
+
/* @__PURE__ */ React128.createElement(PlusIcon5, { fontSize: SIZE12 })
|
|
8811
9268
|
);
|
|
8812
|
-
return /* @__PURE__ */
|
|
9269
|
+
return /* @__PURE__ */ React128.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React128.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React128.createElement(
|
|
8813
9270
|
Infotip4,
|
|
8814
9271
|
{
|
|
8815
9272
|
placement: "right",
|
|
@@ -8817,20 +9274,20 @@ var Repeater3 = ({
|
|
|
8817
9274
|
color: "secondary",
|
|
8818
9275
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
8819
9276
|
},
|
|
8820
|
-
/* @__PURE__ */
|
|
8821
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
9277
|
+
/* @__PURE__ */ React128.createElement(Box30, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
9278
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React128.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
8822
9279
|
const index = uniqueKeys.indexOf(key);
|
|
8823
9280
|
const value = items2[index];
|
|
8824
9281
|
if (!value) {
|
|
8825
9282
|
return null;
|
|
8826
9283
|
}
|
|
8827
|
-
return /* @__PURE__ */
|
|
9284
|
+
return /* @__PURE__ */ React128.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React128.createElement(
|
|
8828
9285
|
RepeaterItem,
|
|
8829
9286
|
{
|
|
8830
9287
|
disabled,
|
|
8831
9288
|
propDisabled: value?.disabled,
|
|
8832
|
-
label: /* @__PURE__ */
|
|
8833
|
-
startIcon: /* @__PURE__ */
|
|
9289
|
+
label: /* @__PURE__ */ React128.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Label, { value, index })),
|
|
9290
|
+
startIcon: /* @__PURE__ */ React128.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Icon, { value })),
|
|
8834
9291
|
removeItem: () => removeRepeaterItem(index),
|
|
8835
9292
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
8836
9293
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -8844,7 +9301,7 @@ var Repeater3 = ({
|
|
|
8844
9301
|
actions: itemSettings.actions,
|
|
8845
9302
|
value
|
|
8846
9303
|
},
|
|
8847
|
-
(props) => /* @__PURE__ */
|
|
9304
|
+
(props) => /* @__PURE__ */ React128.createElement(
|
|
8848
9305
|
itemSettings.Content,
|
|
8849
9306
|
{
|
|
8850
9307
|
...props,
|
|
@@ -8886,16 +9343,16 @@ var RepeaterItem = ({
|
|
|
8886
9343
|
);
|
|
8887
9344
|
const triggerProps = bindTrigger7(popoverState);
|
|
8888
9345
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
8889
|
-
const duplicateLabel =
|
|
8890
|
-
const toggleLabel = propDisabled ?
|
|
8891
|
-
const removeLabel =
|
|
8892
|
-
return /* @__PURE__ */
|
|
9346
|
+
const duplicateLabel = __64("Duplicate", "elementor");
|
|
9347
|
+
const toggleLabel = propDisabled ? __64("Show", "elementor") : __64("Hide", "elementor");
|
|
9348
|
+
const removeLabel = __64("Remove", "elementor");
|
|
9349
|
+
return /* @__PURE__ */ React128.createElement(Box30, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
|
|
8893
9350
|
RepeaterTag,
|
|
8894
9351
|
{
|
|
8895
9352
|
disabled,
|
|
8896
9353
|
label,
|
|
8897
9354
|
ref: setRef,
|
|
8898
|
-
"aria-label":
|
|
9355
|
+
"aria-label": __64("Open item", "elementor"),
|
|
8899
9356
|
...triggerProps,
|
|
8900
9357
|
onClick: (e) => {
|
|
8901
9358
|
triggerProps.onClick(e);
|
|
@@ -8904,15 +9361,15 @@ var RepeaterItem = ({
|
|
|
8904
9361
|
}
|
|
8905
9362
|
},
|
|
8906
9363
|
startIcon,
|
|
8907
|
-
actions: /* @__PURE__ */
|
|
9364
|
+
actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(Tooltip14, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(Tooltip14, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(Tooltip14, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(XIcon4, { fontSize: SIZE12 }))))
|
|
8908
9365
|
}
|
|
8909
|
-
), /* @__PURE__ */
|
|
9366
|
+
), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(Box30, null, children({ anchorEl: ref }))));
|
|
8910
9367
|
};
|
|
8911
9368
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
8912
|
-
const [ref, setRef] =
|
|
8913
|
-
const popoverState =
|
|
8914
|
-
const popoverProps =
|
|
8915
|
-
|
|
9369
|
+
const [ref, setRef] = useState23(null);
|
|
9370
|
+
const popoverState = usePopupState11({ variant: "popover" });
|
|
9371
|
+
const popoverProps = bindPopover9(popoverState);
|
|
9372
|
+
useEffect21(() => {
|
|
8916
9373
|
if (openOnMount && ref) {
|
|
8917
9374
|
popoverState.open(ref);
|
|
8918
9375
|
onOpen?.();
|
|
@@ -8930,293 +9387,6 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
8930
9387
|
};
|
|
8931
9388
|
};
|
|
8932
9389
|
|
|
8933
|
-
// src/components/inline-editor-toolbar.tsx
|
|
8934
|
-
import * as React128 from "react";
|
|
8935
|
-
import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
|
|
8936
|
-
import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
|
|
8937
|
-
import {
|
|
8938
|
-
BoldIcon,
|
|
8939
|
-
ItalicIcon,
|
|
8940
|
-
LinkIcon as LinkIcon3,
|
|
8941
|
-
MinusIcon as MinusIcon2,
|
|
8942
|
-
StrikethroughIcon,
|
|
8943
|
-
SubscriptIcon,
|
|
8944
|
-
SuperscriptIcon,
|
|
8945
|
-
UnderlineIcon
|
|
8946
|
-
} from "@elementor/icons";
|
|
8947
|
-
import {
|
|
8948
|
-
Box as Box29,
|
|
8949
|
-
IconButton as IconButton12,
|
|
8950
|
-
ToggleButton as ToggleButton3,
|
|
8951
|
-
ToggleButtonGroup as ToggleButtonGroup2,
|
|
8952
|
-
toggleButtonGroupClasses,
|
|
8953
|
-
Tooltip as Tooltip14,
|
|
8954
|
-
usePopupState as usePopupState11
|
|
8955
|
-
} from "@elementor/ui";
|
|
8956
|
-
import { useEditorState } from "@tiptap/react";
|
|
8957
|
-
import { __ as __64 } from "@wordpress/i18n";
|
|
8958
|
-
|
|
8959
|
-
// src/components/url-popover.tsx
|
|
8960
|
-
import * as React127 from "react";
|
|
8961
|
-
import { useEffect as useEffect19, useRef as useRef31 } from "react";
|
|
8962
|
-
import { ExternalLinkIcon } from "@elementor/icons";
|
|
8963
|
-
import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack23, TextField as TextField13, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
|
|
8964
|
-
import { __ as __63 } from "@wordpress/i18n";
|
|
8965
|
-
var UrlPopover = ({
|
|
8966
|
-
popupState,
|
|
8967
|
-
restoreValue,
|
|
8968
|
-
anchorRef,
|
|
8969
|
-
value,
|
|
8970
|
-
onChange,
|
|
8971
|
-
openInNewTab,
|
|
8972
|
-
onToggleNewTab
|
|
8973
|
-
}) => {
|
|
8974
|
-
const inputRef = useRef31(null);
|
|
8975
|
-
useEffect19(() => {
|
|
8976
|
-
if (popupState.isOpen) {
|
|
8977
|
-
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8978
|
-
}
|
|
8979
|
-
}, [popupState.isOpen]);
|
|
8980
|
-
const handleClose = () => {
|
|
8981
|
-
restoreValue();
|
|
8982
|
-
popupState.close();
|
|
8983
|
-
};
|
|
8984
|
-
return /* @__PURE__ */ React127.createElement(
|
|
8985
|
-
Popover8,
|
|
8986
|
-
{
|
|
8987
|
-
slotProps: {
|
|
8988
|
-
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8989
|
-
},
|
|
8990
|
-
...bindPopover9(popupState),
|
|
8991
|
-
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8992
|
-
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8993
|
-
onClose: handleClose
|
|
8994
|
-
},
|
|
8995
|
-
/* @__PURE__ */ React127.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
|
|
8996
|
-
TextField13,
|
|
8997
|
-
{
|
|
8998
|
-
value,
|
|
8999
|
-
onChange,
|
|
9000
|
-
size: "tiny",
|
|
9001
|
-
fullWidth: true,
|
|
9002
|
-
placeholder: __63("Type a URL", "elementor"),
|
|
9003
|
-
inputProps: { ref: inputRef },
|
|
9004
|
-
color: "secondary",
|
|
9005
|
-
InputProps: { sx: { borderRadius: "8px" } },
|
|
9006
|
-
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
9007
|
-
}
|
|
9008
|
-
), /* @__PURE__ */ React127.createElement(Tooltip13, { title: __63("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
|
|
9009
|
-
ToggleButton2,
|
|
9010
|
-
{
|
|
9011
|
-
size: "tiny",
|
|
9012
|
-
value: "newTab",
|
|
9013
|
-
selected: openInNewTab,
|
|
9014
|
-
onClick: onToggleNewTab,
|
|
9015
|
-
"aria-label": __63("Open in a new tab", "elementor"),
|
|
9016
|
-
sx: { borderRadius: "8px" }
|
|
9017
|
-
},
|
|
9018
|
-
/* @__PURE__ */ React127.createElement(ExternalLinkIcon, { fontSize: "tiny" })
|
|
9019
|
-
)))
|
|
9020
|
-
);
|
|
9021
|
-
};
|
|
9022
|
-
|
|
9023
|
-
// src/components/inline-editor-toolbar.tsx
|
|
9024
|
-
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
9025
|
-
const [urlValue, setUrlValue] = useState22("");
|
|
9026
|
-
const [openInNewTab, setOpenInNewTab] = useState22(false);
|
|
9027
|
-
const toolbarRef = useRef32(null);
|
|
9028
|
-
const linkPopupState = usePopupState11({ variant: "popover" });
|
|
9029
|
-
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
9030
|
-
const editorState = useEditorState({
|
|
9031
|
-
editor,
|
|
9032
|
-
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
9033
|
-
});
|
|
9034
|
-
const formatButtonsList = useMemo18(() => {
|
|
9035
|
-
const buttons = Object.values(formatButtons);
|
|
9036
|
-
if (isElementClickable) {
|
|
9037
|
-
return buttons.filter((button) => button.action !== "link");
|
|
9038
|
-
}
|
|
9039
|
-
return buttons;
|
|
9040
|
-
}, [isElementClickable]);
|
|
9041
|
-
const handleLinkClick = () => {
|
|
9042
|
-
const linkAttrs = editor.getAttributes("link");
|
|
9043
|
-
setUrlValue(linkAttrs.href || "");
|
|
9044
|
-
setOpenInNewTab(linkAttrs.target === "_blank");
|
|
9045
|
-
linkPopupState.open(toolbarRef.current);
|
|
9046
|
-
};
|
|
9047
|
-
const handleUrlChange = (event) => {
|
|
9048
|
-
setUrlValue(event.target.value);
|
|
9049
|
-
};
|
|
9050
|
-
const handleToggleNewTab = () => {
|
|
9051
|
-
setOpenInNewTab(!openInNewTab);
|
|
9052
|
-
};
|
|
9053
|
-
const handleUrlSubmit = () => {
|
|
9054
|
-
if (urlValue) {
|
|
9055
|
-
editor.chain().focus().setLink({
|
|
9056
|
-
href: urlValue,
|
|
9057
|
-
target: openInNewTab ? "_blank" : "_self"
|
|
9058
|
-
}).run();
|
|
9059
|
-
} else {
|
|
9060
|
-
editor.chain().focus().unsetLink().run();
|
|
9061
|
-
}
|
|
9062
|
-
if (elementId) {
|
|
9063
|
-
window.dispatchEvent(
|
|
9064
|
-
new CustomEvent("elementor:inline-link-changed", {
|
|
9065
|
-
detail: { elementId }
|
|
9066
|
-
})
|
|
9067
|
-
);
|
|
9068
|
-
}
|
|
9069
|
-
linkPopupState.close();
|
|
9070
|
-
};
|
|
9071
|
-
useEffect20(() => {
|
|
9072
|
-
editor?.commands?.focus();
|
|
9073
|
-
}, [editor]);
|
|
9074
|
-
return /* @__PURE__ */ React128.createElement(
|
|
9075
|
-
Box29,
|
|
9076
|
-
{
|
|
9077
|
-
ref: toolbarRef,
|
|
9078
|
-
sx: {
|
|
9079
|
-
display: "inline-flex",
|
|
9080
|
-
gap: 0.5,
|
|
9081
|
-
padding: 0.5,
|
|
9082
|
-
borderRadius: "8px",
|
|
9083
|
-
backgroundColor: "background.paper",
|
|
9084
|
-
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
|
|
9085
|
-
alignItems: "center",
|
|
9086
|
-
visibility: linkPopupState.isOpen ? "hidden" : "visible",
|
|
9087
|
-
pointerEvents: linkPopupState.isOpen ? "none" : "all",
|
|
9088
|
-
...sx
|
|
9089
|
-
}
|
|
9090
|
-
},
|
|
9091
|
-
/* @__PURE__ */ React128.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(IconButton12, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
9092
|
-
/* @__PURE__ */ React128.createElement(
|
|
9093
|
-
ToggleButtonGroup2,
|
|
9094
|
-
{
|
|
9095
|
-
value: editorState,
|
|
9096
|
-
size: "tiny",
|
|
9097
|
-
sx: {
|
|
9098
|
-
display: "flex",
|
|
9099
|
-
gap: 0.5,
|
|
9100
|
-
border: "none",
|
|
9101
|
-
[`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]: {
|
|
9102
|
-
borderRadius: "8px",
|
|
9103
|
-
border: "none",
|
|
9104
|
-
marginLeft: 0,
|
|
9105
|
-
"&.Mui-selected": {
|
|
9106
|
-
marginLeft: 0
|
|
9107
|
-
},
|
|
9108
|
-
"& + &.Mui-selected": {
|
|
9109
|
-
marginLeft: 0
|
|
9110
|
-
}
|
|
9111
|
-
}
|
|
9112
|
-
}
|
|
9113
|
-
},
|
|
9114
|
-
formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
|
|
9115
|
-
ToggleButton3,
|
|
9116
|
-
{
|
|
9117
|
-
value: button.action,
|
|
9118
|
-
"aria-label": button.label,
|
|
9119
|
-
size: "tiny",
|
|
9120
|
-
onClick: () => {
|
|
9121
|
-
if (button.action === "link") {
|
|
9122
|
-
handleLinkClick();
|
|
9123
|
-
} else {
|
|
9124
|
-
button.method?.(editor);
|
|
9125
|
-
}
|
|
9126
|
-
editor?.commands?.focus();
|
|
9127
|
-
}
|
|
9128
|
-
},
|
|
9129
|
-
button.icon
|
|
9130
|
-
)))
|
|
9131
|
-
),
|
|
9132
|
-
/* @__PURE__ */ React128.createElement(
|
|
9133
|
-
UrlPopover,
|
|
9134
|
-
{
|
|
9135
|
-
popupState: linkPopupState,
|
|
9136
|
-
anchorRef: toolbarRef,
|
|
9137
|
-
restoreValue: handleUrlSubmit,
|
|
9138
|
-
value: urlValue,
|
|
9139
|
-
onChange: handleUrlChange,
|
|
9140
|
-
openInNewTab,
|
|
9141
|
-
onToggleNewTab: handleToggleNewTab
|
|
9142
|
-
}
|
|
9143
|
-
)
|
|
9144
|
-
);
|
|
9145
|
-
};
|
|
9146
|
-
var checkIfElementIsClickable = (elementId) => {
|
|
9147
|
-
const container = getContainer3(elementId);
|
|
9148
|
-
const type = container?.model.get("widgetType");
|
|
9149
|
-
const isButton = type === "e-button";
|
|
9150
|
-
const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
|
|
9151
|
-
return isButton || hasLink;
|
|
9152
|
-
};
|
|
9153
|
-
var toolbarButtons = {
|
|
9154
|
-
clear: {
|
|
9155
|
-
label: __64("Clear", "elementor"),
|
|
9156
|
-
icon: /* @__PURE__ */ React128.createElement(MinusIcon2, { fontSize: "tiny" }),
|
|
9157
|
-
action: "clear",
|
|
9158
|
-
method: (editor) => {
|
|
9159
|
-
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
9160
|
-
}
|
|
9161
|
-
},
|
|
9162
|
-
bold: {
|
|
9163
|
-
label: __64("Bold", "elementor"),
|
|
9164
|
-
icon: /* @__PURE__ */ React128.createElement(BoldIcon, { fontSize: "tiny" }),
|
|
9165
|
-
action: "bold",
|
|
9166
|
-
method: (editor) => {
|
|
9167
|
-
editor.chain().focus().toggleBold().run();
|
|
9168
|
-
}
|
|
9169
|
-
},
|
|
9170
|
-
italic: {
|
|
9171
|
-
label: __64("Italic", "elementor"),
|
|
9172
|
-
icon: /* @__PURE__ */ React128.createElement(ItalicIcon, { fontSize: "tiny" }),
|
|
9173
|
-
action: "italic",
|
|
9174
|
-
method: (editor) => {
|
|
9175
|
-
editor.chain().focus().toggleItalic().run();
|
|
9176
|
-
}
|
|
9177
|
-
},
|
|
9178
|
-
underline: {
|
|
9179
|
-
label: __64("Underline", "elementor"),
|
|
9180
|
-
icon: /* @__PURE__ */ React128.createElement(UnderlineIcon, { fontSize: "tiny" }),
|
|
9181
|
-
action: "underline",
|
|
9182
|
-
method: (editor) => {
|
|
9183
|
-
editor.chain().focus().toggleUnderline().run();
|
|
9184
|
-
}
|
|
9185
|
-
},
|
|
9186
|
-
strike: {
|
|
9187
|
-
label: __64("Strikethrough", "elementor"),
|
|
9188
|
-
icon: /* @__PURE__ */ React128.createElement(StrikethroughIcon, { fontSize: "tiny" }),
|
|
9189
|
-
action: "strike",
|
|
9190
|
-
method: (editor) => {
|
|
9191
|
-
editor.chain().focus().toggleStrike().run();
|
|
9192
|
-
}
|
|
9193
|
-
},
|
|
9194
|
-
superscript: {
|
|
9195
|
-
label: __64("Superscript", "elementor"),
|
|
9196
|
-
icon: /* @__PURE__ */ React128.createElement(SuperscriptIcon, { fontSize: "tiny" }),
|
|
9197
|
-
action: "superscript",
|
|
9198
|
-
method: (editor) => {
|
|
9199
|
-
editor.chain().focus().toggleSuperscript().run();
|
|
9200
|
-
}
|
|
9201
|
-
},
|
|
9202
|
-
subscript: {
|
|
9203
|
-
label: __64("Subscript", "elementor"),
|
|
9204
|
-
icon: /* @__PURE__ */ React128.createElement(SubscriptIcon, { fontSize: "tiny" }),
|
|
9205
|
-
action: "subscript",
|
|
9206
|
-
method: (editor) => {
|
|
9207
|
-
editor.chain().focus().toggleSubscript().run();
|
|
9208
|
-
}
|
|
9209
|
-
},
|
|
9210
|
-
link: {
|
|
9211
|
-
label: __64("Link", "elementor"),
|
|
9212
|
-
icon: /* @__PURE__ */ React128.createElement(LinkIcon3, { fontSize: "tiny" }),
|
|
9213
|
-
action: "link",
|
|
9214
|
-
method: null
|
|
9215
|
-
}
|
|
9216
|
-
};
|
|
9217
|
-
var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
9218
|
-
var possibleFormats = Object.keys(formatButtons);
|
|
9219
|
-
|
|
9220
9390
|
// src/components/size/unstable-size-field.tsx
|
|
9221
9391
|
import * as React131 from "react";
|
|
9222
9392
|
import { InputAdornment as InputAdornment6 } from "@elementor/ui";
|