@elementor/editor-editing-panel 1.10.0 → 1.11.0

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