@elementor/editor-controls 4.2.0-885 → 4.2.0-887

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.2.0-885",
+  "version": "4.2.0-887",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.2.0-885",
-    "@elementor/editor-elements": "4.2.0-885",
-    "@elementor/editor-props": "4.2.0-885",
-    "@elementor/editor-responsive": "4.2.0-885",
-    "@elementor/editor-ui": "4.2.0-885",
-    "@elementor/editor-v1-adapters": "4.2.0-885",
-    "@elementor/env": "4.2.0-885",
-    "@elementor/events": "4.2.0-885",
-    "@elementor/http-client": "4.2.0-885",
+    "@elementor/editor-current-user": "4.2.0-887",
+    "@elementor/editor-elements": "4.2.0-887",
+    "@elementor/editor-props": "4.2.0-887",
+    "@elementor/editor-responsive": "4.2.0-887",
+    "@elementor/editor-ui": "4.2.0-887",
+    "@elementor/editor-v1-adapters": "4.2.0-887",
+    "@elementor/env": "4.2.0-887",
+    "@elementor/events": "4.2.0-887",
+    "@elementor/http-client": "4.2.0-887",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.2.0-885",
-    "@elementor/query": "4.2.0-885",
-    "@elementor/schema": "4.2.0-885",
-    "@elementor/session": "4.2.0-885",
+    "@elementor/locations": "4.2.0-887",
+    "@elementor/query": "4.2.0-887",
+    "@elementor/schema": "4.2.0-887",
+    "@elementor/session": "4.2.0-887",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-885",
-    "@elementor/wp-media": "4.2.0-885",
+    "@elementor/utils": "4.2.0-887",
+    "@elementor/wp-media": "4.2.0-887",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/components/restricted-link-infotip.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
-import { type LinkInLinkRestriction, selectElement } from '@elementor/editor-elements';
+import {
+	getContainer,
+	getCurrentDocumentId,
+	type LinkInLinkRestriction,
+	selectElement,
+} from '@elementor/editor-elements';
 import { InfoCircleFilledIcon } from '@elementor/icons';
 import { Alert, AlertAction, AlertTitle, Box, Infotip, Link } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -26,6 +31,23 @@ type RestrictedLinkInfotipProps = PropsWithChildren< {
 	isVisible: boolean;
 } >;
 
+function isTargetInCurrentDocument( elementId: string | null | undefined ): boolean {
+	if ( ! elementId ) {
+		return false;
+	}
+
+	const el = getContainer( elementId )?.view?.el;
+
+	if ( ! el ) {
+		return false;
+	}
+
+	const targetDocId = el.closest( '[data-elementor-id]' )?.getAttribute( 'data-elementor-id' );
+	const currentDocId = String( getCurrentDocumentId() ?? '' );
+
+	return !! ( targetDocId && currentDocId && targetDocId === currentDocId );
+}
+
 export const RestrictedLinkInfotip: React.FC< RestrictedLinkInfotipProps > = ( {
 	linkInLinkRestriction,
 	isVisible,
@@ -33,6 +55,8 @@ export const RestrictedLinkInfotip: React.FC< RestrictedLinkInfotipProps > = ( {
 } ) => {
 	const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
 
+	const showTakeMeThereCta = !! ( elementId && isTargetInCurrentDocument( elementId ) );
+
 	const handleTakeMeClick = () => {
 		if ( elementId ) {
 			selectElement( elementId );
@@ -45,14 +69,16 @@ export const RestrictedLinkInfotip: React.FC< RestrictedLinkInfotipProps > = ( {
 			icon={ <InfoCircleFilledIcon /> }
 			size="small"
 			action={
-				<AlertAction
-					sx={ { width: 'fit-content' } }
-					variant="contained"
-					color="secondary"
-					onClick={ handleTakeMeClick }
-				>
-					{ __( 'Take me there', 'elementor' ) }
-				</AlertAction>
+				showTakeMeThereCta ? (
+					<AlertAction
+						sx={ { width: 'fit-content' } }
+						variant="contained"
+						color="secondary"
+						onClick={ handleTakeMeClick }
+					>
+						{ __( 'Take me there', 'elementor' ) }
+					</AlertAction>
+				) : undefined
 			}
 		>
 			<AlertTitle>{ __( 'Nested links', 'elementor' ) }</AlertTitle>

package/src/controls/link-control.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import { getLinkInLinkRestriction } from '@elementor/editor-elements';
+import { useEffect, useState } from 'react';
+import { getLinkInLinkRestriction, type LinkInLinkRestriction } from '@elementor/editor-elements';
 import { linkPropTypeUtil, type LinkPropValue } from '@elementor/editor-props';
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Collapse, Grid, IconButton, Stack } from '@elementor/ui';
-import { debounce } from '@elementor/utils';
+import { useDebouncedCallback } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -62,36 +63,39 @@ export const LinkControl = createControl( ( props: Props ) => {
 
 	const shouldDisableAddingLink = ! isActive && linkInLinkRestriction.shouldRestrict;
 
-	const debouncedCheckRestriction = useMemo(
-		() =>
-			debounce( () => {
-				const newRestriction = getLinkInLinkRestriction( elementId, value ?? linkPlaceholder );
+	const debouncedCheckRestriction = useDebouncedCallback( () => {
+		const newRestriction = getLinkInLinkRestriction( elementId, value ?? linkPlaceholder );
 
-				if ( newRestriction.shouldRestrict && isActive && ! linkPlaceholder ) {
-					setIsActive( false );
-				}
+		if ( newRestriction.shouldRestrict && isActive && ! linkPlaceholder ) {
+			setIsActive( false );
 
-				setLinkInLinkRestriction( newRestriction );
-			}, 300 ),
-		[ elementId, isActive, value, linkPlaceholder ]
+			if ( value !== null ) {
+				setValue( null );
+			}
+		}
+
+		setLinkInLinkRestriction( ( prev ) => ( isSameRestriction( prev, newRestriction ) ? prev : newRestriction ) );
+	}, 300 );
+
+	useListenTo(
+		commandEndEvent( 'document/elements/set-settings' ),
+		() => {
+			debouncedCheckRestriction();
+		},
+		[ debouncedCheckRestriction ]
 	);
 
 	useEffect( () => {
 		debouncedCheckRestriction();
 
-		const handleInlineLinkChanged = ( event: Event ) => {
-			const customEvent = event as CustomEvent< { elementId: string } >;
-
-			if ( customEvent.detail.elementId === elementId ) {
-				debouncedCheckRestriction();
-			}
+		const handleInlineLinkChanged = () => {
+			debouncedCheckRestriction();
 		};
 
 		window.addEventListener( 'elementor:inline-link-changed', handleInlineLinkChanged );
 
 		return () => {
 			window.removeEventListener( 'elementor:inline-link-changed', handleInlineLinkChanged );
-			debouncedCheckRestriction.cancel();
 		};
 	}, [ elementId, debouncedCheckRestriction ] );
 
@@ -181,3 +185,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 		</PropProvider>
 	);
 } );
+
+function isSameRestriction( a: LinkInLinkRestriction, b: LinkInLinkRestriction ): boolean {
+	return a.shouldRestrict === b.shouldRestrict && a.reason === b.reason && a.elementId === b.elementId;
+}