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

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": "3.35.0-428",
+  "version": "3.35.0-430",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.35.0-428",
-    "@elementor/editor-elements": "3.35.0-428",
-    "@elementor/editor-props": "3.35.0-428",
-    "@elementor/editor-responsive": "3.35.0-428",
-    "@elementor/editor-ui": "3.35.0-428",
-    "@elementor/editor-v1-adapters": "3.35.0-428",
-    "@elementor/env": "3.35.0-428",
-    "@elementor/http-client": "3.35.0-428",
+    "@elementor/editor-current-user": "3.35.0-430",
+    "@elementor/editor-elements": "3.35.0-430",
+    "@elementor/editor-props": "3.35.0-430",
+    "@elementor/editor-responsive": "3.35.0-430",
+    "@elementor/editor-ui": "3.35.0-430",
+    "@elementor/editor-v1-adapters": "3.35.0-430",
+    "@elementor/env": "3.35.0-430",
+    "@elementor/http-client": "3.35.0-430",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "3.35.0-428",
-    "@elementor/mixpanel": "3.35.0-428",
-    "@elementor/query": "3.35.0-428",
-    "@elementor/session": "3.35.0-428",
+    "@elementor/locations": "3.35.0-430",
+    "@elementor/mixpanel": "3.35.0-430",
+    "@elementor/query": "3.35.0-430",
+    "@elementor/session": "3.35.0-430",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-428",
-    "@elementor/wp-media": "3.35.0-428",
+    "@elementor/utils": "3.35.0-430",
+    "@elementor/wp-media": "3.35.0-430",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/inline-editor-toolbar.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useMemo, useRef, useState } from 'react';
+import { type ElementID, getElementSetting } from '@elementor/editor-elements';
+import { type LinkPropValue } from '@elementor/editor-props';
 import {
 	BoldIcon,
 	ItalicIcon,
@@ -24,8 +26,12 @@ import { __ } from '@wordpress/i18n';
 
 import { UrlPopover } from './url-popover';
 
+const checkIfElementHasLink = ( elementId: ElementID ): boolean =>
+	!! getElementSetting< LinkPropValue >( elementId, 'link' )?.value?.destination;
+
 type InlineEditorToolbarProps = {
 	editor: Editor;
+	elementId?: ElementID;
 };
 
 const toolbarButtons = {
@@ -101,18 +107,27 @@ const { clear: clearButton, ...formatButtons } = toolbarButtons;
 
 const possibleFormats: FormatAction[] = Object.keys( formatButtons ) as FormatAction[];
 
-export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
+export const InlineEditorToolbar = ( { editor, elementId }: InlineEditorToolbarProps ) => {
 	const [ urlValue, setUrlValue ] = useState( '' );
 	const [ openInNewTab, setOpenInNewTab ] = useState( false );
 	const toolbarRef = useRef< HTMLDivElement >( null );
 	const linkPopupState = usePopupState( { variant: 'popover' } );
+	const hasLinkOnElement = elementId ? checkIfElementHasLink( elementId ) : false;
 
 	const editorState = useEditorState( {
 		editor,
 		selector: ( ctx ) => possibleFormats.filter( ( format ) => ctx.editor.isActive( format ) ),
 	} );
 
-	const formatButtonsList = useMemo( () => Object.values( formatButtons ), [] );
+	const formatButtonsList = 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' );
@@ -142,6 +157,15 @@ export const InlineEditorToolbar = ( { editor }: InlineEditorToolbarProps ) => {
 		} else {
 			editor.chain().focus().unsetLink().run();
 		}
+
+		if ( elementId ) {
+			window.dispatchEvent(
+				new CustomEvent( 'elementor:inline-link-changed', {
+					detail: { elementId },
+				} )
+			);
+		}
+
 		linkPopupState.close();
 	};
 

package/src/components/inline-editor.tsx

@@ -31,6 +31,8 @@ const ITALIC_KEYBOARD_SHORTCUT = 'i';
 const BOLD_KEYBOARD_SHORTCUT = 'b';
 const UNDERLINE_KEYBOARD_SHORTCUT = 'u';
 
+import type { ElementID } from '@elementor/editor-elements';
+
 type InlineEditorProps = {
 	value: string | null;
 	setValue: ( value: string | null ) => void;
@@ -42,6 +44,7 @@ type InlineEditorProps = {
 	autofocus?: boolean;
 	getInitialPopoverPosition?: () => { left: number; top: number };
 	expectedTag?: string | null;
+	elementId?: ElementID;
 };
 
 const INITIAL_STYLE = 'margin:0;padding:0;';
@@ -124,6 +127,7 @@ export const InlineEditor = forwardRef(
 			onBlur = undefined,
 			getInitialPopoverPosition = undefined,
 			expectedTag = null,
+			elementId = undefined,
 		}: InlineEditorProps,
 		ref
 	) => {
@@ -289,7 +293,7 @@ export const InlineEditor = forwardRef(
 						anchorOrigin={ { vertical: 'top', horizontal: 'center' } }
 						transformOrigin={ { vertical: 'bottom', horizontal: 'center' } }
 					>
-						<InlineEditorToolbar editor={ editor } />
+						<InlineEditorToolbar editor={ editor } elementId={ elementId } />
 					</Popover>
 				) }
 			</>

package/src/controls/link-control.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { getLinkInLinkRestriction } from '@elementor/editor-elements';
 import { linkPropTypeUtil, type LinkPropValue } from '@elementor/editor-props';
 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 { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -57,6 +58,39 @@ export const LinkControl = createControl( ( props: Props ) => {
 	const [ linkInLinkRestriction, setLinkInLinkRestriction ] = useState( getLinkInLinkRestriction( elementId ) );
 	const shouldDisableAddingLink = ! isActive && linkInLinkRestriction.shouldRestrict;
 
+	const debouncedCheckRestriction = useMemo(
+		() =>
+			debounce( () => {
+				const newRestriction = getLinkInLinkRestriction( elementId );
+
+				if ( newRestriction.shouldRestrict && isActive ) {
+					setIsActive( false );
+				}
+
+				setLinkInLinkRestriction( newRestriction );
+			}, 300 ),
+		[ elementId, isActive ]
+	);
+
+	useEffect( () => {
+		debouncedCheckRestriction();
+
+		const handleInlineLinkChanged = ( event: Event ) => {
+			const customEvent = event as CustomEvent< { elementId: string } >;
+
+			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 ) );