@elementor/editor-canvas 4.2.0-946 → 4.2.0-beta1

package/src/components/elements-overlays.tsx

@@ -8,19 +8,27 @@ import {
 } from '@elementor/editor-v1-adapters';
 
 import type { ElementOverlayConfig } from '../types/element-overlay';
-import { GridOutlineOverlay } from './grid-outline';
+import { GridEmptyCellPositioner, GridOutlineOverlay } from './grid-outline';
 import { OutlineOverlay } from './outline-overlay';
 
 const ELEMENTS_DATA_ATTR = 'atomic';
+const E_GRID_TYPE = 'e-grid';
+
+const isGridElement = ( element: HTMLElement ): boolean =>
+	[ element.dataset.eType, element.dataset.element_type ].includes( E_GRID_TYPE );
 
 const overlayRegistry: ElementOverlayConfig[] = [
 	{
 		component: OutlineOverlay,
 		shouldRender: () => true,
 	},
+	{
+		component: GridEmptyCellPositioner,
+		shouldRender: ( { element } ) => isGridElement( element ),
+	},
 	{
 		component: GridOutlineOverlay,
-		shouldRender: ( { element, isSelected } ) => isSelected && element.dataset.eType === 'e-grid',
+		shouldRender: ( { element, isSelected } ) => isSelected && isGridElement( element ),
 	},
 ];
 

package/src/components/grid-outline/grid-empty-cell-positioner.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { useElementRect } from '../../hooks/use-element-rect';
+import { useGridTracks } from '../../hooks/use-grid-tracks';
+import type { ElementOverlayProps } from '../../types/element-overlay';
+import { findFirstEmptyCell } from '../../utils/find-first-empty-cell';
+
+const CSS_VAR_ROW = '--e-grid-empty-cell-row';
+const CSS_VAR_COL = '--e-grid-empty-cell-col';
+const CSS_VAR_VISIBILITY = '--e-grid-empty-cell-visibility';
+
+const clearGridEmptyCellStyles = ( target: HTMLElement ): void => {
+	target.style.removeProperty( CSS_VAR_ROW );
+	target.style.removeProperty( CSS_VAR_COL );
+	target.style.removeProperty( CSS_VAR_VISIBILITY );
+};
+
+export const GridEmptyCellPositioner = ( { element }: ElementOverlayProps ): null => {
+	const rect = useElementRect( element );
+	const tracks = useGridTracks( element, rect );
+
+	useEffect( () => {
+		if ( ! element ) {
+			return;
+		}
+
+		const firstEmpty = findFirstEmptyCell( element, tracks.columns.length, tracks.rows.length );
+
+		if ( ! firstEmpty ) {
+			element.style.removeProperty( CSS_VAR_ROW );
+			element.style.removeProperty( CSS_VAR_COL );
+			element.style.setProperty( CSS_VAR_VISIBILITY, 'hidden' );
+			return () => clearGridEmptyCellStyles( element );
+		}
+
+		element.style.setProperty( CSS_VAR_ROW, String( firstEmpty.row + 1 ) );
+		element.style.setProperty( CSS_VAR_COL, String( firstEmpty.col + 1 ) );
+		element.style.setProperty( CSS_VAR_VISIBILITY, 'visible' );
+
+		return () => {
+			clearGridEmptyCellStyles( element );
+		};
+	}, [ element, tracks ] );
+
+	return null;
+};

package/src/components/grid-outline/grid-outline.tsx

@@ -54,6 +54,14 @@ const renderLines = ( tracks: GridTracks, width: number, height: number ) => {
 	];
 };
 
+const isDragActiveFromDom = ( element: HTMLElement | null ): boolean => {
+	return Boolean(
+		element?.querySelector(
+			'.e-dragging-over, .elementor-dragging-on-child, .elementor-draggable-over, .elementor-widget-placeholder, .elementor-sortable-placeholder'
+		)
+	);
+};
+
 export function GridOutline( { element, tracks, width, height }: Props ) {
 	const cells = useMemo( () => computeCellRects( tracks, width, height ), [ tracks, width, height ] );
 	const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
@@ -76,7 +84,9 @@ export function GridOutline( { element, tracks, width, height }: Props ) {
 			>
 				{ hasGap ? renderCells( cells, tracks.borderColor ) : renderLines( tracks, width, height ) }
 			</svg>
-			{ emptyCellRect && <FirstEmptyCell rect={ emptyCellRect } color={ tracks.borderColor } /> }
+			{ emptyCellRect && ! isDragActiveFromDom( element ) && (
+				<FirstEmptyCell rect={ emptyCellRect } color={ tracks.borderColor } />
+			) }
 		</>
 	);
 }

package/src/components/grid-outline/index.ts

@@ -1 +1,2 @@
+export { GridEmptyCellPositioner } from './grid-empty-cell-positioner';
 export { GridOutlineOverlay } from './grid-outline-overlay';

package/src/index.ts

@@ -44,3 +44,4 @@ export { UnknownStyleTypeError, UnknownStyleStateError } from './renderers/error
 export { useCanvasDocument } from './hooks/use-canvas-document';
 export { useEscapeOnCanvas } from './hooks/use-escape-on-canvas';
 export { doAfterRender } from './utils/after-render';
+export { ELEMENT_ADDED_EVENT, type ElementAddedEvent } from './mcp/tools/build-composition/tool';

package/src/mcp/tools/build-composition/tool.ts

@@ -5,10 +5,13 @@ import {
 	getContainer,
 	getWidgetsCache,
 	type V1Element,
+	type V1ElementData,
 } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
 
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
+import { trackCanvasEvent } from '../../../utils/tracking';
 import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 import { BEST_PRACTICES_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
@@ -19,6 +22,13 @@ import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 import { adaptLeafRootParams } from './xml-leaf-wrapper';
 
+export type ElementAddedEvent = {
+	element: V1ElementData;
+	executedBy: 'mcp_tool' | 'user';
+};
+
+export const ELEMENT_ADDED_EVENT = 'elementor/canvas/element-added';
+
 export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 	const { addTool, resource } = reg;
 
@@ -80,6 +90,18 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
 
+				rootContainers.forEach( ( container ) => {
+					const elementData = container.model?.toJSON();
+
+					if ( elementData ) {
+						onElementAdded( elementData as V1ElementData );
+					}
+				} );
+
+				Object.values( stylesConfig ).forEach( ( styleValue ) => {
+					dispatchMcpStylesAppliedEvent( { styleValue } );
+				} );
+
 				if ( configErrors.length ) {
 					errors.push( ...configErrors.map( ( msg ) => new Error( msg ) ) );
 				}
@@ -186,3 +208,30 @@ function assertCompositionXmlUsesV4WidgetsOnly( xmlStructure: string ) {
 		}
 	}
 }
+
+function onElementAdded( element: V1ElementData ) {
+	const elType = element.elType ?? '';
+	const widgetType = element.widgetType ?? '';
+	const elementName = elType === 'widget' ? widgetType : elType;
+
+	trackCanvasEvent( {
+		eventName: 'add_element',
+		executed_by: 'mcp_tool',
+		element_name: elementName,
+		element_type: elType,
+		widget_type: widgetType,
+	} );
+
+	const event: ElementAddedEvent = {
+		element,
+		executedBy: 'mcp_tool',
+	};
+
+	window.dispatchEvent( new CustomEvent( ELEMENT_ADDED_EVENT, { detail: event } ) );
+
+	if ( element.elements?.length ) {
+		element.elements?.forEach( ( childElement ) => {
+			onElementAdded( childElement );
+		} );
+	}
+}

package/src/mcp/tools/configure-element/tool.ts

@@ -1,5 +1,6 @@
 import { getContainer, getWidgetsCache } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { dispatchMcpStylesAppliedEvent } from '@elementor/editor-mcp';
 import { type PropValue, Schema } from '@elementor/editor-props';
 
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
@@ -115,6 +116,8 @@ async function applyStyleFromCss( opts: {
 			propertyValue: styleValue,
 			customCssWriteMode: 'merge-with-stored',
 		} );
+
+		dispatchMcpStylesAppliedEvent( { styleValue } );
 	} catch ( error ) {
 		throw new Error(
 			createUpdateErrorMessage( {

package/src/utils/tracking.ts

@@ -0,0 +1,14 @@
+import { trackEvent } from '@elementor/events';
+
+type ElementEventData = {
+	eventName: 'add_element';
+	element_name: string;
+	element_type: string;
+	widget_type: string;
+	location?: string;
+	executed_by: 'user' | 'mcp_tool' | 'system';
+};
+
+export const trackCanvasEvent = ( data: ElementEventData ) => {
+	trackEvent( data );
+};