@elementor/editor-controls 4.3.0-1047 → 4.3.0-1048

package/dist/index.mjs

@@ -7944,10 +7944,9 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React115 from "react";
-import { useCallback as useCallback4, useEffect as useEffect18, useMemo as useMemo17 } from "react";
-import { htmlV3PropTypeUtil, parseHtmlChildren, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
+import { useCallback as useCallback4 } from "react";
+import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
 import { Box as Box25 } from "@elementor/ui";
-import { debounce as debounce3 } from "@elementor/utils";
 
 // src/components/inline-editor.tsx
 import * as React114 from "react";
@@ -7968,6 +7967,7 @@ import Underline from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
 
 // src/utils/inline-editing.ts
+import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
 function isEmpty(value = "") {
   if (!value) {
     return true;
@@ -7984,6 +7984,13 @@ function htmlToPlainText(html) {
   const doc = new DOMParser().parseFromString(normalizedHtml, "text/html");
   return doc.body.textContent ?? "";
 }
+function extractInlineHtmlContent(propValue) {
+  if (escapedHtmlPropTypeUtil.isValid(propValue)) {
+    return escapedHtmlPropTypeUtil.extract(propValue) ?? "";
+  }
+  const htmlV3 = htmlV3PropTypeUtil.extract(propValue);
+  return stringPropTypeUtil20.extract(htmlV3?.content ?? null) ?? "";
+}
 
 // src/components/inline-editor.tsx
 var ITALIC_KEYBOARD_SHORTCUT = "i";
@@ -8114,37 +8121,22 @@ 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, placeholder } = useBoundProp(htmlV3PropTypeUtil);
-    const content = stringPropTypeUtil20.extract(value?.content ?? null) ?? "";
-    const debouncedParse = useMemo17(
-      () => debounce3((html) => {
-        const parsed = parseHtmlChildren(html);
-        setValue({
-          content: parsed.content ? stringPropTypeUtil20.create(parsed.content) : null,
-          children: parsed.children
-        });
-      }, CHILDREN_PARSE_DEBOUNCE_MS),
-      [setValue]
-    );
+    const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
+    const { value: rawValue } = usePropKeyContext();
+    const content = value ?? extractInlineHtmlContent(rawValue);
     const handleChange = useCallback4(
       (newValue) => {
         const html = newValue ?? "";
-        setValue({
-          content: html ? stringPropTypeUtil20.create(html) : null,
-          children: value?.children ?? []
-        });
-        debouncedParse(html);
+        setValue(html);
       },
-      [setValue, value?.children, debouncedParse]
+      [setValue]
     );
-    useEffect18(() => () => debouncedParse.cancel(), [debouncedParse]);
     return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
       Box25,
       {
@@ -8190,14 +8182,7 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React115.createElement(
-        InlineEditor,
-        {
-          value: content,
-          setValue: handleChange,
-          placeholder: placeholder?.content?.value ?? null
-        }
-      )
+      /* @__PURE__ */ React115.createElement(InlineEditor, { value: content, setValue: handleChange, placeholder: placeholder ?? null })
     ));
   }
 );
@@ -8303,7 +8288,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React116 from "react";
-import { useMemo as useMemo18, useState as useState19 } from "react";
+import { useMemo as useMemo17, useState as useState19 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField11 } from "@elementor/ui";
 
@@ -8344,7 +8329,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const [inputValue, setInputValue] = useState19("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil22.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = useMemo18(
+  const suggestionOptions = useMemo17(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -8699,7 +8684,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React126 from "react";
-import { useEffect as useEffect19, useState as useState21 } from "react";
+import { useEffect as useEffect18, useState as useState21 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover8,
@@ -8908,7 +8893,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState21(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover8(popoverState);
-  useEffect19(() => {
+  useEffect18(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -8928,7 +8913,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React128 from "react";
-import { useEffect as useEffect21, useMemo as useMemo19, useRef as useRef32, useState as useState22 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
 import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8954,7 +8939,7 @@ import { __ as __64 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React127 from "react";
-import { useEffect as useEffect20, useRef as useRef31 } from "react";
+import { useEffect as useEffect19, useRef as useRef31 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack23, TextField as TextField13, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
 import { __ as __63 } from "@wordpress/i18n";
@@ -8968,7 +8953,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef31(null);
-  useEffect20(() => {
+  useEffect19(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -9027,7 +9012,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo19(() => {
+  const formatButtonsList = useMemo18(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -9064,7 +9049,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
     }
     linkPopupState.close();
   };
-  useEffect21(() => {
+  useEffect20(() => {
     editor?.commands?.focus();
   }, [editor]);
   return /* @__PURE__ */ React128.createElement(
@@ -9374,7 +9359,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo19 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -9382,7 +9367,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo20(() => {
+  return useMemo19(() => {
     if (!groups || !options) {
       return [];
     }