@elementor/editor-canvas 4.1.0-802 → 4.1.0-804

package/src/mcp/resources/selected-element-resource.ts

@@ -0,0 +1,217 @@
+import { getContainer, getSelectedElements, getWidgetsCache, type V1Element } from '@elementor/editor-elements';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import {
+	__privateListenTo as listenTo,
+	commandEndEvent,
+	type CommandEvent,
+	type ListenerEvent,
+} from '@elementor/editor-v1-adapters';
+
+export const SELECTED_ELEMENT_URI = 'elementor://context/selected-element';
+
+type WidgetVersion = 'v3' | 'v4';
+
+type SelectionContainer = V1Element & {
+	type?: string;
+	label?: string;
+	model: V1Element[ 'model' ] & {
+		config?: { atomic?: boolean };
+	};
+	settings: V1Element[ 'settings' ] & {
+		toJSON?: () => Record< string, unknown >;
+	};
+};
+
+type SelectedElementPayload = {
+	elementDisplayName: string | null;
+	elementType: string | null;
+	properties: Record< string, unknown > | null;
+	selectedElementId: string | null;
+	selectedParentId: string | null;
+	version: WidgetVersion | null;
+	widgetType: string | null;
+};
+
+export const initSelectedElementResource = ( reg: MCPRegistryEntry ) => {
+	const { resource, sendResourceUpdated } = reg;
+
+	let currentPayloadText: string | null = null;
+
+	const publishIfChanged = ( payload: SelectedElementPayload ) => {
+		const nextText = JSON.stringify( payload );
+
+		if ( nextText !== currentPayloadText ) {
+			currentPayloadText = nextText;
+			sendResourceUpdated( { uri: SELECTED_ELEMENT_URI } );
+		}
+	};
+
+	const onCommand = ( e: ListenerEvent ) => {
+		if ( e.type !== 'command' ) {
+			return;
+		}
+
+		const commandEvent = e as CommandEvent< { container?: SelectionContainer } >;
+
+		if ( commandEvent.command === 'document/elements/deselect-all' ) {
+			publishIfChanged( createEmptySelectedElementPayload() );
+			return;
+		}
+
+		if (
+			commandEvent.command !== 'document/elements/select' &&
+			commandEvent.command !== 'document/elements/settings'
+		) {
+			return;
+		}
+
+		const { container } = commandEvent.args || {};
+
+		if ( container?.id ) {
+			publishIfChanged( buildPayloadFromContainer( container ) );
+			return;
+		}
+
+		publishIfChanged( readSelectionFromEditor() );
+	};
+
+	listenTo(
+		[
+			commandEndEvent( 'document/elements/select' ),
+			commandEndEvent( 'document/elements/deselect-all' ),
+			commandEndEvent( 'document/elements/settings' ),
+		],
+		onCommand
+	);
+
+	publishIfChanged( readSelectionFromEditor() );
+
+	resource(
+		'selected-element',
+		SELECTED_ELEMENT_URI,
+		{
+			description: 'Currently selected Elementor element context.',
+		},
+		async () => {
+			return {
+				contents: [
+					{
+						uri: SELECTED_ELEMENT_URI,
+						text: JSON.stringify( readSelectionFromEditor(), null, 2 ),
+					},
+				],
+			};
+		}
+	);
+};
+
+function createEmptySelectedElementPayload(): SelectedElementPayload {
+	return {
+		elementDisplayName: null,
+		elementType: null,
+		properties: null,
+		selectedElementId: null,
+		selectedParentId: null,
+		version: null,
+		widgetType: null,
+	};
+}
+
+function readSelectionFromEditor(): SelectedElementPayload {
+	const elements = getSelectedElements();
+
+	if ( elements.length !== 1 ) {
+		return createEmptySelectedElementPayload();
+	}
+
+	const container = getContainer( elements[ 0 ].id );
+
+	return buildPayloadFromContainer( container );
+}
+
+function buildPayloadFromContainer( container: SelectionContainer | null ): SelectedElementPayload {
+	if ( ! container?.id ) {
+		return createEmptySelectedElementPayload();
+	}
+
+	const widgetType = container.model.get( 'widgetType' ) ?? null;
+	const elementType = container.type ?? 'widget';
+
+	return {
+		elementDisplayName: getElementDisplayName( container ),
+		elementType,
+		properties: getElementProperties( container, widgetType ),
+		selectedElementId: container.id,
+		selectedParentId: container.parent?.id ?? null,
+		version: resolveElementVersion( container, widgetType ),
+		widgetType,
+	};
+}
+
+function resolveElementVersion( container: SelectionContainer, widgetType: string | null ): WidgetVersion {
+	if ( container.model?.config?.atomic ) {
+		return 'v4';
+	}
+	if ( widgetType && getWidgetsCache()?.[ widgetType ]?.atomic_props_schema ) {
+		return 'v4';
+	}
+	return 'v3';
+}
+
+function getElementProperties(
+	container: SelectionContainer,
+	widgetType: string | null
+): Record< string, unknown > | null {
+	const settings = container.settings?.toJSON?.();
+	if ( ! settings || typeof settings !== 'object' ) {
+		return null;
+	}
+
+	const widgetConfig = widgetType ? getWidgetsCache()?.[ widgetType ] : null;
+	const controls = widgetConfig?.controls as Record< string, { default?: unknown } > | undefined;
+
+	const filtered: Record< string, unknown > = {};
+
+	for ( const [ key, value ] of Object.entries( settings ) ) {
+		if ( value === undefined || value === null || value === '' ) {
+			continue;
+		}
+
+		const controlDefault = controls?.[ key ]?.default;
+		if ( controlDefault !== undefined && JSON.stringify( value ) === JSON.stringify( controlDefault ) ) {
+			continue;
+		}
+
+		filtered[ key ] = value;
+	}
+
+	return Object.keys( filtered ).length > 0 ? filtered : null;
+}
+
+function getElementDisplayName( container: SelectionContainer ): string {
+	try {
+		if ( container.label ) {
+			return container.label;
+		}
+
+		const widgetType = container.model?.get?.( 'widgetType' );
+
+		if ( widgetType ) {
+			const capitalizedType = widgetType.charAt( 0 ).toUpperCase() + widgetType.slice( 1 );
+
+			return capitalizedType.replace( /-/g, ' ' );
+		}
+
+		if ( container.type === 'container' ) {
+			return 'Container';
+		}
+
+		if ( container.type === 'section' ) {
+			return 'Section';
+		}
+
+		return `Element ${ container.id }`;
+	} catch {
+		return `Element ${ container.id }`;
+	}
+}

package/src/mcp/resources/widgets-schema-resource.ts

@@ -11,6 +11,50 @@ import {
 } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
 
+import { hasV3Controls, isWidgetAvailableForLLM } from '../utils/element-data-util';
+
+const V3_LAYOUT_CONTROL_TYPES = new Set( [ 'section', 'tab', 'tabs' ] );
+
+type V3ControlMetadataEntry = {
+	default?: unknown;
+	type?: string;
+	options?: unknown;
+};
+
+function extractV3ControlsMetadata( controls: unknown ): Record< string, V3ControlMetadataEntry > {
+	if ( ! hasV3Controls( controls ) ) {
+		return {};
+	}
+	const result: Record< string, V3ControlMetadataEntry > = {};
+	for ( const [ controlKey, raw ] of Object.entries( controls as Record< string, unknown > ) ) {
+		if ( ! raw || typeof raw !== 'object' ) {
+			continue;
+		}
+		const control = raw as Record< string, unknown >;
+		const controlType = typeof control.type === 'string' ? control.type : undefined;
+		if ( controlType && V3_LAYOUT_CONTROL_TYPES.has( controlType ) ) {
+			continue;
+		}
+		const entry: V3ControlMetadataEntry = {};
+		if ( Object.prototype.hasOwnProperty.call( control, 'default' ) ) {
+			entry.default = control.default;
+		}
+		if ( controlType ) {
+			entry.type = controlType;
+		}
+		if ( Object.prototype.hasOwnProperty.call( control, 'options' ) && control.options !== undefined ) {
+			const options = control.options;
+			if ( options && typeof options === 'object' && ! Array.isArray( options ) ) {
+				entry.options = Object.keys( options as Record< string, unknown > );
+			} else {
+				entry.options = options;
+			}
+		}
+		result[ controlKey ] = entry;
+	}
+	return result;
+}
+
 export const WIDGET_SCHEMA_URI = 'elementor://widgets/schema/{widgetType}';
 export const STYLE_SCHEMA_URI = 'elementor://styles/schema/{category}';
 export const BEST_PRACTICES_URI = 'elementor://styles/best-practices';
@@ -61,7 +105,7 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 			},
 		} ),
 		{
-			description: 'Common styles schema for the specified category',
+			description: 'Common styles schema for the specified category (applicable for V4 elements only)',
 		},
 		async ( uri, variables ) => {
 			const category = typeof variables.category === 'string' ? variables.category : variables.category?.[ 0 ];
@@ -89,10 +133,10 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 		new ResourceTemplate( WIDGET_SCHEMA_URI, {
 			list: () => {
 				const cache = getWidgetsCache() || {};
-				const availableWidgets = Object.keys( cache || {} ).filter(
-					( widgetType ) =>
-						cache[ widgetType ]?.atomic_props_schema && cache[ widgetType ].meta?.llm_support !== false
+				const availableWidgets = Object.keys( cache ).filter( ( widgetType ) =>
+					isWidgetAvailableForLLM( cache[ widgetType ] )
 				);
+
 				return {
 					resources: availableWidgets.map( ( widgetType ) => ( {
 						uri: `elementor://widgets/schema/${ widgetType }`,
@@ -108,10 +152,31 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 			const widgetType =
 				typeof variables.widgetType === 'string' ? variables.widgetType : variables.widgetType?.[ 0 ];
 			const widgetData = getWidgetsCache()?.[ widgetType ];
-			const propSchema = widgetData?.atomic_props_schema;
-			if ( ! propSchema || ! widgetData ) {
+			if ( ! widgetData ) {
 				throw new Error( `No prop schema found for element type: ${ widgetType }` );
 			}
+			const propSchema = widgetData.atomic_props_schema;
+			if ( ! propSchema ) {
+				if ( ! hasV3Controls( widgetData.controls ) ) {
+					throw new Error( `No prop schema found for element type: ${ widgetType }` );
+				}
+				const controlMetadata = extractV3ControlsMetadata( widgetData.controls );
+				return {
+					contents: [
+						{
+							uri: uri.toString(),
+							mimeType: 'application/json',
+							text: JSON.stringify( {
+								widget_version: 'v3',
+								message:
+									'This widget exists in the editor but has no atomic props schema (V4). Use control_metadata as non-authoritative hints from legacy controls.',
+								fields_note: 'All settings are optional; there is no JSON schema for this widget type.',
+								properties: controlMetadata,
+							} ),
+						},
+					],
+				};
+			}
 			const asJson = Object.fromEntries(
 				Object.entries( propSchema ).map( ( [ key, propType ] ) => [
 					key,

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

@@ -1,5 +1,7 @@
 import { toolPrompts } from '@elementor/editor-mcp';
 
+import { AVAILABLE_WIDGETS_URI } from '../../resources/available-widgets-resource';
+
 export const generatePrompt = () => {
 	const buildCompositionsToolPrompt = toolPrompts( 'build-compositions' );
 
@@ -7,6 +9,10 @@ export const generatePrompt = () => {
 # RESOURCES (Read before use)
 - [elementor://global-classes] - Check FIRST for reusable classes
 - [elementor://global-variables] - ONLY use variables defined here
+- [${ AVAILABLE_WIDGETS_URI }/v4]
+
+# TOOL SUUPORT
+This tool support v4 elements only
 
 # WORKFLOW
 1. Check/create global classes via "create-global-class" tool

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

@@ -9,6 +9,7 @@ import {
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
+import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
@@ -28,12 +29,14 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			{ description: 'Global Classes', uri: 'elementor://global-classes' },
 			{ description: 'Global Variables', uri: 'elementor://global-variables' },
 			{ description: 'Styles best practices', uri: BEST_PRACTICES_URI },
+			{ description: 'Available widgets for this tool', uri: AVAILABLE_WIDGETS_URI_V4 },
 		],
 		outputSchema,
 		modelPreferences: {
 			hints: [ { name: 'claude-sonnet-4-5' } ],
 		},
 		handler: async ( params ) => {
+			assertCompositionXmlUsesV4WidgetsOnly( params.xmlStructure );
 			const { xmlStructure, elementConfig, stylesConfig, customCSS } = params;
 			let generatedXML: string = '';
 			const errors: Error[] = [];
@@ -132,3 +135,26 @@ Remember: Global classes ensure design consistency and reusability. Don't skip a
 		},
 	} );
 };
+
+function assertCompositionXmlUsesV4WidgetsOnly( xmlStructure: string ) {
+	const doc = new DOMParser().parseFromString( xmlStructure, 'application/xml' );
+	if ( doc.querySelector( 'parsererror' ) ) {
+		throw new Error( 'Failed to parse XML string: ' + doc );
+	}
+	const widgetsCache = getWidgetsCache() ?? {};
+	for ( const node of doc.querySelectorAll( '*' ) ) {
+		const type = node.tagName;
+		const widgetData = widgetsCache[ type ];
+		if ( ! widgetData ) {
+			continue;
+		}
+		if ( widgetData.elType !== 'widget' ) {
+			continue;
+		}
+		if ( ! widgetData.atomic_props_schema ) {
+			throw new Error(
+				`This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${ type }`
+			);
+		}
+	}
+}

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

@@ -1,3 +1,4 @@
+import { getWidgetsCache } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
@@ -24,6 +25,17 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 			speedPriority: 0.7,
 		},
 		handler: ( { elementId, propertiesToChange, elementType, stylePropertiesToChange } ) => {
+			const widgetData = getWidgetsCache()?.[ elementType ];
+			if ( ! widgetData ) {
+				throw new Error(
+					`Unknown element type: ${ elementType }. Check the available-widgets resource for valid types.`
+				);
+			}
+			if ( ! widgetData.atomic_props_schema ) {
+				throw new Error(
+					`This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${ elementType }`
+				);
+			}
 			const toUpdate = Object.entries( propertiesToChange );
 			const { valid, errors } = validateInput.validatePropSchema( elementType, propertiesToChange );
 			const { valid: stylesValid, errors: stylesErrors } = validateInput.validateStyles(

package/src/mcp/tools/get-element-config/tool.ts

@@ -59,10 +59,20 @@ export const initGetElementConfigTool = ( reg: MCPRegistryEntry ) => {
 			if ( ! element ) {
 				throw new Error( `Element with ID ${ elementId } not found.` );
 			}
+			const elementType = element.model.get( 'widgetType' ) || element.model.get( 'elType' ) || '';
+			const widgetData = getWidgetsCache()?.[ elementType ];
+			if ( ! widgetData ) {
+				throw new Error(
+					`Unknown element type: ${ elementType }. Check the available-widgets resource for valid types.`
+				);
+			}
+			if ( ! widgetData.atomic_props_schema ) {
+				throw new Error(
+					`This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${ elementType }`
+				);
+			}
 			const elementRawSettings = element.settings;
-			const propSchema =
-				getWidgetsCache()?.[ element.model.get( 'widgetType' ) || element.model.get( 'elType' ) || '' ]
-					?.atomic_props_schema;
+			const propSchema = getWidgetsCache()?.[ elementType ]?.atomic_props_schema;
 
 			if ( ! elementRawSettings || ! propSchema ) {
 				throw new Error( `No settings or prop schema found for element ID: ${ elementId }` );

package/src/mcp/utils/element-data-util.ts

@@ -0,0 +1,46 @@
+import { getWidgetsCache, type V1ElementConfig } from '@elementor/editor-elements';
+
+export type AvailableWidget = {
+	type: string;
+	version: string;
+	description?: string;
+};
+
+export function hasV3Controls( controls: unknown ): boolean {
+	return typeof controls === 'object' && controls !== null && Object.keys( controls ).length > 0;
+}
+
+export function isWidgetAvailableForLLM( config: V1ElementConfig | undefined ): boolean {
+	if ( ! config ) {
+		return false;
+	}
+	if ( config.meta?.llm_support === false ) {
+		return false;
+	}
+	if ( config.atomic_props_schema ) {
+		return true;
+	}
+	return hasV3Controls( config.controls );
+}
+
+export function getWidgetVersion( config: V1ElementConfig | undefined ): string {
+	return config?.atomic_props_schema ? 'v4' : 'v3';
+}
+
+export function getAvailableWidgets(): AvailableWidget[] {
+	const cache = getWidgetsCache() ?? {};
+
+	return Object.keys( cache )
+		.filter( ( widgetType ) => isWidgetAvailableForLLM( cache[ widgetType ] ) )
+		.sort()
+		.map( ( widgetType ) => {
+			const config = cache[ widgetType ];
+			const description = typeof config?.meta?.description === 'string' ? config.meta.description : undefined;
+
+			return {
+				type: widgetType,
+				version: getWidgetVersion( config ),
+				...( description && { description } ),
+			};
+		} );
+}

package/src/utils/after-render.ts

@@ -0,0 +1,26 @@
+import { getContainer } from '@elementor/editor-elements';
+
+import { type TemplatedElementView } from '../legacy/types';
+
+export function doAfterRender( elementIds: string[], callback: ( elementIds: string[] ) => void ): void {
+	const pending = elementIds
+		.map( ( elementId ) => {
+			const view = getContainer( elementId )?.view;
+			if ( ! view || ! hasDoAfterRender( view ) ) {
+				return undefined;
+			}
+
+			return new Promise< void >( ( resolve ) => view._doAfterRender( resolve ) );
+		} )
+		.filter( Boolean );
+
+	if ( pending.length > 0 ) {
+		Promise.all( pending ).then( () => callback( elementIds ) );
+	} else {
+		callback( elementIds );
+	}
+}
+
+function hasDoAfterRender( view: unknown ): view is TemplatedElementView {
+	return typeof ( view as TemplatedElementView )?._doAfterRender === 'function';
+}

package/src/mcp/utils/generate-available-tags.ts

@@ -1,23 +0,0 @@
-import { getWidgetsCache, type V1ElementConfig } from '@elementor/editor-elements';
-
-type ElTypedElementConfig = V1ElementConfig< {
-	elType?: string;
-} >;
-
-export const generateAvailableTags = () => {
-	const cache = getWidgetsCache< ElTypedElementConfig >();
-	if ( ! cache ) {
-		return [];
-	}
-	const customTags = Object.entries( cache )
-		.filter( ( [ , widgetData ] ) => !! widgetData.atomic_controls )
-		.map( ( [ widgetType, widgetData ] ) => {
-			const configurationSchema = widgetData; //getElementSchemaAsJsonSchema( widgetType );
-			return {
-				tag: `${ widgetType }`,
-				description: widgetData.title || widgetData.elType || `A ${ widgetType } element`,
-				configurationSchema: JSON.stringify( configurationSchema ),
-			};
-		} );
-	return customTags;
-};