@elementor/editor-components 4.0.0-607 → 4.0.0-619

package/src/components/instance-editing-panel/use-instance-panel-data.ts

@@ -0,0 +1,51 @@
+import { useElement } from '@elementor/editor-editing-panel';
+
+import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
+import { type ComponentInstanceOverridesPropValue } from '../../prop-types/component-instance-overrides-prop-type';
+import { componentInstancePropTypeUtil } from '../../prop-types/component-instance-prop-type';
+import { useComponent } from '../../store/store';
+import { type Component, type OverridablePropsGroup } from '../../types';
+
+type InstancePanelData = {
+	componentId: number;
+	component: Component;
+	overrides: ComponentInstanceOverridesPropValue;
+	overridableProps: NonNullable< ReturnType< typeof useSanitizeOverridableProps > >;
+	groups: OverridablePropsGroup[];
+	isEmpty: boolean;
+	componentInstanceId: string | undefined;
+};
+
+export function useInstancePanelData(): InstancePanelData | null {
+	const { element, settings } = useComponentInstanceSettings();
+
+	const componentId = settings?.component_id?.value;
+
+	const overrides = settings?.overrides?.value;
+
+	const component = useComponent( componentId ?? null );
+
+	const componentInstanceId = element?.id;
+
+	const overridableProps = useSanitizeOverridableProps( componentId ?? null, componentInstanceId );
+
+	if ( ! componentId || ! overridableProps || ! component ) {
+		return null;
+	}
+
+	const isNonEmptyGroup = ( group: OverridablePropsGroup | null ) => group !== null && group.props.length > 0;
+
+	const groups = overridableProps.groups.order
+		.map( ( groupId ) => overridableProps.groups.items[ groupId ] ?? null )
+		.filter( isNonEmptyGroup );
+
+	const isEmpty = groups.length === 0 || Object.keys( overridableProps.props ).length === 0;
+
+	return { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId };
+}
+
+function useComponentInstanceSettings() {
+	const { element, settings } = useElement();
+
+	return { element, settings: componentInstancePropTypeUtil.extract( settings.component_instance ) };
+}

package/src/create-component-type.ts

@@ -1,6 +1,7 @@
 import {
 	type BackboneModel,
 	type BackboneModelConstructor,
+	type ContextMenuAction,
 	type CreateTemplatedElementTypeOptions,
 	createTemplatedElementView,
 	type ElementModel,
@@ -20,19 +21,12 @@ import { type ComponentInstanceProp } from './prop-types/component-instance-prop
 import { type ComponentsSlice, selectComponentByUid } from './store/store';
 import { type ComponentRenderContext, type ExtendedWindow } from './types';
 import { formatComponentElementsId } from './utils/format-component-elements-id';
+import { hasProInstalled } from './utils/is-pro-user';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
 type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
 
-export type ContextMenuAction = {
-	name: string;
-	icon: string;
-	title: string | ( () => string );
-	isEnabled: () => boolean;
-	callback: ( _: unknown, eventData: ContextMenuEventData ) => void;
-};
-
 type ContextMenuGroupConfig = {
 	disable: Record< string, string[] >;
 	add: Record< string, { index: number; action: ContextMenuAction } >;
@@ -58,6 +52,8 @@ type ComponentModelInstance = BackboneModel< ComponentModel > & {
 
 export const COMPONENT_WIDGET_TYPE = 'e-component';
 
+const EDIT_COMPONENT_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-edit/';
+
 const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfig ): ContextMenuGroup[] => {
 	const disableMap = new Map( Object.entries( config.disable ?? {} ) );
 	const addMap = new Map( Object.entries( config.add ?? {} ) );
@@ -218,6 +214,11 @@ function createComponentView(
 
 		_getContextMenuConfig() {
 			const isAdministrator = isUserAdministrator();
+			const hasPro = hasProInstalled();
+
+			const proLabel = __( 'PRO', 'elementor' );
+			const badgeClass = 'elementor-context-menu-list__item__shortcut__new-badge';
+			const proBadge = `<a href="${ EDIT_COMPONENT_UPGRADE_URL }" target="_blank" onclick="event.stopPropagation()" class="${ badgeClass }">${ proLabel }</a>`;
 
 			const addedGroup = {
 				general: {
@@ -226,7 +227,8 @@ function createComponentView(
 						name: 'edit component',
 						icon: 'eicon-edit',
 						title: () => __( 'Edit Component', 'elementor' ),
-						isEnabled: () => true,
+						...( ! hasPro && { shortcut: proBadge, hasShortcutAction: true } ),
+						isEnabled: () => hasPro,
 						callback: ( _: unknown, eventData: ContextMenuEventData ) => this.editComponent( eventData ),
 					},
 				},
@@ -253,7 +255,9 @@ function createComponentView(
 		}
 
 		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
-			if ( this.isComponentCurrentlyEdited() ) {
+			const hasPro = hasProInstalled();
+
+			if ( ! hasPro || this.isComponentCurrentlyEdited() ) {
 				return;
 			}
 
@@ -275,9 +279,7 @@ function createComponentView(
 		handleDblClick( e: MouseEvent ) {
 			e.stopPropagation();
 
-			const isAdministrator = isUserAdministrator();
-
-			if ( ! isAdministrator ) {
+			if ( ! isUserAdministrator() || ! hasProInstalled() ) {
 				return;
 			}
 

package/src/extended/components/component-properties-panel/component-properties-panel.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ElementProvider, usePanelActions as useEditingPanelActions } from '@elementor/editor-editing-panel';
-import { useSelectedElement } from '@elementor/editor-elements';
+import { usePanelActions as useEditingPanelActions } from '@elementor/editor-editing-panel';
 import { __createPanel as createPanel, Panel } from '@elementor/editor-panels';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { Alert, Box, ErrorBoundary } from '@elementor/ui';
@@ -16,27 +15,20 @@ export const { panel, usePanelActions } = createPanel( {
 } );
 
 function ComponentPropertiesPanel() {
-	const { element, elementType } = useSelectedElement();
 	const { close: closePanel } = usePanelActions();
 	const { open: openEditingPanel } = useEditingPanelActions();
 
-	if ( ! element || ! elementType ) {
-		return null;
-	}
-
 	return (
 		<ThemeProvider>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<ElementProvider element={ element } elementType={ elementType }>
-					<Panel>
-						<ComponentPropertiesPanelContent
-							onClose={ () => {
-								closePanel();
-								openEditingPanel();
-							} }
-						/>
-					</Panel>
-				</ElementProvider>
+				<Panel>
+					<ComponentPropertiesPanelContent
+						onClose={ () => {
+							closePanel();
+							openEditingPanel();
+						} }
+					/>
+				</Panel>
 			</ErrorBoundary>
 		</ThemeProvider>
 	);

package/src/extended/components/components-tab/component-item.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';
+import { dropElement, type DropElementParams, type V1ElementData } from '@elementor/editor-elements';
+import { MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
+import { DotsVerticalIcon } from '@elementor/icons';
+import { bindMenu, bindTrigger, IconButton, Menu, Stack, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import {
+	ComponentItem as CoreComponentItem,
+	type ComponentItemProps,
+	ComponentName,
+} from '../../../components/components-tab/components-item';
+import { useComponentsPermissions } from '../../../hooks/use-components-permissions';
+import { loadComponentsAssets } from '../../../store/actions/load-components-assets';
+import { archiveComponent } from '../../store/actions/archive-component';
+import { renameComponent } from '../../store/actions/rename-component';
+import { validateComponentName } from '../../utils/component-name-validation';
+import { createComponentModel } from '../../utils/create-component-model';
+import { getContainerForNewElement } from '../../utils/get-container-for-new-element';
+import { DeleteConfirmationDialog } from './delete-confirmation-dialog';
+
+export function ComponentItem( { component }: ComponentItemProps ) {
+	const itemRef = useRef< HTMLElement >( null );
+	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
+	const { canRename, canDelete } = useComponentsPermissions();
+
+	const shouldShowActions = canRename || canDelete;
+
+	const {
+		ref: editableRef,
+		isEditing,
+		openEditMode,
+		error,
+		getProps: getEditableProps,
+	} = useEditable( {
+		value: component.name,
+		onSubmit: ( newName: string ) => renameComponent( component.uid, newName ),
+		validation: validateComponentTitle,
+	} );
+
+	const componentModel = createComponentModel( component );
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		disableAutoFocus: true,
+	} );
+
+	const handleClick = () => {
+		addComponentToPage( componentModel );
+	};
+
+	const handleDragEnd = () => {
+		loadComponentsAssets( [ componentModel as V1ElementData ] );
+
+		endDragElementFromPanel();
+	};
+
+	const handleDeleteClick = () => {
+		setIsDeleteDialogOpen( true );
+		popupState.close();
+	};
+
+	const handleDeleteConfirm = () => {
+		if ( ! component.id ) {
+			throw new Error( 'Component ID is required' );
+		}
+
+		setIsDeleteDialogOpen( false );
+		archiveComponent( component.id, component.name );
+	};
+
+	const handleDeleteDialogClose = () => {
+		setIsDeleteDialogOpen( false );
+	};
+
+	return (
+		<Stack>
+			<WarningInfotip
+				open={ Boolean( error ) }
+				text={ error ?? '' }
+				placement="bottom"
+				width={ itemRef.current?.getBoundingClientRect().width }
+				offset={ [ 0, -15 ] }
+			>
+				<CoreComponentItem
+					ref={ itemRef }
+					component={ component }
+					disabled={ false }
+					draggable
+					onDragStart={ ( event: React.DragEvent ) => startDragElementFromPanel( componentModel, event ) }
+					onDragEnd={ handleDragEnd }
+					onClick={ handleClick }
+					isEditing={ isEditing }
+					error={ error }
+					nameSlot={
+						<ComponentName
+							name={ component.name }
+							editable={ { ref: editableRef, isEditing, getProps: getEditableProps } }
+						/>
+					}
+					endSlot={
+						shouldShowActions ? (
+							<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
+								<DotsVerticalIcon fontSize="tiny" />
+							</IconButton>
+						) : undefined
+					}
+				/>
+			</WarningInfotip>
+			{ shouldShowActions && (
+				<Menu
+					{ ...bindMenu( popupState ) }
+					anchorOrigin={ {
+						vertical: 'bottom',
+						horizontal: 'right',
+					} }
+					transformOrigin={ {
+						vertical: 'top',
+						horizontal: 'right',
+					} }
+				>
+					{ canRename && (
+						<MenuListItem
+							sx={ { minWidth: '160px' } }
+							primaryTypographyProps={ { variant: 'caption', color: 'text.primary' } }
+							onClick={ () => {
+								popupState.close();
+								openEditMode();
+							} }
+						>
+							{ __( 'Rename', 'elementor' ) }
+						</MenuListItem>
+					) }
+					{ canDelete && (
+						<MenuListItem
+							sx={ { minWidth: '160px' } }
+							primaryTypographyProps={ { variant: 'caption', color: 'error.light' } }
+							onClick={ handleDeleteClick }
+						>
+							{ __( 'Delete', 'elementor' ) }
+						</MenuListItem>
+					) }
+				</Menu>
+			) }
+			<DeleteConfirmationDialog
+				open={ isDeleteDialogOpen }
+				onClose={ handleDeleteDialogClose }
+				onConfirm={ handleDeleteConfirm }
+			/>
+		</Stack>
+	);
+}
+
+const addComponentToPage = ( model: DropElementParams[ 'model' ] ) => {
+	const { container, options } = getContainerForNewElement();
+
+	if ( ! container ) {
+		throw new Error( `Can't find container to drop new component instance at` );
+	}
+
+	loadComponentsAssets( [ model as V1ElementData ] );
+
+	dropElement( {
+		containerId: container.id,
+		model,
+		options: { ...options, useHistory: false, scrollIntoView: true },
+	} );
+};
+
+const validateComponentTitle = ( newTitle: string ) => {
+	const result = validateComponentName( newTitle );
+
+	if ( ! result.errorMessage ) {
+		return null;
+	}
+
+	return result.errorMessage;
+};

package/src/extended/components/components-tab/components.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { ThemeProvider } from '@elementor/editor-ui';
+import { List } from '@elementor/ui';
+
+import { ComponentSearch } from '../../../components/components-tab/component-search';
+import {
+	EmptySearchResult,
+	EmptyState,
+	useFilteredComponents,
+} from '../../../components/components-tab/components-list';
+import { LoadingComponents } from '../../../components/components-tab/loading-components';
+import { SearchProvider } from '../../../components/components-tab/search-provider';
+import { useComponents } from '../../../hooks/use-components';
+import { ComponentItem } from './component-item';
+
+const ExtendedComponentsList = () => {
+	const { components, isLoading, searchValue } = useFilteredComponents();
+
+	if ( isLoading ) {
+		return <LoadingComponents />;
+	}
+
+	const isEmpty = ! components?.length;
+
+	if ( isEmpty ) {
+		return searchValue.length ? <EmptySearchResult /> : <EmptyState />;
+	}
+
+	return (
+		<List sx={ { display: 'flex', flexDirection: 'column', gap: 1, px: 2 } }>
+			{ components.map( ( component ) => (
+				<ComponentItem key={ component.uid } component={ component } />
+			) ) }
+		</List>
+	);
+};
+
+const ExtendedComponentsContent = () => {
+	const { components, isLoading } = useComponents();
+	const hasComponents = ! isLoading && components.length > 0;
+
+	return (
+		<>
+			{ hasComponents && <ComponentSearch /> }
+			<ExtendedComponentsList />
+		</>
+	);
+};
+
+export const ExtendedComponents = () => {
+	return (
+		<ThemeProvider>
+			<SearchProvider localStorageKey="elementor-components-search">
+				<ExtendedComponentsContent />
+			</SearchProvider>
+		</ThemeProvider>
+	);
+};

package/src/extended/components/create-component-form/create-component-form.tsx

@@ -11,11 +11,11 @@ import { __ } from '@wordpress/i18n';
 import { useComponents } from '../../../hooks/use-components';
 import { selectComponentByUid } from '../../../store/store';
 import { type ComponentFormValues, type PublishedComponent } from '../../../types';
-import { createBaseComponentSchema, createSubmitComponentSchema } from '../../../utils/component-form-schema';
 import { switchToComponent } from '../../../utils/switch-to-component';
 import { trackComponentEvent } from '../../../utils/tracking';
 import { createUnpublishedComponent } from '../../store/actions/create-unpublished-component';
 import { findNonAtomicElementsInElement } from '../../sync/prevent-non-atomic-nesting';
+import { createBaseComponentSchema, createSubmitComponentSchema } from '../../utils/component-form-schema';
 import { useForm } from './hooks/use-form';
 import {
 	type ComponentEventData,

package/src/extended/components/instance-editing-panel/instance-editing-panel.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { PencilIcon } from '@elementor/icons';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { EmptyState } from '../../../components/instance-editing-panel/empty-state';
+import { InstancePanelBody } from '../../../components/instance-editing-panel/instance-panel-body';
+import {
+	EditComponentAction,
+	InstancePanelHeader,
+} from '../../../components/instance-editing-panel/instance-panel-header';
+import { useInstancePanelData } from '../../../components/instance-editing-panel/use-instance-panel-data';
+import { useComponentsPermissions } from '../../../hooks/use-components-permissions';
+import { ComponentInstanceProvider } from '../../../provider/component-instance-context';
+import { switchToComponent } from '../../../utils/switch-to-component';
+
+export function ExtendedInstanceEditingPanel() {
+	const { canEdit } = useComponentsPermissions();
+	const data = useInstancePanelData();
+
+	if ( ! data ) {
+		return null;
+	}
+
+	const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
+
+	/* translators: %s: component name. */
+	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', component.name );
+
+	const handleEditComponent = () => switchToComponent( componentId, componentInstanceId );
+
+	return (
+		<Box data-testid="instance-editing-panel">
+			<ComponentInstanceProvider
+				componentId={ componentId }
+				overrides={ overrides }
+				overridableProps={ overridableProps }
+			>
+				<InstancePanelHeader
+					componentName={ component.name }
+					actions={
+						canEdit ? (
+							<EditComponentAction
+								label={ panelTitle }
+								onClick={ handleEditComponent }
+								icon={ PencilIcon }
+							/>
+						) : undefined
+					}
+				/>
+				<InstancePanelBody
+					groups={ groups }
+					isEmpty={ isEmpty }
+					emptyState={ <EmptyState onEditComponent={ canEdit ? handleEditComponent : undefined } /> }
+					componentInstanceId={ componentInstanceId }
+				/>
+			</ComponentInstanceProvider>
+		</Box>
+	);
+}

package/src/extended/init.ts

@@ -1,17 +1,26 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 import { registerControlReplacement } from '@elementor/editor-controls';
 import { getV1CurrentDocument } from '@elementor/editor-documents';
-import { FIELD_TYPE, injectIntoPanelHeaderTop, registerFieldIndicator } from '@elementor/editor-editing-panel';
+import {
+	FIELD_TYPE,
+	injectIntoPanelHeaderTop,
+	registerEditingPanelReplacement,
+	registerFieldIndicator,
+} from '@elementor/editor-editing-panel';
+import { registerTab } from '@elementor/editor-elements-panel';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
 
 import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
 import { type ExtendedWindow } from '../types';
 import { onElementDrop } from '../utils/tracking';
 import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
 import { panel as componentPropertiesPanel } from './components/component-properties-panel/component-properties-panel';
+import { ExtendedComponents } from './components/components-tab/components';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
 import { EditComponent } from './components/edit-component/edit-component';
+import { ExtendedInstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
 import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
 import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
 import { COMPONENT_DOCUMENT_TYPE, OVERRIDABLE_PROP_REPLACEMENT_ID } from './consts';
@@ -24,6 +33,18 @@ import { initRevertOverridablesOnCopyOrDuplicate } from './sync/revert-overridab
 import { SanitizeOverridableProps } from './sync/sanitize-overridable-props';
 
 export function initExtended() {
+	registerEditingPanelReplacement( {
+		id: 'component-instance-edit-panel',
+		condition: ( _, elementType ) => elementType.key === 'e-component',
+		component: ExtendedInstanceEditingPanel,
+	} );
+
+	registerTab( {
+		id: 'components',
+		label: __( 'Components', 'elementor' ),
+		component: ExtendedComponents,
+	} );
+
 	registerPanel( componentPropertiesPanel );
 
 	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {

package/src/{store → extended/store}/actions/archive-component.ts

@@ -3,7 +3,7 @@ import { type NotificationData, notify } from '@elementor/editor-notifications';
 import { __dispatch as dispatch } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
-import { slice } from '../store';
+import { slice } from '../../../store/store';
 
 const successNotification = ( componentId: number, componentName: string ): NotificationData => ( {
 	type: 'success',

package/src/{store → extended/store}/actions/rename-component.ts

@@ -2,8 +2,8 @@ import { getV1DocumentsManager, setDocumentModifiedStatus } from '@elementor/edi
 import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
 import { __dispatch as dispatch } from '@elementor/store';
 
-import { COMPONENT_WIDGET_TYPE } from '../../create-component-type';
-import { slice } from '../store';
+import { COMPONENT_WIDGET_TYPE } from '../../../create-component-type';
+import { slice } from '../../../store/store';
 
 const TITLE_EXTERNAL_CHANGE_COMMAND = 'title_external_change';
 

package/src/{utils → extended/utils}/component-name-validation.ts

@@ -1,6 +1,6 @@
 import { __getState as getState } from '@elementor/store';
 
-import { selectComponents } from '../store/store';
+import { selectComponents } from '../../store/store';
 import { createSubmitComponentSchema } from './component-form-schema';
 
 type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };

package/src/extended/utils/replace-element-with-component.ts

@@ -1,6 +1,6 @@
 import { replaceElement, type V1ElementData } from '@elementor/editor-elements';
 
-import { type ComponentInstanceParams, createComponentModel } from '../../utils/create-component-model';
+import { type ComponentInstanceParams, createComponentModel } from './create-component-model';
 
 export const replaceElementWithComponent = async ( element: V1ElementData, component: ComponentInstanceParams ) => {
 	return await replaceElement( {

package/src/index.ts

@@ -1 +1,2 @@
 export { init } from './init';
+export { hasProInstalled, isProActive } from './utils/is-pro-user';

package/src/utils/is-pro-user.ts

@@ -1,26 +1,11 @@
-type ExtendedWindow = Window & {
-	elementor?: {
-		helpers?: {
-			hasPro?: () => boolean;
-		};
-	};
-	elementorPro?: {
-		config?: {
-			isActive?: boolean;
-		};
-	};
-};
-
-export function isProUser(): boolean {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	const hasPro = extendedWindow.elementor?.helpers?.hasPro?.() ?? false;
+export function hasProInstalled(): boolean {
+	return window.elementor?.helpers?.hasPro?.() ?? false;
+}
 
-	if ( ! hasPro ) {
+export function isProActive(): boolean {
+	if ( ! hasProInstalled() ) {
 		return false;
 	}
 
-	const isProActive = extendedWindow.elementorPro?.config?.isActive ?? false;
-
-	return isProActive;
+	return window.elementorPro?.config?.isActive ?? false;
 }