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

package/dist/index.js

@@ -2269,10 +2269,10 @@ var import_ui37 = require("@elementor/ui");
 var SIZE6 = "tiny";
 var ChipsControl = createControl(({ options }) => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props16.stringArrayPropTypeUtil);
-  const selectedValues = value || [];
+  const selectedValues = (value || []).map((item) => import_editor_props16.stringPropTypeUtil.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) => import_editor_props16.stringPropTypeUtil.create(option.value));
     setValue(values.length > 0 ? values : null);
   };
   return /* @__PURE__ */ React50.createElement(ControlActions, null, /* @__PURE__ */ React50.createElement(
@@ -6244,8 +6244,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/inline-editing-control.tsx
 var React100 = __toESM(require("react"));
+var import_react54 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
 var import_ui86 = require("@elementor/ui");
+var import_utils7 = require("@elementor/utils");
 
 // src/components/inline-editor.tsx
 var React99 = __toESM(require("react"));
@@ -6418,14 +6420,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(import_editor_props52.htmlPropTypeUtil);
-    const handleChange = (newValue) => setValue(newValue ?? "");
+    const { value, setValue } = useBoundProp(import_editor_props52.htmlV2PropTypeUtil);
+    const content = value?.content ?? "";
+    const debouncedParse = (0, import_react54.useMemo)(
+      () => (0, import_utils7.debounce)((html) => {
+        const parsed = (0, import_editor_props52.parseHtmlChildren)(html);
+        setValue({
+          content: parsed.content || null,
+          children: parsed.children
+        });
+      }, CHILDREN_PARSE_DEBOUNCE_MS),
+      [setValue]
+    );
+    const handleChange = (0, import_react54.useCallback)(
+      (newValue) => {
+        const html = newValue ?? "";
+        setValue({
+          content: html || null,
+          children: value?.children ?? []
+        });
+        debouncedParse(html);
+      },
+      [setValue, value?.children, debouncedParse]
+    );
+    (0, import_react54.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React100.createElement(ControlActions, null, /* @__PURE__ */ React100.createElement(
       import_ui86.Box,
       {
@@ -6464,32 +6489,32 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React100.createElement(InlineEditor, { value: value || "", setValue: handleChange })
+      /* @__PURE__ */ React100.createElement(InlineEditor, { value: content, setValue: handleChange })
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
 var React102 = __toESM(require("react"));
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_icons33 = require("@elementor/icons");
 var import_ui88 = require("@elementor/ui");
 var import_i18n50 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
 var React101 = __toESM(require("react"));
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_editor_ui13 = require("@elementor/editor-ui");
 var import_ui87 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react54.forwardRef)(
+var PromotionTrigger = (0, import_react55.forwardRef)(
   ({ promotionKey, children }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react54.useImperativeHandle)(ref, () => ({ toggle }), []);
+    (0, import_react55.useImperativeHandle)(ref, () => ({ toggle }), []);
     return /* @__PURE__ */ React101.createElement(React101.Fragment, null, promotion && /* @__PURE__ */ React101.createElement(
       import_editor_ui13.PromotionInfotip,
       {
@@ -6521,7 +6546,7 @@ var PromotionTrigger = (0, import_react54.forwardRef)(
 // src/components/promotions/display-conditions-control.tsx
 var ARIA_LABEL = (0, import_i18n50.__)("Display Conditions", "elementor");
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react55.useRef)(null);
+  const triggerRef = (0, import_react56.useRef)(null);
   return /* @__PURE__ */ React102.createElement(
     import_ui88.Stack,
     {
@@ -6553,13 +6578,13 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 var React103 = __toESM(require("react"));
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_icons34 = require("@elementor/icons");
 var import_ui89 = require("@elementor/ui");
 var import_i18n51 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n51.__)("Attributes", "elementor");
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react56.useRef)(null);
+  const triggerRef = (0, import_react57.useRef)(null);
   return /* @__PURE__ */ React103.createElement(
     import_ui89.Stack,
     {
@@ -6596,7 +6621,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 var React105 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_icons36 = require("@elementor/icons");
 var import_ui91 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
@@ -6617,7 +6642,7 @@ var Repeater3 = ({
   openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
   isSortable = true
 }) => {
-  const [openItem, setOpenItem] = (0, import_react57.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react58.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -6773,10 +6798,10 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React105.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React105.createElement(import_ui91.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react57.useState)(null);
+  const [ref, setRef] = (0, import_react58.useState)(null);
   const popoverState = (0, import_ui91.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui91.bindPopover)(popoverState);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -6792,16 +6817,16 @@ var usePopover = (openOnMount, onOpen) => {
 
 // src/components/inline-editor-toolbar.tsx
 var React107 = __toESM(require("react"));
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_icons38 = require("@elementor/icons");
 var import_ui93 = require("@elementor/ui");
-var import_react60 = require("@tiptap/react");
+var import_react61 = require("@tiptap/react");
 var import_i18n54 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
 var React106 = __toESM(require("react"));
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_icons37 = require("@elementor/icons");
 var import_ui92 = require("@elementor/ui");
 var import_i18n53 = require("@wordpress/i18n");
@@ -6814,8 +6839,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const inputRef = (0, import_react59.useRef)(null);
+  (0, import_react59.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -6865,16 +6890,16 @@ var UrlPopover = ({
 
 // src/components/inline-editor-toolbar.tsx
 var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
-  const [urlValue, setUrlValue] = (0, import_react59.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react59.useState)(false);
-  const toolbarRef = (0, import_react59.useRef)(null);
+  const [urlValue, setUrlValue] = (0, import_react60.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react60.useState)(false);
+  const toolbarRef = (0, import_react60.useRef)(null);
   const linkPopupState = (0, import_ui93.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react60.useEditorState)({
+  const editorState = (0, import_react61.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react59.useMemo)(() => {
+  const formatButtonsList = (0, import_react60.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -7103,7 +7128,7 @@ var differsFromExternal = (newState, externalState) => {
 
 // src/components/size/unit-select.tsx
 var React108 = __toESM(require("react"));
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_ui94 = require("@elementor/ui");
 var menuItemContentStyles = {
@@ -7114,7 +7139,7 @@ var menuItemContentStyles = {
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
   const popupState = (0, import_ui94.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react61.useId)()
+    popupId: (0, import_react62.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -7150,8 +7175,8 @@ var StyledButton2 = (0, import_ui94.styled)(import_ui94.Button, {
 
 // src/components/size/unstable-size-input.tsx
 var React109 = __toESM(require("react"));
-var import_react62 = require("react");
-var UnstableSizeInput = (0, import_react62.forwardRef)(
+var import_react63 = require("react");
+var UnstableSizeInput = (0, import_react63.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
     return /* @__PURE__ */ React109.createElement(
       NumberInput,
@@ -7224,7 +7249,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_i18n55 = require("@wordpress/i18n");
 var supportedCategories = {
@@ -7242,7 +7267,7 @@ var getFontFamilies = () => {
 };
 var useFontFamilies = () => {
   const fontFamilies = getFontFamilies();
-  return (0, import_react63.useMemo)(() => {
+  return (0, import_react64.useMemo)(() => {
     const categoriesOrder = ["system", "custom", "googlefonts"];
     return Object.entries(fontFamilies || {}).reduce((acc, [font, category]) => {
       if (!supportedCategories[category]) {