@elementor/editor-canvas 3.33.0-99 → 3.34.2

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { InlineEditor } from '@elementor/editor-controls';
+import { getContainer, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
+import { htmlPropTypeUtil } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+import { debounce } from '@elementor/utils';
+import { FloatingPortal } from '@floating-ui/react';
+
+import { useFloatingOnElement } from '../hooks/use-floating-on-element';
+import type { ElementOverlayProps } from '../types/element-overlay';
+import { getInlineEditablePropertyName } from '../utils/inline-editing-utils';
+import { CANVAS_WRAPPER_ID } from './outline-overlay';
+
+const OVERLAY_Z_INDEX = 1000;
+const DEBOUNCE_DELAY = 100;
+
+export const InlineEditorOverlay = ( { element, isSelected, id }: ElementOverlayProps ): React.ReactElement | null => {
+	const { floating, isVisible } = useFloatingOnElement( { element, isSelected } );
+
+	const propertyName = React.useMemo( () => {
+		const container = getContainer( id );
+		return getInlineEditablePropertyName( container );
+	}, [ id ] );
+
+	const contentProp = useElementSetting( id, propertyName );
+	const value = React.useMemo( () => htmlPropTypeUtil.extract( contentProp ) || '', [ contentProp ] );
+
+	const debouncedUpdateRef = React.useRef< ReturnType< typeof debounce > | null >( null );
+	const lastValueRef = React.useRef< string >( '' );
+
+	React.useEffect( () => {
+		debouncedUpdateRef.current = debounce( ( newValue: string ) => {
+			const textContent = newValue.replace( /<[^>]*>/g, '' ).trim();
+			const valueToSave = textContent === '' ? '&nbsp;' : newValue;
+
+			updateElementSettings( {
+				id,
+				props: {
+					[ propertyName ]: htmlPropTypeUtil.create( valueToSave ),
+				},
+				withHistory: true,
+			} );
+		}, DEBOUNCE_DELAY );
+
+		return () => {
+			debouncedUpdateRef.current?.cancel?.();
+		};
+	}, [ id, propertyName ] );
+
+	const handleValueChange = React.useCallback( ( newValue: string ) => {
+		lastValueRef.current = newValue;
+		debouncedUpdateRef.current?.( newValue );
+	}, [] );
+
+	React.useEffect( () => {
+		if ( ! isVisible && debouncedUpdateRef.current?.pending?.() ) {
+			debouncedUpdateRef.current.flush( lastValueRef.current );
+		}
+	}, [ isVisible ] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
+			<Box
+				ref={ floating.setRef }
+				style={ {
+					...floating.styles,
+					zIndex: OVERLAY_Z_INDEX,
+					pointerEvents: 'auto',
+				} }
+			>
+				<InlineEditor value={ value } setValue={ handleValueChange } showToolbar={ isSelected } />
+			</Box>
+		</FloatingPortal>
+	);
+};

package/src/components/interactions-renderer.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { Portal } from '@elementor/ui';
+
+import { useInteractionsItems } from '../hooks/use-interactions-items';
+import { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';
+
+export function InteractionsRenderer() {
+	const container = usePortalContainer();
+	const interactionItems = useInteractionsItems();
+
+	if ( ! container ) {
+		return null;
+	}
+
+	const interactionsData = JSON.stringify( Array.isArray( interactionItems ) ? interactionItems : [] );
+
+	return (
+		<Portal container={ container }>
+			<script
+				type="application/json"
+				data-e-interactions="true"
+				dangerouslySetInnerHTML={ {
+					__html: interactionsData,
+				} }
+			/>
+		</Portal>
+	);
+}
+
+function usePortalContainer() {
+	return useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );
+}

package/src/components/{element-overlay.tsx → outline-overlay.tsx}

@@ -4,13 +4,12 @@ import { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';
 
 import { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-element';
 import { useFloatingOnElement } from '../hooks/use-floating-on-element';
+import { useHasOverlapping } from '../hooks/use-has-overlapping';
+import type { ElementOverlayProps } from '../types/element-overlay';
 
 export const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';
 
-type Props = {
-	element: HTMLElement;
-	isSelected: boolean;
-	id: string;
+type Props = ElementOverlayProps & {
 	isSmallerOffset?: boolean;
 };
 
@@ -22,15 +21,17 @@ const OverlayBox = styled( Box, {
 	pointerEvents: 'none',
 } ) );
 
-export function ElementOverlay( { element, isSelected, id }: Props ) {
+export const OutlineOverlay = ( { element, isSelected, id }: Props ): React.ReactElement | false => {
 	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
+	const hasOverlapping = useHasOverlapping();
 
 	useBindReactPropsToElement( element, getReferenceProps );
 	const isSmallerOffset = element.offsetHeight <= 1;
 
 	return (
-		isVisible && (
+		isVisible &&
+		! hasOverlapping && (
 			<FloatingPortal id={ CANVAS_WRAPPER_ID }>
 				<OverlayBox
 					ref={ floating.setRef }
@@ -44,4 +45,4 @@ export function ElementOverlay( { element, isSelected, id }: Props ) {
 			</FloatingPortal>
 		)
 	);
-}
+};

package/src/components/style-renderer.tsx

@@ -18,10 +18,8 @@ export function StyleRenderer() {
 
 	return (
 		<Portal container={ container }>
-			{ styleItems.map( ( item ) => (
-				<style data-e-style-id={ item.id } key={ `${ item.id }-${ item.breakpoint }` }>
-					{ item.value }
-				</style>
+			{ styleItems.map( ( item, i ) => (
+				<style key={ `${ item.id }-${ i }-${ item.breakpoint }` }>{ item.value }</style>
 			) ) }
 			{ linksAttrs.map( ( attrs ) => (
 				<link { ...attrs } key={ attrs.id } />

package/src/hooks/__tests__/use-has-overlapping.test.ts

@@ -0,0 +1,187 @@
+import { createDOMElement } from 'test-utils';
+import { renderHook } from '@testing-library/react';
+
+import { type CanvasExtendedWindow } from '../../sync/types';
+import { useHasOverlapping } from '../use-has-overlapping';
+
+const OFF_CANVAS_CLASS = 'e-off-canvas';
+
+describe( 'useHasOverlapping', () => {
+	let mockPreviewFrame: HTMLIFrameElement;
+	let mockDocument: Document;
+
+	const setupPreviewFrame = ( hasOffCanvas: boolean, isVisible: boolean = true ) => {
+		// Arrange - Create mock iframe and document
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		if ( hasOffCanvas ) {
+			const offCanvasElement = createDOMElement( {
+				tag: 'div',
+				attrs: { class: OFF_CANVAS_CLASS },
+			} );
+
+			// Mock checkVisibility method
+			offCanvasElement.checkVisibility = jest.fn().mockReturnValue( isVisible );
+
+			mockDocument.body.appendChild( offCanvasElement );
+		}
+
+		// Setup the content window with the mock document
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		// Setup window.elementor.$preview
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+	};
+
+	const cleanupPreviewFrame = () => {
+		delete ( window as unknown as CanvasExtendedWindow ).elementor;
+	};
+
+	afterEach( () => {
+		cleanupPreviewFrame();
+	} );
+
+	it( 'should return false when preview frame is not available', () => {
+		// Arrange - No preview frame setup
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should return false when off-canvas element does not exist', () => {
+		// Arrange
+		setupPreviewFrame( false );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should return true when off-canvas element exists and is visible', () => {
+		// Arrange
+		setupPreviewFrame( true, true );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return false when off-canvas element exists but is not visible', () => {
+		// Arrange
+		setupPreviewFrame( true, false );
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+
+	it( 'should check visibility with correct options', () => {
+		// Arrange
+		setupPreviewFrame( true, true );
+
+		// Act
+		renderHook( () => useHasOverlapping() );
+
+		// Assert
+		// eslint-disable-next-line testing-library/no-node-access
+		const offCanvasElement = mockDocument.querySelector( `.${ OFF_CANVAS_CLASS }` );
+		expect( offCanvasElement?.checkVisibility ).toHaveBeenCalledWith( {
+			opacityProperty: true,
+			visibilityProperty: true,
+			contentVisibilityAuto: true,
+		} );
+	} );
+
+	it( 'should return true when multiple off-canvas elements exist and at least one is visible', () => {
+		// Arrange
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		const offCanvasElement1 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement1.checkVisibility = jest.fn().mockReturnValue( false );
+
+		const offCanvasElement2 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement2.checkVisibility = jest.fn().mockReturnValue( true );
+
+		mockDocument.body.appendChild( offCanvasElement1 );
+		mockDocument.body.appendChild( offCanvasElement2 );
+
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( true );
+	} );
+
+	it( 'should return false when multiple off-canvas elements exist but none are visible', () => {
+		// Arrange
+		mockPreviewFrame = createDOMElement( { tag: 'iframe' } ) as HTMLIFrameElement;
+		mockDocument = document.implementation.createHTMLDocument( 'Preview' );
+
+		const offCanvasElement1 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement1.checkVisibility = jest.fn().mockReturnValue( false );
+
+		const offCanvasElement2 = createDOMElement( {
+			tag: 'div',
+			attrs: { class: OFF_CANVAS_CLASS },
+		} );
+		offCanvasElement2.checkVisibility = jest.fn().mockReturnValue( false );
+
+		mockDocument.body.appendChild( offCanvasElement1 );
+		mockDocument.body.appendChild( offCanvasElement2 );
+
+		Object.defineProperty( mockPreviewFrame, 'contentWindow', {
+			value: {
+				document: mockDocument,
+			},
+			writable: true,
+		} );
+
+		( window as unknown as CanvasExtendedWindow ).elementor = {
+			$preview: [ mockPreviewFrame ],
+		};
+
+		// Act
+		const { result } = renderHook( () => useHasOverlapping() );
+
+		// Assert
+		expect( result.current ).toBe( false );
+	} );
+} );

package/src/hooks/use-floating-on-element.ts

@@ -8,6 +8,7 @@ type Options = {
 
 export function useFloatingOnElement( { element, isSelected }: Options ) {
 	const [ isOpen, setIsOpen ] = useState( false );
+	const sizeModifier = 2;
 
 	const { refs, floatingStyles, context } = useFloating( {
 		// Must be controlled for interactions (like hover) to work.
@@ -18,15 +19,17 @@ export function useFloatingOnElement( { element, isSelected }: Options ) {
 
 		middleware: [
 			// Match the floating element's size to the reference element.
-			size( {
-				apply( { elements, rects } ) {
-					Object.assign( elements.floating.style, {
-						width: `${ rects.reference.width + 2 }px`,
-						height: `${ rects.reference.height + 2 }px`,
-					} );
-				},
-			} ),
 
+			size( () => {
+				return {
+					apply( { elements, rects } ) {
+						Object.assign( elements.floating.style, {
+							width: `${ rects.reference.width + sizeModifier }px`,
+							height: `${ rects.reference.height + sizeModifier }px`,
+						} );
+					},
+				};
+			} ),
 			// Center the floating element on the reference element.
 			offset( ( { rects } ) => -rects.reference.height / 2 - rects.floating.height / 2 ),
 		],

package/src/hooks/use-has-overlapping.ts

@@ -0,0 +1,21 @@
+import { type CanvasExtendedWindow } from '../sync/types';
+
+const possibleOverlappingSelectors = [ '.e-off-canvas' ]; // can add more selectors here if needed, make sure to loop through them to check classList
+
+export const useHasOverlapping = () => {
+	const preview = ( window as unknown as CanvasExtendedWindow ).elementor?.$preview?.[ 0 ];
+	if ( ! preview ) {
+		return false;
+	}
+	const hasOverlapping = possibleOverlappingSelectors
+		.map( ( selector ) => Array.from( preview?.contentWindow?.document.body.querySelectorAll( selector ) ?? [] ) )
+		.flat()
+		.some( ( elem ) =>
+			elem.checkVisibility( {
+				opacityProperty: true,
+				visibilityProperty: true,
+				contentVisibilityAuto: true,
+			} )
+		);
+	return hasOverlapping;
+};

package/src/hooks/use-interactions-items.ts

@@ -0,0 +1,108 @@
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
+import { type InteractionItem, interactionsRepository } from '@elementor/editor-interactions';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+
+import { useOnMount } from './use-on-mount';
+
+type ProviderAndInteractionItems = {
+	provider: ReturnType< typeof interactionsRepository.getProviders >[ 0 ];
+	items: InteractionItem[];
+};
+
+type ProviderAndSubscriber = {
+	provider: ReturnType< typeof interactionsRepository.getProviders >[ 0 ];
+	subscriber: () => void;
+};
+
+type ProviderAndInteractionItemsMap = Record< string, ProviderAndInteractionItems >;
+
+export function useInteractionsItems() {
+	const [ interactionItems, setInteractionItems ] = useState< ProviderAndInteractionItemsMap >( {} );
+
+	const providerAndSubscribers = useMemo( () => {
+		try {
+			const providers = interactionsRepository.getProviders();
+			const mapped = providers.map( ( provider ): ProviderAndSubscriber => {
+				return {
+					provider,
+					subscriber: createProviderSubscriber( {
+						provider,
+						setInteractionItems,
+					} ),
+				};
+			} );
+			return mapped;
+		} catch {
+			return [];
+		}
+	}, [] );
+
+	useEffect( () => {
+		if ( providerAndSubscribers.length === 0 ) {
+			return;
+		}
+
+		const unsubscribes = providerAndSubscribers.map( ( { provider, subscriber } ) => {
+			const safeSubscriber = () => {
+				try {
+					subscriber();
+				} catch {}
+			};
+
+			const unsubscribe = provider.subscribe( safeSubscriber );
+			return unsubscribe;
+		} );
+
+		return () => {
+			unsubscribes.forEach( ( unsubscribe ) => unsubscribe() );
+		};
+	}, [ providerAndSubscribers ] );
+
+	useOnMount( () => {
+		if ( providerAndSubscribers.length === 0 ) {
+			return;
+		}
+
+		registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
+			providerAndSubscribers.forEach( ( { subscriber } ) => {
+				try {
+					subscriber();
+				} catch {}
+			} );
+		} );
+	} );
+
+	return useMemo( () => {
+		const result = Object.values( interactionItems )
+			.sort( sortByProviderPriority )
+			.flatMap( ( { items } ) => items );
+
+		return result;
+	}, [ interactionItems ] );
+}
+
+function sortByProviderPriority(
+	{ provider: providerA }: ProviderAndInteractionItems,
+	{ provider: providerB }: ProviderAndInteractionItems
+) {
+	return providerA.priority - providerB.priority;
+}
+
+type CreateProviderSubscriberArgs = {
+	provider: ReturnType< typeof interactionsRepository.getProviders >[ 0 ];
+	setInteractionItems: Dispatch< SetStateAction< ProviderAndInteractionItemsMap > >;
+};
+
+function createProviderSubscriber( { provider, setInteractionItems }: CreateProviderSubscriberArgs ) {
+	return () => {
+		try {
+			const items = provider.actions.all();
+			const providerKey = provider.getKey();
+
+			setInteractionItems( ( prev ) => ( {
+				...prev,
+				[ providerKey ]: { provider, items },
+			} ) );
+		} catch {}
+	};
+}

package/src/hooks/use-style-items.ts

@@ -1,5 +1,6 @@
 import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
 import { type BreakpointId, getBreakpoints } from '@elementor/editor-responsive';
+import { isClassState, type StyleDefinitionClassState } from '@elementor/editor-styles';
 import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 
@@ -58,19 +59,44 @@ export function useStyleItems() {
 	return useMemo(
 		() =>
 			Object.values( styleItems )
-				.sort( ( { provider: providerA }, { provider: providerB } ) => providerA.priority - providerB.priority )
+				.sort( sortByProviderPriority )
 				.flatMap( ( { items } ) => items )
-				.sort( ( { breakpoint: breakpointA }, { breakpoint: breakpointB } ) => {
-					return (
-						breakpointsOrder.indexOf( breakpointA as BreakpointId ) -
-						breakpointsOrder.indexOf( breakpointB as BreakpointId )
-					);
-				} ),
-		// eslint-disable-next-line
+				.sort( sortByStateType )
+				.sort( sortByBreakpoint( breakpointsOrder ) ),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ styleItems, breakpointsOrder.join( '-' ) ]
 	);
 }
+function sortByProviderPriority(
+	{ provider: providerA }: ProviderAndStyleItems,
+	{ provider: providerB }: ProviderAndStyleItems
+) {
+	return providerA.priority - providerB.priority;
+}
+
+function sortByBreakpoint( breakpointsOrder: BreakpointId[] ) {
+	return ( { breakpoint: breakpointA }: StyleItem, { breakpoint: breakpointB }: StyleItem ) =>
+		breakpointsOrder.indexOf( breakpointA as BreakpointId ) -
+		breakpointsOrder.indexOf( breakpointB as BreakpointId );
+}
+
+function sortByStateType( { state: stateA }: StyleItem, { state: stateB }: StyleItem ) {
+	if (
+		isClassState( stateA as StyleDefinitionClassState ) &&
+		! isClassState( stateB as StyleDefinitionClassState )
+	) {
+		return -1;
+	}
+
+	if (
+		! isClassState( stateA as StyleDefinitionClassState ) &&
+		isClassState( stateB as StyleDefinitionClassState )
+	) {
+		return 1;
+	}
+
+	return 0;
+}
 
 type CreateProviderSubscriberArgs = {
 	provider: StylesProvider;

package/src/index.ts

@@ -4,4 +4,13 @@ export { styleTransformersRegistry } from './style-transformers-registry';
 export { settingsTransformersRegistry } from './settings-transformers-registry';
 export { createTransformer } from './transformers/create-transformer';
 export { createTransformersRegistry } from './transformers/create-transformers-registry';
+export { type AnyTransformer } from './transformers/types';
 export { createPropsResolver, type PropsResolver } from './renderers/create-props-resolver';
+export { startDragElementFromPanel, endDragElementFromPanel } from './sync/drag-element-from-panel';
+export { registerElementType } from './legacy/init-legacy-views';
+export {
+	createTemplatedElementView,
+	type CreateTemplatedElementTypeOptions,
+} from './legacy/create-templated-element-type';
+export { getCanvasIframeDocument } from './sync/get-canvas-iframe-document';
+export * from './legacy/types';

package/src/init-settings-transformers.ts

@@ -1,7 +1,9 @@
 import { settingsTransformersRegistry } from './settings-transformers-registry';
 import { attributesTransformer } from './transformers/settings/attributes-transformer';
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
+import { dateTimeTransformer } from './transformers/settings/date-time-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
+import { queryTransformer } from './transformers/settings/query-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
 import { imageTransformer } from './transformers/shared/image-transformer';
 import { plainTransformer } from './transformers/shared/plain-transformer';
@@ -10,8 +12,10 @@ export function initSettingsTransformers() {
 	settingsTransformersRegistry
 		.register( 'classes', createClassesTransformer() )
 		.register( 'link', linkTransformer )
+		.register( 'query', queryTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'attributes', attributesTransformer )
+		.register( 'date-time', dateTimeTransformer )
 		.registerFallback( plainTransformer );
 }

package/src/init.tsx

@@ -1,11 +1,16 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
+import { init as initInteractionsRepository } from '@elementor/editor-interactions';
+import { getMCPByDomain } from '@elementor/editor-mcp';
 
 import { ClassesRename } from './components/classes-rename';
 import { ElementsOverlays } from './components/elements-overlays';
+import { InteractionsRenderer } from './components/interactions-renderer';
 import { StyleRenderer } from './components/style-renderer';
 import { initSettingsTransformers } from './init-settings-transformers';
 import { initStyleTransformers } from './init-style-transformers';
 import { initLegacyViews } from './legacy/init-legacy-views';
+import { initCanvasMcp } from './mcp/canvas-mcp';
+import { mcpDescription } from './mcp/mcp-description';
 import { initLinkInLinkPrevention } from './prevent-link-in-link-commands';
 import { initStyleCommands } from './style-commands/init-style-commands';
 
@@ -19,6 +24,8 @@ export function init() {
 
 	initSettingsTransformers();
 
+	initInteractionsRepository();
+
 	injectIntoTop( {
 		id: 'elements-overlays',
 		component: ElementsOverlays,
@@ -29,8 +36,19 @@ export function init() {
 		component: StyleRenderer,
 	} );
 
+	injectIntoTop( {
+		id: 'canvas-interactions-render',
+		component: InteractionsRenderer,
+	} );
+
 	injectIntoLogic( {
 		id: 'classes-rename',
 		component: ClassesRename,
 	} );
+
+	initCanvasMcp(
+		getMCPByDomain( 'canvas', {
+			instructions: mcpDescription,
+		} )
+	);
 }