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

package/src/hooks/use-navigate-back.ts

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { getV1DocumentsManager } from '@elementor/editor-documents';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { selectPath } from '../store/store';
+
+export function useNavigateBack() {
+	const path = useSelector( selectPath );
+
+	const documentsManager = getV1DocumentsManager();
+
+	return useCallback( () => {
+		const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at( -2 ) ?? {};
+
+		const switchToDocument = ( id: number, selector?: string ) => {
+			runCommand( 'editor/documents/switch', {
+				id,
+				selector,
+				mode: 'autosave',
+				setAsInitial: false,
+				shouldScroll: false,
+			} );
+		};
+
+		if ( prevComponentId && prevComponentInstanceId ) {
+			switchToDocument( prevComponentId, `[data-id="${ prevComponentInstanceId }"]` );
+
+			return;
+		}
+
+		switchToDocument( documentsManager.getInitialId() );
+	}, [ path, documentsManager ] );
+}

package/src/init.ts

@@ -1,19 +1,116 @@
-import { injectIntoTop } from '@elementor/editor';
+import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
+import {
+	type CreateTemplatedElementTypeOptions,
+	registerElementType,
+	settingsTransformersRegistry,
+} from '@elementor/editor-canvas';
+import { getV1CurrentDocument } from '@elementor/editor-documents';
+import {
+	FIELD_TYPE,
+	injectIntoPanelHeaderTop,
+	registerControlReplacement,
+	registerFieldIndicator,
+} from '@elementor/editor-editing-panel';
+import { type V1ElementData } from '@elementor/editor-elements';
 import { injectTab } from '@elementor/editor-elements-panel';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+import { __registerSlice as registerSlice } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
-import { ComponentsTab } from './components/components-tab';
+import { componentInstanceTransformer } from './component-instance-transformer';
+import { componentOverridableTransformer } from './component-overridable-transformer';
+import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
+import { Components } from './components/components-tab/components';
+import { COMPONENT_DOCUMENT_TYPE } from './components/consts';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
+import { EditComponent } from './components/edit-component/edit-component';
+import { openEditModeDialog } from './components/in-edit-mode';
+import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
+import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
+import { createComponentType, TYPE } from './create-component-type';
+import { initMcp } from './mcp';
+import { PopulateStore } from './populate-store';
+import { componentOverridablePropTypeUtil } from './prop-types/component-overridable-prop-type';
+import { loadComponentsAssets } from './store/actions/load-components-assets';
+import { removeComponentStyles } from './store/actions/remove-component-styles';
+import { componentsStylesProvider } from './store/components-styles-provider';
+import { slice } from './store/store';
+import { beforeSave } from './sync/before-save';
+import { type ExtendedWindow } from './types';
+import { onElementDrop } from './utils/tracking';
 
 export function init() {
+	stylesRepository.register( componentsStylesProvider );
+
+	registerSlice( slice );
+
+	registerElementType( TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
+		createComponentType( { ...options, showLockedByModal: openEditModeDialog } )
+	);
+
+	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {
+		const document = getV1CurrentDocument();
+		if ( document.config.type === COMPONENT_DOCUMENT_TYPE ) {
+			args.mode = 'autosave';
+		}
+		return true;
+	} );
+
+	registerDataHook( 'after', 'preview/drop', onElementDrop );
+
+	( window as unknown as ExtendedWindow ).elementorCommon.__beforeSave = beforeSave;
+
 	injectTab( {
 		id: 'components',
 		label: __( 'Components', 'elementor' ),
-		component: ComponentsTab,
+		component: Components,
 	} );
 
 	injectIntoTop( {
 		id: 'create-component-popup',
 		component: CreateComponentForm,
 	} );
+
+	injectIntoLogic( {
+		id: 'components-populate-store',
+		component: PopulateStore,
+	} );
+
+	injectIntoTop( {
+		id: 'edit-component',
+		component: EditComponent,
+	} );
+
+	injectIntoPanelHeaderTop( {
+		id: 'component-panel-header',
+		component: ComponentPanelHeader,
+	} );
+
+	registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
+		const { id, config } = getV1CurrentDocument();
+
+		if ( id ) {
+			removeComponentStyles( id );
+		}
+
+		await loadComponentsAssets( ( config?.elements as V1ElementData[] ) ?? [] );
+	} );
+
+	registerFieldIndicator( {
+		fieldType: FIELD_TYPE.SETTINGS,
+		id: 'component-overridable-prop',
+		priority: 1,
+		indicator: OverridablePropIndicator,
+	} );
+
+	registerControlReplacement( {
+		component: OverridablePropControl,
+		condition: ( { value } ) => componentOverridablePropTypeUtil.isValid( value ),
+	} );
+
+	settingsTransformersRegistry.register( 'component-instance', componentInstanceTransformer );
+	settingsTransformersRegistry.register( 'overridable', componentOverridableTransformer );
+
+	initMcp();
 }

package/src/mcp/index.ts

@@ -0,0 +1,14 @@
+import { getMCPByDomain } from '@elementor/editor-mcp';
+
+import { initSaveAsComponentTool } from './save-as-component-tool';
+
+export function initMcp() {
+	const { setMCPDescription } = getMCPByDomain( 'components' );
+
+	setMCPDescription(
+		`Elementor Editor Components MCP - Tools for creating and managing reusable components. 
+        Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
+	);
+
+	initSaveAsComponentTool();
+}

package/src/mcp/save-as-component-tool.ts

@@ -0,0 +1,92 @@
+import { getContainer, type V1ElementData } from '@elementor/editor-elements';
+import { getMCPByDomain } from '@elementor/editor-mcp';
+import { z } from '@elementor/schema';
+
+import { createUnpublishedComponent } from '../store/actions/create-unpublished-component';
+
+const InputSchema = {
+	element_id: z
+		.string()
+		.describe(
+			'The unique identifier of the element to save as a component. ' +
+				'Use the "list-elements" tool to find available element IDs in the current document.'
+		),
+	component_name: z
+		.string()
+		.describe( 'The name for the new component. Should be descriptive and unique among existing components.' ),
+};
+
+const OutputSchema = {
+	message: z.string().optional().describe( 'Additional information about the operation result' ),
+	component_uid: z
+		.string()
+		.optional()
+		.describe( 'The unique identifier of the newly created component (only present on success)' ),
+};
+
+export const VALID_ELEMENT_TYPES = [ 'e-div-block', 'e-flexbox', 'e-tabs' ];
+export const ERROR_MESSAGES = {
+	ELEMENT_NOT_FOUND: "Element not found. Use 'list-elements' to get valid element IDs.",
+	ELEMENT_NOT_ONE_OF_TYPES: `Element is not one of the following types: ${ VALID_ELEMENT_TYPES.join( ', ' ) }`,
+	ELEMENT_IS_LOCKED: 'Cannot save a locked element as a component.',
+};
+
+export const handleSaveAsComponent = async ( params: z.infer< z.ZodObject< typeof InputSchema > > ) => {
+	const { element_id: elementId, component_name: componentName } = params;
+
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		throw new Error( ERROR_MESSAGES.ELEMENT_NOT_FOUND );
+	}
+
+	const elType = container.model.get( 'elType' );
+
+	if ( ! VALID_ELEMENT_TYPES.includes( elType ) ) {
+		throw new Error( ERROR_MESSAGES.ELEMENT_NOT_ONE_OF_TYPES );
+	}
+
+	const element = container.model.toJSON( { remove: [ 'default' ] } ) as V1ElementData;
+
+	if ( element?.isLocked ) {
+		throw new Error( ERROR_MESSAGES.ELEMENT_IS_LOCKED );
+	}
+
+	const uid = createUnpublishedComponent( componentName, element, null );
+
+	return {
+		status: 'ok' as const,
+		message: `Component "${ componentName }" created successfully.`,
+		component_uid: uid,
+	};
+};
+
+export const initSaveAsComponentTool = () => {
+	return getMCPByDomain( 'components' ).addTool( {
+		name: 'save-as-component',
+		schema: InputSchema,
+		outputSchema: OutputSchema,
+		description: `Save an existing element as a reusable component in the Elementor editor.
+
+## When NOT to use this tool:
+- Do not use for elements that are already components (widgetType: 'e-component').
+- Do not use for locked elements.
+- Do not guess element IDs. Always use "list-elements" first to get valid IDs.
+
+## Prerequisites:
+- **Verify element type**: Ensure the element is not already a component (widgetType should not be 'e-component').
+- **Check if element is unlocked**: Locked elements cannot be saved as components.
+- **Check that the element is one of the following types**: ${ VALID_ELEMENT_TYPES.join( ', ' ) }
+
+## Required parameters:
+- **element_id**: The unique ID of the element to save.
+- **component_name**: A descriptive name for the component (2-50 characters).
+
+## Example tool call:
+\`\`\`json
+{ "element_id": "abc123", "component_name": "Hero Section" }
+\`\`\`
+`,
+		handler: handleSaveAsComponent,
+	} );
+};

package/src/populate-store.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { loadComponents } from './store/thunks';
+
+export function PopulateStore() {
+	useEffect( () => {
+		dispatch( loadComponents() );
+	}, [] );
+
+	return null;
+}

package/src/prop-types/component-overridable-prop-type.ts

@@ -0,0 +1,17 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+export const componentOverridablePropTypeUtil = createPropUtils(
+	'overridable',
+	z.object( {
+		override_key: z.string(),
+		origin_value: z
+			.object( {
+				$$type: z.string(),
+				value: z.unknown(),
+			} )
+			.nullable(),
+	} )
+);
+
+export type ComponentOverridablePropValue = z.infer< typeof componentOverridablePropTypeUtil.schema >[ 'value' ];

package/src/store/actions/archive-component.ts

@@ -0,0 +1,16 @@
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { __getStore as getStore } from '@elementor/store';
+
+import { slice } from '../store';
+
+export const archiveComponent = ( componentId: number ) => {
+	const store = getStore();
+	const dispatch = store?.dispatch;
+
+	if ( ! dispatch ) {
+		return;
+	}
+
+	dispatch( slice.actions.archive( componentId ) );
+	setDocumentModifiedStatus( true );
+};

package/src/store/actions/create-unpublished-component.ts

@@ -0,0 +1,40 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch } from '@elementor/store';
+import { generateUniqueId } from '@elementor/utils';
+
+import { type ComponentEventData } from '../../components/create-component-form/utils/get-component-event-data';
+import { replaceElementWithComponent } from '../../components/create-component-form/utils/replace-element-with-component';
+import { trackComponentEvent } from '../../utils/tracking';
+import { slice } from '../store';
+
+export function createUnpublishedComponent(
+	name: string,
+	element: V1ElementData,
+	eventData: ComponentEventData | null
+) {
+	const uid = generateUniqueId( 'component' );
+	const componentBase = { uid, name };
+
+	dispatch(
+		slice.actions.addUnpublished( {
+			...componentBase,
+			elements: [ element ],
+		} )
+	);
+
+	dispatch( slice.actions.addCreatedThisSession( uid ) );
+
+	replaceElementWithComponent( element, componentBase );
+
+	trackComponentEvent( {
+		action: 'created',
+		component_uid: uid,
+		component_name: name,
+		...eventData,
+	} );
+
+	runCommand( 'document/save/auto' );
+
+	return uid;
+}

package/src/store/actions/load-components-assets.ts

@@ -0,0 +1,29 @@
+import { isDocumentDirty, setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { type V1ElementData } from '@elementor/editor-elements';
+
+import { getComponentDocumentData } from '../../utils/component-document-data';
+import { getComponentIds } from '../../utils/get-component-ids';
+import { loadComponentsOverridableProps } from './load-components-overridable-props';
+import { loadComponentsStyles } from './load-components-styles';
+
+export async function loadComponentsAssets( elements: V1ElementData[] ) {
+	const componentIds = await getComponentIds( elements );
+
+	return Promise.all( [
+		updateDocumentState( componentIds ),
+		loadComponentsOverridableProps( componentIds ),
+		loadComponentsStyles( componentIds ),
+	] );
+}
+
+async function updateDocumentState( componentIds: number[] ) {
+	const components = ( await Promise.all( componentIds.map( getComponentDocumentData ) ) ).filter(
+		( document ) => !! document
+	);
+
+	const isDrafted = components.some( isDocumentDirty );
+
+	if ( isDrafted ) {
+		setDocumentModifiedStatus( true );
+	}
+}

package/src/store/actions/load-components-overridable-props.ts

@@ -0,0 +1,33 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient } from '../../api';
+import { selectIsOverridablePropsLoaded, slice } from '../store';
+
+export function loadComponentsOverridableProps( componentIds: number[] ) {
+	if ( ! componentIds.length ) {
+		return;
+	}
+
+	componentIds.forEach( loadComponentOverrides );
+}
+
+async function loadComponentOverrides( componentId: number ) {
+	const isOverridablePropsLoaded = selectIsOverridablePropsLoaded( getState(), componentId );
+
+	if ( isOverridablePropsLoaded ) {
+		return;
+	}
+
+	const overridableProps = await apiClient.getOverridableProps( componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps,
+		} )
+	);
+}

package/src/store/actions/load-components-styles.ts

@@ -0,0 +1,44 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient } from '../../api';
+import { type ComponentId } from '../../types';
+import { selectStyles, slice } from '../store';
+
+export async function loadComponentsStyles( componentIds: number[] ) {
+	if ( ! componentIds.length ) {
+		return;
+	}
+
+	const knownComponents = selectStyles( getState() );
+	const unknownComponentIds = componentIds.filter( ( id ) => ! knownComponents[ id ] );
+
+	if ( ! unknownComponentIds.length ) {
+		return;
+	}
+
+	addComponentStyles( unknownComponentIds );
+}
+
+async function addComponentStyles( ids: ComponentId[] ) {
+	const newComponents = await loadStyles( ids );
+
+	addStyles( newComponents );
+}
+
+async function loadStyles( ids: number[] ): Promise< [ number, V1ElementData ][] > {
+	return Promise.all( ids.map( async ( id ) => [ id, await apiClient.getComponentConfig( id ) ] ) );
+}
+
+function addStyles( data: ( readonly [ ComponentId, V1ElementData ] )[] ) {
+	const styles = Object.fromEntries(
+		data.map( ( [ componentId, componentData ] ) => [ componentId, extractStyles( componentData ) ] )
+	);
+
+	dispatch( slice.actions.addStyles( styles ) );
+}
+
+function extractStyles( element: V1ElementData ): Array< StyleDefinition > {
+	return [ ...Object.values( element.styles ?? {} ), ...( element.elements ?? [] ).flatMap( extractStyles ) ];
+}

package/src/store/actions/remove-component-styles.ts

@@ -0,0 +1,9 @@
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { apiClient } from '../../api';
+import { slice } from '../store';
+
+export function removeComponentStyles( id: number ) {
+	apiClient.invalidateComponentConfigCache( id );
+	dispatch( slice.actions.removeStyles( { id } ) );
+}

package/src/store/actions/set-overridable-prop.ts

@@ -0,0 +1,200 @@
+import { type PropValue } from '@elementor/editor-props';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { generateUniqueId } from '@elementor/utils';
+import { __ } from '@wordpress/i18n';
+
+import { type OverridableProp, type OverridableProps, type OverridablePropsGroup } from '../../types';
+import { selectOverridableProps, slice } from '../store';
+
+type Props = {
+	componentId: number;
+	overrideKey: string | null;
+	elementId: string;
+	label: string;
+	groupId: string | null;
+	propKey: string;
+	elType: string;
+	widgetType: string;
+	originValue: PropValue;
+};
+export function setOverridableProp( {
+	componentId,
+	overrideKey,
+	elementId,
+	label,
+	groupId,
+	propKey,
+	elType,
+	widgetType,
+	originValue,
+}: Props ): OverridableProp | undefined {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return;
+	}
+
+	const existingOverridableProp = overrideKey ? overridableProps.props[ overrideKey ] : null;
+	const duplicatedTargetProps = Object.values( overridableProps.props ).filter(
+		( prop ) => prop.elementId === elementId && prop.propKey === propKey && prop !== existingOverridableProp
+	);
+
+	const { props: prevProps, groups: prevGroups } = { ...overridableProps };
+
+	const { groups: updatedGroups, currentGroupId } = getUpdatedGroups(
+		prevGroups,
+		groupId || existingOverridableProp?.groupId
+	);
+
+	const overridableProp = {
+		overrideKey: existingOverridableProp?.overrideKey || generateUniqueId( 'prop' ),
+		label,
+		elementId,
+		propKey,
+		widgetType,
+		elType,
+		originValue,
+		groupId: currentGroupId,
+	};
+
+	const { props: propsWithoutDuplicates, groups: groupsWithoutDuplicates } = removeProps( {
+		props: prevProps,
+		groups: updatedGroups,
+		propsToRemove: duplicatedTargetProps,
+	} );
+
+	const props = {
+		...propsWithoutDuplicates,
+		[ overridableProp.overrideKey ]: overridableProp,
+	};
+
+	const groups = {
+		items: {
+			...groupsWithoutDuplicates.items,
+			[ currentGroupId ]: getGroupWithProp( groupsWithoutDuplicates, currentGroupId, overridableProp ),
+		},
+		order: groupsWithoutDuplicates.order.includes( currentGroupId )
+			? groupsWithoutDuplicates.order
+			: [ ...groupsWithoutDuplicates.order, currentGroupId ],
+	};
+
+	const isChangingGroups = existingOverridableProp && existingOverridableProp.groupId !== currentGroupId;
+
+	if ( isChangingGroups ) {
+		groups.items[ existingOverridableProp.groupId ] = getGroupWithoutProp(
+			groupsWithoutDuplicates,
+			existingOverridableProp.groupId,
+			overridableProp
+		);
+	}
+
+	dispatch(
+		slice.actions.setOverridableProps( {
+			componentId,
+			overridableProps: {
+				props,
+				groups,
+			},
+		} )
+	);
+
+	return overridableProp;
+}
+
+type UpdatedGroups = { groups: OverridableProps[ 'groups' ]; currentGroupId: string };
+
+function getUpdatedGroups( groups: OverridableProps[ 'groups' ], groupId: string | undefined ): UpdatedGroups {
+	if ( ! groupId ) {
+		// use first existing group
+		if ( groups.order.length > 0 ) {
+			return { groups, currentGroupId: groups.order[ 0 ] };
+		}
+
+		// create the first group (default)
+		return addNewGroup( groups );
+	}
+
+	if ( ! groups.items[ groupId ] ) {
+		// fallback - if for any reason there's no such group - create it
+		return addNewGroup( groups, groupId );
+	}
+
+	// use the existing group
+	return { groups, currentGroupId: groupId };
+}
+
+function addNewGroup( groups: OverridableProps[ 'groups' ], groupId?: string | undefined ): UpdatedGroups {
+	const currentGroupId = groupId || generateUniqueId( 'group' );
+	const updatedGroups = {
+		...groups,
+		items: {
+			...groups.items,
+			[ currentGroupId ]: {
+				id: currentGroupId,
+				label: __( 'Default', 'elementor' ),
+				props: [],
+			},
+		},
+		order: [ ...groups.order, currentGroupId ],
+	};
+
+	return { groups: updatedGroups, currentGroupId };
+}
+
+function getGroupWithProp(
+	groups: OverridableProps[ 'groups' ],
+	groupId: string,
+	overridableProp: OverridableProp
+): OverridablePropsGroup {
+	const group: OverridablePropsGroup = { ...groups.items[ groupId ] };
+
+	if ( ! group.props.includes( overridableProp.overrideKey ) ) {
+		group.props = [ ...group.props, overridableProp.overrideKey ];
+	}
+
+	return group;
+}
+
+function getGroupWithoutProp(
+	groups: OverridableProps[ 'groups' ],
+	groupId: string,
+	overridableProp: OverridableProp
+): OverridablePropsGroup {
+	const group = { ...groups.items[ groupId ] };
+
+	if ( group ) {
+		group.props = group.props.filter( ( key ) => key !== overridableProp.overrideKey );
+	}
+
+	return group;
+}
+
+function removeProps( {
+	props,
+	groups,
+	propsToRemove,
+}: OverridableProps & { propsToRemove: OverridableProp[] } ): OverridableProps {
+	const allProps = Object.fromEntries(
+		Object.entries( props ).filter( ( [ , prop ] ) => ! propsToRemove.includes( prop ) )
+	);
+
+	const overrideKeysToRemove = propsToRemove.map( ( prop ) => prop.overrideKey );
+
+	const allGroupItems = Object.fromEntries(
+		Object.entries( groups.items ).map( ( [ groupId, group ]: [ string, OverridablePropsGroup ] ) => [
+			groupId,
+			{
+				...group,
+				props: group.props.filter( ( prop ) => ! overrideKeysToRemove.includes( prop ) ),
+			},
+		] )
+	);
+
+	return {
+		props: allProps,
+		groups: {
+			items: allGroupItems,
+			order: groups.order.filter( ( groupId ) => ! overrideKeysToRemove.includes( groupId ) ),
+		},
+	};
+}