@elementor/editor-editing-panel 0.4.1 → 0.5.0

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TextareaAutosize } from '@elementor/ui';
+import { useControl } from '../../../contexts/control-context';
+
+type Props = {
+	placeholder?: string;
+};
+
+export const TextAreaControl = ( { placeholder }: Props ) => {
+	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

@@ -1,40 +1,14 @@
 import * as React from 'react';
-import { ControlContext } from './control-context';
+import { ControlContextProvider } from '../../contexts/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';
+import { PropKey } 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} ) => (
+const SettingsControl = ( { children, bind }: Props ) => (
 	<Stack
 		spacing={ 1 }
 		flexDirection="row"
@@ -43,11 +17,17 @@ const Container = ( { children }: { children: React.ReactNode} ) => (
 		flexWrap="wrap"
 		sx={ { px: 2 } }
 	>
-		{ children }
+		<ControlContextProvider bind={ bind }>{ children }</ControlContextProvider>
 	</Stack>
 );
 
-SettingsControl.Label = Label;
-SettingsControl.Container = Container;
+const Label = ( { children }: { children: React.ReactNode } ) => {
+	return (
+		<Typography component="label" variant="caption">
+			{ children }
+		</Typography>
+	);
+};
 
+SettingsControl.Label = Label;
 export { SettingsControl };

package/src/components/editing-panel.tsx

@@ -4,20 +4,20 @@ 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 { TextAreaControl } from './controls/control-types/text-area-control';
 import { SettingsControl } from '../components/controls/settings-control';
 import { Stack } from '@elementor/ui';
-import { ElementContext } from '../contexts/settings-controls';
+import { ElementContext } from '../contexts/element-context';
 
 const controlTypes = {
 	select: SelectControl,
-	text: TextControl,
+	textarea: TextAreaControl,
 };
 
 export const EditingPanel = () => {
 	const elements = useSelectedElements();
 
-	const selectedElement = elements[ 0 ];
+	const [ selectedElement ] = elements;
 
 	const elementType = useElementType( selectedElement?.type );
 
@@ -36,29 +36,28 @@ export const EditingPanel = () => {
 			<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 ];
+						{ 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>
-									);
+								if ( ! ControlComponent ) {
+									return null;
 								}
 
-								return null;
-							} )
-						}
+								return (
+									<SettingsControl key={ control.value.bind } bind={ control.value.bind }>
+										<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>
+										<ControlComponent
+											/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+											{ ...( control.value.props as any ) }
+										/>
+									</SettingsControl>
+								);
+							}
+
+							return null;
+						} ) }
 					</Stack>
 				</ElementContext>
 			</PanelBody>

package/src/contexts/control-context.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { PropKey, PropValue } from '../types';
+import { useElementContext } from './element-context';
+import { useWidgetSettings } from '../hooks/use-widget-settings';
+import { updateSettings } from '../sync/update-settings';
+
+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 };
+}
+
+type Props = {
+	bind: PropKey;
+	children: React.ReactNode;
+};
+
+export const ControlContextProvider = ( { bind, children }: Props ) => {
+	const { element } = useElementContext();
+	const value = useWidgetSettings( { id: element.id, bind } );
+
+	const setValue = ( newValue: PropValue ) => {
+		updateSettings( {
+			id: element.id,
+			props: {
+				[ bind ]: newValue,
+			},
+		} );
+	};
+
+	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
+};

package/src/contexts/{settings-controls.tsx → element-context.tsx}

@@ -4,21 +4,17 @@ import { Element } from '../types';
 
 type ContextValue = {
 	element: Element;
-}
+};
 
-const Context = createContext<ContextValue | null>( null );
+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>
-	);
+	return <Context.Provider value={ { element } }>{ children }</Context.Provider>;
 }
 
 export function useElementContext() {

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

@@ -71,7 +71,9 @@ describe( 'useWidgetSettings', () => {
 
 		// Act.
 		act( () => {
-			jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Goodbye, World!' } } ) );
+			jest.mocked( getContainer ).mockReturnValue(
+				mockV1Element( { settings: { [ bind ]: 'Goodbye, World!' } } )
+			);
 			dispatchCommandAfter( 'document/elements/settings' );
 		} );
 

package/src/hooks/use-open-editor-panel.ts

@@ -7,13 +7,10 @@ export const useOpenEditorPanel = () => {
 	const { open } = usePanelActions();
 
 	useEffect( () => {
-		return listenTo(
-			commandStartEvent( 'panel/editor/open' ),
-			() => {
-				if ( shouldUseV2Panel() ) {
-					open();
-				}
+		return listenTo( commandStartEvent( 'panel/editor/open' ), () => {
+			if ( shouldUseV2Panel() ) {
+				open();
 			}
-		);
+		} );
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 };

package/src/hooks/use-selected-elements.ts

@@ -3,10 +3,7 @@ import getSelectedElements from '../sync/get-selected-elements';
 
 export default function useSelectedElements() {
 	return useListenTo(
-		[
-			commandEndEvent( 'document/elements/select' ),
-			commandEndEvent( 'document/elements/deselect' ),
-		],
+		[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],
 		() => getSelectedElements()
 	);
 }

package/src/panel.ts

@@ -1,11 +1,7 @@
 import { __createPanel as createPanel } from '@elementor/editor-panels';
 import { EditingPanel } from './components/editing-panel';
 
-export const {
-	panel,
-	usePanelActions,
-	usePanelStatus,
-} = createPanel( {
+export const { panel, usePanelActions, usePanelStatus } = createPanel( {
 	id: 'editing-panel',
 	component: EditingPanel,
 } );

package/src/sync/get-selected-elements.ts

@@ -6,7 +6,7 @@ export default function getSelectedElements(): Element[] {
 
 	const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
 
-	return selectedElements.reduce<Element[]>( ( acc, el ) => {
+	return selectedElements.reduce< Element[] >( ( acc, el ) => {
 		const type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );
 
 		if ( type ) {

package/src/sync/types.ts

@@ -4,29 +4,32 @@ export type ExtendedWindow = Window & {
 	elementor?: {
 		selection?: {
 			getElements: () => V1Element[];
-		},
-		widgetsCache?: Record<string, {
-			atomic_controls?: AtomicControl[],
-			controls: object,
-			title: string,
-		}>,
-		getContainer?: ( id: string ) => V1Element
-	}
-}
+		};
+		widgetsCache?: Record<
+			string,
+			{
+				atomic_controls?: AtomicControl[];
+				controls: object;
+				title: string;
+			}
+		>;
+		getContainer?: ( id: string ) => V1Element;
+	};
+};
 
 export type V1Element = {
-	model: V1Model<V1ElementModelProps>,
-	settings?: V1Model<V1ElementSettingsProps>,
-}
+	model: V1Model< V1ElementModelProps >;
+	settings?: V1Model< V1ElementSettingsProps >;
+};
 
 export type V1ElementModelProps = {
 	widgetType?: string;
 	elType: string;
 	id: string;
-}
+};
 
-export type V1ElementSettingsProps = Record<string, PropValue>;
+export type V1ElementSettingsProps = Record< string, PropValue >;
 
-type V1Model<T> = {
-	get: <K extends keyof T>( key: K ) => T[K],
-}
+type V1Model< T > = {
+	get: < K extends keyof T >( key: K ) => T[ K ];
+};

package/src/sync/update-settings.ts

@@ -2,7 +2,7 @@ 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 } ) => {
+export const updateSettings = ( { id, props }: { id: string; props: Props } ) => {
 	const container = getContainer( id );
 
 	runCommand( 'document/elements/settings', {

package/src/types.ts

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

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

@@ -1,20 +0,0 @@
-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/text-control.tsx

@@ -1,19 +0,0 @@
-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 } />
-	);
-};