@elementor/editor-canvas 4.1.0-manual → 4.2.0-839

package/package.json

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

package/src/__tests__/settings-props-resolver.test.ts

@@ -103,6 +103,7 @@ describe( 'settings props resolver', () => {
 			expected: {
 				image: {
 					src: 'https://localhost.test/test-image.png',
+					alt: '',
 				},
 			},
 		},
@@ -130,6 +131,7 @@ describe( 'settings props resolver', () => {
 					src: 'large-image-url-123',
 					height: 3,
 					width: 3,
+					alt: undefined,
 				},
 			},
 		},
@@ -157,6 +159,7 @@ describe( 'settings props resolver', () => {
 					src: 'original-image-url-123',
 					height: 0,
 					width: 0,
+					alt: undefined,
 				},
 			},
 		},

package/src/composition-builder/composition-builder.ts

@@ -34,7 +34,7 @@ type CtorOptions = {
 export class CompositionBuilder {
 	private elementConfig: Record< string, Record< string, AnyValue > > = {};
 	private elementStylesConfig: Record< string, Record< string, AnyValue > > = {};
-	private elementCusomCSS: Record< string, string > = {};
+	private elementCustomCSS: Record< string, string > = {};
 	private rootContainers: V1Element[] = [];
 	private api: API = {
 		createElement,
@@ -76,7 +76,7 @@ export class CompositionBuilder {
 	}
 
 	setCustomCSS( config: Record< string, string > ) {
-		this.elementCusomCSS = config;
+		this.elementCustomCSS = config;
 	}
 
 	getXML() {
@@ -176,7 +176,7 @@ export class CompositionBuilder {
 		const allConfigIds = new Set( [
 			...Object.keys( this.elementConfig ),
 			...Object.keys( this.elementStylesConfig ),
-			...Object.keys( this.elementCusomCSS ),
+			...Object.keys( this.elementCustomCSS ),
 		] );
 
 		for ( const configId of allConfigIds ) {
@@ -188,7 +188,7 @@ export class CompositionBuilder {
 				if ( this.elementConfig[ configId ] ) {
 					configErrors.push( msg );
 				}
-				if ( this.elementStylesConfig[ configId ] || this.elementCusomCSS[ configId ] ) {
+				if ( this.elementStylesConfig[ configId ] || this.elementCustomCSS[ configId ] ) {
 					styleErrors.push( msg );
 				}
 				continue;
@@ -241,7 +241,7 @@ export class CompositionBuilder {
 				}
 			}
 
-			const customCSS = this.elementCusomCSS[ configId ];
+			const customCSS = this.elementCustomCSS[ configId ];
 			if ( customCSS ) {
 				try {
 					this.api.doUpdateElementProperty( {

package/src/form-structure/utils.ts

@@ -41,6 +41,10 @@ export const FORM_FIELD_ELEMENT_TYPES = new Set( [
 	'e-form-checkbox',
 	'e-form-submit-button',
 	'e-form-select',
+	'e-form-radio-button',
+	'e-form-file-upload',
+	'e-form-date-picker',
+	'e-form-time-picker',
 ] );
 
 export function getArgsElementType( args: CreateArgs ): string | undefined {

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

@@ -408,6 +408,61 @@ describe( 'useStyleItems', () => {
 		] );
 	} );
 
+	it( 'should remove cached items for breakpoints whose variants no longer exist', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const styleWithTwoBreakpoints = createMockStyleDefinitionWithVariants( {
+			id: 'style1',
+			variants: [
+				{ meta: { breakpoint: null, state: null }, props: { 'font-family': 'Arial' }, custom_css: null },
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-family': 'Roboto' }, custom_css: null },
+			],
+		} );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [ styleWithTwoBreakpoints ] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: null, state: null },
+				props: {},
+			} );
+		} );
+
+		expect( result.current ).toEqual( [
+			{ id: 'style1', breakpoint: 'desktop' },
+			{ id: 'style1', breakpoint: 'tablet' },
+		] );
+
+		// Act - simulate the tablet variant being removed (e.g. user cleared its only prop,
+		// global-classes store calls getNonEmptyVariants which drops empty variants).
+		await act( async () => {
+			mockProvider.actions.update?.( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { 'font-family': 'Arial' }, custom_css: null },
+				],
+			} );
+		} );
+
+		// Assert - the tablet item must be evicted from the cache.
+		expect( result.current ).toEqual( [ { id: 'style1', breakpoint: 'desktop' } ] );
+	} );
+
 	it( 'should only re-render changed styles on differential update', async () => {
 		// Arrange.
 		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>

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

@@ -200,8 +200,10 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, getC
 					cssName: provider.actions.resolveCssName( style.id ),
 				} ) );
 
-			return renderStyles( { styles: breakToBreakpoints( changedStyles ), signal } ).then( ( rendered ) => {
-				updateCacheItems( cache, rendered );
+			const breakpointSplit = breakToBreakpoints( changedStyles );
+
+			return renderStyles( { styles: breakpointSplit, signal } ).then( ( rendered ) => {
+				updateCacheItems( cache, changedIds, rendered );
 
 				return getOrderedItems( cache );
 			} );
@@ -277,19 +279,15 @@ function getOrderedItems( cache: StyleItemsCache ): StyleItem[] {
 		.flat();
 }
 
-function updateCacheItems( cache: StyleItemsCache, changedItems: StyleItem[] ): void {
+function updateCacheItems( cache: StyleItemsCache, changedIds: string[], changedItems: StyleItem[] ): void {
+	for ( const id of changedIds ) {
+		cache.itemsById.delete( id );
+	}
+
 	for ( const item of changedItems ) {
-		const existing = cache.itemsById.get( item.id );
-		if ( existing ) {
-			const idx = existing.findIndex( ( e ) => e.breakpoint === item.breakpoint && e.state === item.state );
-			if ( idx >= 0 ) {
-				existing[ idx ] = item;
-			} else {
-				existing.push( item );
-			}
-		} else {
-			cache.itemsById.set( item.id, [ item ] );
-		}
+		const existing = cache.itemsById.get( item.id ) || [];
+		existing.push( item );
+		cache.itemsById.set( item.id, existing );
 	}
 }
 

package/src/index.ts

@@ -21,6 +21,7 @@ export { createPropsResolver, type PropsResolver } from './renderers/create-prop
 export { settingsTransformersRegistry } from './settings-transformers-registry';
 export { styleTransformersRegistry } from './style-transformers-registry';
 export { endDragElementFromPanel, startDragElementFromPanel } from './sync/drag-element-from-panel';
+export { GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload } from './sync/global-styles-imported-event';
 export { DOCUMENT_STRUCTURE_URI } from './mcp/resources/document-structure-resource';
 export { WIDGET_SCHEMA_URI } from './mcp/resources/widgets-schema-resource';
 export * from './legacy/types';
@@ -31,3 +32,4 @@ export {
 } from './transformers/create-transformers-registry';
 export { type AnyTransformer, type TransformerOptions } from './transformers/types';
 export { UnknownStyleTypeError, UnknownStyleStateError } from './renderers/errors';
+export { doAfterRender } from './utils/after-render';

package/src/init-settings-transformers.ts

@@ -1,11 +1,13 @@
 import { settingsTransformersRegistry } from './settings-transformers-registry';
 import { attributesTransformer } from './transformers/settings/attributes-transformer';
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
+import { dateRangeTransformer } from './transformers/settings/date-range-transformer';
 import { dateTimeTransformer } from './transformers/settings/date-time-transformer';
 import { htmlV2Transformer } from './transformers/settings/html-v2-transformer';
 import { htmlV3Transformer } from './transformers/settings/html-v3-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
 import { queryTransformer } from './transformers/settings/query-transformer';
+import { timeRangeTransformer } from './transformers/settings/time-range-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
 import { imageTransformer } from './transformers/shared/image-transformer';
 import { plainTransformer } from './transformers/shared/plain-transformer';
@@ -25,5 +27,7 @@ export function initSettingsTransformers() {
 		.register( 'date-time', dateTimeTransformer )
 		.register( 'html-v2', htmlV2Transformer )
 		.register( 'html-v3', htmlV3Transformer )
+		.register( 'date-range', dateRangeTransformer )
+		.register( 'time-range', timeRangeTransformer )
 		.registerFallback( plainTransformer );
 }

package/src/init-style-transformers.ts

@@ -17,6 +17,7 @@ import { perspectiveOriginTransformer } from './transformers/styles/perspective-
 import { positionTransformer } from './transformers/styles/position-transformer';
 import { shadowTransformer } from './transformers/styles/shadow-transformer';
 import { sizeTransformer } from './transformers/styles/size-transformer';
+import { spanTransformer } from './transformers/styles/span-transformer';
 import { strokeTransformer } from './transformers/styles/stroke-transformer';
 import { transformFunctionsTransformer } from './transformers/styles/transform-functions-transformer';
 import { transformMoveTransformer } from './transformers/styles/transform-move-transformer';
@@ -53,6 +54,7 @@ export function initStyleTransformers() {
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'object-position', positionTransformer )
+		.register( 'span', spanTransformer )
 		.register( 'transform-origin', transformOriginTransformer )
 		.register( 'perspective-origin', perspectiveOriginTransformer )
 		.register( 'transform-move', transformMoveTransformer )

package/src/legacy/create-nested-templated-element-type.ts

@@ -1,7 +1,8 @@
-import { ELEMENT_STYLE_CHANGE_EVENT } from '@elementor/editor-elements';
+import { ELEMENT_STYLE_CHANGE_EVENT, type V1ElementModelProps } from '@elementor/editor-elements';
 
 import { type DomRenderer } from '../renderers/create-dom-renderer';
 import { signalizedProcess } from '../utils/signalized-process';
+import { createPendingElement } from './create-pending-element';
 import { canBeTemplated, type TemplatedElementConfig } from './create-templated-element-type';
 import {
 	createAfterRender,
@@ -101,6 +102,7 @@ export function createNestedTemplatedElementView( {
 	const AtomicElementBaseView = legacyWindow.elementor.modules.elements.views.createAtomicElementBase( type );
 	const parentRenderChildren = AtomicElementBaseView.prototype._renderChildren;
 	const parentOpenEditingPanel = AtomicElementBaseView.prototype._openEditingPanel;
+	const parentAddElement = AtomicElementBaseView.prototype.addElement;
 
 	return AtomicElementBaseView.extend( {
 		_abortController: null as AbortController | null,
@@ -254,7 +256,6 @@ export function createNestedTemplatedElementView( {
 				targetEl.setAttribute( attr.name, attr.value );
 			} );
 
-			targetEl.setAttribute( 'draggable', 'true' );
 			targetEl.innerHTML = overlayHTML + newEl.innerHTML;
 
 			if ( needsTagSwap ) {
@@ -381,6 +382,14 @@ export function createNestedTemplatedElementView( {
 			this._doAfterRender( () => parentOpenEditingPanel.call( this, options ) );
 		},
 
+		addElement( data: Partial< V1ElementModelProps >, options?: { edit?: boolean; at?: number } ) {
+			if ( this.isRendered ) {
+				return parentAddElement.call( this, data, options );
+			}
+
+			return createPendingElement( this, data, options );
+		},
+
 		getInteractionId() {
 			const originId = this.model.get( 'originId' );
 			const id = this.model.get( 'id' );

package/src/legacy/create-pending-element.ts

@@ -0,0 +1,74 @@
+import {
+	addModelToParent,
+	findModelInDocument,
+	generateElementId,
+	getContainer,
+	type V1Element,
+	type V1ElementModelProps,
+} from '@elementor/editor-elements';
+
+import { type ElementView } from './types';
+
+export function createPendingElement(
+	wrapperView: ElementView,
+	data: Partial< V1ElementModelProps >,
+	options: { edit?: boolean; at?: number } = {}
+): { getContainer: () => V1Element } | undefined {
+	const parentContainer = wrapperView.getContainer();
+	const model: Partial< V1ElementModelProps > = { ...data };
+
+	if ( ! model.id ) {
+		model.id = generateElementId();
+	}
+
+	if ( ! model.elements ) {
+		model.elements = [];
+	}
+
+	const added = addModelToParent( parentContainer.id, model as V1ElementModelProps, options );
+
+	if ( ! added ) {
+		return undefined;
+	}
+
+	const childId = model.id;
+	const childModel = findModelInDocument( childId );
+
+	if ( ! childModel ) {
+		return undefined;
+	}
+
+	const pendingContainer: V1Element = {
+		id: childId,
+		settings: { get: () => ( {} ), set: () => ( {} ), toJSON: () => ( {} ) } as V1Element[ 'settings' ],
+		parent: parentContainer,
+		model: childModel as V1Element[ 'model' ],
+		view: undefined,
+		lookup() {
+			return getContainer( childId ) ?? pendingContainer;
+		},
+	};
+
+	wrapperView.once( 'render', () => {
+		wrapperView.model?.trigger?.( 'navigator:add', childModel, options );
+	} );
+
+	if ( options.edit !== false ) {
+		selectChildWhenWrapperRenders( wrapperView, childId );
+	}
+
+	return { getContainer: () => pendingContainer };
+}
+
+function selectChildWhenWrapperRenders( wrapperView: ElementView, childId: string ): void {
+	wrapperView.once( 'render', () => {
+		const childContainer = getContainer( childId );
+
+		if ( childContainer?.model?.trigger ) {
+			childContainer.model.trigger( 'request:edit' );
+			return;
+		}
+
+		wrapperView.model?.trigger?.( 'request:edit' );
+	} );
+}

package/src/legacy/create-templated-element-type.ts

@@ -13,10 +13,10 @@ import {
 } from './twig-rendering-utils';
 import {
 	type ElementType,
-	type ElementView,
 	type LegacyWindow,
 	type NamespacedRenderContext,
 	type RenderContext,
+	type TemplatedElementView,
 } from './types';
 
 export type CreateTemplatedElementTypeOptions = {
@@ -66,7 +66,7 @@ export function createTemplatedElementView( {
 	type,
 	renderer,
 	element,
-}: CreateTemplatedElementTypeOptions ): typeof ElementView {
+}: CreateTemplatedElementTypeOptions ): typeof TemplatedElementView {
 	const BaseView = createElementViewClassDeclaration();
 
 	const { templateKey, baseStylesDictionary, resolveProps } = setupTwigRenderer( {

package/src/legacy/types.ts

@@ -1,5 +1,5 @@
 import { type Root } from 'react-dom/client';
-import { type V1Element } from '@elementor/editor-elements';
+import { type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
 import { type Props, type PropValue } from '@elementor/editor-props';
 
 export type RenderContext< T = unknown > = Record< string, T >;
@@ -89,6 +89,8 @@ export declare class ElementView {
 
 	constructor( ...args: unknown[] );
 
+	addElement( data: Partial< V1ElementModelProps >, options?: object ): unknown;
+
 	onRender( ...args: unknown[] ): void;
 
 	onDestroy( ...args: unknown[] ): void;
@@ -163,6 +165,12 @@ export declare class ElementView {
 	_openEditingPanel( options?: { scrollIntoView: boolean } ): void;
 
 	once: ( event: string, callback: () => void ) => void;
+
+	getContainer(): V1Element;
+}
+
+export declare class TemplatedElementView extends ElementView {
+	_doAfterRender( callback: () => void ): void;
 }
 
 type JQueryElement = {

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();
+};