@elementor/editor-components 3.33.0-215 → 3.33.0-216

package/src/components/in-edit-mode.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { closeDialog, openDialog } from '@elementor/editor-ui';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Box, Button, DialogActions, DialogContent, DialogHeader, Icon, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const openEditModeDialog = ( lockedBy: string ) => {
+	openDialog( {
+		component: <EditModeDialog lockedBy={ lockedBy } />,
+	} );
+};
+
+const EditModeDialog = ( { lockedBy }: { lockedBy: string } ) => {
+	/* translators: %s is the name of the user who is currently editing the document */
+	const content = __( '%s is currently editing this document', 'elementor' ).replace( '%s', lockedBy );
+	return (
+		<>
+			<DialogHeader logo={ false }>
+				<Box display="flex" alignItems="center" gap={ 1 }>
+					<Icon color="secondary">
+						<InfoCircleFilledIcon fontSize="medium" />
+					</Icon>
+					<Typography variant="subtitle1">{ content }</Typography>
+				</Box>
+			</DialogHeader>
+			<DialogContent>
+				<Stack spacing={ 2 } direction="column">
+					<Typography variant="body2">
+						{ __(
+							'You can wait for them to finish or reach out to coordinate your changes together.',
+							'elementor'
+						) }
+					</Typography>
+					<DialogActions>
+						<Button color="secondary" variant="contained" onClick={ closeDialog }>
+							{ __( 'Close', 'elementor' ) }
+						</Button>
+					</DialogActions>
+				</Stack>
+			</DialogContent>
+		</>
+	);
+};

package/src/create-component-type.ts

@@ -9,9 +9,13 @@ import { type NumberPropValue } from '@elementor/editor-props';
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
+import { apiClient } from './api';
+
 export const TYPE = 'e-component';
 
-export function createComponentType( options: CreateTemplatedElementTypeOptions ): typeof ElementType {
+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 {
@@ -25,7 +29,9 @@ export function createComponentType( options: CreateTemplatedElementTypeOptions
 	};
 }
 
-function createComponentView( options: CreateTemplatedElementTypeOptions ): typeof ElementView {
+function createComponentView(
+	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
+): typeof ElementView {
 	return class extends createTemplatedElementView( options ) {
 		legacyWindow = window as unknown as LegacyWindow;
 
@@ -57,33 +63,43 @@ function createComponentView( options: CreateTemplatedElementTypeOptions ): type
 
 		getContextMenuGroups() {
 			const filteredGroups = super.getContextMenuGroups().filter( ( group ) => group.name !== 'save' );
-			const componentId = this.getComponentId()?.value;
-
+			const componentId = this.getComponentId()?.value as number;
 			if ( ! componentId ) {
 				return filteredGroups;
 			}
 
-			const newGroup = {
-				name: 'edit component',
-				actions: [
-					{
-						name: 'edit component',
-						icon: 'eicon-edit',
-						title: () => __( 'Edit Component', 'elementor' ),
-						isEnabled: () => true,
-						callback: () => this.switchDocument(),
-					},
-				],
-			};
-			return [ ...filteredGroups, newGroup ];
+			const newGroup = [
+				{
+					name: 'edit component',
+					actions: [
+						{
+							name: 'edit component',
+							icon: 'eicon-edit',
+							title: () => __( 'Edit Component', 'elementor' ),
+							isEnabled: () => true,
+							callback: () => this.switchDocument(),
+						},
+					],
+				},
+			];
+			return [ ...filteredGroups, ...newGroup ];
 		}
 
-		switchDocument() {
-			runCommand( 'editor/documents/switch', {
-				id: this.getComponentId().value,
-				selector: `[data-id="${ this.model.get( 'id' ) }"]`,
-				mode: 'autosave',
-			} );
+		async switchDocument() {
+			const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
+				this.getComponentId()?.value as number
+			);
+
+			if ( ! isAllowedToSwitchDocument ) {
+				options.showLockedByModal?.( lockedBy || '' );
+			} else {
+				runCommand( 'editor/documents/switch', {
+					id: this.getComponentId()?.value as number,
+					mode: 'autosave',
+					selector: `[data-id="${ this.model.get( 'id' ) }"]`,
+				} );
+				apiClient.lockComponent( this.getComponentId()?.value as number );
+			}
 		}
 
 		ui() {

package/src/init.ts

@@ -1,5 +1,9 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
-import { registerElementType, settingsTransformersRegistry } from '@elementor/editor-canvas';
+import {
+	type CreateTemplatedElementTypeOptions,
+	registerElementType,
+	settingsTransformersRegistry,
+} from '@elementor/editor-canvas';
 import { getV1CurrentDocument } from '@elementor/editor-documents';
 import { injectTab } from '@elementor/editor-elements-panel';
 import { stylesRepository } from '@elementor/editor-styles-repository';
@@ -10,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { componentIdTransformer } from './component-id-transformer';
 import { Components } from './components/components-tab/components';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
+import { openEditModeDialog } from './components/in-edit-mode';
 import { createComponentType, TYPE } from './create-component-type';
 import { PopulateStore } from './populate-store';
 import { componentsStylesProvider } from './store/components-styles-provider';
@@ -24,7 +29,9 @@ const COMPONENT_DOCUMENT_TYPE = 'elementor_component';
 export function init() {
 	stylesRepository.register( componentsStylesProvider );
 	registerSlice( slice );
-	registerElementType( TYPE, createComponentType );
+	registerElementType( TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
+		createComponentType( { ...options, showLockedByModal: openEditModeDialog } )
+	);
 	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {
 		const document = getV1CurrentDocument();
 		if ( document.config.type === COMPONENT_DOCUMENT_TYPE ) {