@elementor/editor-components 3.33.0-99 → 3.34.2

package/src/components/overridable-props/overridable-prop-indicator.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { getV1CurrentDocument } from '@elementor/editor-documents';
+import { useElement } from '@elementor/editor-editing-panel';
+import { getWidgetsCache } from '@elementor/editor-elements';
+import { type TransformablePropValue } from '@elementor/editor-props';
+import { __getState as getState } from '@elementor/store';
+import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { setOverridableProp } from '../../store/set-overridable-prop';
+import { selectOverridableProps } from '../../store/store';
+import { type OverridableProps } from '../../types';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
+import { Indicator } from './indicator';
+import { OverridablePropForm } from './overridable-prop-form';
+import { getOverridableProp } from './utils/get-overridable-prop';
+
+const FORBIDDEN_KEYS = [ '_cssid', 'attributes' ];
+
+export function OverridablePropIndicator() {
+	const { bind } = useBoundProp();
+	const currentDocument = getV1CurrentDocument();
+
+	if ( currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || ! currentDocument.id ) {
+		return null;
+	}
+
+	if ( ! isPropAllowed( bind ) ) {
+		return null;
+	}
+
+	const overridableProps = selectOverridableProps( getState(), currentDocument.id );
+
+	return <Content componentId={ currentDocument.id } overridableProps={ overridableProps } />;
+}
+
+type Props = {
+	componentId: number;
+	overridableProps?: OverridableProps;
+};
+export function Content( { componentId, overridableProps }: Props ) {
+	const {
+		element: { id: elementId },
+		elementType,
+	} = useElement();
+	const { value, bind } = useBoundProp();
+	const { value: overridableValue, setValue: setOverridableValue } = useBoundProp( componentOverridablePropTypeUtil );
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+	} );
+
+	const triggerProps = bindTrigger( popupState );
+	const popoverProps = bindPopover( popupState );
+
+	const { elType } = getWidgetsCache()?.[ elementType.key ] ?? { elType: 'widget' };
+
+	const handleSubmit = ( { label, group }: { label: string; group: string | null } ) => {
+		const originValue = ! overridableValue ? value : overridableValue?.origin_value ?? {};
+
+		const overridablePropConfig = setOverridableProp( {
+			componentId,
+			overrideKey: overridableValue?.override_key ?? null,
+			elementId,
+			label,
+			groupId: group,
+			propKey: bind,
+			elType: elType ?? 'widget',
+			widgetType: elementType.key,
+			originValue,
+		} );
+
+		if ( ! overridableValue && overridablePropConfig ) {
+			setOverridableValue( {
+				override_key: overridablePropConfig.overrideKey,
+				origin_value: originValue as TransformablePropValue< string, unknown >,
+			} );
+		}
+
+		popupState.close();
+	};
+
+	const overridableConfig = overridableValue
+		? getOverridableProp( { componentId, overrideKey: overridableValue.override_key } )
+		: undefined;
+
+	return (
+		<>
+			<Tooltip placement="top" title={ __( 'Override Property', 'elementor' ) }>
+				<Indicator
+					triggerProps={ triggerProps }
+					isOpen={ !! popoverProps.open }
+					isOverridable={ !! overridableValue }
+				/>
+			</Tooltip>
+			<Popover
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				PaperProps={ {
+					sx: { my: 2.5 },
+				} }
+				{ ...popoverProps }
+			>
+				<OverridablePropForm
+					onSubmit={ handleSubmit }
+					groups={ overridableProps?.groups.order.map( ( groupId ) => ( {
+						value: groupId,
+						label: overridableProps.groups.items[ groupId ].label,
+					} ) ) }
+					currentValue={ overridableConfig }
+				/>
+			</Popover>
+		</>
+	);
+}
+
+function isPropAllowed( bind: string ) {
+	return ! FORBIDDEN_KEYS.includes( bind );
+}

package/src/components/overridable-props/utils/get-overridable-prop.ts

@@ -0,0 +1,20 @@
+import { __getState as getState } from '@elementor/store';
+
+import { selectOverridableProps } from '../../../store/store';
+import { type OverridableProp } from '../../../types';
+
+export function getOverridableProp( {
+	componentId,
+	overrideKey,
+}: {
+	componentId: number;
+	overrideKey: string;
+} ): OverridableProp | undefined {
+	const overridableProps = selectOverridableProps( getState(), componentId );
+
+	if ( ! overridableProps ) {
+		return undefined;
+	}
+
+	return overridableProps.props[ overrideKey ];
+}

package/src/create-component-type.ts

@@ -0,0 +1,194 @@
+import {
+	type BackboneModel,
+	type CreateTemplatedElementTypeOptions,
+	createTemplatedElementView,
+	type ElementModel,
+	type ElementType,
+	type ElementView,
+	type LegacyWindow,
+} from '@elementor/editor-canvas';
+import { getCurrentDocument } from '@elementor/editor-documents';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { apiClient } from './api';
+import { type ComponentInstancePropValue, type ExtendedWindow } from './types';
+import { trackComponentEvent } from './utils/tracking';
+
+type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
+
+export const TYPE = 'e-component';
+
+export function createComponentType(
+	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
+): typeof ElementType {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+		getType() {
+			return options.type;
+		}
+
+		getView() {
+			return createComponentView( options );
+		}
+	};
+}
+
+function createComponentView(
+	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
+): typeof ElementView {
+	return class extends createTemplatedElementView( options ) {
+		legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
+		eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+
+		isComponentCurrentlyEdited() {
+			const currentDocument = getCurrentDocument();
+
+			return currentDocument?.id === this.getComponentId();
+		}
+
+		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
+			if ( settings.component_instance ) {
+				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
+					settings.component_instance
+				);
+
+				this.collection.models.forEach( setInactiveRecursively );
+
+				settings.component_instance = '<template data-children-placeholder></template>';
+			}
+
+			return settings;
+		}
+
+		getDomElement() {
+			// Component does not have a DOM element, so we return the first child's DOM element.
+			return this.children.findByIndex( 0 )?.getDomElement() ?? this.$el;
+		}
+
+		attachBuffer( collectionView: this, buffer: DocumentFragment ): void {
+			const childrenPlaceholder = collectionView.$el.find( '[data-children-placeholder]' ).get( 0 );
+
+			if ( ! childrenPlaceholder ) {
+				super.attachBuffer( collectionView, buffer );
+
+				return;
+			}
+
+			childrenPlaceholder.replaceWith( buffer );
+		}
+
+		getComponentId() {
+			const componentInstance = (
+				this.options?.model?.get( 'settings' )?.get( 'component_instance' ) as ComponentInstancePropValue
+			 )?.value;
+
+			return componentInstance.component_id;
+		}
+
+		getContextMenuGroups() {
+			const filteredGroups = super.getContextMenuGroups().filter( ( group ) => group.name !== 'save' );
+			const componentId = this.getComponentId();
+			if ( ! componentId ) {
+				return filteredGroups;
+			}
+
+			const newGroup = [
+				{
+					name: 'edit component',
+					actions: [
+						{
+							name: 'edit component',
+							icon: 'eicon-edit',
+							title: () => __( 'Edit Component', 'elementor' ),
+							isEnabled: () => true,
+							callback: ( _: unknown, eventData: ContextMenuEventData ) =>
+								this.editComponent( eventData ),
+						},
+					],
+				},
+			];
+			return [ ...filteredGroups, ...newGroup ];
+		}
+
+		async switchDocument() {
+			//todo: handle unpublished
+			const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
+				this.getComponentId() as number
+			);
+
+			if ( ! isAllowedToSwitchDocument ) {
+				options.showLockedByModal?.( lockedBy || '' );
+			} else {
+				runCommand( 'editor/documents/switch', {
+					id: this.getComponentId(),
+					mode: 'autosave',
+					selector: `[data-id="${ this.model.get( 'id' ) }"]`,
+					shouldScroll: false,
+				} );
+			}
+		}
+
+		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
+			if ( this.isComponentCurrentlyEdited() ) {
+				return;
+			}
+
+			this.switchDocument();
+
+			const editorSettings = this.model.get( 'editor_settings' );
+
+			trackComponentEvent( {
+				action: 'edited',
+				component_uid: editorSettings?.component_uid,
+				component_name: editorSettings?.title,
+				location,
+				secondary_location: secondaryLocation,
+				trigger,
+			} );
+		}
+
+		handleDblClick( e: MouseEvent ) {
+			e.stopPropagation();
+
+			const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
+
+			this.editComponent( {
+				trigger: triggers.doubleClick,
+				location: locations.canvas,
+				secondaryLocation: secondaryLocations.canvasElement,
+			} );
+		}
+
+		events() {
+			return {
+				...super.events(),
+				dblclick: this.handleDblClick,
+			};
+		}
+
+		attributes() {
+			return {
+				...super.attributes(),
+				'data-elementor-id': this.getComponentId(),
+			};
+		}
+	};
+}
+
+function setInactiveRecursively( model: BackboneModel< ElementModel > ) {
+	const editSettings = model.get( 'editSettings' );
+
+	if ( editSettings ) {
+		editSettings.set( 'inactive', true );
+	}
+
+	const elements = model.get( 'elements' );
+
+	if ( elements ) {
+		elements.forEach( ( childModel ) => {
+			setInactiveRecursively( childModel );
+		} );
+	}
+}

package/src/hooks/use-canvas-document.ts

@@ -0,0 +1,6 @@
+import { getCanvasIframeDocument } from '@elementor/editor-canvas';
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
+export function useCanvasDocument() {
+	return useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument() );
+}

package/src/hooks/use-components.ts

@@ -1,13 +1,10 @@
-import { useQuery } from '@elementor/query';
+import { __useSelector as useSelector } from '@elementor/store';
 
-import { apiClient } from '../api';
-
-export const COMPONENTS_QUERY_KEY = 'components';
+import { selectComponents, selectLoadIsPending } from '../store/store';
 
 export const useComponents = () => {
-	return useQuery( {
-		queryKey: [ COMPONENTS_QUERY_KEY ],
-		queryFn: apiClient.get,
-		staleTime: Infinity,
-	} );
+	const components = useSelector( selectComponents );
+	const isLoading = useSelector( selectLoadIsPending );
+
+	return { components, isLoading };
 };

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

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { throttle } from '@elementor/utils';
+
+export function useElementRect( element: HTMLElement | null ) {
+	const [ rect, setRect ] = useState< DOMRect >( new DOMRect( 0, 0, 0, 0 ) );
+
+	const onChange = throttle(
+		() => {
+			setRect( element?.getBoundingClientRect() ?? new DOMRect( 0, 0, 0, 0 ) );
+		},
+		20,
+		true
+	);
+
+	useScrollListener( { element, onChange } );
+	useResizeListener( { element, onChange } );
+	useMutationsListener( { element, onChange } );
+
+	useEffect(
+		() => () => {
+			onChange.cancel();
+		},
+		[ onChange ]
+	);
+
+	return rect;
+}
+
+type ListenerProps = {
+	element: HTMLElement | null;
+	onChange: () => void;
+};
+
+function useScrollListener( { element, onChange }: ListenerProps ) {
+	useEffect( () => {
+		if ( ! element ) {
+			return;
+		}
+
+		const win = element.ownerDocument?.defaultView;
+		win?.addEventListener( 'scroll', onChange, { passive: true } );
+
+		return () => {
+			win?.removeEventListener( 'scroll', onChange );
+		};
+	}, [ element, onChange ] );
+}
+
+function useResizeListener( { element, onChange }: ListenerProps ) {
+	useEffect( () => {
+		if ( ! element ) {
+			return;
+		}
+
+		const resizeObserver = new ResizeObserver( onChange );
+		resizeObserver.observe( element );
+
+		const win = element.ownerDocument?.defaultView;
+		win?.addEventListener( 'resize', onChange, { passive: true } );
+
+		return () => {
+			resizeObserver.disconnect();
+			win?.removeEventListener( 'resize', onChange );
+		};
+	}, [ element, onChange ] );
+}
+
+function useMutationsListener( { element, onChange }: ListenerProps ) {
+	useEffect( () => {
+		if ( ! element ) {
+			return;
+		}
+
+		const mutationObserver = new MutationObserver( onChange );
+		mutationObserver.observe( element, { childList: true, subtree: true } );
+
+		return () => {
+			mutationObserver.disconnect();
+		};
+	}, [ element, onChange ] );
+}

package/src/init.ts

@@ -1,19 +1,98 @@
-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, 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 { 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 { 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 { componentsStylesProvider } from './store/components-styles-provider';
+import { loadComponentsAssets } from './store/load-components-assets';
+import { removeComponentStyles } from './store/remove-component-styles';
+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,
+	} );
+
+	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,
+	} );
+
+	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/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' ];