@elementor/editor-editing-panel 0.2.0 → 0.4.0

package/src/components/controls/__tests__/settings-control.test.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { SettingsControl } from '../settings-control';
+import { useControl } from '../control-context';
+import { updateSettings } from '../../../sync/update-settings';
+import { useWidgetSettings } from '../../../hooks/use-widget-settings';
+
+jest.mock( '../../../sync/update-settings' );
+jest.mock( '../../../hooks/use-widget-settings' );
+
+describe( 'SettingsControl', () => {
+	beforeEach( () => {
+		jest.mocked( useWidgetSettings ).mockReturnValue( 'Hello, World!' );
+	} );
+
+	it( 'should set the initial value', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const bind = 'text';
+
+		// Act.
+		render(
+			<SettingsControl bind={ bind } elementID={ elementID }>
+				<MockControl />
+			</SettingsControl>
+		);
+
+		// Assert.
+		expect( screen.getByRole( 'textbox', { name: bind } ) ).toHaveValue( 'Hello, World!' );
+	} );
+
+	it( 'should pass the updated payload when input value changes', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const bind = 'text';
+
+		// Act.
+		render(
+			<SettingsControl bind={ bind } elementID={ elementID }>
+				<MockControl />
+			</SettingsControl>
+		);
+
+		const input = screen.getByRole( 'textbox', { name: bind } );
+		const newValue = 'Goodbye, World!';
+
+		fireEvent.change( input, { target: { value: newValue } } );
+
+		// Assert.
+		expect( jest.mocked( updateSettings ) ).toHaveBeenCalledWith( {
+			id: elementID,
+			props: { [ bind ]: newValue },
+		} );
+	} );
+} );
+
+const MockControl = () => {
+	const { value, setValue, bind } = useControl<string>( '' );
+
+	const handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {
+		setValue( event.target.value );
+	};
+
+	return (
+		<input type="text" aria-label={ bind } value={ value } onChange={ handleChange } />
+	);
+};

package/src/components/controls/control-context.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+import { PropKey, PropValue } from '../../types';
+
+export type ControlContext<T extends PropValue> = null | {
+	bind: PropKey;
+	setValue: ( value: T ) => void;
+	value: T;
+};
+
+export const ControlContext = createContext<ControlContext<PropValue>>( null );
+
+export function useControl<T extends PropValue>( defaultValue?: T ) {
+	const controlContext = useContext<ControlContext<T>>( ControlContext as never );
+
+	if ( ! controlContext ) {
+		throw new Error( 'useControl must be used within a ControlContext' );
+	}
+
+	return { ...controlContext, value: controlContext.value ?? defaultValue };
+}

package/src/components/controls/control-types/__tests__/select-control.test.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ControlContext } from '../../control-context';
+import { SelectControl } from '../select-control';
+
+describe( 'SelectControl', () => {
+	it( 'should pass the updated payload when select value changes', () => {
+		// Arrange.
+		const setValue = jest.fn();
+		const options = [
+			{ label: 'Option 1', value: 'value1' },
+			{ label: 'Option 2', value: 'value2' },
+		];
+
+		// Act.
+		render(
+			<ControlContext.Provider value={ { setValue, value: 'value1', bind: 'select' } }>
+				<SelectControl options={ options } />
+			</ControlContext.Provider>
+		);
+
+		const select = screen.getByRole( 'combobox' );
+
+		// Assert.
+		expect( screen.getByText( 'Option 1' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Option 2' ) ).not.toBeInTheDocument();
+
+		// Act.
+		fireEvent.mouseDown( select );
+
+		const option2 = screen.getByText( 'Option 2' );
+
+		fireEvent.click( option2 );
+
+		// Assert.
+		expect( setValue ).toHaveBeenCalledWith( 'value2' );
+	} );
+
+	it( 'should disable the select options', () => {
+		// Arrange.
+		const setValue = jest.fn();
+		const options = [
+			{ label: 'Option 1', value: 'value1' },
+			{ label: 'Option 2', value: 'value2', disabled: true },
+			{ label: 'Option 3', value: 'value3', disabled: false },
+		];
+
+		// Act.
+		render(
+			<ControlContext.Provider value={ { setValue, value: '', bind: 'select' } }>
+				<SelectControl options={ options } />
+			</ControlContext.Provider>
+		);
+
+		const select = screen.getByRole( 'combobox' );
+
+		// Act.
+		fireEvent.mouseDown( select );
+
+		const option2 = screen.getByText( 'Option 2' );
+		const option3 = screen.getByText( 'Option 3' );
+
+		// Assert.
+		expect( option2 ).toHaveAttribute( 'aria-disabled', 'true' );
+		expect( option3 ).not.toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+} );

package/src/components/controls/control-types/__tests__/text-control.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { TextControl } from '../text-control';
+import { ControlContext } from '../../control-context';
+
+describe( 'TextControl', () => {
+	it( 'should pass the updated payload when input value changes', () => {
+		// Arrange.
+		const setValue = jest.fn();
+
+		// Act.
+		render(
+			<ControlContext.Provider value={ { setValue, value: 'Hi', bind: 'text' } }>
+				<TextControl placeholder="type text here" />
+			</ControlContext.Provider>
+		);
+
+		const input = screen.getByRole( 'textbox' );
+
+		// Assert.
+		expect( input ).toHaveValue( 'Hi' );
+
+		// Act.
+		fireEvent.input( input, { target: { value: 'Cool Heading!' } } );
+
+		// Assert.
+		expect( setValue ).toHaveBeenCalledWith( 'Cool Heading!' );
+	} );
+} );

package/src/components/controls/control-types/select-control.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
+import { useControl } from '../control-context';
+import { PropValue } from '../../../types';
+
+export type SelectControlProps<T> = {
+	options: Array<{ label: string; value: T; disabled?: boolean }>
+};
+
+export const SelectControl = <T extends PropValue>( { options }: SelectControlProps<T> ) => {
+	const { value, setValue } = useControl<T>();
+
+	const handleChange = ( event: SelectChangeEvent<T> ) => {
+		setValue( event.target.value as T );
+	};
+
+	return (
+		<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
+			{ options.map( ( option ) => (
+				<MenuItem key={ option.value } value={ option.value } disabled={ option.disabled }>
+					{ option.label }
+				</MenuItem>
+			) ) }
+		</Select>
+	);
+};

package/src/components/controls/control-types/text-control.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@elementor/ui';
+import { useControl } from '../control-context';
+
+export type TextControlProps = {
+	placeholder?: string;
+}
+
+export const TextControl = ( { placeholder }: TextControlProps ) => {
+	const { value, setValue } = useControl<string>( '' );
+
+	const handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {
+		setValue( event.target.value );
+	};
+
+	return (
+		<TextareaAutosize size="tiny" minRows={ 3 }value={ value } onChange={ handleChange } placeholder={ placeholder } />
+	);
+};

package/src/components/controls/settings-control.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ControlContext } from './control-context';
+import { Stack, Typography } from '@elementor/ui';
+import { updateSettings } from '../../sync/update-settings';
+import { useWidgetSettings } from '../../hooks/use-widget-settings';
+import { PropKey, PropValue } from '../../types';
+
+type Props = {
+	bind: PropKey;
+	children: React.ReactNode;
+	elementID: Element['id'];
+}
+
+const SettingsControl = ( { bind, children, elementID }: Props ) => {
+	const value = useWidgetSettings( { id: elementID, bind } );
+
+	const setValue = ( newValue: PropValue ) => {
+		updateSettings( {
+			id: elementID,
+			props: {
+				[ bind ]: newValue,
+			},
+		} );
+	};
+
+	return (
+		<ControlContext.Provider value={ { setValue, value, bind } }>
+			{ children }
+		</ControlContext.Provider>
+	);
+};
+
+const Label = ( { children }: { children: React.ReactNode } ) => {
+	return <Typography component="label" variant="caption">{ children }</Typography>;
+};
+
+const Container = ( { children }: { children: React.ReactNode} ) => (
+	<Stack
+		spacing={ 1 }
+		flexDirection="row"
+		alignItems="center"
+		justifyContent="space-between"
+		flexWrap="wrap"
+		sx={ { px: 2 } }
+	>
+		{ children }
+	</Stack>
+);
+
+SettingsControl.Label = Label;
+SettingsControl.Container = Container;
+
+export { SettingsControl };

package/src/components/editing-panel.tsx

@@ -1,17 +1,25 @@
 import * as React from 'react';
-import {
-	Panel,
-	PanelBody,
-	PanelHeader,
-	PanelHeaderTitle,
-} from '@elementor/editor-panels';
 import { __ } from '@wordpress/i18n';
 import useSelectedElements from '../hooks/use-selected-elements';
 import useElementType from '../hooks/use-element-type';
+import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { SelectControl } from './controls/control-types/select-control';
+import { TextControl } from './controls/control-types/text-control';
+import { SettingsControl } from '../components/controls/settings-control';
+import { Stack } from '@elementor/ui';
+import { ElementContext } from '../contexts/settings-controls';
+
+const controlTypes = {
+	select: SelectControl,
+	text: TextControl,
+};
 
 export const EditingPanel = () => {
 	const elements = useSelectedElements();
-	const elementType = useElementType( elements[ 0 ]?.type );
+
+	const selectedElement = elements[ 0 ];
+
+	const elementType = useElementType( selectedElement?.type );
 
 	if ( elements.length !== 1 || ! elementType ) {
 		return null;
@@ -25,7 +33,35 @@ export const EditingPanel = () => {
 			<PanelHeader>
 				<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
 			</PanelHeader>
-			<PanelBody></PanelBody>
+			<PanelBody>
+				<ElementContext element={ selectedElement }>
+					<Stack spacing={ 2 }>
+						{
+							elementType.controls.map( ( control ) => {
+								if ( control.type === 'control' ) {
+									const ControlComponent = controlTypes[ control.value.type as keyof typeof controlTypes ];
+
+									if ( ! ControlComponent ) {
+										return null;
+									}
+
+									return (
+										<SettingsControl key={ control.value.bind } bind={ control.value.bind } elementID={ elements[ 0 ].id }>
+											<SettingsControl.Container>
+												<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>
+												{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }
+												<ControlComponent { ...control.value.props as any } />
+											</SettingsControl.Container>
+										</SettingsControl>
+									);
+								}
+
+								return null;
+							} )
+						}
+					</Stack>
+				</ElementContext>
+			</PanelBody>
 		</Panel>
 	);
 };

package/src/contexts/settings-controls.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createContext, ReactNode, useContext } from 'react';
+import { Element } from '../types';
+
+type ContextValue = {
+	element: Element;
+}
+
+const Context = createContext<ContextValue | null>( null );
+
+type Props = {
+	element: Element;
+	children?: ReactNode;
+}
+
+export function ElementContext( { children, element }: Props ) {
+	return (
+		<Context.Provider value={ { element } }>
+			{ children }
+		</Context.Provider>
+	);
+}
+
+export function useElementContext() {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'useElementContext must be used within a ElementContextProvider' );
+	}
+
+	return context;
+}

package/src/hooks/__tests__/use-widget-settings.test.ts

@@ -0,0 +1,81 @@
+import { act, renderHook } from '@testing-library/react';
+import { useWidgetSettings } from '../use-widget-settings';
+import { ExtendedWindow } from '../../sync/types';
+import { mockV1Element } from '../../__tests__/utils';
+import { dispatchCommandAfter } from 'test-utils';
+import getContainer from '../../sync/get-container';
+
+jest.mock( '../../sync/get-container' );
+
+describe( 'useWidgetSettings', () => {
+	beforeEach( () => {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.elementor = {
+			widgetsCache: {
+				'v1-heading': {
+					controls: [],
+					title: 'Heading',
+				},
+				'v2-heading': {
+					controls: [],
+					atomic_controls: [],
+					title: 'Heading',
+				},
+				'v2-container': {
+					controls: [],
+					atomic_controls: [],
+					title: 'Container',
+				},
+			},
+		};
+	} );
+
+	it( 'should return the value of the setting', () => {
+		// Arrange.
+		const bind = 'title';
+		const element = { id: 'element-id' };
+		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Hello, World!' } } ) );
+
+		// Act.
+		const result = renderHook( () => useWidgetSettings( { id: element.id, bind } ) ).result.current;
+
+		// Assert.
+		expect( result ).toEqual( 'Hello, World!' );
+	} );
+
+	it( 'should return null if the setting is not found', () => {
+		// Arrange.
+		const bind = 'title';
+		const element = { id: 'element-id' };
+		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: {} } ) );
+
+		// Act.
+		const result = renderHook( () => useWidgetSettings( { id: element.id, bind } ) ).result.current;
+
+		// Assert.
+		expect( result ).toEqual( null );
+	} );
+
+	it( 'should update the state value on settings change', () => {
+		// Arrange.
+		const bind = 'title';
+		const element = { id: 'element-id' };
+		jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Hello, World!' } } ) );
+
+		// Act.
+		const { result } = renderHook( () => useWidgetSettings( { id: element.id, bind } ) );
+
+		// Assert.
+		expect( result.current ).toEqual( 'Hello, World!' );
+
+		// Act.
+		act( () => {
+			jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Goodbye, World!' } } ) );
+			dispatchCommandAfter( 'document/elements/settings' );
+		} );
+
+		// Assert.
+		expect( result.current ).toEqual( 'Goodbye, World!' );
+	} );
+} );

package/src/hooks/use-widget-settings.ts

@@ -0,0 +1,16 @@
+import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
+import { PropValue } from '../types';
+import getContainer from '../sync/get-container';
+
+export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {
+	return useListenTo(
+		commandEndEvent( 'document/elements/settings' ),
+		() => {
+			const container = getContainer( id );
+			const value = container?.settings?.get( bind ) ?? null;
+
+			return value;
+		},
+		[]
+	);
+};

package/src/sync/__tests__/get-container.test.ts

@@ -0,0 +1,40 @@
+import getContainer from '../get-container';
+import { ExtendedWindow } from '../types';
+
+describe( 'getContainer', () => {
+	const mockGetContainer = jest.fn();
+
+	beforeEach( () => {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.elementor = {
+			getContainer: mockGetContainer,
+		};
+	} );
+
+	it( 'should return the container', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const container = { id: elementID };
+		mockGetContainer.mockReturnValue( container );
+
+		// Act.
+		const result = getContainer( elementID );
+
+		// Assert.
+		expect( result ).toBe( container );
+	} );
+
+	it( 'should return null if the container is not found', () => {
+		// Arrange.
+		const elementID = '1-heading';
+		const container = undefined;
+		mockGetContainer.mockReturnValue( container );
+
+		// Act.
+		const result = getContainer( elementID );
+
+		// Assert.
+		expect( result ).toBe( null );
+	} );
+} );

package/src/sync/__tests__/should-use-v2-panel.test.ts

@@ -41,7 +41,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return true for v2 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'v2-heading' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'v2-heading' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( true );
@@ -49,7 +49,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return true for v2 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { elType: 'v2-container' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { elType: 'v2-container' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( true );
@@ -57,7 +57,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return false for v1 element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'v1-heading' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'v1-heading' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( false );
@@ -65,7 +65,7 @@ describe( 'shouldUseV2Panel', () => {
 
 	it( 'should return false for non-existing element', () => {
 		// Arrange.
-		getElements.mockReturnValue( [ mockV1Element( { widgetType: 'non-existing' } ) ] );
+		getElements.mockReturnValue( [ mockV1Element( { model: { widgetType: 'non-existing' } } ) ] );
 
 		// Assert.
 		expect( shouldUseV2Panel() ).toBe( false );
@@ -74,8 +74,8 @@ describe( 'shouldUseV2Panel', () => {
 	it( 'should return false if there is more than 1 selected element with mixed versions', () => {
 		// Arrange.
 		getElements.mockReturnValue( [
-			mockV1Element( { widgetType: 'v2-heading' } ),
-			mockV1Element( { widgetType: 'v1-heading' } ),
+			mockV1Element( { model: { widgetType: 'v2-heading' } } ),
+			mockV1Element( { model: { widgetType: 'v1-heading' } } ),
 		] );
 
 		// Assert.
@@ -85,8 +85,8 @@ describe( 'shouldUseV2Panel', () => {
 	it( 'should return false if there is more than 1 selected element with same version', () => {
 		// Arrange.
 		getElements.mockReturnValue( [
-			mockV1Element( { widgetType: 'v2-heading' } ),
-			mockV1Element( { widgetType: 'v2-container' } ),
+			mockV1Element( { model: { widgetType: 'v2-heading' } } ),
+			mockV1Element( { model: { widgetType: 'v2-container' } } ),
 		] );
 
 		// Assert.

package/src/sync/get-container.ts

@@ -0,0 +1,8 @@
+import { ExtendedWindow } from './types';
+
+export default function getContainer( id: string ) {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const container = extendedWindow.elementor?.getContainer?.( id );
+
+	return container ?? null;
+}

package/src/sync/types.ts

@@ -1,18 +1,22 @@
+import { AtomicControl, PropValue } from '../types';
+
 export type ExtendedWindow = Window & {
 	elementor?: {
 		selection?: {
 			getElements: () => V1Element[];
 		},
 		widgetsCache?: Record<string, {
-			atomic_controls?: unknown[],
+			atomic_controls?: AtomicControl[],
 			controls: object,
 			title: string,
-		}>
+		}>,
+		getContainer?: ( id: string ) => V1Element
 	}
 }
 
 export type V1Element = {
-	model: V1ElementModel<V1ElementModelProps>
+	model: V1Model<V1ElementModelProps>,
+	settings?: V1Model<V1ElementSettingsProps>,
 }
 
 export type V1ElementModelProps = {
@@ -21,6 +25,8 @@ export type V1ElementModelProps = {
 	id: string;
 }
 
-type V1ElementModel<T> = {
+export type V1ElementSettingsProps = Record<string, PropValue>;
+
+type V1Model<T> = {
 	get: <K extends keyof T>( key: K ) => T[K],
 }

package/src/sync/update-settings.ts

@@ -0,0 +1,14 @@
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { Props } from '../types';
+import getContainer from './get-container';
+
+export const updateSettings = ( { id, props }: { id: string, props: Props } ) => {
+	const container = getContainer( id );
+
+	runCommand( 'document/elements/settings', {
+		container,
+		settings: {
+			...props,
+		},
+	} );
+};

package/src/types.ts

@@ -5,6 +5,34 @@ export type Element = {
 
 export type ElementType = {
 	key: string;
-	controls: unknown[];
+	controls: AtomicControl[];
 	title: string;
 }
+
+export type AtomicControl = {
+	type: 'control',
+	value: {
+		bind: string,
+		label: string,
+		description?: string,
+		type: string,
+		props: Record<string, unknown>,
+	},
+}
+
+type MaybeArray<T> = T | T[];
+
+type TransformablePropValue = {
+	$$type: string,
+	value: unknown,
+}
+
+export type PlainPropValue = MaybeArray<string | number | boolean | object | null | undefined>;
+
+export type PropValue = PlainPropValue | TransformablePropValue;
+
+export type PropKey = string;
+
+export type Props = Record<PropKey, PropValue>;
+
+export type PlainProps = Record<PropKey, PlainPropValue>;