@elementor/editor-canvas 0.17.0 → 0.18.0

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

@@ -7,6 +7,7 @@ import { useStyleItems } from '../use-style-items';
 import { useStyleRenderer } from '../use-style-renderer';
 
 jest.mock( '@elementor/editor-styles-repository', () => ( {
+	...jest.requireActual( '@elementor/editor-styles-repository' ),
 	stylesRepository: {
 		getProviders: jest.fn(),
 	},
@@ -36,23 +37,21 @@ describe( 'useStyleItems', () => {
 
 	it( 'should return style items from providers when subscribed', async () => {
 		// Arrange.
-		const mockProvider1 = createMockStylesProvider( {
-			key: 'provider1',
-			priority: 2,
-			styleDefinitions: [
-				createMockStyleDefinition( { id: 'style1' } ),
-				createMockStyleDefinition( { id: 'style2' } ),
-			],
-		} );
+		const mockProvider1 = createMockStylesProvider(
+			{
+				key: 'provider1',
+				priority: 2,
+			},
+			[ createMockStyleDefinition( { id: 'style1' } ), createMockStyleDefinition( { id: 'style2' } ) ]
+		);
 
-		const mockProvider2 = createMockStylesProvider( {
-			key: 'provider2',
-			priority: 1,
-			styleDefinitions: [
-				createMockStyleDefinition( { id: 'style3' } ),
-				createMockStyleDefinition( { id: 'style4' } ),
-			],
-		} );
+		const mockProvider2 = createMockStylesProvider(
+			{
+				key: 'provider2',
+				priority: 1,
+			},
+			[ createMockStyleDefinition( { id: 'style3' } ), createMockStyleDefinition( { id: 'style4' } ) ]
+		);
 
 		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider1, mockProvider2 ] );
 
@@ -89,23 +88,21 @@ describe( 'useStyleItems', () => {
 
 	it( 'should return style items when attach-preview command is triggered', async () => {
 		// Arrange.
-		const mockProvider1 = createMockStylesProvider( {
-			key: 'provider1',
-			priority: 2,
-			styleDefinitions: [
-				createMockStyleDefinition( { id: 'style1' } ),
-				createMockStyleDefinition( { id: 'style2' } ),
-			],
-		} );
+		const mockProvider1 = createMockStylesProvider(
+			{
+				key: 'provider1',
+				priority: 2,
+			},
+			[ createMockStyleDefinition( { id: 'style1' } ), createMockStyleDefinition( { id: 'style2' } ) ]
+		);
 
-		const mockProvider2 = createMockStylesProvider( {
-			key: 'provider2',
-			priority: 1,
-			styleDefinitions: [
-				createMockStyleDefinition( { id: 'style3' } ),
-				createMockStyleDefinition( { id: 'style4' } ),
-			],
-		} );
+		const mockProvider2 = createMockStylesProvider(
+			{
+				key: 'provider2',
+				priority: 1,
+			},
+			[ createMockStyleDefinition( { id: 'style3' } ), createMockStyleDefinition( { id: 'style4' } ) ]
+		);
 
 		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider1, mockProvider2 ] );
 

package/src/hooks/use-floating-on-element.ts

@@ -21,8 +21,8 @@ export function useFloatingOnElement( { element, isSelected }: Options ) {
 			size( {
 				apply( { elements, rects } ) {
 					Object.assign( elements.floating.style, {
-						width: `${ rects.reference.width }px`,
-						height: `${ rects.reference.height }px`,
+						width: `${ rects.reference.width + 2 }px`,
+						height: `${ rects.reference.height + 2 }px`,
 					} );
 				},
 			} ),

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

@@ -66,11 +66,11 @@ type CreateProviderSubscriberArgs = {
 function createProviderSubscriber( { provider, renderStyles, setStyleItems }: CreateProviderSubscriberArgs ) {
 	return abortPreviousRuns( ( abortController ) =>
 		signalizedProcess( abortController.signal )
-			.then( ( _, signal ) => renderStyles( { styles: provider.actions.get(), signal } ) )
+			.then( ( _, signal ) => renderStyles( { styles: provider.actions.all(), signal } ) )
 			.then( ( items ) => {
 				setStyleItems( ( prev ) => ( {
 					...prev,
-					[ provider.key ]: { provider, items },
+					[ provider.getKey() ]: { provider, items },
 				} ) );
 			} )
 			.execute()

package/src/index.ts

@@ -1,7 +1,5 @@
-import { init } from './init';
+export { init } from './init';
 
 export { styleTransformersRegistry } from './style-transformers-registry';
 export { settingsTransformersRegistry } from './settings-transformers-registry';
 export { createTransformer } from './transformers/create-transformer';
-
-init();

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

@@ -11,7 +11,7 @@ import {
 	updateElementStyle,
 } from '@elementor/editor-elements';
 import { type StyleDefinition } from '@elementor/editor-styles';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
 import { initPasteStyleCommand } from '../paste-style';
 import { getClassesProp, getClipboardElements, isAtomicWidget } from '../utils';
@@ -132,7 +132,7 @@ describe( 'pasteStyles', () => {
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container',
 			styleId: 's-1',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,
@@ -195,7 +195,7 @@ describe( 'pasteStyles', () => {
 		// Assert.
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,
@@ -461,7 +461,7 @@ describe( 'pasteStyles', () => {
 		// Assert.
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container-1',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,
@@ -522,7 +522,7 @@ describe( 'pasteStyles', () => {
 
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container-2',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			styleId: 's-1',
 			meta: {

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

@@ -5,7 +5,7 @@ import {
 	mockHistoryManager,
 } from 'test-utils';
 import { createElementStyle, deleteElementStyle, getElementStyles } from '@elementor/editor-elements';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 
 import { initResetStyleCommand } from '../reset-style';
 import { getClassesProp, hasAtomicWidgets, isAtomicWidget } from '../utils';
@@ -80,7 +80,7 @@ describe( 'resetStyles', () => {
 		// Assert.
 		expect( createElementStyle ).toHaveBeenCalledWith( {
 			elementId: 'test-container',
-			label: LOCAL_STYLES_RESERVED_LABEL,
+			label: ELEMENTS_STYLES_RESERVED_LABEL,
 			classesProp: 'classes',
 			meta: {
 				breakpoint: null,

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

@@ -6,7 +6,7 @@ import {
 	type V1Element,
 } from '@elementor/editor-elements';
 import { type StyleDefinition } from '@elementor/editor-styles';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -55,7 +55,7 @@ export const undoablePasteElementStyle = () =>
 						revertData.styleId = createElementStyle( {
 							elementId,
 							classesProp,
-							label: LOCAL_STYLES_RESERVED_LABEL,
+							label: ELEMENTS_STYLES_RESERVED_LABEL,
 							...firstVariant,
 							additionalVariants,
 						} );
@@ -92,7 +92,7 @@ export const undoablePasteElementStyle = () =>
 					createElementStyle( {
 						elementId: container.id,
 						classesProp,
-						label: LOCAL_STYLES_RESERVED_LABEL,
+						label: ELEMENTS_STYLES_RESERVED_LABEL,
 						styleId: revertData.styleId,
 						...firstVariant,
 						additionalVariants,

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

@@ -1,5 +1,5 @@
 import { createElementStyle, deleteElementStyle, getElementStyles, type V1Element } from '@elementor/editor-elements';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -45,7 +45,7 @@ export const undoableResetElementStyle = () =>
 							elementId,
 							classesProp,
 							styleId,
-							label: LOCAL_STYLES_RESERVED_LABEL,
+							label: ELEMENTS_STYLES_RESERVED_LABEL,
 							...firstVariant,
 							additionalVariants,
 						} );