@elementor/editor-editing-panel 1.9.0 → 1.11.0

package/src/components/conditional-tooltip-wrapper.tsx

@@ -1,58 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import * as React from 'react';
-import { Box, Tooltip } from '@elementor/ui';
-
-type ConditionalTooltipWrapperProps = {
-	maxWidth: React.CSSProperties[ 'maxWidth' ];
-	title: string;
-};
-
-export const ConditionalTooltipWrapper = ( { maxWidth, title }: ConditionalTooltipWrapperProps ) => {
-	const elRef = useRef< HTMLElement >( null );
-	const [ isOverflown, setIsOverflown ] = useState( false );
-
-	useEffect( () => {
-		const onResize = () => {
-			const element = elRef.current;
-
-			if ( element ) {
-				setIsOverflown( element.scrollWidth > element.clientWidth );
-			}
-		};
-
-		onResize();
-
-		window.addEventListener( 'resize', onResize );
-
-		return () => {
-			window.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
-	if ( isOverflown ) {
-		return (
-			<Tooltip title={ title } placement="top">
-				<Content maxWidth={ maxWidth } ref={ elRef }>
-					{ title }
-				</Content>
-			</Tooltip>
-		);
-	}
-
-	return (
-		<Content maxWidth={ maxWidth } ref={ elRef }>
-			{ title }
-		</Content>
-	);
-};
-
-type ContentProps = React.PropsWithChildren< Omit< ConditionalTooltipWrapperProps, 'title' > >;
-
-const Content = React.forwardRef( ( { maxWidth, ...tooltipProps }: ContentProps, ref ) => (
-	<Box
-		ref={ ref }
-		position="relative"
-		sx={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }
-		{ ...tooltipProps }
-	/>
-) );

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

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import { type RefObject } from 'react';
-import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { CheckIcon } from '@elementor/icons';
-import { createMenu } from '@elementor/menus';
-import {
-	bindMenu,
-	Box,
-	ListItemIcon,
-	ListItemText,
-	ListSubheader,
-	Menu,
-	MenuItem,
-	type PopupState,
-	styled,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useCssClassItem } from '../contexts/css-class-item-context';
-import { useStyle } from '../contexts/style-context';
-
-export const { useMenuItems: useStateMenuItems, registerStateMenuItem } = createMenu( {
-	components: {
-		StateMenuItem,
-	},
-} );
-
-export const { useMenuItems: useGlobalClassMenuItems, registerGlobalClassMenuItem } = createMenu( {
-	components: {
-		GlobalClassMenuItem,
-	},
-} );
-
-export function CssClassMenu( {
-	popupState,
-	containerRef,
-}: {
-	popupState: PopupState;
-	containerRef: RefObject< Element >;
-} ) {
-	const { isGlobal } = useCssClassItem();
-	const { default: globalClassMenuItems } = useGlobalClassMenuItems();
-	const { default: stateMenuItems } = useStateMenuItems();
-
-	return (
-		<Menu
-			MenuListProps={ { dense: true } }
-			{ ...bindMenu( popupState ) }
-			anchorOrigin={ {
-				vertical: 'top',
-				horizontal: 'right',
-			} }
-			anchorEl={ containerRef.current }
-		>
-			{ isGlobal && (
-				<GlobalClassMenuSection>
-					{ globalClassMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
-						<MenuItemComponent key={ id } />
-					) ) }
-				</GlobalClassMenuSection>
-			) }
-			<ListSubheader>{ __( 'Add a pseudo selector', 'elementor' ) }</ListSubheader>
-			{ stateMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
-				<MenuItemComponent key={ id } />
-			) ) }
-		</Menu>
-	);
-}
-
-type StateMenuItemProps = {
-	state: StyleDefinitionState;
-	disabled?: boolean;
-};
-
-export function StateMenuItem( { state, disabled }: StateMenuItemProps ) {
-	const { isActive, styleId } = useCssClassItem();
-	const { setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
-	const { state: activeState } = meta;
-
-	const isSelected = state === activeState && isActive;
-
-	return (
-		<StyledMenuItem
-			selected={ state === activeState && isActive }
-			disabled={ disabled }
-			onClick={ () => {
-				if ( ! isActive ) {
-					setActiveId( styleId );
-				}
-
-				setActiveMetaState( state );
-			} }
-		>
-			{ isSelected && (
-				<ListItemIcon>
-					<CheckIcon />
-				</ListItemIcon>
-			) }
-			<ListItemText primary={ state ? `:${ state }` : 'Normal' } />
-		</StyledMenuItem>
-	);
-}
-
-type GlobalClassMenuItemProps = {
-	text: string;
-	onClick: () => void;
-};
-
-export function GlobalClassMenuItem( { text, onClick }: GlobalClassMenuItemProps ) {
-	return (
-		<StyledMenuItem onClick={ onClick }>
-			<ListItemText primary={ text } />
-		</StyledMenuItem>
-	);
-}
-
-const GlobalClassMenuSection = styled( Box )( ( { theme } ) => ( {
-	borderBottom: `1px solid ${ theme?.palette.divider }`,
-} ) );
-
-const StyledMenuItem = styled( MenuItem )( {
-	'&:hover': {
-		color: 'text.primary', // Overriding global CSS from the editor.
-	},
-} );

package/src/components/editable-field.tsx

@@ -1,166 +0,0 @@
-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, onClick, ...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 handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {
-		if ( isEditing ) {
-			event.stopPropagation();
-		}
-
-		onClick?.( event );
-	};
-
-	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 } onClick={ handleClick } { ...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/contexts/css-class-item-context.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { createContext, type PropsWithChildren, useContext } from 'react';
-
-type ClassItemContextType = {
-	styleId: string;
-	isGlobal: boolean;
-	isActive: boolean;
-};
-const ClassItemContext = createContext< ClassItemContextType >( {
-	styleId: '',
-	isGlobal: false,
-	isActive: false,
-} );
-
-type ClassItemProviderProps = PropsWithChildren< ClassItemContextType >;
-
-export function CssClassItemProvider( { styleId, isGlobal, isActive, children }: ClassItemProviderProps ) {
-	return (
-		<ClassItemContext.Provider value={ { styleId, isGlobal, isActive } }>{ children }</ClassItemContext.Provider>
-	);
-}
-
-export function useCssClassItem() {
-	const context = useContext( ClassItemContext );
-
-	if ( ! context ) {
-		throw new Error( 'useCssClassItem must be used within a CssClassItemProvider' );
-	}
-
-	return context;
-}

package/src/css-classes.ts

@@ -1,45 +0,0 @@
-import { type StyleDefinitionState } from '@elementor/editor-styles';
-
-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< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
-
-export function initCssClasses() {
-	registerStateItems();
-	registerGlobalClassItems();
-}
-
-function registerStateItems() {
-	registerStateMenuItem( {
-		id: 'normal',
-		props: {
-			state: null,
-		},
-	} );
-
-	STATES.forEach( ( state ) => {
-		registerStateMenuItem( {
-			id: state,
-			props: {
-				state,
-			},
-		} );
-	} );
-}
-
-function registerGlobalClassItems() {
-	registerGlobalClassMenuItem( {
-		id: 'unapply-class',
-		useProps: () => {
-			const { styleId: currentClass } = useCssClassItem();
-			const unapplyClass = useUnapplyClass( currentClass );
-
-			return {
-				text: 'Remove',
-				onClick: unapplyClass,
-			};
-		},
-	} );
-}

package/src/hooks/use-session-storage.ts

@@ -1,46 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from '@elementor/utils';
-
-export const useSessionStorage = < T >( key: string ) => {
-	const prefixedKey = `elementor/${ key }`;
-
-	const [ value, setValue ] = useState< T | null >();
-
-	useEffect( () => {
-		return subscribeToSessionStorage< T | null >( prefixedKey, ( newValue ) => {
-			setValue( newValue ?? null );
-		} );
-	}, [ prefixedKey ] );
-
-	const saveValue = ( newValue: T ) => {
-		setSessionStorageItem( prefixedKey, newValue );
-	};
-
-	const removeValue = () => {
-		removeSessionStorageItem( prefixedKey );
-	};
-
-	return [ value, saveValue, removeValue ] as const;
-};
-
-const subscribeToSessionStorage = < T >( key: string, subscriber: ( value: T ) => void ) => {
-	subscriber( getSessionStorageItem( key ) as T );
-
-	const abortController = new AbortController();
-
-	window.addEventListener(
-		'storage',
-		( e ) => {
-			if ( e.key !== key || e.storageArea !== sessionStorage ) {
-				return;
-			}
-
-			subscriber( getSessionStorageItem( key ) as T );
-		},
-		{ signal: abortController.signal }
-	);
-
-	return () => {
-		abortController.abort();
-	};
-};

package/src/sync/enqueue-font.ts

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