@elementor/editor-canvas 4.1.0-697 → 4.1.0-699

package/dist/index.d.mts

@@ -164,6 +164,7 @@ type BackboneCollection<Model extends object> = {
 };
 type ElementModel = {
     id: string;
+    originId?: string;
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;

package/dist/index.d.ts

@@ -164,6 +164,7 @@ type BackboneCollection<Model extends object> = {
 };
 type ElementModel = {
     id: string;
+    originId?: string;
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;

package/dist/index.js

@@ -833,14 +833,22 @@ var UnknownStyleStateError = (0, import_utils2.createError)({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     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;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -1025,7 +1033,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {
@@ -2008,6 +2016,7 @@ function createTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary
@@ -2042,6 +2051,11 @@ function createTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => super._openEditingPanel(options));
     }
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
+    }
   };
 }
 
@@ -2074,10 +2088,11 @@ function createNestedTemplatedElementType({
 }
 function buildEditorAttributes(model) {
   const id = model.get("id");
+  const originId = model.get("originId");
   const cid = model.cid ?? "";
   const attrs = {
     "data-model-cid": cid,
-    "data-interaction-id": id,
+    "data-interaction-id": originId ?? id,
     "x-ignore": "true"
   };
   return Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
@@ -2154,6 +2169,7 @@ function createNestedTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary,
@@ -2283,6 +2299,11 @@ function createNestedTemplatedElementView({
     },
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
+    },
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
     }
   });
 }

package/dist/index.mjs

@@ -799,14 +799,22 @@ var UnknownStyleStateError = createError({
 var SELECTORS_MAP = {
   class: "."
 };
+var DEFAULT_BREAKPOINT = "desktop";
+var DEFAULT_STATE = "normal";
+function getStyleUniqueKey(style) {
+  const breakpoint = style.variants[0]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+  const state = style.variants[0]?.meta?.state ?? DEFAULT_STATE;
+  return `${style.id}-${breakpoint}-${state}`;
+}
 function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
   return async ({ styles, signal }) => {
-    const seenIds = /* @__PURE__ */ new Set();
+    const seenKeys = /* @__PURE__ */ new Set();
     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;
     });
     const stylesCssPromises = uniqueStyles.map(async (style) => {
@@ -991,7 +999,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     });
     return renderStyles({ styles: breakToBreakpoints(styles), signal }).then((rendered) => {
       rebuildCache(cache, allStyles, rendered);
-      return rendered;
+      return getOrderedItems(cache);
     });
   }
   function breakToBreakpoints(styles) {
@@ -1974,6 +1982,7 @@ function createTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary
@@ -2008,6 +2017,11 @@ function createTemplatedElementView({
     _openEditingPanel(options) {
       this._doAfterRender(() => super._openEditingPanel(options));
     }
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
+    }
   };
 }
 
@@ -2040,10 +2054,11 @@ function createNestedTemplatedElementType({
 }
 function buildEditorAttributes(model) {
   const id = model.get("id");
+  const originId = model.get("originId");
   const cid = model.cid ?? "";
   const attrs = {
     "data-model-cid": cid,
-    "data-interaction-id": id,
+    "data-interaction-id": originId ?? id,
     "x-ignore": "true"
   };
   return Object.entries(attrs).map(([key, value]) => `${key}="${value}"`).join(" ");
@@ -2120,6 +2135,7 @@ function createNestedTemplatedElementView({
         this._lastResolvedSettingsHash = settingsHash;
         const context = {
           id: model.get("id"),
+          interaction_id: this.getInteractionId(),
           type,
           settings,
           base_styles: baseStylesDictionary,
@@ -2249,6 +2265,11 @@ function createNestedTemplatedElementView({
     },
     _openEditingPanel(options) {
       this._doAfterRender(() => parentOpenEditingPanel.call(this, options));
+    },
+    getInteractionId() {
+      const originId = this.model.get("originId");
+      const id = this.model.get("id");
+      return originId ?? id;
     }
   });
 }

package/package.json

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

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

@@ -289,6 +289,57 @@ describe( 'useStyleItems', () => {
 		expect( result.current ).toHaveLength( 2 );
 	} );
 
+	it( 'should maintain breakpoint order after style update', 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 mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [
+			createMockStyleDefinitionWithVariants( {
+				id: 'style1',
+				variants: [
+					{ meta: { breakpoint: null, state: null }, props: { padding: '10px' }, custom_css: null },
+					{ meta: { breakpoint: 'tablet', state: null }, props: { padding: '8px' }, custom_css: null },
+					{ meta: { breakpoint: 'mobile', state: null }, props: { padding: '5px' }, custom_css: null },
+				],
+			} ),
+		] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		// Act - initial render.
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: 'tablet', state: null },
+				props: { padding: '12px' },
+			} );
+		} );
+
+		// Assert - items should be ordered by breakpoint (desktop, tablet, mobile).
+		const breakpointOrder = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrder ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+
+		// Act - update again (should maintain order).
+		await act( async () => {
+			mockProvider.actions.update?.( { id: 'style1', label: 'Updated' } );
+		} );
+
+		// Assert - order should still be maintained.
+		const breakpointOrderAfterUpdate = result.current.map( ( item ) => item.breakpoint );
+		expect( breakpointOrderAfterUpdate ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+	} );
+
 	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

@@ -191,7 +191,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 		return renderStyles( { styles: breakToBreakpoints( styles ), signal } ).then( ( rendered ) => {
 			rebuildCache( cache, allStyles, rendered );
 
-			return rendered;
+			return getOrderedItems( cache );
 		} );
 	}
 

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

@@ -61,13 +61,14 @@ export function createNestedTemplatedElementType( {
 	};
 }
 
-function buildEditorAttributes( model: { get: ( key: 'id' ) => string; cid?: string } ): string {
+function buildEditorAttributes( model: ElementView[ 'model' ] ): string {
 	const id = model.get( 'id' );
+	const originId = model.get( 'originId' );
 	const cid = model.cid ?? '';
 
 	const attrs: Record< string, string > = {
 		'data-model-cid': cid,
-		'data-interaction-id': id,
+		'data-interaction-id': originId ?? id,
 		'x-ignore': 'true',
 	};
 
@@ -181,6 +182,7 @@ export function createNestedTemplatedElementView( {
 
 					const context = {
 						id: model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -361,5 +363,12 @@ export function createNestedTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => parentOpenEditingPanel.call( this, options ) );
 		},
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		},
 	} ) as unknown as typeof ElementView;
 }

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

@@ -162,6 +162,7 @@ export function createTemplatedElementView( {
 
 					const context = {
 						id: this.model.get( 'id' ),
+						interaction_id: this.getInteractionId(),
 						type,
 						settings,
 						base_styles: baseStylesDictionary,
@@ -206,5 +207,12 @@ export function createTemplatedElementView( {
 		_openEditingPanel( options?: { scrollIntoView: boolean } ) {
 			this._doAfterRender( () => super._openEditingPanel( options ) );
 		}
+
+		getInteractionId() {
+			const originId = this.model.get( 'originId' );
+			const id = this.model.get( 'id' );
+
+			return originId ?? id;
+		}
 	};
 }

package/src/legacy/types.ts

@@ -203,6 +203,7 @@ type BackboneCollection< Model extends object > = {
 
 export type ElementModel = {
 	id: string;
+	originId?: string;
 	elType: string;
 	settings: BackboneModel< Props >;
 	editor_settings: Record< string, unknown >;

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