@elementor/editor-elements 3.33.0-98 → 3.35.0-324

package/src/sync/replace-element.ts

@@ -1,31 +1,69 @@
+import { ElementIndexNotFoundError, ElementNotFoundError, ElementParentNotFoundError } from '../errors';
 import { createElement } from './create-element';
 import { deleteElement } from './delete-element';
 import { getContainer } from './get-container';
-import { type V1Element, type V1ElementModelProps } from './types';
+import { type V1ElementData, type V1ElementModelProps } from './types';
+
+type ElementLocation = {
+	containerId: string;
+	index: number;
+};
 
 type ReplaceElementArgs = {
-	currentElement: V1Element;
+	currentElement: V1ElementData;
 	newElement: Omit< V1ElementModelProps, 'id' >;
 	withHistory?: boolean;
 };
 
 export const replaceElement = ( { currentElement, newElement, withHistory = true }: ReplaceElementArgs ) => {
-	const parent = getContainer( currentElement.id )?.parent;
+	const { containerId, index } = getNewElementLocation( currentElement, newElement );
+
+	createElement( {
+		containerId,
+		model: newElement,
+		options: { at: index, useHistory: withHistory },
+	} );
+
+	deleteElement( { elementId: currentElement.id, options: { useHistory: withHistory } } );
+};
+
+function getNewElementLocation(
+	currentElement: V1ElementData,
+	newElement: Omit< V1ElementModelProps, 'id' >
+): ElementLocation {
+	let location: ElementLocation;
 
+	const currentElementContainer = getContainer( currentElement.id );
+	if ( ! currentElementContainer ) {
+		throw new ElementNotFoundError( { context: { elementId: currentElement.id } } );
+	}
+
+	const parent = currentElementContainer.parent;
 	if ( ! parent ) {
-		throw new Error( `Parent not found for element ${ currentElement.id }. Cannot replace element.` );
+		throw new ElementParentNotFoundError( { context: { elementId: currentElement.id } } );
 	}
 
-	const elementIndex = parent.children?.findIndex( ( child ) => child.id === currentElement.id );
+	const elementIndex = currentElementContainer.view?._index ?? 0;
 	if ( elementIndex === undefined || elementIndex === -1 ) {
-		throw new Error( `Element ${ currentElement.id } not found in parent container. Cannot replace element.` );
+		throw new ElementIndexNotFoundError( { context: { elementId: currentElement.id } } );
 	}
 
-	createElement( {
-		containerId: parent.id,
-		model: newElement,
-		options: { at: elementIndex, useHistory: withHistory },
+	location = { containerId: parent.id, index: elementIndex };
+
+	// If the element is at document top level and is a widget, wrap it with an empty container
+	if ( parent.id === 'document' && newElement.elType === 'widget' ) {
+		location = createWrapperForWidget( parent.id, elementIndex );
+	}
+
+	return location;
+}
+
+function createWrapperForWidget( parentId: string, elementIndex: number ): ElementLocation {
+	const container = createElement( {
+		containerId: parentId,
+		model: { elType: 'container' },
+		options: { at: elementIndex, useHistory: false },
 	} );
 
-	deleteElement( { elementId: currentElement.id, options: { useHistory: withHistory } } );
-};
+	return { containerId: container.id, index: 0 };
+}

package/src/sync/types.ts

@@ -1,5 +1,5 @@
 import { type PropsSchema, type PropValue } from '@elementor/editor-props';
-import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+import { type ClassState, type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 
 import { type ControlItem } from '../types';
 
@@ -44,19 +44,47 @@ export type V1Element = {
 	parent?: V1Element;
 };
 
+export type ElementInteractions = {
+	version: number;
+	items: InteractionItem[];
+};
+
+export type InteractionItem = {
+	interaction_id?: string;
+	animation: {
+		animation_type: string;
+		animation_id: string;
+	};
+};
+
 export type V1ElementModelProps = {
+	isLocked?: boolean;
 	widgetType?: string;
 	elType: string;
 	id: string;
 	styles?: Record< StyleDefinitionID, StyleDefinition >;
 	elements?: V1Model< V1ElementModelProps >[];
 	settings?: V1ElementSettingsProps;
+	editor_settings?: V1ElementEditorSettingsProps;
+	interactions?: string | ElementInteractions;
+};
+
+export type V1ElementData = Omit< V1ElementModelProps, 'elements' > & {
+	elements?: V1ElementData[];
+};
+
+export type V1ElementEditorSettingsProps = {
+	title?: string;
+	initial_position?: number;
+	component_uid?: string;
 };
 
 export type V1ElementSettingsProps = Record< string, PropValue >;
 
-export type V1ElementConfig = {
+export type V1ElementConfig< T = object > = {
 	title: string;
+	widgetType?: string;
+	elType?: string;
 	controls: object;
 	atomic?: boolean;
 	atomic_controls?: ControlItem[];
@@ -66,7 +94,8 @@ export type V1ElementConfig = {
 	twig_main_template?: string;
 	base_styles?: Record< string, StyleDefinition >;
 	base_styles_dictionary?: Record< string, string >;
-};
+	atomic_style_states?: ClassState[];
+} & T;
 
 type V1Model< T > = {
 	get: < K extends keyof T >( key: K ) => T[ K ];

package/src/sync/update-element-editor-settings.ts

@@ -0,0 +1,28 @@
+import { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';
+
+import { type V1ElementModelProps } from '..';
+import { getContainer } from './get-container';
+
+export const updateElementEditorSettings = ( {
+	elementId,
+	settings,
+}: {
+	elementId: string;
+	settings: V1ElementModelProps[ 'editor_settings' ];
+} ) => {
+	const element = getContainer( elementId );
+
+	if ( ! element ) {
+		throw new Error( `Element with id ${ elementId } not found` );
+	}
+
+	const editorSettings = element.model.get( 'editor_settings' ) ?? {};
+
+	element.model.set( 'editor_settings', { ...editorSettings, ...settings } );
+
+	setDocumentModifiedStatus( true );
+};
+
+function setDocumentModifiedStatus( status: boolean ) {
+	runCommandSync( 'document/save/set-is-modified', { status }, { internal: true } );
+}

package/src/sync/update-element-interactions.ts

@@ -0,0 +1,32 @@
+import { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';
+
+import { type V1ElementModelProps } from '..';
+import { getContainer } from './get-container';
+
+export const updateElementInteractions = ( {
+	elementId,
+	interactions,
+}: {
+	elementId: string;
+	interactions: V1ElementModelProps[ 'interactions' ];
+} ) => {
+	const element = getContainer( elementId );
+
+	if ( ! element ) {
+		throw new Error( `Element with id ${ elementId } not found` );
+	}
+
+	element.model.set( 'interactions', interactions );
+
+	window.dispatchEvent( new CustomEvent( 'elementor/element/update_interactions' ) );
+
+	setDocumentModifiedStatus( true );
+};
+
+export const playElementInteractions = ( elementId: string, animationId: string ) => {
+	window.top?.dispatchEvent( new CustomEvent( 'atomic/play_interactions', { detail: { elementId, animationId } } ) );
+};
+
+function setDocumentModifiedStatus( status: boolean ) {
+	runCommandSync( 'document/save/set-is-modified', { status }, { internal: true } );
+}

package/src/types.ts

@@ -1,4 +1,5 @@
 import { type PropsSchema } from '@elementor/editor-props';
+import { type ClassState } from '@elementor/editor-styles';
 
 export type ElementID = string;
 
@@ -12,6 +13,7 @@ export type ElementType = {
 	controls: ControlItem[];
 	propsSchema: PropsSchema;
 	dependenciesPerTargetMapping?: Record< string, string[] >;
+	styleStates?: ClassState[];
 	title: string;
 };
 
@@ -39,6 +41,19 @@ export type Control = {
 	};
 };
 
-export type ControlItem = ControlsSection | Control;
+export type ElementControl = {
+	type: 'element-control';
+	value: {
+		type: string;
+		label?: string;
+		props: Record< string, unknown >;
+		meta?: {
+			layout?: ControlLayout;
+			topDivider?: boolean;
+		};
+	};
+};
+
+export type ControlItem = ControlsSection | Control | ElementControl;
 
 export type ControlLayout = 'full' | 'two-columns' | 'custom';

package/src/hooks/use-element-type.ts

@@ -1,35 +0,0 @@
-import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
-
-import { getWidgetsCache } from '../sync/get-widgets-cache';
-import { type ElementType } from '../types';
-
-export function useElementType( type?: string ) {
-	return useListenTo(
-		commandEndEvent( 'editor/documents/load' ),
-		(): ElementType | null => {
-			if ( ! type ) {
-				return null;
-			}
-
-			const widgetsCache = getWidgetsCache();
-			const elementType = widgetsCache?.[ type ];
-
-			if ( ! elementType?.atomic_controls ) {
-				return null;
-			}
-
-			if ( ! elementType?.atomic_props_schema ) {
-				return null;
-			}
-
-			return {
-				key: type,
-				controls: elementType.atomic_controls,
-				propsSchema: elementType.atomic_props_schema,
-				dependenciesPerTargetMapping: elementType.dependencies_per_target_mapping ?? {},
-				title: elementType.title,
-			};
-		},
-		[ type ]
-	);
-}