@elementor/editor-canvas 0.10.0 → 0.11.1

package/src/components/__tests__/elements-overlays.test.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { createDOMElement, createMockElementType } from 'test-utils';
 import { useElementsDomRef, useSelectedElement } from '@elementor/editor-elements';
-import {
-	__privateUseIsPreviewMode as useIsPreviewMode,
-	__privateUseIsRouteActive as useIsRouteActive,
-} from '@elementor/editor-v1-adapters';
+import { __privateUseIsRouteActive as useIsRouteActive, useEditMode } from '@elementor/editor-v1-adapters';
 import { render, screen } from '@testing-library/react';
 
 import { CANVAS_WRAPPER_ID } from '../element-overlay';
@@ -48,7 +45,7 @@ describe( '<ElementsOverlays />', () => {
 			} )
 		);
 
-		jest.mocked( useIsPreviewMode ).mockReturnValue( false );
+		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( false );
 
 		jest.mocked( useElementsDomRef ).mockImplementation( () => atomicElements );
@@ -103,7 +100,7 @@ describe( '<ElementsOverlays />', () => {
 		},
 	] )( 'should not render overlays if $message', ( { payload } ) => {
 		// Arrange.
-		jest.mocked( useIsPreviewMode ).mockReturnValue( payload.isPreviewMode );
+		jest.mocked( useEditMode ).mockReturnValue( payload.isPreviewMode ? 'preview' : 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( payload.isKitRouteActive );
 
 		jest.mocked( useSelectedElement ).mockReturnValue(

package/src/components/elements-overlays.tsx

@@ -1,20 +1,18 @@
 import * as React from 'react';
 import { useElementsDomRef, useSelectedElement } from '@elementor/editor-elements';
-import {
-	__privateUseIsPreviewMode as useIsPreviewMode,
-	__privateUseIsRouteActive as useIsRouteActive,
-} from '@elementor/editor-v1-adapters';
+import { __privateUseIsRouteActive as useIsRouteActive, useEditMode } from '@elementor/editor-v1-adapters';
 
 import { ElementOverlay } from './element-overlay';
 
 export function ElementsOverlays() {
 	const selected = useSelectedElement();
 	const domElements = useElementsDomRef();
+	const currentEditMode = useEditMode();
 
-	const isPreviewMode = useIsPreviewMode();
+	const isEditMode = currentEditMode === 'edit';
 	const isKitRouteActive = useIsRouteActive( 'panel/global' );
 
-	const isActive = ! isPreviewMode && ! isKitRouteActive;
+	const isActive = isEditMode && ! isKitRouteActive;
 
 	return (
 		isActive &&

package/src/init-style-transformers.ts

@@ -22,7 +22,7 @@ export function initStyleTransformers() {
 		.register(
 			'dimensions',
 			createMultiPropsTransformer(
-				[ 'top', 'right', 'bottom', 'left' ],
+				[ 'block-start', 'block-end', 'inline-start', 'inline-end' ],
 				( { propKey, key } ) => `${ propKey }-${ key }`
 			)
 		)
@@ -46,7 +46,10 @@ export function initStyleTransformers() {
 		)
 		.register(
 			'border-width',
-			createMultiPropsTransformer( [ 'top', 'right', 'bottom', 'left' ], ( { key } ) => `border-${ key }-width` )
+			createMultiPropsTransformer(
+				[ 'block-start', 'block-end', 'inline-start', 'inline-end' ],
+				( { key } ) => `border-${ key }-width`
+			)
 		)
 		.register(
 			'border-radius',

package/src/renderers/__tests__/create-props-resolver.test.ts

@@ -1,12 +1,13 @@
 import { createMockPropType } from 'test-utils';
 
+import { createTransformer } from '../../transformers/create-transformer';
 import { createPropsResolver } from '../create-props-resolver';
 
 describe( 'createPropsResolver', () => {
 	it( 'should resolve simple props', async () => {
 		// Arrange.
 		const resolve = createPropsResolver( {
-			transformers: { int: ( value ) => value + 1 },
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
 			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
 		} );
 
@@ -24,7 +25,7 @@ describe( 'createPropsResolver', () => {
 	it( 'should skip disabled props', async () => {
 		// Arrange.
 		const resolve = createPropsResolver( {
-			transformers: { int: ( value ) => value + 1 },
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
 			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
 		} );
 
@@ -46,7 +47,7 @@ describe( 'createPropsResolver', () => {
 	it( 'should fallback to default value when there is no value', async () => {
 		// Arrange.
 		const resolve = createPropsResolver( {
-			transformers: { int: ( value ) => value + 1 },
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
 			schema: {
 				int: createMockPropType( {
 					kind: 'plain',
@@ -66,7 +67,7 @@ describe( 'createPropsResolver', () => {
 	it( 'should skip props that are not in the schema', async () => {
 		// Arrange.
 		const resolve = createPropsResolver( {
-			transformers: { int: ( value ) => value + 1 },
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 			},
@@ -93,7 +94,7 @@ describe( 'createPropsResolver', () => {
 	it( "should skip props that don't have a transformer", async () => {
 		// Arrange.
 		const resolve = createPropsResolver( {
-			transformers: { int: ( value ) => value + 1 },
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
@@ -121,10 +122,10 @@ describe( 'createPropsResolver', () => {
 	it( 'should skip props when their transformer throws an error', async () => {
 		const resolve = createPropsResolver( {
 			transformers: {
-				int: ( value ) => value + 1,
-				throws: () => {
+				int: createTransformer( ( value: number ) => value + 1 ),
+				throws: createTransformer< number >( () => {
 					throw new Error( 'Not Working!' );
-				},
+				} ),
 			},
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
@@ -154,7 +155,7 @@ describe( 'createPropsResolver', () => {
 		const onResolve = jest.fn();
 
 		const resolve = createPropsResolver( {
-			transformers: { int: ( value ) => value + 1 },
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				int2: createMockPropType( { kind: 'plain', key: 'int' } ),

package/src/transformers/create-transformer.ts

@@ -1,6 +1,13 @@
-import { type Transformer } from './types';
+import { type AnyTransformable } from '@elementor/editor-props';
 
-// Wrap transformer for better DX (types) + it will allow us to add more features in the future.
-export function createTransformer< TValue >( cb: Transformer< TValue > ): Transformer< TValue > {
-	return cb;
+import { type Transformer, type UnbrandedTransformer } from './types';
+
+// Wrap transformer for better DX (types).
+// Inspired by: https://tkdodo.eu/blog/the-query-options-api
+export function createTransformer< TValue = never >(
+	cb: TValue extends AnyTransformable
+		? 'Transformable values are invalid, use the actual value instead.'
+		: UnbrandedTransformer< TValue >
+): Transformer< NoInfer< TValue > > {
+	return cb as never;
 }

package/src/transformers/styles/create-multi-props-transformer.ts

@@ -4,7 +4,7 @@ import { createTransformer } from '../create-transformer';
 type KeyGenerator = ( { propKey, key }: { propKey: string; key: string } ) => string;
 
 export const createMultiPropsTransformer = ( keys: string[], keyGenerator: KeyGenerator ) => {
-	return createTransformer( ( value: Record< string, string >, { key: propKey } ) => {
+	return createTransformer< Record< string, string > >( ( value, { key: propKey } ) => {
 		const entries = keys
 			.filter( ( key ) => value[ key ] )
 			.map( ( key ) => [ keyGenerator( { propKey, key } ), value[ key ] ] );

package/src/transformers/types.ts

@@ -1,4 +1,4 @@
-export type Transformer< TValue > = (
+export type UnbrandedTransformer< TValue > = (
 	value: TValue,
 	options: {
 		key: string;
@@ -6,6 +6,12 @@ export type Transformer< TValue > = (
 	}
 ) => unknown;
 
+const brand = Symbol( 'transformer-brand' );
+
+export type Transformer< TValue > = UnbrandedTransformer< TValue > & {
+	[ brand ]: true;
+};
+
 export type TransformerName = string;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any