@elementor/editor-editing-panel 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,17 +40,18 @@
   },
   "dependencies": {
     "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.4.1",
-    "@elementor/editor-elements": "0.3.5",
+    "@elementor/editor-controls": "0.6.0",
+    "@elementor/editor-elements": "0.4.1",
     "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.5.1",
+    "@elementor/editor-props": "0.7.0",
     "@elementor/editor-panels": "0.10.2",
     "@elementor/editor-responsive": "0.12.4",
-    "@elementor/editor-styles": "0.4.0",
-    "@elementor/editor-styles-repository": "0.3.2",
+    "@elementor/editor-styles": "0.5.1",
+    "@elementor/editor-styles-repository": "0.4.0",
     "@elementor/editor-v1-adapters": "0.8.5",
     "@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

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { useId, useRef } from 'react';
-import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { getElementSetting, updateSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
-import { ELEMENTS_STYLES_PROVIDER_KEY, useAllStylesByProvider } from '@elementor/editor-styles-repository';
+import {
+	ELEMENTS_STYLES_PROVIDER_KEY,
+	stylesRepository,
+	type UpdateActionPayload,
+	useAllStylesByProvider,
+	useCreateActionsByProvider,
+} from '@elementor/editor-styles-repository';
 import { DotsVerticalIcon } from '@elementor/icons';
 import {
 	type AutocompleteRenderGetTagProps,
@@ -23,18 +29,24 @@ 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 { MultiCombobox, type Option } from './multi-combobox';
+import { EditableField, EditableFieldProvider, useEditableField } from './editable-field';
+import { type Action, MultiCombobox, type Option } from './multi-combobox';
 
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 8;
 
+type StyleDefOption = Option & {
+	color: 'primary' | 'global';
+	provider: string;
+};
+
 const EMPTY_OPTION = {
 	label: __( 'local', 'elementor' ),
 	value: '',
 	fixed: true,
 	color: 'primary',
 	provider: ELEMENTS_STYLES_PROVIDER_KEY,
-} satisfies Option;
+} satisfies StyleDefOption;
 
 /**
  * Applied - Classes applied to an element.
@@ -43,10 +55,12 @@ const EMPTY_OPTION = {
 
 export function CssClassSelector() {
 	const options = useOptions();
-	const [ appliedIds, setAppliedIds ] = useAppliedClassesIds();
 
+	const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
 	const { id: activeId, setId: setActiveId } = useStyle();
 
+	const actions = useCreateActions( { pushAppliedId, setActiveId } );
+
 	const handleApply = useHandleApply( appliedIds, setAppliedIds );
 	const handleActivate = ( { value }: Option ) => setActiveId( value );
 
@@ -65,23 +79,42 @@ export function CssClassSelector() {
 				selected={ applied }
 				onSelect={ handleApply }
 				limitTags={ TAGS_LIMIT }
-				optionsLabel={ __( 'Global CSS Classes', 'elementor' ) }
+				actions={ actions }
+				getLimitTagsText={ ( more ) => (
+					<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
+				) }
 				renderTags={ ( values, getTagProps ) =>
 					values.map( ( value, index ) => {
 						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>
 						);
 					} )
 				}
@@ -100,70 +133,174 @@ 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="small"
-					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="small"
-					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();
 
-	return useAllStylesByProvider( { elementId: element.id } ).flatMap< Option >( ( [ providerKey, styleDefs ] ) => {
-		const isElements = providerKey === ELEMENTS_STYLES_PROVIDER_KEY;
-
-		// Add empty local option for elements, as fallback.
-		if ( isElements && styleDefs.length === 0 ) {
-			return [ EMPTY_OPTION ];
+	return useAllStylesByProvider( { elementId: element.id } ).flatMap< StyleDefOption >(
+		( [ provider, styleDefs ] ) => {
+			const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY;
+
+			// Add empty local option for elements, as fallback.
+			if ( isElements && styleDefs.length === 0 ) {
+				return [ EMPTY_OPTION ];
+			}
+
+			return styleDefs.map( ( styleDef ) => {
+				return {
+					label: styleDef.label,
+					value: styleDef.id,
+					fixed: isElements,
+					color: isElements ? 'primary' : 'global',
+					provider: provider.key,
+					group: provider.labels?.plural,
+				};
+			} );
 		}
+	);
+}
 
-		return styleDefs.map( ( styleDef ) => {
-			return {
-				label: styleDef.label,
-				value: styleDef.id,
-				fixed: isElements,
-				color: isElements ? 'primary' : 'global',
-				provider: providerKey,
-			};
-		} );
+function useCreateActions( {
+	pushAppliedId,
+	setActiveId,
+}: {
+	pushAppliedId: ( id: StyleDefinitionID ) => void;
+	setActiveId: ( id: StyleDefinitionID ) => void;
+} ) {
+	return useCreateActionsByProvider().map( ( [ provider, create ] ): Action< StyleDefOption > => {
+		return {
+			// translators: %s is the label of the new class.
+			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
+			apply: async ( value ) => {
+				const created = await create( { label: value } );
+
+				if ( ! created ) {
+					return;
+				}
+
+				pushAppliedId( created.id );
+				setActiveId( created.id );
+			},
+			condition: ( options, inputValue ) => {
+				const isUniqueLabel = ! options.some(
+					( option ) => option.label.toLowerCase() === inputValue.toLowerCase()
+				);
+
+				return !! inputValue && isUniqueLabel;
+			},
+			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
+			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
+		};
 	} );
 }
 
-function useAppliedOptions( options: Option[], appliedIds: StyleDefinitionID[] ) {
+function useAppliedOptions( options: StyleDefOption[], appliedIds: StyleDefinitionID[] ) {
 	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
 
 	const hasElementsProviderStyleApplied = applied.some(
@@ -192,13 +329,23 @@ function useAppliedClassesIds() {
 		} );
 	};
 
-	return [ value, setValue ] as const;
+	const pushValue = ( id: StyleDefinitionID ) => {
+		const ids = getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+
+		setValue( [ ...ids, id ] );
+	};
+
+	return {
+		value,
+		setValue,
+		pushValue,
+	};
 }
 
 function useHandleApply( appliedIds: StyleDefinitionID[], setAppliedIds: ( ids: StyleDefinitionID[] ) => void ) {
 	const { id: activeId, setId: setActiveId } = useStyle();
 
-	return ( selectedOptions: Option[] ) => {
+	return ( selectedOptions: StyleDefOption[] ) => {
 		const selectedValues = selectedOptions
 			.map( ( { value } ) => value )
 			.filter( ( value ) => value !== EMPTY_OPTION.value );

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>
 	);
 };