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

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, ReactEleme
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
+import { ElementID } from '@elementor/editor-elements';
 import { Editor } from '@tiptap/react';
 import * as _elementor_locations from '@elementor/locations';
 
@@ -564,13 +565,15 @@ type InlineEditorProps = {
         top: number;
     };
     expectedTag?: string | null;
+    elementId?: ElementID;
 };
 declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<unknown>>;
 
 type InlineEditorToolbarProps = {
     editor: Editor;
+    elementId?: ElementID;
 };
-declare const InlineEditorToolbar: ({ editor }: InlineEditorToolbarProps) => React$1.JSX.Element;
+declare const InlineEditorToolbar: ({ editor, elementId }: InlineEditorToolbarProps) => React$1.JSX.Element;
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { RefObject, ReactNode, FC, PropsWithChildren, ComponentProps, ReactEleme
 import { SxProps, SelectProps, UnstableColorFieldProps, ToggleButtonProps, StackProps, PopupState, Theme, FormLabelProps, Grid } from '@elementor/ui';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, LinkPropValue, TransformablePropValue, PropType, CreateOptions } from '@elementor/editor-props';
 import { StyleDefinitionState } from '@elementor/editor-styles';
+import { ElementID } from '@elementor/editor-elements';
 import { Editor } from '@tiptap/react';
 import * as _elementor_locations from '@elementor/locations';
 
@@ -564,13 +565,15 @@ type InlineEditorProps = {
         top: number;
     };
     expectedTag?: string | null;
+    elementId?: ElementID;
 };
 declare const InlineEditor: React$1.ForwardRefExoticComponent<InlineEditorProps & React$1.RefAttributes<unknown>>;
 
 type InlineEditorToolbarProps = {
     editor: Editor;
+    elementId?: ElementID;
 };
-declare const InlineEditorToolbar: ({ editor }: InlineEditorToolbarProps) => React$1.JSX.Element;
+declare const InlineEditorToolbar: ({ editor, elementId }: InlineEditorToolbarProps) => React$1.JSX.Element;
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;

package/dist/index.js

@@ -3154,6 +3154,7 @@ var import_editor_props23 = require("@elementor/editor-props");
 var import_icons15 = require("@elementor/icons");
 var import_session = require("@elementor/session");
 var import_ui49 = require("@elementor/ui");
+var import_utils5 = require("@elementor/utils");
 var import_i18n23 = require("@wordpress/i18n");
 
 // src/components/restricted-link-infotip.tsx
@@ -3498,6 +3499,30 @@ var LinkControl = createControl((props) => {
   } = props || {};
   const [linkInLinkRestriction, setLinkInLinkRestriction] = (0, import_react33.useState)((0, import_editor_elements2.getLinkInLinkRestriction)(elementId));
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
+  const debouncedCheckRestriction = (0, import_react33.useMemo)(
+    () => (0, import_utils5.debounce)(() => {
+      const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId);
+      if (newRestriction.shouldRestrict && isActive) {
+        setIsActive(false);
+      }
+      setLinkInLinkRestriction(newRestriction);
+    }, 300),
+    [elementId, isActive]
+  );
+  (0, import_react33.useEffect)(() => {
+    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((0, import_editor_elements2.getLinkInLinkRestriction)(elementId));
     if (linkInLinkRestriction.shouldRestrict && !isActive) {
@@ -5958,6 +5983,7 @@ function isEmpty(value = "") {
 // src/components/inline-editor-toolbar.tsx
 var React100 = __toESM(require("react"));
 var import_react53 = require("react");
+var import_editor_elements5 = require("@elementor/editor-elements");
 var import_icons34 = require("@elementor/icons");
 var import_ui86 = require("@elementor/ui");
 var import_react54 = require("@tiptap/react");
@@ -6028,6 +6054,7 @@ var UrlPopover = ({
 };
 
 // src/components/inline-editor-toolbar.tsx
+var checkIfElementHasLink = (elementId) => !!(0, import_editor_elements5.getElementSetting)(elementId, "link")?.value?.destination;
 var toolbarButtons = {
   clear: {
     label: (0, import_i18n51.__)("Clear", "elementor"),
@@ -6094,16 +6121,23 @@ var toolbarButtons = {
 };
 var { clear: clearButton, ...formatButtons } = toolbarButtons;
 var possibleFormats = Object.keys(formatButtons);
-var InlineEditorToolbar = ({ editor }) => {
+var InlineEditorToolbar = ({ editor, elementId }) => {
   const [urlValue, setUrlValue] = (0, import_react53.useState)("");
   const [openInNewTab, setOpenInNewTab] = (0, import_react53.useState)(false);
   const toolbarRef = (0, import_react53.useRef)(null);
   const linkPopupState = (0, import_ui86.usePopupState)({ variant: "popover" });
+  const hasLinkOnElement = elementId ? checkIfElementHasLink(elementId) : false;
   const editorState = (0, import_react54.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react53.useMemo)(() => Object.values(formatButtons), []);
+  const formatButtonsList = (0, import_react53.useMemo)(() => {
+    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 || "");
@@ -6125,6 +6159,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(() => {
@@ -6254,7 +6295,8 @@ var InlineEditor = (0, import_react55.forwardRef)(
     sx = {},
     onBlur = void 0,
     getInitialPopoverPosition = void 0,
-    expectedTag = null
+    expectedTag = null,
+    elementId = void 0
   }, ref) => {
     const containerRef = (0, import_react55.useRef)(null);
     const popupState = (0, import_ui87.usePopupState)({ variant: "popover", disableAutoFocus: true });
@@ -6388,7 +6430,7 @@ var InlineEditor = (0, import_react55.forwardRef)(
         anchorOrigin: { vertical: "top", horizontal: "center" },
         transformOrigin: { vertical: "bottom", horizontal: "center" }
       },
-      /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor })
+      /* @__PURE__ */ React101.createElement(InlineEditorToolbar, { editor, elementId })
     ));
   }
 );