@elementor/editor-controls 3.35.0-428 → 3.35.0-430

package/dist/index.mjs

@@ -3086,12 +3086,13 @@ var UrlControl = createControl(
 
 // src/controls/link-control.tsx
 import * as React65 from "react";
-import { useState as useState11 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo8, useState as useState11 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import { linkPropTypeUtil } from "@elementor/editor-props";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
 import { Collapse, Grid as Grid10, IconButton as IconButton6, Stack as Stack10 } from "@elementor/ui";
+import { debounce as debounce3 } from "@elementor/utils";
 import { __ as __23 } from "@wordpress/i18n";
 
 // src/components/restricted-link-infotip.tsx
@@ -3442,6 +3443,30 @@ var LinkControl = createControl((props) => {
   } = props || {};
   const [linkInLinkRestriction, setLinkInLinkRestriction] = useState11(getLinkInLinkRestriction(elementId));
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
+  const debouncedCheckRestriction = useMemo8(
+    () => debounce3(() => {
+      const newRestriction = getLinkInLinkRestriction(elementId);
+      if (newRestriction.shouldRestrict && isActive) {
+        setIsActive(false);
+      }
+      setLinkInLinkRestriction(newRestriction);
+    }, 300),
+    [elementId, isActive]
+  );
+  useEffect7(() => {
+    debouncedCheckRestriction();
+    const handleInlineLinkChanged = (event) => {
+      const customEvent = event;
+      if (customEvent.detail.elementId === elementId) {
+        debouncedCheckRestriction();
+      }
+    };
+    window.addEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
+    return () => {
+      window.removeEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
+      debouncedCheckRestriction.cancel();
+    };
+  }, [elementId, debouncedCheckRestriction]);
   const onEnabledChange = () => {
     setLinkInLinkRestriction(getLinkInLinkRestriction(elementId));
     if (linkInLinkRestriction.shouldRestrict && !isActive) {
@@ -3694,7 +3719,7 @@ var Control4 = ({
 
 // src/controls/aspect-ratio-control.tsx
 import * as React69 from "react";
-import { useEffect as useEffect7, useState as useState13 } from "react";
+import { useEffect as useEffect8, useState as useState13 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
@@ -3721,7 +3746,7 @@ var AspectRatioControl = createControl(({ label }) => {
   const [selectedValue, setSelectedValue] = useState13(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -4543,7 +4568,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 import * as React79 from "react";
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
 import { Box as Box14 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -4563,11 +4588,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = useMemo8(
+    const childArrayPropTypeUtil2 = useMemo9(
       () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo8(
+    const contextValue = useMemo9(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -4698,7 +4723,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React80 from "react";
-import { useMemo as useMemo9, useState as useState16 } from "react";
+import { useMemo as useMemo10, useState as useState16 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -4741,7 +4766,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo9(
+  const [keyRegex, valueRegex, errMsg] = useMemo10(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -5465,7 +5490,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React97 from "react";
-import { useEffect as useEffect8, useMemo as useMemo11, useState as useState17 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo12, useState as useState17 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -5476,7 +5501,7 @@ import { __ as __49 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React95 from "react";
-import { useMemo as useMemo10, useRef as useRef22 } from "react";
+import { useMemo as useMemo11, useRef as useRef22 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
@@ -5484,7 +5509,7 @@ var SelectionSizeControl = createControl(
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
     const rowRef = useRef22(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo10(() => {
+    const currentSizeConfig = useMemo11(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -5793,15 +5818,15 @@ var TransitionRepeaterControl = createControl(
     const currentStyleIsNormal = currentStyleState === null;
     const [recentlyUsedList, setRecentlyUsedList] = useState17([]);
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const disabledItems = useMemo11(() => getDisabledItemLabels(value), [value]);
-    const allowedTransitionSet = useMemo11(() => {
+    const disabledItems = useMemo12(() => getDisabledItemLabels(value), [value]);
+    const allowedTransitionSet = useMemo12(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => set.add(prop.value));
       });
       return set;
     }, []);
-    useEffect8(() => {
+    useEffect9(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -5813,10 +5838,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    useEffect8(() => {
+    useEffect9(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo11(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo12(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React97.createElement(
       RepeatableControl,
@@ -5925,7 +5950,7 @@ import { Box as Box24 } from "@elementor/ui";
 import * as React101 from "react";
 import {
   forwardRef as forwardRef10,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useRef as useRef26,
   useState as useState19
 } from "react";
@@ -5956,7 +5981,8 @@ function isEmpty(value = "") {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React100 from "react";
-import { useMemo as useMemo12, useRef as useRef25, useState as useState18 } from "react";
+import { useMemo as useMemo13, useRef as useRef25, useState as useState18 } from "react";
+import { getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
   ItalicIcon,
@@ -5981,7 +6007,7 @@ import { __ as __51 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React99 from "react";
-import { useEffect as useEffect9, useRef as useRef24 } from "react";
+import { useEffect as useEffect10, useRef as useRef24 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover7, Popover as Popover7, Stack as Stack16, TextField as TextField8, ToggleButton as ToggleButton2, Tooltip as Tooltip9 } from "@elementor/ui";
 import { __ as __50 } from "@wordpress/i18n";
@@ -5995,7 +6021,7 @@ var UrlPopover = ({
   onToggleNewTab
 }) => {
   const inputRef = useRef24(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -6044,6 +6070,7 @@ var UrlPopover = ({
 };
 
 // src/components/inline-editor-toolbar.tsx
+var checkIfElementHasLink = (elementId) => !!getElementSetting(elementId, "link")?.value?.destination;
 var toolbarButtons = {
   clear: {
     label: __51("Clear", "elementor"),
@@ -6110,16 +6137,23 @@ var toolbarButtons = {
 };
 var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
-var InlineEditorToolbar = ({ editor }) => {
+var InlineEditorToolbar = ({ editor, elementId }) => {
   const [urlValue, setUrlValue] = useState18("");
   const [openInNewTab, setOpenInNewTab] = useState18(false);
   const toolbarRef = useRef25(null);
   const linkPopupState = usePopupState8({ variant: "popover" });
+  const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo12(() => Object.values(formatButtons), []);
+  const formatButtonsList = useMemo13(() => {
+    const buttons = Object.values(formatButtons);
+    if (hasLinkOnElement) {
+      return buttons.filter((button) => button.action !== "link");
+    }
+    return buttons;
+  }, [hasLinkOnElement]);
   const handleLinkClick = () => {
     const linkAttrs = editor.getAttributes("link");
     setUrlValue(linkAttrs.href || "");
@@ -6141,6 +6175,13 @@ var InlineEditorToolbar = ({ editor }) => {
     } else {
       editor.chain().focus().unsetLink().run();
     }
+    if (elementId) {
+      window.dispatchEvent(
+        new CustomEvent("elementor:inline-link-changed", {
+          detail: { elementId }
+        })
+      );
+    }
     linkPopupState.close();
   };
   React100.useEffect(() => {
@@ -6225,7 +6266,7 @@ var UNDERLINE_KEYBOARD_SHORTCUT = "u";
 var INITIAL_STYLE = "margin:0;padding:0;";
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef26(false);
-  useEffect11(() => {
+  useEffect12(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -6270,7 +6311,8 @@ var InlineEditor = forwardRef10(
     sx = {},
     onBlur = void 0,
     getInitialPopoverPosition = void 0,
-    expectedTag = null
+    expectedTag = null,
+    elementId = void 0
   }, ref) => {
     const containerRef = useRef26(null);
     const popupState = usePopupState9({ variant: "popover", disableAutoFocus: true });
@@ -6404,7 +6446,7 @@ var InlineEditor = forwardRef10(
         anchorOrigin: { vertical: "top", horizontal: "center" },
         transformOrigin: { vertical: "bottom", horizontal: "center" }
       },
-      /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor })
+      /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor, elementId })
     ));
   }
 );
@@ -6469,7 +6511,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React104 from "react";
-import { useEffect as useEffect12, useState as useState20 } from "react";
+import { useEffect as useEffect13, useState as useState20 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon3, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
@@ -6657,7 +6699,7 @@ var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = useState20(null);
   const popoverState = usePopupState10({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
-  useEffect12(() => {
+  useEffect13(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();