@elementor/editor-controls 4.0.0-551 → 4.0.0-564

package/dist/index.mjs

@@ -2185,15 +2185,15 @@ var SelectControlWrapper = createControl(
 
 // src/controls/chips-control.tsx
 import * as React50 from "react";
-import { stringArrayPropTypeUtil } from "@elementor/editor-props";
+import { stringArrayPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil4 } 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 || [];
+  const selectedValues = (value || []).map((item) => stringPropTypeUtil4.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) => option.value);
+    const values = newValue.map((option) => stringPropTypeUtil4.create(option.value));
     setValue(values.length > 0 ? values : null);
   };
   return /* @__PURE__ */ React50.createElement(ControlActions, null, /* @__PURE__ */ React50.createElement(
@@ -2219,7 +2219,7 @@ var ChipsControl = createControl(({ options }) => {
 
 // src/controls/toggle-control.tsx
 import * as React54 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
 import * as React52 from "react";
@@ -2507,7 +2507,7 @@ var ToggleControl = createControl(
     maxItems,
     convertOptions = false
   }) => {
-    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil4);
+    const { value, setValue, placeholder, disabled } = useBoundProp(stringPropTypeUtil5);
     const processedOptions = convertOptions ? convertToggleOptionsToAtomic(options) : options;
     const exclusiveValues = processedOptions.filter((option) => option.exclusive).map((option) => option.value);
     const handleNonExclusiveToggle = (selectedValues) => {
@@ -2885,7 +2885,7 @@ function getCssDimensionProps(label, isSiteRtl) {
 
 // src/controls/font-family-control/font-family-control.tsx
 import * as React59 from "react";
-import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag as UnstableTag2, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
@@ -3064,7 +3064,7 @@ var FontFamilyControl = createControl(
       setValue: setFontFamily,
       disabled,
       placeholder
-    } = useBoundProp(stringPropTypeUtil5);
+    } = useBoundProp(stringPropTypeUtil6);
     const popoverState = usePopupState5({ variant: "popover" });
     const isShowingPlaceholder = !fontFamily && placeholder;
     const mapFontSubs = React59.useMemo(() => {
@@ -3221,7 +3221,7 @@ var RestrictedLinkInfotip = ({
 // src/controls/query-control.tsx
 import * as React63 from "react";
 import { useMemo as useMemo7, useState as useState9 } from "react";
-import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil6, urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
+import { numberPropTypeUtil as numberPropTypeUtil2, stringPropTypeUtil as stringPropTypeUtil7, urlPropTypeUtil as urlPropTypeUtil2 } from "@elementor/editor-props";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { SearchIcon } from "@elementor/icons";
 import { debounce as debounce2 } from "@elementor/utils";
@@ -3383,7 +3383,7 @@ var QueryControl = createControl((props) => {
       $$type: "query",
       value: {
         id: numberPropTypeUtil2.create(newValue),
-        label: stringPropTypeUtil6.create(findMatchingOption(options, newValue)?.label || null)
+        label: stringPropTypeUtil7.create(findMatchingOption(options, newValue)?.label || null)
       }
     };
     setValue(valueToSave);
@@ -3594,7 +3594,7 @@ var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
 // src/controls/html-tag-control.tsx
 import * as React67 from "react";
 import { getElementLabel } from "@elementor/editor-elements";
-import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { Select as Select2, styled as styled6, Typography as Typography5 } from "@elementor/ui";
 import { __ as __24 } from "@wordpress/i18n";
@@ -3646,7 +3646,7 @@ var ConditionalControlInfotip = React66.forwardRef(
 // src/controls/html-tag-control.tsx
 var StyledSelect = styled6(Select2)(() => ({ ".MuiSelect-select.Mui-disabled": { cursor: "not-allowed" } }));
 var HtmlTagControl = createControl(({ options, onChange, fallbackLabels = {} }) => {
-  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil7);
+  const { value, setValue, disabled, placeholder } = useBoundProp(stringPropTypeUtil8);
   const handleChange = (event) => {
     const newValue = event.target.value || null;
     onChange?.(newValue, value);
@@ -3800,7 +3800,7 @@ var Control4 = ({
 // src/controls/aspect-ratio-control.tsx
 import * as React69 from "react";
 import { useEffect as useEffect9, useState as useState12 } from "react";
-import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
+import { stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
 import { Grid as Grid12, Select as Select3, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
@@ -3817,7 +3817,7 @@ var RATIO_OPTIONS = [
 ];
 var CUSTOM_RATIO = "custom";
 var AspectRatioControl = createControl(({ label }) => {
-  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil8);
+  const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil9);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
   const [isCustom, setIsCustom] = useState12(isCustomSelected);
@@ -4116,7 +4116,7 @@ import {
   colorStopPropTypeUtil,
   gradientColorStopPropTypeUtil,
   numberPropTypeUtil as numberPropTypeUtil3,
-  stringPropTypeUtil as stringPropTypeUtil9
+  stringPropTypeUtil as stringPropTypeUtil10
 } from "@elementor/editor-props";
 import { UnstableGradientBox } from "@elementor/ui";
 var BackgroundGradientColorControl = createControl(() => {
@@ -4124,13 +4124,13 @@ var BackgroundGradientColorControl = createControl(() => {
   const handleChange = (newValue) => {
     const transformedValue = createTransformableValue(newValue);
     if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil9.create(newValue.positions.join(" "));
+      transformedValue.positions = stringPropTypeUtil10.create(newValue.positions.join(" "));
     }
     setValue(transformedValue);
   };
   const createTransformableValue = (newValue) => ({
     ...newValue,
-    type: stringPropTypeUtil9.create(newValue.type),
+    type: stringPropTypeUtil10.create(newValue.type),
     angle: numberPropTypeUtil3.create(newValue.angle),
     stops: gradientColorStopPropTypeUtil.create(
       newValue.stops.map(
@@ -4166,7 +4166,7 @@ var BackgroundGradientColorControl = createControl(() => {
   );
 });
 var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
-  type: stringPropTypeUtil9.create("linear"),
+  type: stringPropTypeUtil10.create("linear"),
   angle: numberPropTypeUtil3.create(180),
   stops: gradientColorStopPropTypeUtil.create([
     colorStopPropTypeUtil.create({
@@ -4206,7 +4206,7 @@ var BackgroundImageOverlayAttachment = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React74 from "react";
 import { useRef as useRef11 } from "react";
-import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
+import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid14, Select as Select4 } from "@elementor/ui";
@@ -4225,7 +4225,7 @@ var backgroundPositionOptions = [
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil10);
+  const stringPropContext = useBoundProp(stringPropTypeUtil11);
   const isCustom = !!backgroundImageOffsetContext.value;
   const rowRef = useRef11(null);
   const handlePositionChange = (event) => {
@@ -4301,7 +4301,7 @@ var BackgroundImageOverlayRepeat = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React76 from "react";
 import { useRef as useRef12 } from "react";
-import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
+import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
   ArrowsMaximizeIcon,
@@ -4340,7 +4340,7 @@ var sizeControlOptions = [
 ];
 var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil11);
+  const stringPropContext = useBoundProp(stringPropTypeUtil12);
   const isCustom = !!backgroundImageScaleContext.value;
   const rowRef = useRef12(null);
   const handleSizeChange = (size) => {
@@ -4806,7 +4806,7 @@ import { useMemo as useMemo10, useState as useState15 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil12
+  stringPropTypeUtil as stringPropTypeUtil13
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid18 } from "@elementor/ui";
 import { __ as __35 } from "@wordpress/i18n";
@@ -4878,7 +4878,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
       return;
     }
-    const extractedValue = stringPropTypeUtil12.extract(newChangedValue);
+    const extractedValue = stringPropTypeUtil13.extract(newChangedValue);
     setSessionState((prev) => ({
       ...prev,
       [fieldType]: extractedValue
@@ -4918,7 +4918,7 @@ var KeyValueControl = createControl((props = {}) => {
 
 // src/controls/position-control.tsx
 import * as React81 from "react";
-import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil13 } from "@elementor/editor-props";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid19, Select as Select5 } from "@elementor/ui";
@@ -4937,7 +4937,7 @@ var positionOptions = [
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
-  const stringPropContext = useBoundProp(stringPropTypeUtil13);
+  const stringPropContext = useBoundProp(stringPropTypeUtil14);
   const isCustom = !!positionContext.value;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
@@ -6155,7 +6155,7 @@ var TransitionRepeaterControl = createControl(
 // src/controls/date-time-control.tsx
 import * as React98 from "react";
 import * as dayjs from "dayjs";
-import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
+import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
 import { Box as Box21, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
@@ -6204,7 +6204,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React98.createElement(ControlActions, null, /* @__PURE__ */ React98.createElement(LocalizationProvider, null, /* @__PURE__ */ React98.createElement(Box21, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React98.createElement(
     DatePicker,
     {
-      value: parseDateValue(stringPropTypeUtil14.extract(value?.date)),
+      value: parseDateValue(stringPropTypeUtil15.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
       disabled: inputDisabled,
       slotProps: {
@@ -6216,7 +6216,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
   )), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React98.createElement(
     TimePicker,
     {
-      value: parseTimeValue(stringPropTypeUtil14.extract(value?.time)),
+      value: parseTimeValue(stringPropTypeUtil15.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
       disabled: inputDisabled,
       slotProps: {
@@ -6230,8 +6230,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React100 from "react";
-import { htmlPropTypeUtil } from "@elementor/editor-props";
+import { useCallback as useCallback3, useEffect as useEffect12, useMemo as useMemo15 } from "react";
+import { htmlV2PropTypeUtil, parseHtmlChildren } from "@elementor/editor-props";
 import { Box as Box23 } from "@elementor/ui";
+import { debounce as debounce4 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
 import * as React99 from "react";
@@ -6407,14 +6409,37 @@ var useOnUpdate = (callback, dependencies) => {
 };
 
 // src/controls/inline-editing-control.tsx
+var CHILDREN_PARSE_DEBOUNCE_MS = 300;
 var InlineEditingControl = createControl(
   ({
     sx,
     attributes,
     props
   }) => {
-    const { value, setValue } = useBoundProp(htmlPropTypeUtil);
-    const handleChange = (newValue) => setValue(newValue ?? "");
+    const { value, setValue } = useBoundProp(htmlV2PropTypeUtil);
+    const content = value?.content ?? "";
+    const debouncedParse = useMemo15(
+      () => debounce4((html) => {
+        const parsed = parseHtmlChildren(html);
+        setValue({
+          content: parsed.content || null,
+          children: parsed.children
+        });
+      }, CHILDREN_PARSE_DEBOUNCE_MS),
+      [setValue]
+    );
+    const handleChange = useCallback3(
+      (newValue) => {
+        const html = newValue ?? "";
+        setValue({
+          content: html || null,
+          children: value?.children ?? []
+        });
+        debouncedParse(html);
+      },
+      [setValue, value?.children, debouncedParse]
+    );
+    useEffect12(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React100.createElement(ControlActions, null, /* @__PURE__ */ React100.createElement(
       Box23,
       {
@@ -6453,7 +6478,7 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React100.createElement(InlineEditor, { value: value || "", setValue: handleChange })
+      /* @__PURE__ */ React100.createElement(InlineEditor, { value: content, setValue: handleChange })
     ));
   }
 );
@@ -6585,7 +6610,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React105 from "react";
-import { useEffect as useEffect12, useState as useState18 } from "react";
+import { useEffect as useEffect13, useState as useState18 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon4, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover7,
@@ -6773,7 +6798,7 @@ var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = useState18(null);
   const popoverState = usePopupState8({ variant: "popover" });
   const popoverProps = bindPopover7(popoverState);
-  useEffect12(() => {
+  useEffect13(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -6789,7 +6814,7 @@ var usePopover = (openOnMount, onOpen) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React107 from "react";
-import { useMemo as useMemo15, useRef as useRef28, useState as useState19 } from "react";
+import { useMemo as useMemo16, useRef as useRef28, useState as useState19 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -6815,7 +6840,7 @@ import { __ as __54 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React106 from "react";
-import { useEffect as useEffect13, useRef as useRef27 } from "react";
+import { useEffect as useEffect14, useRef as useRef27 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover8, Popover as Popover7, Stack as Stack18, TextField as TextField9, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
@@ -6829,7 +6854,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef27(null);
-  useEffect13(() => {
+  useEffect14(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -6888,7 +6913,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo15(() => {
+  const formatButtonsList = useMemo16(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -7238,7 +7263,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo17 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 import { __ as __55 } from "@wordpress/i18n";
 var supportedCategories = {
@@ -7256,7 +7281,7 @@ var getFontFamilies = () => {
 };
 var useFontFamilies = () => {
   const fontFamilies = getFontFamilies();
-  return useMemo16(() => {
+  return useMemo17(() => {
     const categoriesOrder = ["system", "custom", "googlefonts"];
     return Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
       if (!supportedCategories[category]) {