@elementor/editor-canvas 0.12.0 → 0.13.0

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

@@ -0,0 +1,53 @@
+import { type V1Element } from '@elementor/editor-elements';
+import {
+	__privateListenTo as listenTo,
+	blockCommand,
+	type CommandEvent,
+	commandStartEvent,
+} from '@elementor/editor-v1-adapters';
+
+import { undoablePasteElementStyle } from './undoable-actions/paste-element-style';
+import { type ContainerArgs, getClipboardElements, hasAtomicWidgets, isAtomicWidget } from './utils';
+
+type PasteStylesCommandArgs = ContainerArgs & {
+	storageKey?: string;
+};
+
+export function initPasteStyleCommand() {
+	const pasteElementStyleCommand = undoablePasteElementStyle();
+
+	blockCommand( {
+		command: 'document/elements/paste-style',
+		condition: hasAtomicWidgets,
+	} );
+
+	listenTo( commandStartEvent( 'document/elements/paste-style' ), ( e ) =>
+		pasteStyles( ( e as CommandEvent ).args, pasteElementStyleCommand )
+	);
+}
+
+function pasteStyles( args: PasteStylesCommandArgs, pasteCallback: ReturnType< typeof undoablePasteElementStyle > ) {
+	const { containers = [ args.container ], storageKey } = args;
+
+	const clipboardElements = getClipboardElements( storageKey );
+	const [ clipboardElement ] = clipboardElements ?? [];
+
+	if ( ! clipboardElement ) {
+		return;
+	}
+
+	const elementStyles = clipboardElement.styles;
+	const elementStyle = Object.values( elementStyles ?? {} )[ 0 ]; // we currently support only one local style
+
+	if ( ! elementStyle ) {
+		return;
+	}
+
+	const atomicContainers = containers.filter( isAtomicWidget ) as V1Element[];
+
+	if ( ! atomicContainers.length ) {
+		return;
+	}
+
+	pasteCallback( { containers: atomicContainers, newStyle: elementStyle } );
+}

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

@@ -0,0 +1,34 @@
+import { type V1Element } from '@elementor/editor-elements';
+import {
+	__privateListenTo as listenTo,
+	blockCommand,
+	type CommandEvent,
+	commandStartEvent,
+} from '@elementor/editor-v1-adapters';
+
+import { undoableResetElementStyle } from './undoable-actions/reset-element-style';
+import { type ContainerArgs, hasAtomicWidgets, isAtomicWidget } from './utils';
+
+export function initResetStyleCommand() {
+	const resetElementStyles = undoableResetElementStyle();
+
+	blockCommand( {
+		command: 'document/elements/reset-style',
+		condition: hasAtomicWidgets,
+	} );
+
+	listenTo( commandStartEvent( 'document/elements/reset-style' ), ( e ) =>
+		resetStyles( ( e as CommandEvent ).args, resetElementStyles )
+	);
+}
+
+function resetStyles( args: ContainerArgs, resetElementStyles: ReturnType< typeof undoableResetElementStyle > ) {
+	const { containers = [ args.container ] } = args;
+	const atomicContainers = containers.filter( isAtomicWidget ) as V1Element[];
+
+	if ( ! atomicContainers.length ) {
+		return;
+	}
+
+	resetElementStyles( { containers: atomicContainers } );
+}

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

@@ -0,0 +1,107 @@
+import {
+	createElementStyle,
+	deleteElementStyle,
+	getElementStyles,
+	updateElementStyle,
+	type V1Element,
+} from '@elementor/editor-elements';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { getClassesProp, getTitleForContainers } from '../utils';
+
+type PasteElementStyleArgs = {
+	containers: V1Element[];
+	newStyle: StyleDefinition;
+};
+
+export const undoablePasteElementStyle = () =>
+	undoable(
+		{
+			do: ( { containers, newStyle }: PasteElementStyleArgs ) => {
+				return containers.map( ( container ) => {
+					const elementId = container.id;
+					const classesProp = getClassesProp( container );
+
+					if ( ! classesProp ) {
+						return null;
+					}
+
+					const originalStyles = getElementStyles( container.id );
+
+					const [ styleId, styleDef ] = Object.entries( originalStyles ?? {} )[ 0 ] ?? []; // we currently support only one local style
+					const originalStyle = Object.keys( styleDef ?? {} ).length ? styleDef : null;
+
+					const revertData = {
+						styleId,
+						originalStyle,
+					};
+
+					if ( styleId ) {
+						newStyle.variants.forEach( ( { meta, props } ) => {
+							updateElementStyle( {
+								elementId,
+								styleId,
+								meta,
+								props,
+							} );
+						} );
+					} else {
+						const [ firstVariant ] = newStyle.variants;
+						const additionalVariants = newStyle.variants.slice( 1 );
+
+						revertData.styleId = createElementStyle( {
+							elementId,
+							classesProp,
+							label: LOCAL_STYLES_RESERVED_LABEL,
+							...firstVariant,
+							additionalVariants,
+						} );
+					}
+
+					return revertData;
+				} );
+			},
+
+			undo: ( { containers }, revertDataItems ) => {
+				containers.forEach( ( container, index ) => {
+					const revertData = revertDataItems[ index ];
+
+					if ( ! revertData ) {
+						return;
+					}
+
+					if ( ! revertData.originalStyle ) {
+						// the container didn't have a style before pasting the new style
+						deleteElementStyle( container.id, revertData.styleId );
+
+						return;
+					}
+
+					const classesProp = getClassesProp( container );
+
+					if ( ! classesProp ) {
+						return;
+					}
+
+					const [ firstVariant ] = revertData.originalStyle.variants;
+					const additionalVariants = revertData.originalStyle.variants.slice( 1 );
+
+					createElementStyle( {
+						elementId: container.id,
+						classesProp,
+						label: LOCAL_STYLES_RESERVED_LABEL,
+						styleId: revertData.styleId,
+						...firstVariant,
+						additionalVariants,
+					} );
+				} );
+			},
+		},
+		{
+			title: ( { containers } ) => getTitleForContainers( containers ),
+			subtitle: __( 'Style Pasted', 'elementor' ),
+		}
+	);

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

@@ -0,0 +1,60 @@
+import { createElementStyle, deleteElementStyle, getElementStyles, type V1Element } from '@elementor/editor-elements';
+import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { getClassesProp, getTitleForContainers } from '../utils';
+
+type ResetElementStyleArgs = {
+	containers: V1Element[];
+};
+
+export const undoableResetElementStyle = () =>
+	undoable(
+		{
+			do: ( { containers }: ResetElementStyleArgs ) => {
+				return containers.map( ( container ) => {
+					const elementId = container.model.get( 'id' );
+
+					const containerStyles = getElementStyles( elementId );
+
+					Object.keys( containerStyles ?? {} ).forEach( ( styleId ) =>
+						deleteElementStyle( elementId, styleId )
+					);
+
+					return containerStyles;
+				} );
+			},
+
+			undo: ( { containers }, revertDataItems ) => {
+				containers.forEach( ( container, index ) => {
+					const classesProp = getClassesProp( container );
+
+					if ( ! classesProp ) {
+						return;
+					}
+
+					const elementId = container.model.get( 'id' );
+					const containerStyles = revertDataItems[ index ];
+
+					Object.entries( containerStyles ?? {} ).forEach( ( [ styleId, style ] ) => {
+						const [ firstVariant ] = style.variants;
+						const additionalVariants = style.variants.slice( 1 );
+
+						createElementStyle( {
+							elementId,
+							classesProp,
+							styleId,
+							label: LOCAL_STYLES_RESERVED_LABEL,
+							...firstVariant,
+							additionalVariants,
+						} );
+					} );
+				} );
+			},
+		},
+		{
+			title: ( { containers } ) => getTitleForContainers( containers ),
+			subtitle: __( 'Style Reset', 'elementor' ),
+		}
+	);

package/src/style-commands/utils.ts

@@ -0,0 +1,62 @@
+import { getElementLabel, getWidgetsCache, type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
+import { CLASSES_PROP_KEY, type PropsSchema } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+export type ContainerArgs = {
+	container?: V1Element;
+	containers?: V1Element[];
+};
+
+export function hasAtomicWidgets( args: ContainerArgs ): boolean {
+	const { containers = [ args.container ] } = args;
+
+	return containers.some( isAtomicWidget );
+}
+
+export function isAtomicWidget( container: V1Element | undefined ): boolean {
+	if ( ! container ) {
+		return false;
+	}
+
+	return Boolean( getContainerSchema( container ) );
+}
+
+export function getClassesProp( container: V1Element ): string | null {
+	const propsSchema = getContainerSchema( container );
+
+	if ( ! propsSchema ) {
+		return null;
+	}
+
+	const [ propKey ] =
+		Object.entries( propsSchema ).find(
+			( [ , propType ] ) => propType.kind === 'plain' && propType.key === CLASSES_PROP_KEY
+		) ?? [];
+
+	return propKey ?? null;
+}
+
+function getContainerSchema( container: V1Element ): PropsSchema | null {
+	const type = container?.model.get( 'widgetType' ) || container?.model.get( 'elType' );
+
+	const widgetsCache = getWidgetsCache();
+	const elementType = widgetsCache?.[ type ];
+
+	return elementType?.atomic_props_schema ?? null;
+}
+
+type ClipboardElements = V1ElementModelProps[];
+
+export function getClipboardElements( storageKey: string = 'clipboard' ): ClipboardElements | undefined {
+	try {
+		const storedData = JSON.parse( localStorage.getItem( 'elementor' ) ?? '{}' );
+
+		return storedData[ storageKey ]?.elements as ClipboardElements;
+	} catch {
+		return undefined;
+	}
+}
+
+export function getTitleForContainers( containers: V1Element[] ): string {
+	return containers.length > 1 ? __( 'Elements', 'elementor' ) : getElementLabel( containers[ 0 ].id );
+}

package/src/transformers/settings/array-transformer.ts

@@ -0,0 +1,5 @@
+import { createTransformer } from '../create-transformer';
+
+export const arrayTransformer = createTransformer( ( value: unknown[] ) => {
+	return value.filter( Boolean );
+} );

package/src/transformers/settings/link-transformer.ts

@@ -0,0 +1,14 @@
+import { createTransformer } from '../create-transformer';
+
+type Link = {
+	destination: string | number;
+	isTargetBlank: boolean;
+};
+
+export const linkTransformer = createTransformer( ( { destination, isTargetBlank }: Link ) => {
+	return {
+		// The real post URL is not relevant in the Editor.
+		href: typeof destination === 'number' ? '#post-id-' + destination : destination,
+		target: isTargetBlank ? '_blank' : '_self',
+	};
+} );

package/src/transformers/{styles → shared}/image-src-transformer.ts

@@ -6,6 +6,6 @@ type ImageSrc = {
 };
 
 export const imageSrcTransformer = createTransformer( ( value: ImageSrc ) => ( {
-	attachment: value.id,
-	url: value.url,
+	id: value.id ?? null,
+	url: value.url ?? null,
 } ) );

package/src/transformers/shared/image-transformer.ts

@@ -0,0 +1,41 @@
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { createTransformer } from '../create-transformer';
+
+type Image = {
+	src?: {
+		id: number | null;
+		url: string | null;
+	};
+	size?: string;
+};
+
+export const imageTransformer = createTransformer( async ( value: Image ) => {
+	const { src, size } = value;
+
+	if ( ! src?.id ) {
+		return src?.url ? { src: src.url } : null;
+	}
+
+	const attachment = await getMediaAttachment( { id: src.id } );
+
+	const sizedAttachment = attachment?.sizes?.[ size ?? '' ];
+
+	if ( sizedAttachment ) {
+		return {
+			src: sizedAttachment.url,
+			height: sizedAttachment.height,
+			width: sizedAttachment.width,
+		};
+	}
+
+	if ( attachment ) {
+		return {
+			src: attachment.url,
+			height: attachment.height,
+			width: attachment.width,
+		};
+	}
+
+	return null;
+} );

package/src/transformers/shared/plain-transformer.ts

@@ -0,0 +1,5 @@
+import { createTransformer } from '../create-transformer';
+
+export const plainTransformer = createTransformer( ( value: unknown ) => {
+	return value;
+} );

package/src/transformers/styles/background-color-overlay-transformer.ts

@@ -1,5 +1,15 @@
 import { createTransformer } from '../create-transformer';
 
-export const backgroundColorOverlayTransformer = createTransformer(
-	( value: string ) => `linear-gradient(${ value }, ${ value })`
-);
+type BackgroundColorOverlay = {
+	color?: string;
+};
+
+export const backgroundColorOverlayTransformer = createTransformer( ( value: BackgroundColorOverlay ) => {
+	const { color = null } = value;
+
+	if ( ! color ) {
+		return null;
+	}
+
+	return `linear-gradient(${ color }, ${ color })`;
+} );

package/src/transformers/styles/background-image-overlay-transformer.ts

@@ -3,7 +3,9 @@ import { createTransformer } from '../create-transformer';
 const DEFAULT_POSITION_VALUE = '0% 0%';
 
 type BackgroundImageOverlay = {
-	image?: string;
+	image?: {
+		src?: string;
+	};
 	size?: string;
 	position?: string;
 	repeat?: string;
@@ -17,8 +19,10 @@ export const backgroundImageOverlayTransformer = createTransformer( ( value: Bac
 		return null;
 	}
 
+	const src = image.src ? `url(${ image.src })` : null;
+
 	const backgroundStyles = [
-		image,
+		src,
 		repeat,
 		attachment,
 		size ? `${ position || DEFAULT_POSITION_VALUE } / ${ size }` : position,

package/src/transformers/styles/image-attachment-transformer.ts

@@ -1,15 +0,0 @@
-import { getMediaAttachment } from '@elementor/wp-media';
-
-import { createTransformer } from '../create-transformer';
-
-type ImageAttachmentId = number;
-
-export const imageAttachmentTransformer = createTransformer( async ( value: ImageAttachmentId ) => {
-	const attachment = await getMediaAttachment( { id: value } );
-
-	if ( ! attachment ) {
-		return null;
-	}
-
-	return attachment;
-} );

package/src/transformers/styles/image-transformer.ts

@@ -1,34 +0,0 @@
-import { createTransformer } from '../create-transformer';
-
-type Image = {
-	src?: {
-		url?: string;
-		attachment?: {
-			url?: string;
-			sizes?: Record< string, { url: string } >;
-		};
-	};
-	size?: string;
-};
-
-export const imageTransformer = createTransformer( ( value: Image ) => {
-	const { src, size } = value;
-
-	if ( src?.url ) {
-		return `url(${ src.url })`;
-	}
-
-	const sizeUrl = src?.attachment?.sizes?.[ size ?? '' ]?.url;
-
-	if ( sizeUrl ) {
-		return `url(${ sizeUrl })`;
-	}
-
-	const attachmentUrl = src?.attachment?.url;
-
-	if ( attachmentUrl ) {
-		return `url(${ attachmentUrl })`;
-	}
-
-	return null;
-} );

package/src/transformers/styles/primitive-transformer.ts

@@ -1,3 +0,0 @@
-import { createTransformer } from '../create-transformer';
-
-export const primitiveTransformer = createTransformer( ( value: unknown ) => value );