@elementor/editor-components 3.33.0-99 → 3.34.2

package/src/types.ts

@@ -1,3 +1,94 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
+import type { StyleDefinition } from '@elementor/editor-styles';
+
 export type ComponentFormValues = {
 	componentName: string;
 };
+
+export type ComponentId = number;
+
+export type StylesDefinition = Record< ComponentId, StyleDefinition[] >;
+
+export type Component = PublishedComponent | UnpublishedComponent;
+
+export type PublishedComponent = BaseComponent & {
+	id: number;
+};
+
+export type UnpublishedComponent = BaseComponent & {
+	elements: V1ElementData[];
+};
+
+export type OverridableProp = {
+	overrideKey: string;
+	label: string;
+	elementId: string;
+	propKey: string;
+	elType: string;
+	widgetType: string;
+	originValue: PropValue;
+	groupId: string;
+};
+
+export type OverridablePropsGroup = {
+	id: string;
+	label: string;
+	props: string[];
+};
+
+export type OverridableProps = {
+	props: Record< string, OverridableProp >;
+	groups: {
+		items: Record< string, OverridablePropsGroup >;
+		order: string[];
+	};
+};
+
+type BaseComponent = {
+	uid: string;
+	name: string;
+	overridableProps?: OverridableProps;
+};
+
+export type DocumentStatus = 'publish' | 'draft';
+export type DocumentSaveStatus = DocumentStatus | 'autosave';
+
+export type ExtendedWindow = Window & {
+	elementorCommon: Record< string, unknown > & {
+		eventsManager: {
+			config: {
+				locations: Record< string, string >;
+				secondaryLocations: Record< string, string >;
+				triggers: Record< string, string >;
+			};
+		};
+	};
+};
+
+export type Container = {
+	model: {
+		get: ( key: 'elements' ) => {
+			toJSON: () => V1ElementData[];
+		};
+	};
+};
+
+export type ComponentInstancePropValue< TComponentId extends number | string = number | string > =
+	TransformablePropValue<
+		'component-instance',
+		{
+			component_id: TComponentId;
+			overrides?: ComponentOverride[];
+		}
+	>;
+
+type ComponentOverride = {
+	override_key: string;
+	value: TransformablePropValue< string >;
+};
+
+export type ComponentOverridable = {
+	override_key: string;
+	origin_value: TransformablePropValue< string >;
+};

package/src/utils/component-document-data.ts

@@ -0,0 +1,19 @@
+import { type Document, getV1DocumentsManager } from '@elementor/editor-documents';
+
+type ComponentDocumentData = Document;
+
+export const getComponentDocumentData = async ( id: number ) => {
+	const documentManager = getV1DocumentsManager();
+
+	try {
+		return await documentManager.request< ComponentDocumentData >( id );
+	} catch {
+		return null;
+	}
+};
+
+export const invalidateComponentDocumentData = ( id: number ) => {
+	const documentManager = getV1DocumentsManager();
+
+	documentManager.invalidateCache( id );
+};

package/src/utils/get-component-ids.ts

@@ -0,0 +1,36 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+
+import { TYPE } from '../create-component-type';
+import { type ComponentInstancePropValue } from '../types';
+import { getComponentDocumentData } from './component-document-data';
+
+export const getComponentIds = async ( elements: V1ElementData[] ) => {
+	const components = elements.map( async ( { widgetType, elType, elements: childElements, settings } ) => {
+		const ids: number[] = [];
+
+		const isComponent = [ widgetType, elType ].includes( TYPE );
+
+		if ( isComponent ) {
+			const componentId = ( settings?.component_instance as ComponentInstancePropValue< number > )?.value
+				?.component_id;
+
+			const document = await getComponentDocumentData( componentId );
+
+			childElements = document?.elements;
+
+			if ( Boolean( componentId ) ) {
+				ids.push( componentId );
+			}
+		}
+
+		if ( !! childElements?.length ) {
+			ids.push( ...( await getComponentIds( childElements ) ) );
+		}
+
+		return ids;
+	} );
+
+	const result = ( await Promise.all( components ) ).flat();
+
+	return Array.from( new Set( result ) );
+};

package/src/utils/get-container-for-new-element.ts

@@ -0,0 +1,49 @@
+import {
+	getContainer,
+	getCurrentDocumentContainer,
+	getSelectedElements,
+	type V1Element,
+} from '@elementor/editor-elements';
+
+export const getContainerForNewElement = (): { container: V1Element | null; options?: { at: number } } => {
+	const currentDocumentContainer = getCurrentDocumentContainer();
+	const selectedElement = getSelectedElementContainer();
+
+	let container, options;
+
+	if ( selectedElement ) {
+		switch ( selectedElement.model.get( 'elType' ) ) {
+			case 'widget': {
+				container = selectedElement?.parent;
+
+				const selectedElIndex = selectedElement.view?._index ?? -1;
+
+				if ( selectedElIndex > -1 ) {
+					options = { at: selectedElIndex + 1 };
+				}
+
+				break;
+			}
+			case 'section': {
+				container = selectedElement?.children?.[ 0 ];
+				break;
+			}
+			default: {
+				container = selectedElement;
+				break;
+			}
+		}
+	}
+
+	return { container: container ?? currentDocumentContainer, options };
+};
+
+function getSelectedElementContainer() {
+	const selectedElements = getSelectedElements();
+
+	if ( selectedElements.length !== 1 ) {
+		return undefined;
+	}
+
+	return getContainer( selectedElements[ 0 ].id );
+}

package/src/utils/tracking.ts

@@ -0,0 +1,47 @@
+import { type V1Element } from '@elementor/editor-elements';
+import { getMixpanel } from '@elementor/mixpanel';
+import { __getState as getState } from '@elementor/store';
+
+import { selectCreatedThisSession } from '../store/store';
+import { type ExtendedWindow } from '../types';
+
+type ComponentEventData = Record< string, unknown > & {
+	action: 'createClicked' | 'created' | 'createCancelled' | 'instanceAdded' | 'edited';
+};
+
+export const trackComponentEvent = ( { action, ...data }: ComponentEventData ) => {
+	const { dispatchEvent, config } = getMixpanel();
+	if ( ! config?.names?.components?.[ action ] ) {
+		return;
+	}
+
+	const name = config.names.components[ action ];
+	dispatchEvent?.( name, data );
+};
+
+export const onElementDrop = ( _args: unknown, element: V1Element ) => {
+	if ( ! ( element.model.get( 'widgetType' ) === 'e-component' ) ) {
+		return;
+	}
+
+	const editorSettings = element.model.get( 'editor_settings' );
+	const componentName = editorSettings?.title;
+	const componentUID = editorSettings?.component_uid;
+	const instanceId = element.id;
+
+	const createdThisSession = selectCreatedThisSession( getState() );
+	const isSameSessionReuse = componentUID && createdThisSession.includes( componentUID );
+
+	const eventsManagerConfig = ( window as unknown as ExtendedWindow ).elementorCommon.eventsManager.config;
+	const { locations, secondaryLocations } = eventsManagerConfig;
+
+	trackComponentEvent( {
+		action: 'instanceAdded',
+		instance_id: instanceId,
+		component_uid: componentUID,
+		component_name: componentName,
+		is_same_session_reuse: isSameSessionReuse,
+		location: locations.widgetPanel,
+		secondary_location: secondaryLocations.componentsTab,
+	} );
+};

package/src/components/components-tab.tsx

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { Box } from '@elementor/ui';
-
-export function ComponentsTab() {
-	return <Box px={ 2 }>This is the Components tab.</Box>;
-}

package/src/hooks/use-create-component.ts

@@ -1,13 +0,0 @@
-import { useMutation, useQueryClient } from '@elementor/query';
-
-import { apiClient } from '../api';
-import { COMPONENTS_QUERY_KEY } from './use-components';
-
-export const useCreateComponentMutation = () => {
-	const queryClient = useQueryClient();
-
-	return useMutation( {
-		mutationFn: apiClient.create,
-		onSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),
-	} );
-};