@elementor/editor-controls 3.35.0-376 → 3.35.0-377

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { RefObject, ReactNode, FC, PropsWithChildren, ReactElement, ComponentType } from 'react';
+import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, ReactElement, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
@@ -380,7 +380,7 @@ declare const DateTimeControl: ControlComponent$1<({ inputDisabled }: {
 declare const InlineEditingControl: ControlComponent$1<({ sx, attributes, props, }: {
     sx?: SxProps<Theme>;
     attributes?: Record<string, string>;
-    props?: React$1.ComponentProps<"div">;
+    props?: ComponentProps<"div">;
 }) => React$1.JSX.Element>;
 
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { RefObject, ReactNode, FC, PropsWithChildren, ReactElement, ComponentType } from 'react';
+import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, ReactElement, ComponentType } from 'react';
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
@@ -380,7 +380,7 @@ declare const DateTimeControl: ControlComponent$1<({ inputDisabled }: {
 declare const InlineEditingControl: ControlComponent$1<({ sx, attributes, props, }: {
     sx?: SxProps<Theme>;
     attributes?: Record<string, string>;
-    props?: React$1.ComponentProps<"div">;
+    props?: ComponentProps<"div">;
 }) => React$1.JSX.Element>;
 
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;

package/dist/index.js

@@ -5938,7 +5938,9 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 
 // src/controls/inline-editing-control.tsx
 var React102 = __toESM(require("react"));
+var import_react57 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_ui88 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
@@ -6252,7 +6254,7 @@ var Wrapper = ({ children, containerRef, editor, sx, onBlur }) => {
     wrappedChildren
   ) : /* @__PURE__ */ React101.createElement(React101.Fragment, null, wrappedChildren);
 };
-var InlineEditor = React101.forwardRef(
+var InlineEditor = (0, import_react55.forwardRef)(
   ({
     value,
     setValue,
@@ -6264,11 +6266,11 @@ var InlineEditor = React101.forwardRef(
     getInitialPopoverPosition = void 0,
     expectedTag = null
   }, ref) => {
-    const containerRef = React101.useRef(null);
+    const containerRef = (0, import_react55.useRef)(null);
     const popupState = (0, import_ui87.usePopupState)({ variant: "popover", disableAutoFocus: true });
-    const [hasSelectedContent, setHasSelectedContent] = React101.useState(false);
+    const [hasSelectedContent, setHasSelectedContent] = (0, import_react55.useState)(false);
     const documentContentSettings = !!expectedTag ? "block+" : "inline*";
-    const [selectionRect, setSelectionRect] = React101.useState(null);
+    const [selectionRect, setSelectionRect] = (0, import_react55.useState)(null);
     const onSelectionEnd = (view) => {
       const hasSelection = !view.state.selection.empty;
       setHasSelectedContent(hasSelection);
@@ -6290,6 +6292,10 @@ var InlineEditor = React101.forwardRef(
       keyup: onSelectionEnd,
       keydown: onKeyDown
     } : void 0;
+    const onUpdate = ({ editor: updatedEditor }) => {
+      const newValue = updatedEditor.getHTML();
+      setValue(isEmpty(newValue) ? null : newValue);
+    };
     const editor = (0, import_react56.useEditor)({
       extensions: [
         import_extension_document.default.extend({
@@ -6331,10 +6337,7 @@ var InlineEditor = React101.forwardRef(
         })
       ],
       content: value,
-      onUpdate: ({ editor: updatedEditor }) => {
-        const newValue = updatedEditor.getHTML();
-        setValue(isEmpty(newValue) ? null : newValue);
-      },
+      onUpdate,
       autofocus,
       editorProps: {
         attributes: {
@@ -6397,8 +6400,18 @@ var InlineEditingControl = createControl(
     attributes,
     props
   }) => {
-    const { value, setValue } = useBoundProp(import_editor_props52.htmlPropTypeUtil);
+    const { value, setValue, bind } = useBoundProp(import_editor_props52.htmlPropTypeUtil);
+    const [actualValue, setActualValue] = (0, import_react57.useState)(value);
     const handleChange = (newValue) => setValue(newValue);
+    (0, import_react57.useEffect)(() => {
+      return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"), (e) => {
+        const { args, type } = e;
+        const settingValue = args?.settings?.[bind]?.value ?? null;
+        if (type !== "command" || settingValue !== actualValue) {
+          setActualValue(settingValue);
+        }
+      });
+    }, []);
     return /* @__PURE__ */ React102.createElement(ControlActions, null, /* @__PURE__ */ React102.createElement(
       import_ui88.Box,
       {
@@ -6433,7 +6446,7 @@ var InlineEditingControl = createControl(
         ...attributes,
         ...props
       },
-      /* @__PURE__ */ React102.createElement(InlineEditor, { value: value || "", setValue: handleChange })
+      /* @__PURE__ */ React102.createElement(InlineEditor, { value: actualValue || "", setValue: handleChange })
     ));
   }
 );
@@ -6450,7 +6463,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 var React104 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_icons36 = require("@elementor/icons");
 var import_ui90 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
@@ -6471,7 +6484,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)
   );
@@ -6627,10 +6640,10 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React104.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React104.createElement(import_ui90.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_ui90.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui90.bindPopover)(popoverState);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();