@elementor/editor-editing-panel 1.7.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.5.0",
-    "@elementor/editor-elements": "0.4.0",
+    "@elementor/editor": "0.17.3",
+    "@elementor/editor-controls": "0.6.1",
+    "@elementor/editor-elements": "0.4.2",
     "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.6.0",
-    "@elementor/editor-panels": "0.10.2",
-    "@elementor/editor-responsive": "0.12.4",
-    "@elementor/editor-styles": "0.5.0",
-    "@elementor/editor-styles-repository": "0.3.3",
-    "@elementor/editor-v1-adapters": "0.8.5",
+    "@elementor/editor-props": "0.7.1",
+    "@elementor/editor-panels": "0.10.3",
+    "@elementor/editor-responsive": "0.12.5",
+    "@elementor/editor-styles": "0.5.2",
+    "@elementor/editor-styles-repository": "0.4.1",
+    "@elementor/editor-v1-adapters": "0.9.0",
     "@elementor/icons": "^1.20.0",
     "@elementor/schema": "0.1.2",
+    "@elementor/session": "0.1.0",
     "@elementor/ui": "^1.22.0",
     "@elementor/utils": "0.3.0",
     "@wordpress/i18n": "^5.13.0"

package/src/components/add-or-remove-content.tsx

@@ -25,11 +25,11 @@ export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children
 			>
 				<ControlLabel>{ label }</ControlLabel>
 				{ isAdded ? (
-					<IconButton size={ SIZE } onClick={ onRemove }>
+					<IconButton size={ SIZE } onClick={ onRemove } aria-label="Remove">
 						<MinusIcon fontSize={ SIZE } />
 					</IconButton>
 				) : (
-					<IconButton size={ SIZE } onClick={ onAdd }>
+					<IconButton size={ SIZE } onClick={ onAdd } aria-label="Add">
 						<PlusIcon fontSize={ SIZE } />
 					</IconButton>
 				) }

package/src/components/css-class-selector.tsx

@@ -5,6 +5,8 @@ import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-pr
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import {
 	ELEMENTS_STYLES_PROVIDER_KEY,
+	stylesRepository,
+	type UpdateActionPayload,
 	useAllStylesByProvider,
 	useCreateActionsByProvider,
 } from '@elementor/editor-styles-repository';
@@ -27,6 +29,7 @@ import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
 import { ConditionalTooltipWrapper } from './conditional-tooltip-wrapper';
 import { CssClassMenu } from './css-class-menu';
+import { EditableField, EditableFieldProvider, useEditableField } from './editable-field';
 import { type Action, MultiCombobox, type Option } from './multi-combobox';
 
 const ID = 'elementor-css-class-selector';
@@ -85,17 +88,33 @@ export function CssClassSelector() {
 						const chipProps = getTagProps( { index } );
 						const isActive = value.value === active?.value;
 
+						const renameLabel = ( newLabel: string ) => {
+							return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
+						};
+
 						return (
-							<CssClassItem
+							<EditableFieldProvider
 								key={ chipProps.key }
-								label={ value.label }
-								id={ value.value }
-								isActive={ isActive }
-								isGlobal={ value.color === 'global' }
-								color={ isActive && value.color ? value.color : 'default' }
-								chipProps={ chipProps }
-								onClickActive={ () => handleActivate( value ) }
-							/>
+								value={ value.label }
+								onSubmit={ renameLabel }
+								editable={ value.provider !== ELEMENTS_STYLES_PROVIDER_KEY }
+								validation={ ( newLabel ) =>
+									renameValidation(
+										newLabel,
+										options.filter( ( option ) => option.value !== value.value )
+									)
+								}
+							>
+								<CssClassItem
+									label={ value.label }
+									id={ value.value }
+									isActive={ isActive }
+									isGlobal={ value.color === 'global' }
+									color={ isActive && value.color ? value.color : 'default' }
+									chipProps={ chipProps }
+									onClickActive={ () => handleActivate( value ) }
+								/>
+							</EditableFieldProvider>
 						);
 					} )
 				}
@@ -114,46 +133,113 @@ type CssClassItemProps = {
 	onClickActive: ( id: string ) => void;
 };
 
-function CssClassItem( { id, label, isActive, isGlobal, color, chipProps, onClickActive }: CssClassItemProps ) {
+const CHIP_SIZE = 'tiny';
+
+export function CssClassItem( {
+	id,
+	label,
+	isActive,
+	isGlobal,
+	color: colorProp,
+	chipProps,
+	onClickActive,
+}: CssClassItemProps ) {
 	const { meta } = useStyle();
 	// TODO - resolve the useId issue with invalid characters upon CSS selectors (EDS-1089)
 	const popupId = useId().replace( /:/g, '_' );
 	const popupState = usePopupState( { variant: 'popover', popupId } );
 	const chipRef = useRef< Element >( null );
 	const { onDelete, ...chipGroupProps } = chipProps;
+	const { isEditing, openEditMode, error, submitting } = useEditableField();
+
+	const color = error ? 'error' : colorProp;
 
 	return (
 		<CssClassItemProvider styleId={ id } isActive={ isActive } isGlobal={ isGlobal }>
 			<UnstableChipGroup ref={ chipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
 				<Chip
-					key={ chipProps.key }
-					size="tiny"
-					label={ <ConditionalTooltipWrapper maxWidth="10ch" title={ label } /> }
+					disabled={ submitting }
+					size={ CHIP_SIZE }
+					label={
+						<EditableField
+							onDoubleClick={ () => {
+								if ( ! isActive ) {
+									openEditMode();
+								}
+							} }
+							onClick={ () => {
+								if ( isActive ) {
+									openEditMode();
+								}
+							} }
+						>
+							<ConditionalTooltipWrapper maxWidth="10ch" title={ label } />
+						</EditableField>
+					}
 					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
 					color={ color }
 					onClick={ () => onClickActive( id ) }
 					aria-pressed={ isActive }
+					sx={ {
+						'&.Mui-focusVisible': {
+							boxShadow: 'none !important',
+						},
+					} }
 				/>
-				<Chip
-					key={ `${ chipProps.key }-menu` }
-					size="tiny"
-					label={
-						<Stack direction="row" gap={ 0.5 } alignItems="center">
-							{ isActive && meta.state && <Typography variant="inherit">{ meta.state }</Typography> }
-							<DotsVerticalIcon fontSize="inherit" />
-						</Stack>
-					}
-					variant="filled"
-					color={ color }
-					{ ...bindTrigger( popupState ) }
-					aria-label={ __( 'Open CSS Class Menu', 'elementor' ) }
-				/>
+				{ ! isEditing && (
+					<Chip
+						disabled={ submitting }
+						size={ CHIP_SIZE }
+						label={
+							<Stack direction="row" gap={ 0.5 } alignItems="center">
+								{ isActive && meta.state && <Typography variant="inherit">{ meta.state }</Typography> }
+								<DotsVerticalIcon fontSize="inherit" />
+							</Stack>
+						}
+						variant="filled"
+						color={ color }
+						{ ...bindTrigger( popupState ) }
+						aria-label={ __( 'Open CSS Class Menu', 'elementor' ) }
+					/>
+				) }
 			</UnstableChipGroup>
 			<CssClassMenu popupState={ popupState } containerRef={ chipRef } />
 		</CssClassItemProvider>
 	);
 }
 
+const updateClassByProvider = ( provider: string, data: UpdateActionPayload ) => {
+	const providerInstance = stylesRepository.getProviderByKey( provider );
+
+	if ( ! providerInstance ) {
+		return;
+	}
+
+	return providerInstance.actions.update?.( data );
+};
+
+const VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
+
+const renameValidation = ( newLabel: string, options: Option[] ) => {
+	if ( isNameExist( newLabel, options ) ) {
+		return __( 'Existing name', 'elementor' );
+	}
+
+	if ( isCharactersNotSupported( newLabel ) ) {
+		return __( 'Format is not valid', 'elementor' );
+	}
+};
+
+const isNameExist = ( newLabel: string, options: Option[] ) => {
+	if ( ! options?.length ) {
+		return false;
+	}
+
+	return options.some( ( option ) => option.label.toLowerCase() === newLabel.toLowerCase() );
+};
+
+const isCharactersNotSupported = ( newLabel: string ) => ! VALID_SELECTOR_REGEX.test( newLabel );
+
 function useOptions() {
 	const { element } = useElement();
 

package/src/components/editable-field.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { type ComponentProps, createContext, useContext, useEffect, useRef, useState } from 'react';
+import { Tooltip } from '@elementor/ui';
+
+type EditableFieldContext = {
+	isEditing: boolean;
+	openEditMode: () => void;
+	closeEditMode: () => void;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	value: string;
+	error?: string | null;
+	submit: ( value: string ) => Promise< void >;
+	editable?: boolean;
+	submitting: boolean;
+};
+
+const Context = createContext< EditableFieldContext | null >( null );
+
+export type EditableFieldProviderProps = React.PropsWithChildren< {
+	value: string;
+	onSubmit: ( value: string ) => unknown | Promise< unknown >;
+	validation?: ( value: string ) => string | undefined | null;
+	editable?: boolean;
+} >;
+
+export const EditableFieldProvider = ( {
+	children,
+	value,
+	onSubmit,
+	validation,
+	editable,
+}: EditableFieldProviderProps ) => {
+	const [ isEditing, setIsEditing ] = useState( false );
+	const [ submitting, setSubmitting ] = useState( false );
+	const [ error, setError ] = useState< string | null | undefined >( null );
+
+	const openEditMode = () => {
+		setIsEditing( true );
+	};
+
+	const closeEditMode = () => {
+		setError( null );
+		setIsEditing( false );
+	};
+
+	const submit = async ( newValue: string ) => {
+		if ( ! error ) {
+			setSubmitting( true );
+
+			try {
+				await onSubmit( newValue );
+			} finally {
+				setSubmitting( false );
+			}
+		}
+
+		closeEditMode();
+	};
+
+	const onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {
+		const { innerText: newValue } = event.target;
+
+		if ( validation ) {
+			setError( validation( newValue ) );
+		}
+	};
+
+	return (
+		<Context.Provider
+			value={ {
+				isEditing,
+				openEditMode,
+				closeEditMode,
+				onChange,
+				value,
+				error,
+				submit,
+				editable,
+				submitting,
+			} }
+		>
+			{ children }
+		</Context.Provider>
+	);
+};
+
+type EditableFieldProps = ComponentProps< 'div' >;
+
+export const EditableField = ( { children, ...props }: EditableFieldProps ) => {
+	const ref = useRef< HTMLElement >( null );
+	const { isEditing, closeEditMode, value, onChange, error, submit, editable } = useEditableField();
+
+	useEffect( () => {
+		if ( isEditing ) {
+			ref.current?.focus();
+			selectAll();
+		}
+	}, [ isEditing ] );
+
+	const handleKeyDown = ( event: React.KeyboardEvent ) => {
+		event.stopPropagation();
+
+		if ( [ 'Escape' ].includes( event.key ) ) {
+			return closeEditMode();
+		}
+
+		if ( [ 'Enter' ].includes( event.key ) ) {
+			event.preventDefault();
+			return submit( ( event.target as HTMLElement ).innerText );
+		}
+	};
+
+	const selectAll = () => {
+		const selection = getSelection();
+
+		if ( ! selection || ! ref.current ) {
+			return;
+		}
+
+		const range = document.createRange();
+		range.selectNodeContents( ref.current );
+
+		selection.removeAllRanges();
+		selection.addRange( range );
+	};
+
+	if ( ! editable ) {
+		return children;
+	}
+
+	return (
+		<Tooltip open={ !! error } title={ error } placement="top">
+			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ }
+			<div onKeyDown={ handleKeyDown } { ...props }>
+				<span
+					ref={ ref }
+					role="textbox"
+					onInput={ onChange }
+					contentEditable={ isEditing }
+					suppressContentEditableWarning
+					onBlur={ closeEditMode }
+				>
+					{ isEditing ? value : children }
+				</span>
+			</div>
+		</Tooltip>
+	);
+};
+
+export const useEditableField = () => {
+	const contextValue = useContext( Context );
+
+	if ( ! contextValue ) {
+		throw new Error( 'useEditableField must be used within a EditableFieldProvider' );
+	}
+
+	return contextValue;
+};

package/src/components/editing-panel.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { SessionStorageProvider } from '@elementor/session';
 import { ErrorBoundary } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -27,20 +28,22 @@ export const EditingPanel = () => {
 
 	return (
 		<ErrorBoundary fallback={ <EditorPanelErrorFallback /> }>
-			<Panel>
-				<PanelHeader>
-					<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
-				</PanelHeader>
-				<PanelBody>
-					<ControlActionsProvider items={ menuItems }>
-						<ControlReplacementProvider { ...controlReplacement }>
-							<ElementProvider element={ element } elementType={ elementType }>
-								<EditingPanelTabs />
-							</ElementProvider>
-						</ControlReplacementProvider>
-					</ControlActionsProvider>
-				</PanelBody>
-			</Panel>
+			<SessionStorageProvider prefix={ 'elementor' }>
+				<Panel>
+					<PanelHeader>
+						<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
+					</PanelHeader>
+					<PanelBody>
+						<ControlActionsProvider items={ menuItems }>
+							<ControlReplacementProvider { ...controlReplacement }>
+								<ElementProvider element={ element } elementType={ elementType }>
+									<EditingPanelTabs />
+								</ElementProvider>
+							</ControlReplacementProvider>
+						</ControlActionsProvider>
+					</PanelBody>
+				</Panel>
+			</SessionStorageProvider>
 		</ErrorBoundary>
 	);
 };

package/src/components/settings-tab.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
+import { SessionStorageProvider } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
@@ -11,33 +12,35 @@ import { Section } from './section';
 import { SectionsList } from './sections-list';
 
 export const SettingsTab = () => {
-	const { elementType } = useElement();
+	const { elementType, element } = useElement();
 
 	return (
-		<SectionsList>
-			{ elementType.controls.map( ( { type, value }, index ) => {
-				if ( type === 'control' ) {
-					return <Control key={ value.bind } control={ value } />;
-				}
-
-				if ( type === 'section' ) {
-					return (
-						<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
-							{ value.items?.map( ( item ) => {
-								if ( item.type === 'control' ) {
-									return <Control key={ item.value.bind } control={ item.value } />;
-								}
-
-								// TODO: Handle 2nd level sections
-								return null;
-							} ) }
-						</Section>
-					);
-				}
-
-				return null;
-			} ) }
-		</SectionsList>
+		<SessionStorageProvider prefix={ element.id }>
+			<SectionsList>
+				{ elementType.controls.map( ( { type, value }, index ) => {
+					if ( type === 'control' ) {
+						return <Control key={ value.bind } control={ value } />;
+					}
+
+					if ( type === 'section' ) {
+						return (
+							<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
+								{ value.items?.map( ( item ) => {
+									if ( item.type === 'control' ) {
+										return <Control key={ item.value.bind } control={ item.value } />;
+									}
+
+									// TODO: Handle 2nd level sections
+									return null;
+								} ) }
+							</Section>
+						);
+					}
+
+					return null;
+				} ) }
+			</SectionsList>
+		</SessionStorageProvider>
 	);
 };
 

package/src/components/style-sections/border-section/border-field.tsx

@@ -1,33 +1,34 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 
-import { useStylesField } from '../../../hooks/use-styles-field';
+import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
 import { BorderColorField } from './border-color-field';
 import { BorderStyleField } from './border-style-field';
 import { BorderWidthField } from './border-width-field';
 
-const initialBorderWidth = { $$type: 'size', value: { size: 1, unit: 'px' } };
-const initialBorderColor = { $$type: 'color', value: '#000000' };
-const initialBorderStyle = 'solid';
+const initialBorder = {
+	'border-width': { $$type: 'size', value: { size: 1, unit: 'px' } },
+	'border-color': { $$type: 'color', value: '#000000' },
+	'border-style': { $$type: 'string', value: 'solid' },
+};
 
 export const BorderField = () => {
-	const [ borderWidth, setBorderWidth ] = useStylesField( 'border-width' );
-	const [ borderColor, setBorderColor ] = useStylesField( 'border-color' );
-	const [ borderStyle, setBorderStyle ] = useStylesField( 'border-style' );
+	const [ border, setBorder ] = useStylesFields( Object.keys( initialBorder ) );
 
 	const addBorder = () => {
-		setBorderWidth( initialBorderWidth );
-		setBorderColor( initialBorderColor );
-		setBorderStyle( initialBorderStyle );
+		setBorder( initialBorder );
 	};
+
 	const removeBorder = () => {
-		setBorderWidth( null );
-		setBorderColor( null );
-		setBorderStyle( null );
+		setBorder( {
+			'border-width': null,
+			'border-color': null,
+			'border-style': null,
+		} );
 	};
 
-	const hasBorder = Boolean( borderWidth || borderColor || borderStyle );
+	const hasBorder = Object.values( border ?? {} ).some( Boolean );
 
 	return (
 		<AddOrRemoveContent

package/src/components/style-tab.tsx

@@ -4,6 +4,7 @@ import { useElementSetting, useElementStyles } from '@elementor/editor-elements'
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleState } from '@elementor/editor-styles';
+import { SessionStorageProvider } from '@elementor/session';
 import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -41,34 +42,36 @@ export const StyleTab = () => {
 				} }
 				setMetaState={ setActiveStyleState }
 			>
-				<CssClassSelector />
-				<Divider />
-				<SectionsList>
-					<Section title={ __( 'Layout', 'elementor' ) }>
-						<LayoutSection />
-					</Section>
-					<Section title={ __( 'Spacing', 'elementor' ) }>
-						<SpacingSection />
-					</Section>
-					<Section title={ __( 'Size', 'elementor' ) }>
-						<SizeSection />
-					</Section>
-					<Section title={ __( 'Position', 'elementor' ) }>
-						<PositionSection />
-					</Section>
-					<Section title={ __( 'Typography', 'elementor' ) }>
-						<TypographySection />
-					</Section>
-					<Section title={ __( 'Background', 'elementor' ) }>
-						<BackgroundSection />
-					</Section>
-					<Section title={ __( 'Border', 'elementor' ) }>
-						<BorderSection />
-					</Section>
-					<Section title={ __( 'Effects', 'elementor' ) }>
-						<EffectsSection />
-					</Section>
-				</SectionsList>
+				<SessionStorageProvider prefix={ activeStyleDefId ?? '' }>
+					<CssClassSelector />
+					<Divider />
+					<SectionsList>
+						<Section title={ __( 'Layout', 'elementor' ) }>
+							<LayoutSection />
+						</Section>
+						<Section title={ __( 'Spacing', 'elementor' ) }>
+							<SpacingSection />
+						</Section>
+						<Section title={ __( 'Size', 'elementor' ) }>
+							<SizeSection />
+						</Section>
+						<Section title={ __( 'Position', 'elementor' ) }>
+							<PositionSection />
+						</Section>
+						<Section title={ __( 'Typography', 'elementor' ) }>
+							<TypographySection />
+						</Section>
+						<Section title={ __( 'Background', 'elementor' ) }>
+							<BackgroundSection />
+						</Section>
+						<Section title={ __( 'Border', 'elementor' ) }>
+							<BorderSection />
+						</Section>
+						<Section title={ __( 'Effects', 'elementor' ) }>
+							<EffectsSection />
+						</Section>
+					</SectionsList>
+				</SessionStorageProvider>
 			</StyleProvider>
 		</ClassesPropProvider>
 	);

package/src/css-classes.ts

@@ -1,6 +1,8 @@
 import { type StyleState } from '@elementor/editor-styles';
 
-import { registerStateMenuItem } from './components/css-class-menu';
+import { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
+import { useCssClassItem } from './contexts/css-class-item-context';
+import { useUnapplyClass } from './hooks/use-unapply-class';
 
 const STATES: NonNullable< StyleState >[] = [ 'hover', 'focus', 'active' ];
 
@@ -28,10 +30,16 @@ function registerStateItems() {
 }
 
 function registerGlobalClassItems() {
-	/**
-	 * TODO - register the relevant global classes here
-	 * change the import statement from 'css-class-menu' to -
-	 * import { registerGlobalClassMenuItem, registerStateMenuItem } from './components/css-class-menu';
-	 * and use registerGlobalClassMenuItem
-	 */
+	registerGlobalClassMenuItem( {
+		id: 'unapply-class',
+		useProps: () => {
+			const { styleId: currentClass } = useCssClassItem();
+			const unapplyClass = useUnapplyClass( currentClass );
+
+			return {
+				text: 'Remove',
+				onClick: unapplyClass,
+			};
+		},
+	} );
 }