@elementor/editor-interactions 4.0.0-manual → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-manual",
+  "version": "4.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "4.0.0-manual",
-    "@elementor/editor-elements": "4.0.0-manual",
-    "@elementor/editor-mcp": "4.0.0-manual",
-    "@elementor/editor-props": "4.0.0-manual",
-    "@elementor/editor-responsive": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
+    "@elementor/editor-controls": "4.0.0",
+    "@elementor/editor-elements": "4.0.0",
+    "@elementor/editor-mcp": "4.0.0",
+    "@elementor/editor-props": "4.0.0",
+    "@elementor/editor-responsive": "4.0.0",
+    "@elementor/editor-ui": "4.0.0",
+    "@elementor/editor-v1-adapters": "4.0.0",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.0.0-manual",
-    "@elementor/session": "4.0.0-manual",
+    "@elementor/schema": "4.0.0",
+    "@elementor/session": "4.0.0",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-manual",
+    "@elementor/utils": "4.0.0",
+    "@elementor/events": "4.0.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/commands/get-clipboard-elements.ts

@@ -0,0 +1,11 @@
+import type { V1ElementModelProps } from '@elementor/editor-elements';
+
+export function getClipboardElements( storageKey: string = 'clipboard' ): V1ElementModelProps[] | undefined {
+	try {
+		const storedData = JSON.parse( localStorage.getItem( 'elementor' ) ?? '{}' );
+
+		return storedData[ storageKey ]?.elements as V1ElementModelProps[] | undefined;
+	} catch {
+		return undefined;
+	}
+}

package/src/commands/paste-interactions.ts

@@ -0,0 +1,136 @@
+import {
+	getContainer,
+	getElementInteractions,
+	getElementLabel,
+	getWidgetsCache,
+	updateElementInteractions,
+	type V1Element,
+	type V1ElementModelProps,
+} from '@elementor/editor-elements';
+import {
+	__privateListenTo as listenTo,
+	type CommandEvent,
+	commandStartEvent,
+	undoable,
+} from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import type { ElementInteractions } from '../types';
+import { createString } from '../utils/prop-value-utils';
+import { generateTempInteractionId } from '../utils/temp-id-utils';
+import { getClipboardElements } from './get-clipboard-elements';
+
+function isAtomicContainer( container: V1Element ): boolean {
+	const type = container?.model.get( 'widgetType' ) || container?.model.get( 'elType' );
+	const widgetsCache = getWidgetsCache();
+	const elementConfig = widgetsCache?.[ type ];
+
+	return Boolean( elementConfig?.atomic_props_schema );
+}
+
+type PasteInteractionsCommandArgs = {
+	container?: V1Element;
+	containers?: V1Element[];
+	storageKey?: string;
+};
+
+type PasteInteractionsPayload = {
+	containers: V1Element[];
+	newInteractions: ElementInteractions;
+};
+
+function getTitleForContainers( containers: V1Element[] ): string {
+	return containers.length > 1 ? __( 'Elements', 'elementor' ) : getElementLabel( containers[ 0 ].id );
+}
+
+function normalizeClipboardInteractions( raw: V1ElementModelProps[ 'interactions' ] ): ElementInteractions | null {
+	if ( ! raw ) {
+		return null;
+	}
+
+	const parsed: ElementInteractions = typeof raw === 'string' ? ( JSON.parse( raw ) as ElementInteractions ) : raw;
+
+	if ( ! parsed?.items?.length ) {
+		return null;
+	}
+
+	return { version: parsed.version ?? 1, items: parsed.items };
+}
+
+function regenerateInteractionIds( interactions: ElementInteractions ): ElementInteractions {
+	const cloned = structuredClone( interactions ) as ElementInteractions;
+
+	cloned.items?.forEach( ( item ) => {
+		if ( item.$$type === 'interaction-item' && item.value ) {
+			item.value.interaction_id = createString( generateTempInteractionId() );
+		}
+	} );
+
+	return cloned;
+}
+
+export function initPasteInteractionsCommand() {
+	const undoablePasteInteractions = undoable(
+		{
+			do: ( { containers, newInteractions }: PasteInteractionsPayload ) => {
+				const pasted = regenerateInteractionIds( newInteractions );
+
+				return containers.map( ( container ) => {
+					const elementId = container.id;
+					const previous = getElementInteractions( elementId );
+
+					updateElementInteractions( {
+						elementId,
+						interactions: pasted,
+					} );
+
+					return { elementId, previous: previous ?? { version: 1, items: [] } };
+				} );
+			},
+			undo: ( _: PasteInteractionsPayload, revertData ) => {
+				revertData.forEach( ( { elementId, previous } ) => {
+					updateElementInteractions( {
+						elementId,
+						interactions: previous.items?.length ? previous : undefined,
+					} );
+				} );
+			},
+		},
+		{
+			title: ( { containers } ) => getTitleForContainers( containers ),
+			subtitle: __( 'Interactions Pasted', 'elementor' ),
+		}
+	);
+
+	listenTo( commandStartEvent( 'document/elements/paste-interactions' ), ( e ) => {
+		const args = ( e as CommandEvent ).args as PasteInteractionsCommandArgs;
+		const containers = args.containers ?? ( args.container ? [ args.container ] : [] );
+		const storageKey = args.storageKey ?? 'clipboard';
+
+		if ( ! containers.length ) {
+			return;
+		}
+
+		const clipboardElements = getClipboardElements( storageKey );
+		const [ clipboardElement ] = clipboardElements ?? [];
+
+		if ( ! clipboardElement ) {
+			return;
+		}
+
+		const newInteractions = normalizeClipboardInteractions( clipboardElement.interactions );
+
+		if ( ! newInteractions ) {
+			return;
+		}
+
+		const existingContainers = containers.filter( ( c ) => getContainer( c.id ) ) as V1Element[];
+		const validContainers = existingContainers.filter( isAtomicContainer );
+
+		if ( ! validContainers.length ) {
+			return;
+		}
+
+		undoablePasteInteractions( { containers: validContainers, newInteractions } );
+	} );
+}

package/src/components/controls/easing.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_easing', location_l2: 'interactions' } as const;
+
 export const EASING_OPTIONS = {
 	easeIn: __( 'Ease In', 'elementor' ),
 	easeInOut: __( 'Ease In Out', 'elementor' ),
@@ -33,6 +35,7 @@ export function Easing( {}: FieldProps ) {
 			disabledOptions={ disabledOptions }
 			promotionContent={ __( 'Upgrade to control the smoothness of the interaction.', 'elementor' ) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-easing-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/components/controls/effect.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_effect', location_l2: 'interactions' } as const;
+
 export const EFFECT_OPTIONS = {
 	fade: __( 'Fade', 'elementor' ),
 	slide: __( 'Slide', 'elementor' ),
@@ -35,6 +37,7 @@ export function Effect( { value, onChange }: FieldProps ) {
 				'elementor'
 			) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-custom-effect-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/components/controls/repeat.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
+import { Number123Icon, RepeatIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
+import { PromotionOverlayLayout } from '../../ui/promotion-overlay-layout';
+
+const TRACKING_DATA = { target_name: 'interactions_repeat', location_l2: 'interactions' } as const;
+
+export const REPEAT_OPTIONS = {
+	times: __( 'times', 'elementor' ),
+	loop: __( 'loop', 'elementor' ),
+};
+
+export const REPEAT_TOOLTIPS = {
+	times: __( 'Enable number', 'elementor' ),
+	loop: __( 'Infinite repeat', 'elementor' ),
+};
+
+export function Repeat() {
+	const repeatContainerRef = useRef< HTMLDivElement >( null );
+
+	const options: ToggleButtonGroupItem< string >[] = [
+		{
+			value: REPEAT_OPTIONS.times,
+			disabled: true,
+			label: REPEAT_TOOLTIPS.times,
+			renderContent: ( { size } ) => <Number123Icon fontSize={ size } />,
+			showTooltip: true,
+		},
+		{
+			value: REPEAT_OPTIONS.loop,
+			disabled: true,
+			label: REPEAT_TOOLTIPS.loop,
+			renderContent: ( { size } ) => <RepeatIcon fontSize={ size } />,
+			showTooltip: true,
+		},
+	];
+
+	return (
+		<PromotionOverlayLayout
+			ref={ repeatContainerRef }
+			promotionChip={
+				<InteractionsPromotionChip
+					content={ __( 'Upgrade to control how many times the animation repeats.', 'elementor' ) }
+					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-repeat-modal/' }
+					anchorRef={ repeatContainerRef }
+					trackingData={ TRACKING_DATA }
+				/>
+			}
+		>
+			<ToggleButtonGroupUi items={ options } exclusive onChange={ () => {} } value={ '' } />
+		</PromotionOverlayLayout>
+	);
+}

package/src/components/controls/replay.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { type ToggleButtonGroupItem, ToggleButtonGroupUi } from '@elementor/editor-controls';
 import { CheckIcon, MinusIcon } from '@elementor/icons';
-import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type ReplayFieldProps } from '../../types';
 import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
+import { PromotionOverlayLayout } from '../../ui/promotion-overlay-layout';
+
+const TRACKING_DATA = { target_name: 'interactions_replay', location_l2: 'interactions' } as const;
 
 export const REPLAY_OPTIONS = {
 	no: __( 'No', 'elementor' ),
@@ -14,10 +17,8 @@ export const REPLAY_OPTIONS = {
 
 export const BASE_REPLAY: string[] = [ 'no' ];
 
-const OVERLAY_GRID = '1 / 1';
-const CHIP_OFFSET = '50%';
-
-export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
+export function Replay( { onChange }: ReplayFieldProps ) {
+	const replayContainerRef = useRef< HTMLDivElement >( null );
 	const options: ToggleButtonGroupItem< boolean >[] = [
 		{
 			value: false,
@@ -36,17 +37,18 @@ export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
 	];
 
 	return (
-		<Box sx={ { display: 'grid', alignItems: 'center' } }>
-			<Box sx={ { gridArea: OVERLAY_GRID } }>
-				<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ false } />
-			</Box>
-			<Box sx={ { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: 'end' } }>
+		<PromotionOverlayLayout
+			ref={ replayContainerRef }
+			promotionChip={
 				<InteractionsPromotionChip
 					content={ __( 'Upgrade to run the animation every time its trigger occurs.', 'elementor' ) }
 					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-replay-modal/' }
-					anchorRef={ anchorRef }
+					anchorRef={ replayContainerRef }
+					trackingData={ TRACKING_DATA }
 				/>
-			</Box>
-		</Box>
+			}
+		>
+			<ToggleButtonGroupUi items={ options } exclusive onChange={ onChange } value={ false } />
+		</PromotionOverlayLayout>
 	);
 }

package/src/components/controls/trigger.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_trigger', location_l2: 'interactions' } as const;
+
 export const TRIGGER_OPTIONS = {
 	load: __( 'Page load', 'elementor' ),
 	scrollIn: __( 'Scroll into view', 'elementor' ),
@@ -33,6 +35,7 @@ export function Trigger( { value, onChange }: FieldProps ) {
 			promotionLabel={ __( 'PRO triggers', 'elementor' ) }
 			promotionContent={ __( 'Upgrade to unlock more interactions triggers.', 'elementor' ) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-triggers-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }