@elementor/editor-canvas 4.0.0-manual → 4.0.1

package/src/legacy/replacements/manager.ts

@@ -1,3 +1,5 @@
+import { createRoot, type Root } from 'react-dom/client';
+
 import type { CreateTemplatedElementTypeOptions } from '../create-templated-element-type';
 import { createTemplatedElementView } from '../create-templated-element-type';
 import type { ElementType, ElementView, LegacyWindow, ReplacementSettings } from '../types';
@@ -34,11 +36,18 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 	return class extends TemplatedView {
 		#replacement: ReplacementBaseInterface | null = null;
 		#config: ReplacementSettings;
+		#reactContainer: HTMLElement;
+		#reactRoot: Root;
 
 		constructor( ...args: unknown[] ) {
 			super( ...args );
 			const settings = this.model.get( 'settings' );
 
+			this.#reactContainer = this.el.ownerDocument.createElement( 'div' );
+			this.#reactContainer.style.display = 'none';
+			this.el.ownerDocument.body.appendChild( this.#reactContainer );
+			this.#reactRoot = createRoot( this.#reactContainer );
+
 			this.#config = {
 				getSetting: settings.get.bind( settings ),
 				setSetting: settings.set.bind( settings ),
@@ -46,6 +55,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 				type: this?.model?.get( 'widgetType' ) ?? this.container?.model?.get( 'elType' ) ?? null,
 				id: this?.model?.get( 'id' ) ?? null,
 				refreshView: this.refreshView.bind( this ),
+				reactRoot: this.#reactRoot,
+				reactContainer: this.#reactContainer,
 			};
 		}
 
@@ -72,6 +83,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 
 		onDestroy() {
 			this.#triggerAltMethod( 'onDestroy' );
+			this.#reactRoot.unmount();
+			this.#reactContainer.remove();
 		}
 
 		_afterRender() {

package/src/legacy/types.ts

@@ -1,3 +1,4 @@
+import { type Root } from 'react-dom/client';
 import { type V1Element } from '@elementor/editor-elements';
 import { type Props, type PropValue } from '@elementor/editor-props';
 
@@ -203,6 +204,7 @@ type BackboneCollection< Model extends object > = {
 
 export type ElementModel = {
 	id: string;
+	originId?: string;
 	elType: string;
 	settings: BackboneModel< Props >;
 	editor_settings: Record< string, unknown >;
@@ -223,13 +225,14 @@ type ContextMenuGroup = {
 	actions: ContextMenuAction[];
 };
 
+export type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
 export type ContextMenuAction = {
 	name: string;
 	icon: string;
 	title: string | ( () => string );
 	shortcut?: string;
 	isEnabled: () => boolean;
-	callback: ( _: unknown, eventData: unknown ) => void;
+	callback: ( _: unknown, eventData: ContextMenuEventData ) => void;
 };
 
 export type ReplacementSettings = {
@@ -239,4 +242,6 @@ export type ReplacementSettings = {
 	id: string;
 	element: HTMLElement;
 	refreshView: () => void;
+	reactRoot: Root;
+	reactContainer: HTMLElement;
 };

package/src/mcp/canvas-mcp.ts

@@ -10,14 +10,12 @@ import { initGetElementConfigTool } from './tools/get-element-config/tool';
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	const { setMCPDescription } = reg;
 	setMCPDescription(
-		`Everything related to creative design, layout, styling and building the pages, specifically element of type "widget".
+		`Everything related to V4 ( Atomic ) canvas.
 # Canvas workflow for new compositions
-- Check existing global variables
-- Check existing global classes
-- Create missing global variables
-- Create reusable global classes
-- Build valid XML with minimal inline styles (layout/positioning only)
-- Apply global classes to elements`
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`
 	);
 	initWidgetsSchemaResource( reg );
 	initDocumentStructureResource( reg );

package/src/mcp/resources/breakpoints-resource.ts

@@ -5,7 +5,7 @@ import { v1ReadyEvent } from '@elementor/editor-v1-adapters';
 export const BREAKPOINTS_SCHEMA_URI = 'elementor://breakpoints/list';
 
 export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	const getBreakpointsList = () => {
 		const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
@@ -34,9 +34,16 @@ export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
 		],
 	} );
 
-	mcpServer.resource( 'breakpoints ', BREAKPOINTS_SCHEMA_URI, () => {
-		return buildResourceResponse();
-	} );
+	resource(
+		'breakpoints ',
+		BREAKPOINTS_SCHEMA_URI,
+		{
+			description: 'Breakpoints list.',
+		},
+		() => {
+			return buildResourceResponse();
+		}
+	);
 
 	window.addEventListener( v1ReadyEvent().name, () => {
 		sendResourceUpdated( {

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

@@ -39,7 +39,7 @@ type ElementorContainer = {
 export const DOCUMENT_STRUCTURE_URI = 'elementor://document/structure';
 
 export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	let currentDocumentStructure: string | null = null;
 
@@ -69,18 +69,23 @@ export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
 	// Initialize on load
 	updateDocumentStructure();
 
-	mcpServer.resource( 'document-structure', DOCUMENT_STRUCTURE_URI, async () => {
-		const structure = getDocumentStructure();
-
-		return {
-			contents: [
-				{
-					uri: DOCUMENT_STRUCTURE_URI,
-					text: JSON.stringify( structure, null, 2 ),
-				},
-			],
-		};
-	} );
+	resource(
+		'document-structure',
+		DOCUMENT_STRUCTURE_URI,
+		{
+			description: 'Document structure.',
+		},
+		async () => {
+			return {
+				contents: [
+					{
+						uri: DOCUMENT_STRUCTURE_URI,
+						text: JSON.stringify( getDocumentStructure(), null, 2 ),
+					},
+				],
+			};
+		}
+	);
 };
 
 function getDocumentStructure() {

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

@@ -1,4 +1,4 @@
-import { zod as z } from '@elementor/editor-mcp';
+import { z } from '@elementor/schema';
 
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 

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

@@ -1,3 +1,4 @@
+import { getCurrentDocument } from '@elementor/editor-documents';
 import {
 	createElement,
 	deleteElement,
@@ -10,6 +11,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
 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';
 import { generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 
@@ -37,6 +39,8 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			const errors: Error[] = [];
 			const rootContainers: V1Element[] = [];
 			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
+			const currentDocument = getCurrentDocument();
+			const targetContainer = getCompositionTargetContainer( documentContainer, currentDocument?.type.value );
 			try {
 				const compositionBuilder = CompositionBuilder.fromXMLString( xmlStructure, {
 					createElement,
@@ -50,7 +54,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 					configErrors,
 					invalidStyles,
 					rootContainers: generatedRootContainers,
-				} = compositionBuilder.build( documentContainer );
+				} = compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );

package/src/mcp/utils/__tests__/get-composition-target-container.test.ts

@@ -0,0 +1,59 @@
+import { type V1Element } from '@elementor/editor-elements';
+
+import { getCompositionTargetContainer } from '../get-composition-target-container';
+
+const createMockContainer = ( id: string, children?: V1Element[] ): V1Element =>
+	( {
+		id,
+		model: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		settings: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		children,
+	} ) as unknown as V1Element;
+
+describe( 'getCompositionTargetContainer', () => {
+	it( 'should return first child when document type is elementor_component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( firstChild );
+	} );
+
+	it( 'should return document container when document type is not a component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'page' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when document type is undefined', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, undefined );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when component has no children', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+} );

package/src/mcp/utils/get-composition-target-container.ts

@@ -0,0 +1,15 @@
+import { COMPONENT_DOCUMENT_TYPE } from '@elementor/editor-documents';
+import { type V1Element } from '@elementor/editor-elements';
+
+export function getCompositionTargetContainer(
+	documentContainer: V1Element,
+	documentType: string | undefined
+): V1Element {
+	const firstChild = documentContainer.children?.[ 0 ];
+
+	if ( documentType === COMPONENT_DOCUMENT_TYPE && firstChild ) {
+		return firstChild;
+	}
+
+	return documentContainer;
+}

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -118,6 +118,123 @@ describe( 'renderStyles', () => {
 	} );
 } );
 
+describe( 'breakpoint deduplication', () => {
+	it( 'should render all breakpoints when same id has multiple breakpoint variants', async () => {
+		// Arrange - simulates output from breakToBreakpoints in use-style-items.
+		const desktopStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [ { meta: { breakpoint: null, state: null }, props: { 'font-size': '16px' }, custom_css: null } ],
+		};
+		const tabletStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const mobileStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'mobile', state: null }, props: { 'font-size': '12px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+				mobile: { width: 768, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ desktopStyle, tabletStyle, mobileStyle ] } );
+
+		// Assert - all three breakpoints must be rendered (previously tablet/mobile were dropped).
+		expect( result ).toHaveLength( 3 );
+		expect( result.map( ( r ) => r.breakpoint ) ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+		expect( result[ 0 ].value ).toContain( 'font-size:16px' );
+		expect( result[ 1 ].value ).toContain( '@media(max-width:992px)' );
+		expect( result[ 1 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 2 ].value ).toContain( '@media(max-width:768px)' );
+		expect( result[ 2 ].value ).toContain( 'font-size:12px' );
+	} );
+
+	it( 'should deduplicate same id + breakpoint + state combinations', async () => {
+		// Arrange - two styles with same id, breakpoint, and state should dedupe.
+		const style1: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const style2: RendererStyleDefinition = {
+			...style1,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ style1, style2 ] } );
+
+		// Assert - should only render first occurrence.
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+	} );
+
+	it( 'should render separately when same id + breakpoint have different states', async () => {
+		// Arrange - same id and breakpoint but different states should NOT dedupe.
+		const normalStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const hoverStyle: RendererStyleDefinition = {
+			...normalStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: 'hover' }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ normalStyle, hoverStyle ] } );
+
+		// Assert - both should be rendered since states differ.
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].state ).toBeNull();
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 1 ].state ).toBe( 'hover' );
+		expect( result[ 1 ].value ).toContain( 'font-size:16px' );
+	} );
+} );
+
 describe( 'custom_css rendering', () => {
 	it( 'should not render custom_css if raw is empty', async () => {
 		// Arrange.

package/src/renderers/create-styles-renderer.ts

@@ -46,14 +46,24 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 	class: '.',
 };
 
+const DEFAULT_BREAKPOINT = 'desktop';
+const DEFAULT_STATE = 'normal';
+
+function getStyleUniqueKey( style: RendererStyleDefinition ): string {
+	const breakpoint = style.variants[ 0 ]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+	const state = style.variants[ 0 ]?.meta?.state ?? DEFAULT_STATE;
+	return `${ style.id }-${ breakpoint }-${ state }`;
+}
+
 export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '' }: CreateStyleRendererArgs ) {
 	return async ( { styles, signal }: StyleRendererArgs ): Promise< StyleItem[] > => {
-		const seenIds = new Set< string >();
+		const seenKeys = new Set< string >();
 		const uniqueStyles = styles.filter( ( style ) => {
-			if ( seenIds.has( style.id ) ) {
+			const key = getStyleUniqueKey( style );
+			if ( seenKeys.has( key ) ) {
 				return false;
 			}
-			seenIds.add( style.id );
+			seenKeys.add( key );
 			return true;
 		} );
 

package/src/style-commands/__tests__/paste-style.test.ts

@@ -19,14 +19,16 @@ import { classesPropTypeUtil } from '@elementor/editor-props';
 import { type StyleDefinition } from '@elementor/editor-styles';
 import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
+import { getClipboardElements } from '../../utils/command-utils';
 import { initPasteStyleCommand } from '../paste-style';
-import { getClipboardElements } from '../utils';
 
 jest.mock( '@elementor/editor-elements' );
-jest.mock( '../utils', () => ( {
-	...jest.requireActual( '../utils' ),
+
+jest.mock( '../../utils/command-utils', () => ( {
+	...jest.requireActual( '../../utils/command-utils' ),
 	getClipboardElements: jest.fn(),
 } ) );
+
 jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	...jest.requireActual( '@elementor/editor-v1-adapters' ),
 	blockCommand: jest.fn(),

package/src/style-commands/__tests__/reset-style.test.ts

@@ -7,13 +7,13 @@ import {
 import { createElementStyle, deleteElementStyle, getElementStyles } from '@elementor/editor-elements';
 import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
+import { getClassesProp, hasAtomicWidgets, isAtomicWidget } from '../../utils/command-utils';
 import { initResetStyleCommand } from '../reset-style';
-import { getClassesProp, hasAtomicWidgets, isAtomicWidget } from '../utils';
 
 jest.mock( '@elementor/editor-elements' );
 
-jest.mock( '../utils', () => ( {
-	...jest.requireActual( '../utils' ),
+jest.mock( '../../utils/command-utils', () => ( {
+	...jest.requireActual( '../../utils/command-utils' ),
 	getClassesProp: jest.fn(),
 	hasAtomicWidgets: jest.fn(),
 	isAtomicWidget: jest.fn(),

package/src/style-commands/paste-style.ts

@@ -8,8 +8,14 @@ import {
 	commandStartEvent,
 } from '@elementor/editor-v1-adapters';
 
+import {
+	type ContainerArgs,
+	getClassesProp,
+	getClipboardElements,
+	hasAtomicWidgets,
+	isAtomicWidget,
+} from '../utils/command-utils';
 import { undoablePasteElementStyle } from './undoable-actions/paste-element-style';
-import { type ContainerArgs, getClassesProp, getClipboardElements, hasAtomicWidgets, isAtomicWidget } from './utils';
 
 type PasteStylesCommandArgs = ContainerArgs & {
 	storageKey?: string;

package/src/style-commands/reset-style.ts

@@ -6,8 +6,8 @@ import {
 	commandStartEvent,
 } from '@elementor/editor-v1-adapters';
 
+import { type ContainerArgs, hasAtomicWidgets, isAtomicWidget } from '../utils/command-utils';
 import { undoableResetElementStyle } from './undoable-actions/reset-element-style';
-import { type ContainerArgs, hasAtomicWidgets, isAtomicWidget } from './utils';
 
 export function initResetStyleCommand() {
 	const resetElementStyles = undoableResetElementStyle();

package/src/style-commands/undoable-actions/paste-element-style.ts

@@ -10,7 +10,7 @@ import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-reposit
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { getClassesProp, getTitleForContainers } from '../utils';
+import { getClassesProp, getTitleForContainers } from '../../utils/command-utils';
 
 type PasteElementStyleArgs = {
 	containers: V1Element[];

package/src/style-commands/undoable-actions/reset-element-style.ts

@@ -3,7 +3,7 @@ import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-reposit
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
-import { getClassesProp, getTitleForContainers } from '../utils';
+import { getClassesProp, getTitleForContainers } from '../../utils/command-utils';
 
 type ResetElementStyleArgs = {
 	containers: V1Element[];