@elementor/editor-controls 4.1.0-820 → 4.1.0-821

package/dist/index.mjs

@@ -351,7 +351,7 @@ var formatResponse = (response) => {
 
 // src/controls/image-media-control.tsx
 import * as React11 from "react";
-import { imageSrcPropTypeUtil, urlPropTypeUtil } from "@elementor/editor-props";
+import { imageSrcPropTypeUtil, stringPropTypeUtil, urlPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon } from "@elementor/icons";
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack as Stack2 } from "@elementor/ui";
 import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
@@ -392,6 +392,9 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
   const { data: attachment, isFetching } = useWpMediaAttachment(id?.value || null);
   const { data: placeholderAttachment } = useWpMediaAttachment(placeholder?.id?.value || null);
   const src = attachment?.url ?? url?.value ?? placeholderAttachment?.url ?? null;
+  const defaultUrl = imageSrcPropTypeUtil.extract(propType.default ?? null)?.url?.value;
+  const currentUrlForModal = url?.value && url.value !== defaultUrl ? url.value : void 0;
+  const currentAltForModal = value?.alt?.value;
   const { open } = useWpMediaFrame({
     mediaTypes,
     multiple: false,
@@ -406,10 +409,11 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
         url: null
       });
     },
-    onSelectUrl: (selectedUrl) => {
+    onSelectUrl: (selectedUrl, alt) => {
       setValue({
         id: null,
-        url: urlPropTypeUtil.create(selectedUrl)
+        url: urlPropTypeUtil.create(selectedUrl),
+        alt: alt ? stringPropTypeUtil.create(alt) : null
       });
     }
   });
@@ -432,12 +436,21 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       onClick: () => open({ mode: "upload" })
     },
     __("Upload", "elementor")
-  ), /* @__PURE__ */ React11.createElement(Button, { size: "tiny", variant: "text", color: "inherit", onClick: () => open({ mode: "url" }) }, __("Insert from URL", "elementor"))))));
+  ), /* @__PURE__ */ React11.createElement(
+    Button,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "inherit",
+      onClick: () => open({ mode: "url", currentUrl: currentUrlForModal, currentAlt: currentAltForModal })
+    },
+    __("Insert from URL", "elementor")
+  )))));
 });
 
 // src/controls/select-control.tsx
 import * as React12 from "react";
-import { stringPropTypeUtil } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
 import { Select, Typography } from "@elementor/ui";
 var DEFAULT_MENU_PROPS = {
@@ -449,7 +462,7 @@ var DEFAULT_MENU_PROPS = {
 };
 var SelectControl = createControl(
   ({ options, onChange, MenuProps = DEFAULT_MENU_PROPS, ariaLabel }) => {
-    const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil);
+    const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil2);
     const handleChange = (event) => {
       const newValue = event.target.value || null;
       onChange?.(newValue, value);
@@ -505,7 +518,7 @@ var ImageSizeControl = ({ sizes }) => {
 
 // src/controls/text-control.tsx
 import * as React14 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { TextField } from "@elementor/ui";
 var TextControl = createControl(
   ({
@@ -517,7 +530,7 @@ var TextControl = createControl(
     sx,
     ariaLabel
   }) => {
-    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil2);
+    const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil3);
     const handleChange = (event) => setValue(event.target.value);
     const placeholder = propPlaceholder ?? boundPlaceholder ?? void 0;
     return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(
@@ -542,10 +555,10 @@ var TextControl = createControl(
 
 // src/controls/text-area-control.tsx
 import * as React15 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 import { TextField as TextField2 } from "@elementor/ui";
 var TextAreaControl = createControl(({ placeholder: propPlaceholder, ariaLabel }) => {
-  const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil3);
+  const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(stringPropTypeUtil4);
   const handleChange = (event) => {
     setValue(event.target.value);
   };
@@ -572,7 +585,7 @@ var TextAreaControl = createControl(({ placeholder: propPlaceholder, ariaLabel }
 import * as React16 from "react";
 import { useCallback, useState as useState2 } from "react";
 import { Mention } from "primereact/mention";
-import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 import { styled } from "@elementor/ui";
 var MentionWrapper = styled("div")(({ theme }) => ({
   position: "relative",
@@ -652,7 +665,7 @@ function createMentionPattern(value, triggerPosition) {
 }
 var MentionTextAreaControl = createControl(
   ({ placeholder, ariaLabel, suggestions: allSuggestions, rows = 5, triggerPosition = "auto" }) => {
-    const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil4);
+    const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil5);
     const [filteredSuggestions, setFilteredSuggestions] = useState2([]);
     const transformMentionsToShortcodes = useCallback(
       (text) => {
@@ -2492,15 +2505,15 @@ var SelectControlWrapper = createControl(
 
 // src/controls/chips-control.tsx
 import * as React51 from "react";
-import { stringArrayPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
+import { stringArrayPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { Autocomplete, Chip, TextField as TextField5 } from "@elementor/ui";
 var SIZE6 = "tiny";
 var ChipsControl = createControl(({ options }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil);
-  const selectedValues = (value || []).map((item) => stringPropTypeUtil5.extract(item)).filter((val) => val !== null);
+  const selectedValues = (value || []).map((item) => stringPropTypeUtil6.extract(item)).filter((val) => val !== null);
   const selectedOptions = selectedValues.map((val) => options.find((opt) => opt.value === val)).filter((opt) => opt !== void 0);
   const handleChange = (_, newValue) => {
-    const values = newValue.map((option) => stringPropTypeUtil5.create(option.value));
+    const values = newValue.map((option) => stringPropTypeUtil6.create(option.value));
     setValue(values);
   };
   return /* @__PURE__ */ React51.createElement(ControlActions, null, /* @__PURE__ */ React51.createElement(
@@ -2526,7 +2539,7 @@ var ChipsControl = createControl(({ options }) => {
 
 // src/controls/toggle-control.tsx
 import * as React55 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
 import * as React53 from "react";
@@ -2814,7 +2827,7 @@ var ToggleControl = createControl(
     maxItems,
     convertOptions = false
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil6);
+    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil7);
     const processedOptions = convertOptions ? convertToggleOptionsToAtomic(options) : options;
     const exclusiveValues = processedOptions.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
@@ -3888,7 +3901,7 @@ function getCssDimensionProps(label, isSiteRtl) {
 // src/controls/font-family-control/font-family-control.tsx
 import * as React66 from "react";
 import { useMemo as useMemo8 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover5, bindTrigger as bindTrigger4, Popover as Popover5, UnstableTag as UnstableTag2, usePopupState as usePopupState7 } from "@elementor/ui";
 import { __ as __22 } from "@wordpress/i18n";
@@ -4067,7 +4080,7 @@ var FontFamilyControl = createControl(
       setValue: setFontFamily,
       disabled,
       placeholder
-    } = useBoundProp(stringPropTypeUtil7);
+    } = useBoundProp(stringPropTypeUtil8);
     const popoverState = usePopupState7({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
     const mapFontSubs = useMemo8(() => {
@@ -4229,7 +4242,7 @@ import { useMemo as useMemo9, useState as useState11 } from "react";
 import {
   numberPropTypeUtil as numberPropTypeUtil2,
   queryPropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil8,
+  stringPropTypeUtil as stringPropTypeUtil9,
   urlPropTypeUtil as urlPropTypeUtil3
 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
@@ -4391,7 +4404,7 @@ var QueryControl = createControl((props) => {
     }
     const newQueryValue = {
       id: numberPropTypeUtil2.create(newValue),
-      label: stringPropTypeUtil8.create(findMatchingOption(options, newValue)?.label || null)
+      label: stringPropTypeUtil9.create(findMatchingOption(options, newValue)?.label || null)
     };
     setQueryValue(newQueryValue);
     onSetValue?.(queryPropTypeUtil.create(newQueryValue));
@@ -4598,7 +4611,7 @@ var LinkControl = createControl((props) => {
 // src/controls/html-tag-control.tsx
 import * as React74 from "react";
 import { getElementLabel } from "@elementor/editor-elements";
-import { stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { Select as Select2, styled as styled8, Typography as Typography6 } from "@elementor/ui";
 import { __ as __26 } from "@wordpress/i18n";
@@ -4656,7 +4669,7 @@ var HtmlTagControl = createControl((props) => {
     fallbackLabels = {},
     context: { elementId }
   } = props;
-  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil9);
+  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil10);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
@@ -4828,7 +4841,7 @@ var Control4 = ({
 // src/controls/aspect-ratio-control.tsx
 import * as React76 from "react";
 import { useEffect as useEffect14, useState as useState14 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
 import { Grid as Grid12, Select as Select3, Stack as Stack12, TextField as TextField9 } from "@elementor/ui";
@@ -4850,7 +4863,7 @@ var AspectRatioControl = createControl(({ label }) => {
     setValue: setAspectRatioValue,
     disabled,
     placeholder: externalPlaceholder
-  } = useBoundProp(stringPropTypeUtil10);
+  } = useBoundProp(stringPropTypeUtil11);
   const aspectRatioValue = currentPropValue ?? externalPlaceholder;
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
@@ -5241,7 +5254,7 @@ import {
   colorStopPropTypeUtil,
   gradientColorStopPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil3,
-  stringPropTypeUtil as stringPropTypeUtil11
+  stringPropTypeUtil as stringPropTypeUtil12
 } from "@elementor/editor-props";
 import { UnstableGradientBox } from "@elementor/ui";
 var BackgroundGradientColorControl = createControl(() => {
@@ -5249,13 +5262,13 @@ var BackgroundGradientColorControl = createControl(() => {
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil11.create(newValue.positions.join(" "));
+      transformedValue.positions = stringPropTypeUtil12.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: stringPropTypeUtil11.create(newValue.type),
+    type: stringPropTypeUtil12.create(newValue.type),
     angle: numberPropTypeUtil3.create(newValue.angle),
     stops: gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
@@ -5291,7 +5304,7 @@ var BackgroundGradientColorControl = createControl(() => {
   );
 });
 var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
-  type: stringPropTypeUtil11.create("linear"),
+  type: stringPropTypeUtil12.create("linear"),
   angle: numberPropTypeUtil3.create(180),
   stops: gradientColorStopPropTypeUtil.create([
     colorStopPropTypeUtil.create({
@@ -5331,7 +5344,7 @@ var BackgroundImageOverlayAttachment = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React82 from "react";
 import { useRef as useRef14 } from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid14, Select as Select4 } from "@elementor/ui";
@@ -5350,7 +5363,7 @@ var backgroundPositionOptions = [
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil12);
+  const stringPropContext = useBoundProp(stringPropTypeUtil13);
   const isCustom = !!backgroundImageOffsetContext.value;
   const rowRef = useRef14(null);
   const handlePositionChange = (event) => {
@@ -5426,7 +5439,7 @@ var BackgroundImageOverlayRepeat = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React84 from "react";
 import { useRef as useRef15 } from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -5465,7 +5478,7 @@ var sizeControlOptions = [
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil13);
+  const stringPropContext = useBoundProp(stringPropTypeUtil14);
   const isCustom = !!backgroundImageScaleContext.value;
   const rowRef = useRef15(null);
   const handleSizeChange = (size) => {
@@ -5933,7 +5946,7 @@ import { useMemo as useMemo12, useState as useState17 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil14
+  stringPropTypeUtil as stringPropTypeUtil15
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid18 } from "@elementor/ui";
 import { __ as __38 } from "@wordpress/i18n";
@@ -6005,7 +6018,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
       return;
     }
-    const extractedValue = stringPropTypeUtil14.extract(newChangedValue);
+    const extractedValue = stringPropTypeUtil15.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
       [fieldType]: extractedValue
@@ -6045,7 +6058,7 @@ var KeyValueControl = createControl((props = {}) => {
 
 // src/controls/position-control.tsx
 import * as React89 from "react";
-import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid19, Select as Select5 } from "@elementor/ui";
@@ -6064,7 +6077,7 @@ var positionOptions = [
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil15);
+  const stringPropContext = useBoundProp(stringPropTypeUtil16);
   const isCustom = !!positionContext.value;
   const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
   const handlePositionChange = (event) => {
@@ -7323,7 +7336,7 @@ var TransitionRepeaterControl = createControl(
 // src/controls/date-time-control.tsx
 import * as React106 from "react";
 import * as dayjs from "dayjs";
-import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
+import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
 import { Box as Box22, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
@@ -7372,7 +7385,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   return /* @__PURE__ */ React106.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React106.createElement(ControlActions, null, /* @__PURE__ */ React106.createElement(LocalizationProvider, null, /* @__PURE__ */ React106.createElement(Box22, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React106.createElement(
     DatePicker,
     {
-      value: parseDateValue(stringPropTypeUtil16.extract(value?.date)),
+      value: parseDateValue(stringPropTypeUtil17.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7384,7 +7397,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   )), /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React106.createElement(
     TimePicker,
     {
-      value: parseTimeValue(stringPropTypeUtil16.extract(value?.time)),
+      value: parseTimeValue(stringPropTypeUtil17.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
       disabled: inputDisabled,
       slotProps: {
@@ -7399,7 +7412,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 // src/controls/inline-editing-control.tsx
 import * as React108 from "react";
 import { useCallback as useCallback4, useEffect as useEffect17, useMemo as useMemo16 } from "react";
-import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
+import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil18 } from "@elementor/editor-props";
 import { Box as Box24 } from "@elementor/ui";
 import { debounce as debounce4 } from "@elementor/utils";
 
@@ -7576,12 +7589,12 @@ var InlineEditingControl = createControl(
     props
   }) => {
     const { value, setValue, placeholder } = useBoundProp(htmlV3PropTypeUtil);
-    const content = stringPropTypeUtil17.extract(value?.content ?? null) ?? "";
+    const content = stringPropTypeUtil18.extract(value?.content ?? null) ?? "";
     const debouncedParse = useMemo16(
       () => debounce4((html) => {
         const parsed = parseHtmlChildren(html);
         setValue({
-          content: parsed.content ? stringPropTypeUtil17.create(parsed.content) : null,
+          content: parsed.content ? stringPropTypeUtil18.create(parsed.content) : null,
           children: parsed.children
         });
       }, CHILDREN_PARSE_DEBOUNCE_MS),
@@ -7591,7 +7604,7 @@ var InlineEditingControl = createControl(
       (newValue) => {
         const html = newValue ?? "";
         setValue({
-          content: html ? stringPropTypeUtil17.create(html) : null,
+          content: html ? stringPropTypeUtil18.create(html) : null,
           children: value?.children ?? []
         });
         debouncedParse(html);