@elementor/editor-canvas 3.33.0-294 → 3.33.0-295

package/src/components/__tests__/inline-editor-overlay.test.tsx

@@ -0,0 +1,245 @@
+import * as React from 'react';
+import { renderWithTheme } from 'test-utils';
+import { getContainer, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
+import { htmlPropTypeUtil } from '@elementor/editor-props';
+import { debounce } from '@elementor/utils';
+import { act, screen } from '@testing-library/react';
+
+import { useFloatingOnElement } from '../../hooks/use-floating-on-element';
+import { getInlineEditablePropertyName } from '../../utils/inline-editing-utils';
+import { InlineEditorOverlay } from '../inline-editor-overlay';
+
+jest.mock( '@elementor/editor-elements' );
+jest.mock( '@elementor/editor-props' );
+jest.mock( '@elementor/utils' );
+jest.mock( '@elementor/editor-controls', () => ( {
+	InlineEditor: jest.fn( ( { value, setValue } ) => (
+		<div aria-label="inline editor container">
+			<input aria-label="inline editor" value={ value } onChange={ ( e ) => setValue( e.target.value ) } />
+		</div>
+	) ),
+} ) );
+jest.mock( '../../hooks/use-floating-on-element' );
+jest.mock( '../../utils/inline-editing-utils' );
+
+describe( '<InlineEditorOverlay />', () => {
+	const mockElement = document.createElement( 'div' );
+	const mockId = 'test-element-id';
+	const mockPropertyName = 'title';
+	const mockValue = '<p>Test content</p>';
+
+	beforeEach( () => {
+		jest.mocked( useFloatingOnElement ).mockReturnValue( {
+			floating: {
+				setRef: jest.fn(),
+				ref: { current: null },
+				styles: { position: 'absolute', top: 0, left: 0 },
+			},
+			isVisible: true,
+			context: {} as never,
+		} );
+
+		jest.mocked( getContainer ).mockReturnValue( {
+			model: {
+				get: jest.fn().mockReturnValue( 'e-heading' ),
+			},
+		} as unknown as ReturnType< typeof getContainer > );
+
+		jest.mocked( getInlineEditablePropertyName ).mockReturnValue( mockPropertyName );
+
+		jest.mocked( useElementSetting ).mockReturnValue( {
+			$$type: 'html',
+			value: mockValue,
+		} );
+
+		jest.mocked( htmlPropTypeUtil.extract ).mockReturnValue( mockValue );
+
+		jest.mocked( htmlPropTypeUtil.create ).mockImplementation( ( value ) => ( {
+			$$type: 'html',
+			value: typeof value === 'function' ? value( null ) : value,
+		} ) );
+
+		const mockDebouncedFn = jest.fn( ( fn: ( ...args: unknown[] ) => void ) => {
+			const debouncedFn = ( ...args: unknown[] ) => fn( ...args );
+			(
+				debouncedFn as typeof debouncedFn & {
+					cancel: jest.Mock;
+					flush: jest.Mock;
+					pending: jest.Mock;
+				}
+			 ).cancel = jest.fn();
+			(
+				debouncedFn as typeof debouncedFn & {
+					cancel: jest.Mock;
+					flush: jest.Mock;
+					pending: jest.Mock;
+				}
+			 ).flush = jest.fn( ( ...args: unknown[] ) => fn( ...args ) );
+			(
+				debouncedFn as typeof debouncedFn & {
+					cancel: jest.Mock;
+					flush: jest.Mock;
+					pending: jest.Mock;
+				}
+			 ).pending = jest.fn().mockReturnValue( false );
+			return debouncedFn;
+		} );
+		jest.mocked( debounce ).mockImplementation( mockDebouncedFn as unknown as typeof debounce );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render InlineEditor when visible', () => {
+		renderWithTheme( <InlineEditorOverlay element={ mockElement } isSelected={ true } id={ mockId } /> );
+
+		const input = screen.getByRole( 'textbox', { name: 'inline editor' } );
+		expect( input ).toBeInTheDocument();
+		expect( input ).toHaveValue( mockValue );
+	} );
+
+	it( 'should not render when not visible', () => {
+		jest.mocked( useFloatingOnElement ).mockReturnValue( {
+			floating: {
+				setRef: jest.fn(),
+				ref: { current: null },
+				styles: {},
+			},
+			isVisible: false,
+			context: {} as never,
+		} );
+
+		renderWithTheme( <InlineEditorOverlay element={ mockElement } isSelected={ false } id={ mockId } /> );
+
+		expect( screen.queryByRole( 'textbox', { name: 'inline editor' } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should get container and property name on mount', () => {
+		renderWithTheme( <InlineEditorOverlay element={ mockElement } isSelected={ true } id={ mockId } /> );
+
+		expect( getContainer ).toHaveBeenCalledWith( mockId );
+		expect( getInlineEditablePropertyName ).toHaveBeenCalled();
+	} );
+
+	it( 'should extract value from contentProp using htmlPropTypeUtil', () => {
+		renderWithTheme( <InlineEditorOverlay element={ mockElement } isSelected={ true } id={ mockId } /> );
+
+		expect( htmlPropTypeUtil.extract ).toHaveBeenCalledWith( {
+			$$type: 'html',
+			value: mockValue,
+		} );
+	} );
+
+	it( 'should call updateElementSettings when value changes', async () => {
+		const newValue = '<p>New content</p>';
+		const mockDebounceFn = jest.fn();
+		const debouncedFn = jest.fn( ( fn: ( ...args: unknown[] ) => void ) => {
+			mockDebounceFn.mockImplementation( fn );
+			return mockDebounceFn;
+		} );
+		jest.mocked( debounce ).mockImplementation( debouncedFn as unknown as typeof debounce );
+
+		renderWithTheme( <InlineEditorOverlay element={ mockElement } isSelected={ true } id={ mockId } /> );
+
+		const input = screen.getByRole( 'textbox', { name: 'inline editor' } ) as HTMLInputElement;
+
+		await act( async () => {
+			input.dispatchEvent( new Event( 'change', { bubbles: true } ) );
+			Object.defineProperty( input, 'value', { value: newValue, writable: true } );
+		} );
+
+		await act( async () => {
+			mockDebounceFn( newValue );
+		} );
+
+		expect( updateElementSettings ).toHaveBeenCalledWith( {
+			id: mockId,
+			props: {
+				[ mockPropertyName ]: {
+					$$type: 'html',
+					value: newValue,
+				},
+			},
+			withHistory: true,
+		} );
+	} );
+
+	it( 'should save &nbsp; when content is empty', async () => {
+		const emptyValue = '';
+		const mockDebounceFn = jest.fn();
+		const debouncedFn = jest.fn( ( fn: ( ...args: unknown[] ) => void ) => {
+			mockDebounceFn.mockImplementation( fn );
+			return mockDebounceFn;
+		} );
+		jest.mocked( debounce ).mockImplementation( debouncedFn as unknown as typeof debounce );
+
+		renderWithTheme( <InlineEditorOverlay element={ mockElement } isSelected={ true } id={ mockId } /> );
+
+		await act( async () => {
+			mockDebounceFn( emptyValue );
+		} );
+
+		expect( updateElementSettings ).toHaveBeenCalledWith( {
+			id: mockId,
+			props: {
+				[ mockPropertyName ]: {
+					$$type: 'html',
+					value: '&nbsp;',
+				},
+			},
+			withHistory: true,
+		} );
+	} );
+
+	it( 'should update and display new value after editing', async () => {
+		const initialValue = '<p>Initial content</p>';
+		const newValue = '<p>Updated content</p>';
+
+		jest.mocked( useElementSetting ).mockReturnValue( {
+			$$type: 'html',
+			value: initialValue,
+		} );
+		jest.mocked( htmlPropTypeUtil.extract ).mockReturnValue( initialValue );
+
+		const mockDebounceFn = jest.fn();
+		const debouncedFn = jest.fn( ( fn: ( ...args: unknown[] ) => void ) => {
+			mockDebounceFn.mockImplementation( fn );
+			return mockDebounceFn;
+		} );
+		jest.mocked( debounce ).mockImplementation( debouncedFn as unknown as typeof debounce );
+
+		const { rerender } = renderWithTheme(
+			<InlineEditorOverlay element={ mockElement } isSelected={ true } id={ mockId } />
+		);
+
+		const input = screen.getByRole( 'textbox', { name: 'inline editor' } ) as HTMLInputElement;
+		expect( input ).toHaveValue( initialValue );
+
+		await act( async () => {
+			mockDebounceFn( newValue );
+		} );
+
+		expect( updateElementSettings ).toHaveBeenCalledWith( {
+			id: mockId,
+			props: {
+				[ mockPropertyName ]: {
+					$$type: 'html',
+					value: newValue,
+				},
+			},
+			withHistory: true,
+		} );
+
+		jest.mocked( useElementSetting ).mockReturnValue( {
+			$$type: 'html',
+			value: newValue,
+		} );
+		jest.mocked( htmlPropTypeUtil.extract ).mockReturnValue( newValue );
+
+		rerender( <InlineEditorOverlay element={ mockElement } isSelected={ true } id={ mockId } /> );
+
+		const updatedInput = screen.getByRole( 'textbox', { name: 'inline editor' } ) as HTMLInputElement;
+		expect( updatedInput ).toHaveValue( newValue );
+	} );
+} );

package/src/components/elements-overlays.tsx

@@ -3,11 +3,29 @@ import { getElements, useSelectedElement } from '@elementor/editor-elements';
 import {
 	__privateUseIsRouteActive as useIsRouteActive,
 	__privateUseListenTo as useListenTo,
+	isExperimentActive,
 	useEditMode,
 	windowEvent,
 } from '@elementor/editor-v1-adapters';
 
-import { ElementOverlay } from './element-overlay';
+import type { ElementOverlayConfig } from '../types/element-overlay';
+import { hasInlineEditableProperty } from '../utils/inline-editing-utils';
+import { InlineEditorOverlay } from './inline-editor-overlay';
+import { OutlineOverlay } from './outline-overlay';
+
+const ELEMENTS_DATA_ATTR = 'atomic';
+
+const overlayRegistry: ElementOverlayConfig[] = [
+	{
+		component: OutlineOverlay,
+		shouldRender: () => true,
+	},
+	{
+		component: InlineEditorOverlay,
+		shouldRender: ( { id, isSelected } ) =>
+			isSelected && hasInlineEditableProperty( id ) && isExperimentActive( 'v4-inline-text-editing' ),
+	},
+];
 
 export function ElementsOverlays() {
 	const selected = useSelectedElement();
@@ -16,18 +34,23 @@ export function ElementsOverlays() {
 
 	const isEditMode = currentEditMode === 'edit';
 	const isKitRouteActive = useIsRouteActive( 'panel/global' );
-
 	const isActive = isEditMode && ! isKitRouteActive;
 
-	return (
-		isActive &&
-		elements.map( ( [ id, element ] ) => (
-			<ElementOverlay key={ id } id={ id } element={ element } isSelected={ selected.element?.id === id } />
-		) )
-	);
-}
+	if ( ! isActive ) {
+		return null;
+	}
 
-const ELEMENTS_DATA_ATTR = 'atomic';
+	return elements.map( ( [ id, element ] ) => {
+		const isSelected = selected.element?.id === id;
+
+		return overlayRegistry.map(
+			( { shouldRender, component: Overlay }, index ) =>
+				shouldRender( { id, element, isSelected } ) && (
+					<Overlay key={ `${ id }-${ index }` } id={ id } element={ element } isSelected={ isSelected } />
+				)
+		);
+	} );
+}
 
 type IdElementTuple = [ string, HTMLElement ];
 

package/src/components/inline-editor-overlay.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { InlineEditor } from '@elementor/editor-controls';
+import { getContainer, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
+import { htmlPropTypeUtil } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+import { debounce } from '@elementor/utils';
+import { FloatingPortal } from '@floating-ui/react';
+
+import { useFloatingOnElement } from '../hooks/use-floating-on-element';
+import type { ElementOverlayProps } from '../types/element-overlay';
+import { getInlineEditablePropertyName } from '../utils/inline-editing-utils';
+import { CANVAS_WRAPPER_ID } from './outline-overlay';
+
+const OVERLAY_Z_INDEX = 1000;
+const DEBOUNCE_DELAY = 100;
+
+export const InlineEditorOverlay = ( { element, isSelected, id }: ElementOverlayProps ): React.ReactElement | null => {
+	const { floating, isVisible } = useFloatingOnElement( { element, isSelected } );
+
+	const propertyName = React.useMemo( () => {
+		const container = getContainer( id );
+		return getInlineEditablePropertyName( container );
+	}, [ id ] );
+
+	const contentProp = useElementSetting( id, propertyName );
+	const value = React.useMemo( () => htmlPropTypeUtil.extract( contentProp ) || '', [ contentProp ] );
+
+	const debouncedUpdateRef = React.useRef< ReturnType< typeof debounce > | null >( null );
+	const lastValueRef = React.useRef< string >( '' );
+
+	React.useEffect( () => {
+		debouncedUpdateRef.current = debounce( ( newValue: string ) => {
+			const textContent = newValue.replace( /<[^>]*>/g, '' ).trim();
+			const valueToSave = textContent === '' ? '&nbsp;' : newValue;
+
+			updateElementSettings( {
+				id,
+				props: {
+					[ propertyName ]: htmlPropTypeUtil.create( valueToSave ),
+				},
+				withHistory: true,
+			} );
+		}, DEBOUNCE_DELAY );
+
+		return () => {
+			debouncedUpdateRef.current?.cancel?.();
+		};
+	}, [ id, propertyName ] );
+
+	const handleValueChange = React.useCallback( ( newValue: string ) => {
+		lastValueRef.current = newValue;
+		debouncedUpdateRef.current?.( newValue );
+	}, [] );
+
+	React.useEffect( () => {
+		if ( ! isVisible && debouncedUpdateRef.current?.pending?.() ) {
+			debouncedUpdateRef.current.flush( lastValueRef.current );
+		}
+	}, [ isVisible ] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
+			<Box
+				ref={ floating.setRef }
+				style={ {
+					...floating.styles,
+					zIndex: OVERLAY_Z_INDEX,
+					pointerEvents: 'auto',
+				} }
+			>
+				<InlineEditor value={ value } setValue={ handleValueChange } />
+			</Box>
+		</FloatingPortal>
+	);
+};

package/src/components/{element-overlay.tsx → outline-overlay.tsx}

@@ -5,13 +5,11 @@ import { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';
 import { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-element';
 import { useFloatingOnElement } from '../hooks/use-floating-on-element';
 import { useHasOverlapping } from '../hooks/use-has-overlapping';
+import type { ElementOverlayProps } from '../types/element-overlay';
 
 export const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';
 
-type Props = {
-	element: HTMLElement;
-	isSelected: boolean;
-	id: string;
+type Props = ElementOverlayProps & {
 	isSmallerOffset?: boolean;
 };
 
@@ -23,7 +21,7 @@ const OverlayBox = styled( Box, {
 	pointerEvents: 'none',
 } ) );
 
-export function ElementOverlay( { element, isSelected, id }: Props ) {
+export const OutlineOverlay = ( { element, isSelected, id }: Props ): React.ReactElement | false => {
 	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
 	const hasOverlapping = useHasOverlapping();
@@ -47,4 +45,4 @@ export function ElementOverlay( { element, isSelected, id }: Props ) {
 			</FloatingPortal>
 		)
 	);
-}
+};

package/src/types/element-overlay.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+
+export type ElementOverlayProps = {
+	element: HTMLElement;
+	id: string;
+	isSelected: boolean;
+};
+
+export type OverlayFilterArgs = {
+	id: string;
+	element: HTMLElement;
+	isSelected: boolean;
+};
+
+export type ElementOverlayConfig = {
+	component: React.ComponentType< ElementOverlayProps >;
+	shouldRender: ( args: OverlayFilterArgs ) => boolean;
+};

package/src/utils/inline-editing-utils.ts

@@ -0,0 +1,43 @@
+import { getContainer, getElementType, type V1Element } from '@elementor/editor-elements';
+
+const WIDGET_PROPERTY_MAP: Record< string, string > = {
+	'e-heading': 'title',
+	'e-paragraph': 'paragraph',
+};
+
+const getHtmlPropertyName = ( container: V1Element | null ): string => {
+	const widgetType = container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' );
+
+	if ( ! widgetType ) {
+		return '';
+	}
+
+	if ( WIDGET_PROPERTY_MAP[ widgetType ] ) {
+		return WIDGET_PROPERTY_MAP[ widgetType ];
+	}
+
+	const propsSchema = getElementType( widgetType )?.propsSchema;
+
+	if ( ! propsSchema ) {
+		return '';
+	}
+
+	const entry = Object.entries( propsSchema ).find( ( [ , propType ] ) => propType.key === 'html' );
+
+	return entry?.[ 0 ] ?? '';
+};
+
+export const hasInlineEditableProperty = ( containerId: string ): boolean => {
+	const container = getContainer( containerId );
+	const widgetType = container?.model?.get( 'widgetType' ) ?? container?.model?.get( 'elType' );
+
+	if ( ! widgetType ) {
+		return false;
+	}
+
+	return widgetType in WIDGET_PROPERTY_MAP;
+};
+
+export const getInlineEditablePropertyName = ( container: V1Element | null ): string => {
+	return getHtmlPropertyName( container );
+};