@elementor/editor-editing-panel 1.0.0 → 1.2.0

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import { PropKey } from '@elementor/editor-props';
-import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { type PropKey } from '@elementor/editor-props';
+
 import { useElement } from '../../contexts/element-context';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = ( propName: PropKey ) => {

package/src/dynamics/init.ts

@@ -1,8 +1,10 @@
+import { replaceControl } from '../control-replacement';
+import { controlActionsMenu } from '../controls-actions';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
-import { isDynamicPropValue } from './utils';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
-import { replaceControl } from '../control-replacement';
-import { registerPopoverAction } from '../controls-actions';
+import { isDynamicPropValue } from './utils';
+
+const { registerPopoverAction } = controlActionsMenu;
 
 export const init = () => {
 	replaceControl( {

package/src/dynamics/sync/get-elementor-config.ts

@@ -1,4 +1,4 @@
-import { ExtendedWindow } from '../types';
+import { type ExtendedWindow } from '../types';
 
 export const getElementorConfig = () => {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/dynamics/types.ts

@@ -1,5 +1,5 @@
-import { TransformablePropType, TransformablePropValue } from '@elementor/editor-props';
-import { ControlItem, PropsSchema } from '@elementor/editor-elements';
+import { type ControlItem, type PropsSchema } from '@elementor/editor-elements';
+import { type TransformablePropType, type TransformablePropValue } from '@elementor/editor-props';
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/dynamics/utils.ts

@@ -1,5 +1,6 @@
-import { isTransformable, PropType, PropValue, TransformablePropType } from '@elementor/editor-props';
-import { DynamicPropType, DynamicPropValue } from './types';
+import { isTransformable, type PropType, type PropValue, type TransformablePropType } from '@elementor/editor-props';
+
+import { type DynamicPropType, type DynamicPropValue } from './types';
 
 const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 

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

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { getSelectedElements, isElementInContainer, type V1Element } from '@elementor/editor-elements';
+import { __privateListenTo as listenTo, type CommandEvent, commandStartEvent } from '@elementor/editor-v1-adapters';
+
+import { usePanelActions } from '../panel';
+import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
+
+export const useCloseEditorPanel = () => {
+	const { close } = usePanelActions();
+
+	return useEffect( () => {
+		return listenTo( commandStartEvent( 'document/elements/delete' ), ( e ) => {
+			const selectedElement = getSelectedElements()[ 0 ];
+			const { container: deletedContainer } = ( e as CommandEvent< { container: V1Element } > )?.args;
+			const isSelectedElementInDeletedContainer =
+				deletedContainer && selectedElement && isElementInContainer( selectedElement, deletedContainer );
+
+			if ( isSelectedElementInDeletedContainer && isAtomicWidgetSelected() ) {
+				close();
+			}
+		} );
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+};

package/src/hooks/use-direction.ts

@@ -0,0 +1,13 @@
+import { useTheme } from '@elementor/ui';
+
+import { type ExtendedWindow } from '../sync/types';
+
+export function useDirection() {
+	const theme = useTheme(),
+		extendedWindow: ExtendedWindow = window;
+
+	const isUiRtl = 'rtl' === theme.direction,
+		isSiteRtl = !! extendedWindow.elementorFrontend?.config?.is_rtl;
+
+	return { isSiteRtl, isUiRtl };
+}

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

@@ -1,14 +1,15 @@
 import { useEffect } from 'react';
-import { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';
+import { __privateListenTo as listenTo, commandStartEvent } from '@elementor/editor-v1-adapters';
+
 import { usePanelActions } from '../panel';
-import { shouldUseV2Panel } from '../sync/should-use-v2-panel';
+import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
 
 export const useOpenEditorPanel = () => {
 	const { open } = usePanelActions();
 
 	useEffect( () => {
 		return listenTo( commandStartEvent( 'panel/editor/open' ), () => {
-			if ( shouldUseV2Panel() ) {
+			if ( isAtomicWidgetSelected() ) {
 				open();
 			}
 		} );

package/src/hooks/use-prop-value-history.ts

@@ -0,0 +1,45 @@
+import { useCallback, useMemo } from 'react';
+import { getSessionStorageItem, setSessionStorageItem } from '@elementor/utils';
+
+import { useElement } from '../contexts/element-context';
+
+export const PROPS_VALUES_HISTORY_PREFIX = 'elementor/editor-editing-panel/prop-value-history';
+
+export const usePropValueHistory = () => {
+	const { element } = useElement();
+	const elementKey = `${ PROPS_VALUES_HISTORY_PREFIX }/${ element.id }`;
+
+	const getElementPropsHistory = useCallback( () => {
+		return getSessionStorageItem< Record< string, unknown > >( elementKey );
+	}, [ elementKey ] );
+
+	const getPropValue = useCallback(
+		< T >( propKey: string ) => {
+			const elementPropValues = getElementPropsHistory();
+			return ( elementPropValues?.[ propKey ] ?? null ) as T | null;
+		},
+		[ getElementPropsHistory ]
+	);
+
+	const setPropValue = useCallback(
+		( propKey: string, propValue: unknown ) => {
+			const elementPropValues = getElementPropsHistory();
+			const updatedElementPropValues = { ...elementPropValues, [ propKey ]: propValue };
+			setSessionStorageItem( elementKey, updatedElementPropValues );
+		},
+		[ getElementPropsHistory, elementKey ]
+	);
+
+	const removeProp = useCallback(
+		( propKey: string ) => {
+			const elementPropValues = getElementPropsHistory();
+			const updatedElementPropValues = Object.fromEntries(
+				Object.entries( elementPropValues || {} ).filter( ( [ key ] ) => key !== propKey )
+			);
+			setSessionStorageItem( elementKey, updatedElementPropValues );
+		},
+		[ getElementPropsHistory, elementKey ]
+	);
+
+	return useMemo( () => ( { getPropValue, setPropValue, removeProp } ), [ getPropValue, removeProp, setPropValue ] );
+};

package/src/hooks/use-style-prop-history.ts

@@ -0,0 +1,75 @@
+import { useCallback, useMemo } from 'react';
+import { getElementStyles, getVariantByMeta, updateStyle } from '@elementor/editor-elements';
+import { type PropKey } from '@elementor/editor-props';
+
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+import { usePropValueHistory } from './use-prop-value-history';
+
+export const useStylePropsHistory = ( props: PropKey[] ) => {
+	const { element } = useElement();
+	const { id: styleDefID, meta } = useStyle();
+	const { getPropValue, setPropValue, removeProp } = usePropValueHistory();
+
+	const styleDef = getElementStyles( element.id )?.[ styleDefID ];
+	const styleVariant = styleDef ? getVariantByMeta( styleDef, meta ) : null;
+	const styleVariantPath = `${ styleDefID }-${ styleVariant?.meta.breakpoint }-${ styleVariant?.meta.state }`;
+
+	const saveStylePropsHistory = useCallback( () => {
+		props.forEach( ( propKey ) => {
+			const propValue = styleVariant?.props[ propKey ];
+
+			if ( propValue ) {
+				const propPath = `${ styleVariantPath }-${ propKey }`;
+				setPropValue( propPath, propValue );
+			}
+		} );
+	}, [ props, setPropValue, styleVariant?.props, styleVariantPath ] );
+
+	const updateStylePropsFromHistory = useCallback( () => {
+		const propValuesFromHistory = props.reduce( ( allProps, currentPropKey ) => {
+			const propPath = `${ styleVariantPath }-${ currentPropKey }`;
+			const propHistory = getPropValue( propPath );
+
+			if ( propHistory ) {
+				removeProp( propPath );
+				return { ...allProps, [ currentPropKey ]: propHistory };
+			}
+
+			return allProps;
+		}, {} );
+
+		if ( Object.keys( propValuesFromHistory ).length ) {
+			updateStyle( {
+				elementID: element.id,
+				styleDefID,
+				meta,
+				props: propValuesFromHistory,
+				bind: 'classes',
+			} );
+		}
+	}, [ element.id, getPropValue, meta, props, removeProp, styleDefID, styleVariantPath ] );
+
+	const clearCurrentStyleProps = useCallback( () => {
+		const resetValues = props.reduce(
+			( allProps, currentPropKey ) => ( {
+				...allProps,
+				[ currentPropKey ]: undefined,
+			} ),
+			{}
+		);
+
+		updateStyle( {
+			elementID: element.id,
+			styleDefID,
+			meta,
+			props: resetValues,
+			bind: 'classes',
+		} );
+	}, [ element.id, meta, props, styleDefID ] );
+
+	return useMemo(
+		() => ( { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } ),
+		[ saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps ]
+	);
+};

package/src/hooks/use-styles-field.ts

@@ -1,13 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { updateStyle, useElementStyleProp } from '@elementor/editor-elements';
 import type { PropKey, PropValue } from '@elementor/editor-props';
-import { useElementStyleProp, updateStyle } from '@elementor/editor-elements';
-import { useStyle } from '../contexts/style-context';
+
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
 
-export const useStylesField = < T extends PropValue >( propName: PropKey ) => {
+export const useStylesField = < T extends PropValue >(
+	propName: PropKey
+): [
+	T | null,
+	( newValue: T ) => void,
+	( callback: ( newValue: T | null, previousValue: T | null ) => void ) => void,
+] => {
 	const { element } = useElement();
 	const { id, meta } = useStyle();
 	const classesProp = useClassesProp();
+	const previousValue = useRef< T | null >( null );
+	const onChangeCallbacks = useRef< Set< ( newValue: T | null, previousValue: T | null ) => void > >( new Set() );
 
 	const value = useElementStyleProp< T >( {
 		elementID: element.id,
@@ -26,5 +36,16 @@ export const useStylesField = < T extends PropValue >( propName: PropKey ) => {
 		} );
 	};
 
-	return [ value, setValue ] as const;
+	const registerChangeListener = ( callback: ( newValue: T | null, previousValue: T | null ) => void ) => {
+		onChangeCallbacks.current.add( callback );
+	};
+
+	useEffect( () => {
+		onChangeCallbacks.current.forEach( ( cb ) => {
+			cb( value, previousValue.current );
+		} );
+		previousValue.current = value;
+	}, [ value ] );
+
+	return [ value, setValue, registerChangeListener ];
 };

package/src/index.ts

@@ -1,6 +1,6 @@
+export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { replaceControl } from './control-replacement';
-export { useBoundProp } from './controls';
 
 import init from './init';
 

package/src/init.ts

@@ -1,10 +1,11 @@
-import { panel } from './panel';
 import { injectIntoLogic } from '@elementor/editor';
-import { shouldUseV2Panel } from './sync/should-use-v2-panel';
-import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
+
+import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { init as initDynamics } from './dynamics/init';
+import { panel } from './panel';
+import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
 export default function init() {
 	registerPanel( panel );
@@ -22,6 +23,6 @@ export default function init() {
 const blockV1Panel = () => {
 	blockDataCommand( {
 		command: 'panel/editor/open',
-		condition: shouldUseV2Panel,
+		condition: isAtomicWidgetSelected,
 	} );
 };

package/src/panel.ts

@@ -1,4 +1,5 @@
 import { __createPanel as createPanel } from '@elementor/editor-panels';
+
 import { EditingPanel } from './components/editing-panel';
 
 export const { panel, usePanelActions, usePanelStatus } = createPanel( {

package/src/popover-action.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentType, ElementType as ReactElementType, useId } from 'react';
+import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
 import { XIcon } from '@elementor/icons';
 import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
 

package/src/sync/enqueue-font.ts

@@ -0,0 +1,7 @@
+import { type EnqueueFont, type ExtendedWindow } from './types';
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'editor' ) => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont( fontFamily, context ) ?? null;
+};

package/src/sync/get-elementor-config.ts

@@ -0,0 +1,7 @@
+import { type ExtendedWindow } from './types';
+
+export const getElementorConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.config ?? {};
+};

package/src/sync/{should-use-v2-panel.ts → is-atomic-widget-selected.ts}

@@ -1,6 +1,6 @@
 import { getSelectedElements, getWidgetsCache } from '@elementor/editor-elements';
 
-export const shouldUseV2Panel = () => {
+export const isAtomicWidgetSelected = () => {
 	const selectedElements = getSelectedElements();
 	const widgetCache = getWidgetsCache();
 

package/src/sync/types.ts

@@ -1,6 +1,8 @@
-import { ControlItem, PropsSchema } from '@elementor/editor-elements';
-import { PropValue } from '@elementor/editor-props';
-import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-styles';
+import { type ControlItem, type PropsSchema, type V1Element } from '@elementor/editor-elements';
+
+export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+
+export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -17,23 +19,20 @@ export type ExtendedWindow = Window & {
 			}
 		>;
 		getContainer?: ( id: string ) => V1Element;
+		helpers?: {
+			enqueueFont: EnqueueFont;
+		};
+		config?: {
+			controls?: {
+				font?: {
+					options?: Record< string, SupportedFonts >;
+				};
+			};
+		};
+	};
+	elementorFrontend?: {
+		config?: {
+			is_rtl?: boolean;
+		};
 	};
-};
-
-export type V1Element = {
-	model: V1Model< V1ElementModelProps >;
-	settings?: V1Model< V1ElementSettingsProps >;
-};
-
-export type V1ElementModelProps = {
-	widgetType?: string;
-	elType: string;
-	id: string;
-	styles?: Record< StyleDefinitionID, StyleDefinition >;
-};
-
-export type V1ElementSettingsProps = Record< string, PropValue >;
-
-type V1Model< T > = {
-	get: < K extends keyof T >( key: K ) => T[ K ];
 };

package/src/components/accordion-section.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { useId } from 'react';
-import { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';
-
-export type AccordionSectionProps = React.PropsWithChildren< {
-	title: React.ReactNode;
-	defaultExpanded?: boolean;
-} >;
-
-export const AccordionSection = ( { title, children, defaultExpanded = false }: AccordionSectionProps ) => {
-	const uid = useId();
-	const labelId = `label-${ uid }`;
-	const contentId = `content-${ uid }`;
-
-	// TODO: Change to collapsible list item
-	return (
-		<Accordion disableGutters defaultExpanded={ defaultExpanded }>
-			<AccordionSummary aria-controls={ contentId } id={ labelId }>
-				<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>
-			</AccordionSummary>
-			<AccordionDetails id={ contentId } aria-labelledby={ labelId }>
-				<Stack gap={ 2.5 }>{ children }</Stack>
-			</AccordionDetails>
-		</Accordion>
-	);
-};

package/src/components/control-label.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Typography } from '@elementor/ui';
-
-export const ControlLabel = ( { children }: { children: React.ReactNode } ) => {
-	return (
-		<Typography component="label" variant="caption" color="text.secondary">
-			{ children }
-		</Typography>
-	);
-};

package/src/controls/bound-prop-context.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { PropKey, PropValue } from '@elementor/editor-props';
-import { createContext, useContext } from 'react';
-
-export type BoundPropContext< T extends PropValue > = {
-	bind: PropKey;
-	setValue: ( value: T | undefined ) => void;
-	value: T | undefined;
-};
-
-export type BoundPropProviderProps< T extends PropValue > = BoundPropContext< T > & {
-	children: React.ReactNode;
-};
-
-const BoundPropContext = createContext< BoundPropContext< PropValue > | null >( null );
-export const BoundPropProvider = ( { children, value, setValue, bind }: BoundPropProviderProps< PropValue > ) => {
-	return <BoundPropContext.Provider value={ { value, setValue, bind } }>{ children }</BoundPropContext.Provider>;
-};
-
-export function useBoundProp< T extends PropValue >(): BoundPropContext< T | undefined >;
-export function useBoundProp< T extends PropValue >( defaultValue: T ): BoundPropContext< T >;
-export function useBoundProp< T extends PropValue >( defaultValue?: T ) {
-	const boundPropContext = useContext< BoundPropContext< T > >( BoundPropContext as never );
-
-	if ( ! boundPropContext ) {
-		throw new Error( 'useBoundProp must be used within a BoundPropContext' );
-	}
-
-	return { ...boundPropContext, value: boundPropContext.value ?? defaultValue };
-}

package/src/controls/components/control-toggle-button-group.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { JSX } from 'react';
-import { StackProps, styled, ToggleButton, ToggleButtonGroup, Tooltip } from '@elementor/ui';
-
-export type ToggleButtonGroupItem< TValue > = {
-	value: TValue;
-	label: string;
-	icon: JSX.ElementType;
-	showTooltip?: boolean;
-};
-
-const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
-	${ ( { justify } ) => `justify-content: ${ justify };` }
-`;
-
-type ExclusiveValue< TValue > = TValue | null;
-type NonExclusiveValue< TValue > = TValue[];
-
-type Props< TValue > = {
-	justify?: StackProps[ 'justifyContent' ];
-	size?: 'tiny' | 'small' | 'medium' | 'large';
-	items: ToggleButtonGroupItem< TValue >[];
-} & (
-	| {
-			exclusive?: false;
-			value: NonExclusiveValue< TValue >;
-			onChange: ( value: NonExclusiveValue< TValue > ) => void;
-	  }
-	| {
-			exclusive: true;
-			value: ExclusiveValue< TValue >;
-			onChange: ( value: ExclusiveValue< TValue > ) => void;
-	  }
-);
-
-export const ControlToggleButtonGroup = < TValue, >( {
-	justify = 'end',
-	size = 'tiny',
-	value,
-	onChange,
-	items,
-	exclusive = false,
-}: Props< TValue > ) => {
-	const handleChange = (
-		_: React.MouseEvent< HTMLElement >,
-		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
-	) => {
-		onChange( newValue as never );
-	};
-
-	return (
-		<StyledToggleButtonGroup justify={ justify } value={ value } onChange={ handleChange } exclusive={ exclusive }>
-			{ items.map( ( { label: label, value: buttonValue, icon: Icon, showTooltip: showTooltip } ) =>
-				showTooltip ? (
-					<Tooltip title={ label } disableFocusListener={ true } placement="top" key={ buttonValue }>
-						<ToggleButton value={ buttonValue } aria-label={ label } size={ size }>
-							<Icon fontSize={ size } />
-						</ToggleButton>
-					</Tooltip>
-				) : (
-					<ToggleButton key={ buttonValue } value={ buttonValue } aria-label={ label } size={ size }>
-						<Icon fontSize={ size } />
-					</ToggleButton>
-				)
-			) }
-		</StyledToggleButtonGroup>
-	);
-};