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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.1.0-802",
+  "version": "4.1.0-803",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-802",
+    "@elementor/editor": "4.1.0-803",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.1.0-802",
-    "@elementor/editor-documents": "4.1.0-802",
-    "@elementor/editor-elements": "4.1.0-802",
-    "@elementor/editor-interactions": "4.1.0-802",
-    "@elementor/editor-mcp": "4.1.0-802",
-    "@elementor/editor-notifications": "4.1.0-802",
-    "@elementor/editor-props": "4.1.0-802",
-    "@elementor/editor-responsive": "4.1.0-802",
-    "@elementor/editor-styles": "4.1.0-802",
-    "@elementor/editor-styles-repository": "4.1.0-802",
-    "@elementor/editor-ui": "4.1.0-802",
-    "@elementor/editor-v1-adapters": "4.1.0-802",
-    "@elementor/schema": "4.1.0-802",
-    "@elementor/twing": "4.1.0-802",
+    "@elementor/editor-controls": "4.1.0-803",
+    "@elementor/editor-documents": "4.1.0-803",
+    "@elementor/editor-elements": "4.1.0-803",
+    "@elementor/editor-interactions": "4.1.0-803",
+    "@elementor/editor-mcp": "4.1.0-803",
+    "@elementor/editor-notifications": "4.1.0-803",
+    "@elementor/editor-props": "4.1.0-803",
+    "@elementor/editor-responsive": "4.1.0-803",
+    "@elementor/editor-styles": "4.1.0-803",
+    "@elementor/editor-styles-repository": "4.1.0-803",
+    "@elementor/editor-ui": "4.1.0-803",
+    "@elementor/editor-v1-adapters": "4.1.0-803",
+    "@elementor/schema": "4.1.0-803",
+    "@elementor/twing": "4.1.0-803",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-802",
-    "@elementor/wp-media": "4.1.0-802",
+    "@elementor/utils": "4.1.0-803",
+    "@elementor/wp-media": "4.1.0-803",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/mcp/canvas-mcp.ts

@@ -1,7 +1,11 @@
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
+import { initAvailableWidgetsResource } from './resources/available-widgets-resource';
 import { initBreakpointsResource } from './resources/breakpoints-resource';
 import { initDocumentStructureResource } from './resources/document-structure-resource';
+import { initEditorStateResource } from './resources/editor-state-resource';
+import { initGeneralContextResource } from './resources/general-context-resource';
+import { initSelectedElementResource } from './resources/selected-element-resource';
 import { initWidgetsSchemaResource } from './resources/widgets-schema-resource';
 import { initBuildCompositionsTool } from './tools/build-composition/tool';
 import { initConfigureElementTool } from './tools/configure-element/tool';
@@ -18,7 +22,11 @@ export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 `
 	);
 	initWidgetsSchemaResource( reg );
+	initAvailableWidgetsResource( reg );
 	initDocumentStructureResource( reg );
+	initSelectedElementResource( reg );
+	initEditorStateResource( reg );
+	initGeneralContextResource( reg );
 	initBuildCompositionsTool( reg );
 	initGetElementConfigTool( reg );
 	initConfigureElementTool( reg );

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

@@ -0,0 +1,67 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { v1ReadyEvent } from '@elementor/editor-v1-adapters';
+
+import { type AvailableWidget, getAvailableWidgets } from '../utils/element-data-util';
+
+export const AVAILABLE_WIDGETS_URI = 'elementor://context/available-widgets';
+export const AVAILABLE_WIDGETS_URI_V4 = 'elementor://context/available-widgets/v4';
+
+export const initAvailableWidgetsResource = ( reg: MCPRegistryEntry ) => {
+	const { resource, sendResourceUpdated } = reg;
+
+	const buildContents = ( uri: string, filterFunction: ( x: AvailableWidget ) => boolean = () => true ) => {
+		const widgets = getAvailableWidgets().filter( filterFunction );
+		return {
+			contents: [
+				{
+					uri,
+					mimeType: 'application/json',
+					text: JSON.stringify( widgets, null, 2 ),
+				},
+			],
+		};
+	};
+
+	const notifyResourcesUpdated = () => {
+		sendResourceUpdated( {
+			uri: AVAILABLE_WIDGETS_URI,
+			...buildContents( AVAILABLE_WIDGETS_URI ),
+		} );
+		sendResourceUpdated( {
+			uri: AVAILABLE_WIDGETS_URI_V4,
+			...buildContents( AVAILABLE_WIDGETS_URI_V4, ( w: AvailableWidget ) => w.version === 'v4' ),
+		} );
+	};
+
+	resource(
+		'available-widgets-v4',
+		AVAILABLE_WIDGETS_URI_V4,
+		{
+			description: 'All registered v4 version widgets',
+		},
+		async () => buildContents( AVAILABLE_WIDGETS_URI_V4, ( w ) => w.version === 'v4' )
+	);
+
+	resource(
+		'available-widgets',
+		AVAILABLE_WIDGETS_URI,
+		{
+			description: 'All registered widget types with v3/v4 version metadata and description.',
+		},
+		async () => buildContents( AVAILABLE_WIDGETS_URI )
+	);
+
+	const eventName = v1ReadyEvent().name;
+
+	const onV1Ready = () => {
+		const widgets = getAvailableWidgets();
+		if ( widgets.length === 0 ) {
+			return;
+		}
+		window.removeEventListener( eventName, onV1Ready );
+		notifyResourcesUpdated();
+	};
+
+	window.addEventListener( eventName, onV1Ready );
+	onV1Ready();
+};

package/src/mcp/resources/document-structure-resource.ts

@@ -1,41 +1,43 @@
+import {
+	type ExtendedWindow as BaseExtendedWindow,
+	type V1Document,
+	type V1DocumentsManager,
+} from '@elementor/editor-documents';
+import {
+	getWidgetsCache,
+	type V1Element,
+	type V1ElementEditorSettingsProps,
+	type V1ElementModelProps,
+} from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 
-type ExtendedWindow = Window & {
-	elementor?: {
-		documents?: {
-			getCurrent?: () => {
-				id: number;
-				config: {
-					type: string;
-					settings?: {
-						post_title?: string;
-					};
-				};
-				container: {
-					children?: ElementorContainer[];
-				};
-			};
-		};
+type UnknownVersionElementInstanceData = V1Element & {
+	model: V1Element[ 'model' ] & {
+		attributes: V1ElementModelProps;
+		config?: { atomic?: boolean };
+		editor_settings?: V1ElementEditorSettingsProps;
 	};
+	children?: V1Element[];
 };
 
-type ElementorContainer = {
-	id: string;
-	model: {
-		attributes: {
-			id: string;
-			elType: string;
-			widgetType?: string;
-			title?: string;
-		};
-		editor_settings?: {
-			title?: string;
-		};
+type ContainerWithStructure = V1Document & {
+	config: V1Document[ 'config' ] & {
+		settings?: { post_title?: string };
+	};
+	container: V1Document[ 'container' ] & {
+		children?: UnknownVersionElementInstanceData[];
 	};
-	children?: ElementorContainer[];
 };
 
+interface ExtendedWindow extends BaseExtendedWindow {
+	elementor: Omit< BaseExtendedWindow[ 'elementor' ], 'documents' > & {
+		documents: Omit< V1DocumentsManager, 'getCurrent' > & {
+			getCurrent: () => ContainerWithStructure;
+		};
+	};
+}
+
 export const DOCUMENT_STRUCTURE_URI = 'elementor://document/structure';
 
 export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
@@ -62,6 +64,7 @@ export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
 			commandEndEvent( 'document/elements/copy' ),
 			commandEndEvent( 'document/elements/paste' ),
 			commandEndEvent( 'editor/documents/attach-preview' ),
+			commandEndEvent( 'editor/documents/switch' ),
 		],
 		updateDocumentStructure
 	);
@@ -89,7 +92,7 @@ export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
 };
 
 function getDocumentStructure() {
-	const extendedWindow = window as ExtendedWindow;
+	const extendedWindow = window as unknown as ExtendedWindow;
 	const document = extendedWindow.elementor?.documents?.getCurrent?.();
 
 	if ( ! document ) {
@@ -97,9 +100,7 @@ function getDocumentStructure() {
 	}
 
 	const containers = document.container?.children || [];
-	const elements = ( containers as ElementorContainer[] ).map( ( container: ElementorContainer ) =>
-		extractElementData( container )
-	);
+	const elements = containers.map( ( container ) => extractElementData( container ) );
 
 	return {
 		documentId: document.id,
@@ -109,7 +110,20 @@ function getDocumentStructure() {
 	};
 }
 
-function extractElementData( element: ElementorContainer ): Record< string, unknown > | null {
+function resolveElementVersion( element: UnknownVersionElementInstanceData ): 'v3' | 'v4' {
+	if ( element.model?.config?.atomic ) {
+		return 'v4';
+	}
+
+	const widgetType = element.model?.attributes?.widgetType;
+	if ( widgetType && getWidgetsCache()?.[ widgetType ]?.atomic_props_schema ) {
+		return 'v4';
+	}
+
+	return 'v3';
+}
+
+function extractElementData( element: UnknownVersionElementInstanceData ): Record< string, unknown > | null {
 	if ( ! element || ! element.model ) {
 		return null;
 	}
@@ -119,6 +133,7 @@ function extractElementData( element: ElementorContainer ): Record< string, unkn
 		id: model.id,
 		elType: model.elType,
 		widgetType: model.widgetType || undefined,
+		version: resolveElementVersion( element ),
 	};
 
 	const title = model.title || element.model?.editor_settings?.title;
@@ -129,8 +144,8 @@ function extractElementData( element: ElementorContainer ): Record< string, unkn
 
 	if ( element.children && element.children.length > 0 ) {
 		result.children = element.children
-			.map( ( child: ElementorContainer ) => extractElementData( child ) )
-			.filter( ( child: Record< string, unknown > | null ) => child !== null );
+			.map( ( child ) => extractElementData( child as UnknownVersionElementInstanceData ) )
+			.filter( ( child ) => child !== null );
 	}
 
 	return result;

package/src/mcp/resources/editor-state-resource.ts

@@ -0,0 +1,122 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
+const CURRENTLY_VIEWED_SCREEN = 'The user is currently viewing the Elementor editor';
+const PAGE_CONTENT_CHARACTER_LIMIT = 500;
+const PREVIEW_TEXT_NODE_MIN_LENGTH = 2;
+
+export const EDITOR_STATE_URI = 'elementor://context/editor-state';
+
+type ElementorWindow = Window & {
+	elementor?: {
+		$previewContents?: Element[];
+		documents?: {
+			getCurrent?: () => {
+				config?: {
+					settings?: {
+						post_title?: string;
+					};
+				};
+			};
+		};
+	};
+};
+
+export const initEditorStateResource = ( reg: MCPRegistryEntry ) => {
+	const { resource, sendResourceUpdated } = reg;
+
+	let lastSerializedState = '';
+
+	const buildState = () => ( {
+		currentlyViewedScreen: CURRENTLY_VIEWED_SCREEN,
+		pageContent: getPageContentFromPreview(),
+		pageTitle: getPageTitle(),
+	} );
+
+	const notifyIfChanged = () => {
+		const serialized = JSON.stringify( buildState() );
+		if ( serialized === lastSerializedState ) {
+			return;
+		}
+		lastSerializedState = serialized;
+		sendResourceUpdated( { uri: EDITOR_STATE_URI } );
+	};
+
+	listenTo(
+		[ commandEndEvent( 'editor/documents/switch' ), commandEndEvent( 'editor/documents/attach-preview' ) ],
+		notifyIfChanged
+	);
+
+	lastSerializedState = JSON.stringify( buildState() );
+
+	resource(
+		'editor-state',
+		EDITOR_STATE_URI,
+		{
+			description: 'Editor page title, preview text snapshot, and viewed screen label.',
+		},
+		async () => {
+			return {
+				contents: [
+					{
+						uri: EDITOR_STATE_URI,
+						text: JSON.stringify( buildState(), null, 2 ),
+					},
+				],
+			};
+		}
+	);
+};
+
+function getPageContentFromPreview(): string | null {
+	try {
+		const root = ( window as ElementorWindow ).elementor?.$previewContents?.[ 0 ];
+		if ( ! root ) {
+			return null;
+		}
+		const content: string[] = [];
+		const clone = root.cloneNode( true ) as HTMLElement;
+		clone.querySelectorAll( '.elementor-editor-element-settings, #elementor-add-new-section' ).forEach( ( el ) => {
+			el.remove();
+		} );
+		const walk = ( node: Node, insideElementorElement = false ) => {
+			const isInside = ( node as Element ).classList?.contains( 'elementor-element' ) || insideElementorElement;
+			if ( node.nodeType === Node.TEXT_NODE && isInside ) {
+				const text = node.textContent?.trim().replace( /\s+/g, ' ' );
+				if ( text && text.length > PREVIEW_TEXT_NODE_MIN_LENGTH ) {
+					content.push( text );
+				}
+			} else {
+				node.childNodes.forEach( ( child ) => {
+					walk( child, isInside );
+				} );
+			}
+		};
+		walk( clone );
+		const text = content.join( ' ' );
+		if ( text.length > PAGE_CONTENT_CHARACTER_LIMIT ) {
+			return text.slice( 0, PAGE_CONTENT_CHARACTER_LIMIT ) + '...';
+		}
+		return text;
+	} catch {
+		return null;
+	}
+}
+
+function getPageTitle(): string {
+	try {
+		const extendedWindow = window as ElementorWindow;
+		const currentDocument = extendedWindow.elementor?.documents?.getCurrent?.();
+		const postTitle = currentDocument?.config?.settings?.post_title;
+		if ( postTitle ) {
+			return postTitle;
+		}
+
+		let title = document.title || 'Page';
+		title = title.split( /\s*[‹»|–—-]\s*/ )[ 0 ];
+		const trimmed = title.trim();
+		return trimmed || 'Page';
+	} catch {
+		return 'Page';
+	}
+}

package/src/mcp/resources/general-context-resource.ts

@@ -0,0 +1,99 @@
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
+type ExtendedWindow = Window & {
+	angieConfig?: {
+		plugins?: Record< string, unknown >;
+	};
+	elementor?: {
+		documents?: {
+			getCurrent?: () => {
+				config?: {
+					settings?: {
+						post_title?: string;
+					};
+				};
+			};
+		};
+	};
+};
+
+export const GENERAL_CONTEXT_URI = 'elementor://context/general';
+
+export const initGeneralContextResource = ( reg: MCPRegistryEntry ) => {
+	const { resource, sendResourceUpdated } = reg;
+
+	let lastSerializedPayload: string | null = null;
+
+	const getPageTitle = (): string | null => {
+		const extendedWindow = window as ExtendedWindow;
+		const title = extendedWindow.elementor?.documents?.getCurrent?.()?.config?.settings?.post_title;
+		if ( ! title?.trim() ) {
+			return null;
+		}
+		return title;
+	};
+
+	const buildPayload = () => {
+		const extendedWindow = window as ExtendedWindow;
+		const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		const postParam = new URLSearchParams( location.search ).get( 'post' );
+		const parsedPostId = postParam ? Number( postParam ) : null;
+		const postId = parsedPostId !== null && Number.isFinite( parsedPostId ) ? parsedPostId : null;
+		const pageTitle = getPageTitle();
+		const urlObject = new URL( window.location.href );
+		const pageUrl = urlObject.pathname + urlObject.search;
+		const pageName = pageTitle || 'Elementor Editor';
+		const plugins = extendedWindow.angieConfig?.plugins;
+
+		return {
+			timezone,
+			postId,
+			currentPage: {
+				pageName,
+				pageTitle,
+				pageUrl,
+			},
+			...( plugins && { plugins } ),
+		};
+	};
+
+	const pushUpdateIfChanged = () => {
+		const serialized = JSON.stringify( buildPayload() );
+		if ( serialized === lastSerializedPayload ) {
+			return;
+		}
+		lastSerializedPayload = serialized;
+		sendResourceUpdated( { uri: GENERAL_CONTEXT_URI } );
+	};
+
+	resource(
+		'general-context',
+		GENERAL_CONTEXT_URI,
+		{
+			description: 'General context: timezone, post id, and current page.',
+		},
+		async () => {
+			return {
+				contents: [
+					{
+						uri: GENERAL_CONTEXT_URI,
+						mimeType: 'application/json',
+						text: JSON.stringify( buildPayload(), null, 2 ),
+					},
+				],
+			};
+		}
+	);
+
+	listenTo(
+		[
+			commandEndEvent( 'editor/documents/switch' ),
+			commandEndEvent( 'editor/documents/attach-preview' ),
+			commandEndEvent( 'document/elements/settings' ),
+		],
+		pushUpdateIfChanged
+	);
+
+	pushUpdateIfChanged();
+};