@elementor/editor-editing-panel 0.14.2 → 0.16.0

package/src/dynamics/components/dynamic-selection.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { useState, Fragment } from 'react';
+import { useControl } from '../../controls/control-context';
+import { DynamicPropValue } from '../types';
+import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { SearchIcon, PhotoIcon } from '@elementor/icons';
+import {
+	Box,
+	Divider,
+	InputAdornment,
+	Link,
+	ListSubheader,
+	MenuItem,
+	MenuList,
+	Stack,
+	TextField,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { PropKey } from '../../types';
+
+type Option = {
+	label: string;
+	value: string;
+};
+
+type OptionEntry = [ string, Option[] ];
+
+const SIZE = 'tiny';
+
+export type DynamicSelectionProps = {
+	onSelect?: () => void;
+};
+
+export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
+	const [ searchValue, setSearchValue ] = useState( '' );
+
+	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
+	const { bind, value: dynamicValue, setValue } = useControl< DynamicPropValue >();
+
+	const options = useFilteredOptions( bind, searchValue );
+
+	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setSearchValue( event.target.value );
+	};
+
+	return (
+		<Stack>
+			<Box px={ 1.5 } pb={ 1 }>
+				<TextField
+					fullWidth
+					size={ SIZE }
+					value={ searchValue }
+					onChange={ handleSearch }
+					placeholder={ __( 'Search dynamic tag', 'elementor' ) }
+					InputProps={ {
+						startAdornment: (
+							<InputAdornment position="start">
+								<SearchIcon fontSize={ SIZE } />
+							</InputAdornment>
+						),
+					} }
+				/>
+			</Box>
+			<Divider />
+			<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+				{ options.length > 0 ? (
+					<MenuList role="listbox" tabIndex={ 0 }>
+						{ options.map( ( [ category, items ], index ) => (
+							<Fragment key={ index }>
+								<ListSubheader sx={ { typography: 'caption', color: 'text.tertiary' } }>
+									{ dynamicGroups?.[ category ]?.title || category }
+								</ListSubheader>
+								{ items.map( ( { value, label: tagLabel } ) => {
+									const isSelected = value === dynamicValue?.value?.name;
+
+									return (
+										<MenuItem
+											key={ value }
+											selected={ isSelected }
+											// eslint-disable-next-line jsx-a11y/no-autofocus
+											autoFocus={ isSelected }
+											sx={ { typography: 'caption' } }
+											onClick={ () => {
+												setValue( { $$type: 'dynamic', value: { name: value } } );
+												onSelect?.();
+											} }
+										>
+											{ tagLabel }
+										</MenuItem>
+									);
+								} ) }
+							</Fragment>
+						) ) }
+					</MenuList>
+				) : (
+					<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
+						<PhotoIcon fontSize="large" />
+						<Typography align="center" variant="caption" color="text.secondary">
+							{ __( 'Sorry, nothing matched', 'elementor' ) }
+							<br />
+							&ldquo;{ searchValue }&rdquo;.
+						</Typography>
+						<Typography align="center" variant="caption" color="text.secondary">
+							<Link
+								color="secondary"
+								variant="caption"
+								component="button"
+								onClick={ () => setSearchValue( '' ) }
+							>
+								{ __( 'Clear the filters', 'elementor' ) }
+							</Link>
+							&nbsp;
+							{ __( 'and try again.', 'elementor' ) }
+						</Typography>
+					</Stack>
+				) }
+			</Box>
+		</Stack>
+	);
+};
+
+const useFilteredOptions = ( bind: PropKey, searchValue: string ): OptionEntry[] => {
+	const dynamicTags = usePropDynamicTags( bind );
+
+	const options = dynamicTags.reduce< Map< string, Option[] > >( ( categories, { name, label, group } ) => {
+		const isVisible = label.toLowerCase().includes( searchValue.trim().toLowerCase() );
+
+		if ( ! isVisible ) {
+			return categories;
+		}
+
+		if ( ! categories.has( group ) ) {
+			categories.set( group, [] );
+		}
+
+		categories.get( group )?.push( { label, value: name } );
+
+		return categories;
+	}, new Map() );
+
+	return [ ...options ];
+};

package/src/dynamics/dynamic-control.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ControlContext, useControl } from '../controls/control-context';
+import { PropKey, PropValue } from '../types';
+import { useDynamicTag } from './hooks/use-dynamic-tag';
+import { DynamicPropValue } from './types';
+
+export type DynamicControlProps = React.PropsWithChildren< {
+	bind: PropKey;
+} >;
+
+export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
+	const { value, setValue, bind: propName } = useControl< DynamicPropValue >();
+	const { name = '', settings } = value?.value ?? {};
+
+	const dynamicTag = useDynamicTag( propName, name );
+
+	if ( ! dynamicTag ) {
+		throw new Error( `Dynamic tag ${ name } not found` );
+	}
+
+	const defaultValue = dynamicTag.props_schema[ bind ]?.type.default;
+	const dynamicValue = settings?.[ bind ] ?? defaultValue;
+
+	const setDynamicValue = ( newValue: PropValue ) => {
+		setValue( {
+			$$type: 'dynamic',
+			value: {
+				name,
+				settings: {
+					...settings,
+					[ bind ]: newValue,
+				},
+			},
+		} );
+	};
+
+	return (
+		<ControlContext.Provider value={ { setValue: setDynamicValue, value: dynamicValue, bind } }>
+			{ children }
+		</ControlContext.Provider>
+	);
+};

package/src/dynamics/hooks/use-dynamic-tag.ts

@@ -0,0 +1,10 @@
+import { usePropDynamicTags } from './use-prop-dynamic-tags';
+import { DynamicTag } from '../types';
+import { PropKey } from '../../types';
+import { useMemo } from 'react';
+
+export const useDynamicTag = ( propName: PropKey, tagName: string ): DynamicTag | null => {
+	const dynamicTags = usePropDynamicTags( propName );
+
+	return useMemo( () => dynamicTags.find( ( tag ) => tag.name === tagName ) ?? null, [ dynamicTags, tagName ] );
+};

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

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useElementContext } from '../../contexts/element-context';
+import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { PropKey } from '../../types';
+import { isDynamicType } from '../utils';
+
+export const usePropDynamicTags = ( propName: PropKey ) => {
+	let categories: string[] = [];
+
+	const { elementType } = useElementContext();
+
+	const propSchema = elementType.propsSchema?.[ propName ];
+
+	if ( propSchema ) {
+		const propDynamicType = propSchema.additional_types.find( isDynamicType );
+
+		categories = propDynamicType?.settings.categories || [];
+	}
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	return useMemo( () => getDynamicTagsByCategories( categories ), [ categories.join() ] );
+};
+
+const getDynamicTagsByCategories = ( categories: string[] ) => {
+	const dynamicTags = getAtomicDynamicTags();
+
+	if ( ! categories.length || ! dynamicTags?.tags ) {
+		return [];
+	}
+
+	const _categories = new Set( categories );
+
+	return Object.values( dynamicTags.tags ).filter( ( dynamicTag ) =>
+		dynamicTag.categories.some( ( category ) => _categories.has( category ) )
+	);
+};

package/src/dynamics/init.ts

@@ -0,0 +1,10 @@
+import { DynamicSelectionControl } from './components/dynamic-selection-control';
+import { replaceControl } from '../controls/control-replacement';
+import { isDynamicPropValue } from './utils';
+
+export const init = () => {
+	replaceControl( {
+		component: DynamicSelectionControl,
+		condition: ( { value } ) => isDynamicPropValue( value ),
+	} );
+};

package/src/dynamics/sync/get-atomic-dynamic-tags.ts

@@ -0,0 +1,14 @@
+import { getElementorConfig } from './get-elementor-config';
+
+export const getAtomicDynamicTags = () => {
+	const { atomicDynamicTags } = getElementorConfig();
+
+	if ( ! atomicDynamicTags ) {
+		return null;
+	}
+
+	return {
+		tags: atomicDynamicTags.tags,
+		groups: atomicDynamicTags.groups,
+	};
+};

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

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

package/src/dynamics/types.ts

@@ -0,0 +1,32 @@
+import { ControlItem, PropsSchema, TransformablePropValue } from '../types';
+
+export type ExtendedWindow = Window & {
+	elementor?: {
+		config?: {
+			atomicDynamicTags?: {
+				tags: DynamicTags;
+				groups: Record< DynamicTag[ 'group' ], { title: string } >;
+			};
+		};
+	};
+};
+
+export type DynamicTags = Record< DynamicTag[ 'name' ], DynamicTag >;
+
+export type DynamicTag = {
+	name: string;
+	label: string;
+	group: string;
+	categories: string[];
+	atomic_controls: ControlItem[];
+	props_schema: PropsSchema;
+};
+
+export type DynamicPropType = {
+	key: 'dynamic';
+	settings: {
+		categories: string[];
+	};
+};
+
+export type DynamicPropValue = TransformablePropValue< { name: string; settings?: Record< string, unknown > } >;

package/src/dynamics/utils.ts

@@ -0,0 +1,9 @@
+import { AdditionalPropType, PropValue } from '../types';
+import { DynamicPropType } from './types';
+import { isTransformable } from '../props/is-transformable';
+
+export const isDynamicType = ( prop: AdditionalPropType ): prop is DynamicPropType => prop.key === 'dynamic';
+
+export const isDynamicPropValue = ( prop: PropValue ) => {
+	return isTransformable( prop ) && prop.$$type === 'dynamic';
+};

package/src/hooks/use-element-type.ts

@@ -17,9 +17,14 @@ export default function useElementType( type?: string ) {
 				return null;
 			}
 
+			if ( ! elementType?.atomic_props_schema ) {
+				return null;
+			}
+
 			return {
 				key: type,
 				controls: elementType.atomic_controls,
+				propsSchema: elementType.atomic_props_schema,
 				title: elementType.title,
 			};
 		},

package/src/index.ts

@@ -1,3 +1,6 @@
+export { replaceControl } from './controls/control-replacement';
+export { useControl } from './controls/control-context';
+
 import init from './init';
 
 init();

package/src/init.ts

@@ -4,6 +4,7 @@ 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 { init as initDynamics } from './dynamics/init';
 
 export default function init() {
 	registerPanel( panel );
@@ -13,6 +14,9 @@ export default function init() {
 		id: 'editing-panel-hooks',
 		component: EditingPanelHooks,
 	} );
+
+	// TODO: Move it from here once we have dynamic package.
+	initDynamics();
 }
 
 const blockV1Panel = () => {

package/src/props/is-transformable.ts

@@ -0,0 +1,14 @@
+import { z } from '@elementor/schema';
+
+// TODO: Move this file content a shared package.
+
+export const transformableSchema = z.object( {
+	$$type: z.string(),
+	value: z.any(),
+} );
+
+export type TransformablePropValue = z.infer< typeof transformableSchema >;
+
+export const isTransformable = ( value: unknown ): value is TransformablePropValue => {
+	return transformableSchema.safeParse( value ).success;
+};

package/src/sync/types.ts

@@ -1,4 +1,4 @@
-import { ControlItem, PropValue } from '../types';
+import { ControlItem, PropsSchema, PropValue } from '../types';
 import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-style';
 
 export type ExtendedWindow = Window & {
@@ -10,6 +10,7 @@ export type ExtendedWindow = Window & {
 			string,
 			{
 				atomic_controls?: ControlItem[];
+				atomic_props_schema?: PropsSchema;
 				controls: object;
 				title: string;
 			}

package/src/sync/update-style.ts

@@ -8,10 +8,10 @@ export type UpdateStyleProps = {
 	styleDefID?: StyleDefinitionID;
 	meta: StyleVariant[ 'meta' ];
 	props: Props;
-	bind?: PropKey;
+	bind: PropKey;
 };
 
-export const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {
+export const updateStyle = ( { elementID, styleDefID, meta, props, bind }: UpdateStyleProps ) => {
 	const container = getContainer( elementID );
 
 	runCommand( 'document/atomic-widgets/styles', {

package/src/types.ts

@@ -8,6 +8,7 @@ export type Element = {
 export type ElementType = {
 	key: string;
 	controls: ControlItem[];
+	propsSchema: PropsSchema;
 	title: string;
 };
 
@@ -33,6 +34,22 @@ export type Control = {
 
 export type ControlItem = ControlsSection | Control;
 
+export type AdditionalPropType = {
+	key: string;
+	settings: Record< string, unknown >;
+};
+
+export type PropDefinition = {
+	type: {
+		key: string;
+		default: PropValue;
+		settings: Record< string, unknown >;
+	};
+	additional_types: Array< AdditionalPropType >;
+};
+
+export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropDefinition >;
+
 type MaybeArray< T > = T | T[];
 
 export type TransformablePropValue< T = unknown > = {