@elementor/editor-ui 3.33.0-207 → 3.33.0-209

package/dist/index.js

@@ -676,13 +676,13 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     setIsEditing(true);
   };
   const closeEditMode = () => {
-    ref.current?.blur();
     setError(null);
     onError?.(null);
     setIsEditing(false);
   };
   const submit = (newValue) => {
     if (!isDirty(newValue)) {
+      closeEditMode();
       return;
     }
     if (!error) {
@@ -708,7 +708,9 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     }
     if (["Enter"].includes(event.key)) {
       event.preventDefault();
-      return submit(event.target.innerText);
+      if (!error) {
+        ref.current?.blur();
+      }
     }
   };
   const handleClick = (event) => {
@@ -717,11 +719,18 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     }
     onClick?.(event);
   };
+  const handleBlur = () => {
+    if (error) {
+      closeEditMode();
+      return;
+    }
+    submit(ref.current.innerText);
+  };
   const listeners = {
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onInput: onChange,
-    onBlur: closeEditMode
+    onBlur: handleBlur
   };
   const attributes = {
     value,

package/dist/index.mjs

@@ -647,13 +647,13 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     setIsEditing(true);
   };
   const closeEditMode = () => {
-    ref.current?.blur();
     setError(null);
     onError?.(null);
     setIsEditing(false);
   };
   const submit = (newValue) => {
     if (!isDirty(newValue)) {
+      closeEditMode();
       return;
     }
     if (!error) {
@@ -679,7 +679,9 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     }
     if (["Enter"].includes(event.key)) {
       event.preventDefault();
-      return submit(event.target.innerText);
+      if (!error) {
+        ref.current?.blur();
+      }
     }
   };
   const handleClick = (event) => {
@@ -688,11 +690,18 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
     }
     onClick?.(event);
   };
+  const handleBlur = () => {
+    if (error) {
+      closeEditMode();
+      return;
+    }
+    submit(ref.current.innerText);
+  };
   const listeners = {
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onInput: onChange,
-    onBlur: closeEditMode
+    onBlur: handleBlur
   };
   const attributes = {
     value,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "3.33.0-207",
+  "version": "3.33.0-209",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "3.33.0-207",
+    "@elementor/editor-v1-adapters": "3.33.0-209",
     "@elementor/icons": "1.53.0",
     "@elementor/ui": "1.36.15",
     "@tanstack/react-virtual": "^3.13.3",

package/src/hooks/__tests__/use-editable.test.tsx

@@ -0,0 +1,255 @@
+import * as React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { EditableField } from '../../components/editable-field';
+import { useEditable } from '../use-editable';
+
+// Test utility component that uses the hook with EditableField
+const TestComponent = ( {
+	value,
+	onSubmit,
+	validation,
+	onClick,
+	onError,
+}: {
+	value: string;
+	onSubmit: ( value: string ) => unknown;
+	validation?: ( value: string ) => string | null;
+	onClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;
+	onError?: ( error: string | null ) => void;
+} ) => {
+	const { ref, isEditing, openEditMode, error, getProps } = useEditable( {
+		value,
+		onSubmit,
+		validation,
+		onClick,
+		onError,
+	} );
+
+	return (
+		<div>
+			<button onClick={ openEditMode } data-testid="open-edit">
+				Open Edit
+			</button>
+			<EditableField ref={ ref } { ...getProps() } data-testid="editable-field" />
+			<div data-testid="editing-state">{ isEditing ? 'editing' : 'not-editing' }</div>
+			<div data-testid="error-state">{ error || 'no-error' }</div>
+		</div>
+	);
+};
+
+describe( 'useEditable', () => {
+	it( 'should return editable content attributes and handlers', () => {
+		// Arrange & Act.
+		render( <TestComponent value="" onSubmit={ jest.fn() } /> );
+
+		// Assert.
+		const editableField = screen.getByRole( 'textbox' );
+
+		expect( editableField ).toHaveAttribute( 'role', 'textbox' );
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'false' );
+		expect( editableField ).toHaveTextContent( '' );
+	} );
+
+	it( 'should set editable to true', () => {
+		// Arrange & Act.
+		render( <TestComponent value="" onSubmit={ jest.fn() } /> );
+
+		// Assert.
+		const editableField = screen.getByRole( 'textbox' );
+		const editingState = screen.getByText( 'not-editing' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		expect( editingState ).toHaveTextContent( 'not-editing' );
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'false' );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		// Assert.
+		expect( screen.getByText( 'editing' ) ).toBeInTheDocument();
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'true' );
+	} );
+
+	it( 'should call onSubmit with the new value on enter', async () => {
+		// Arrange.
+		const onSubmit = jest.fn();
+		const newValue = 'New value';
+		const validation = jest.fn().mockReturnValue( null );
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		// Mock the blur method to trigger onBlur event
+		mockBlur( editableField );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( validation ).toHaveBeenCalledWith( newValue );
+
+		// Act.
+		fireEvent.keyDown( editableField, { key: 'Enter' } );
+
+		// Assert.
+		await waitFor( () => {
+			expect( onSubmit ).toHaveBeenCalledWith( newValue );
+		} );
+	} );
+
+	it( 'should remove the editable content attribute on blur', () => {
+		// Arrange & Act.
+		render( <TestComponent value="" onSubmit={ jest.fn() } /> );
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Open Edit' } ) );
+
+		// Assert.
+		expect( screen.getByText( 'editing' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.blur( screen.getByRole( 'textbox' ) );
+
+		// Assert.
+		expect( screen.getByText( 'not-editing' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should call onSubmit with the new value on blur', () => {
+		// Arrange.
+		const onSubmit = jest.fn();
+		const newValue = 'New value';
+		const validation = jest.fn().mockReturnValue( null );
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+
+		// Act.
+		fireEvent.click( screen.getByRole( 'button', { name: 'Open Edit' } ) );
+
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( validation ).toHaveBeenCalledWith( newValue );
+
+		// Act.
+		fireEvent.blur( editableField );
+
+		// Assert.
+		expect( onSubmit ).toHaveBeenCalledWith( newValue );
+	} );
+
+	it( 'should set error message id validation fails on enter, and keep the edit mode open', () => {
+		// Arrange.
+		const newValue = 'invalid-value';
+		const onSubmit = jest.fn();
+
+		const validation = ( v: string ) => {
+			if ( v === newValue ) {
+				return 'Nope';
+			}
+
+			return null;
+		};
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		// Act.
+		fireEvent.click( screen.getByRole( 'button', { name: 'Open Edit' } ) );
+
+		// Assert.
+		expect( screen.getByText( 'no-error' ) ).toBeInTheDocument();
+
+		// Act.
+		const editableField = screen.getByRole( 'textbox' );
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( screen.getByText( 'Nope' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.keyDown( editableField, { key: 'Enter' } );
+
+		// Assert.
+		expect( onSubmit ).not.toHaveBeenCalled();
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'true' );
+	} );
+
+	it( 'should not run validation & submit if the value has not changed', () => {
+		// Arrange.
+		const value = 'initial value';
+		const onSubmit = jest.fn();
+
+		const validation = () => {
+			return 'test-error';
+		};
+
+		render( <TestComponent value={ value } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		// Assert.
+		expect( screen.getByText( 'no-error' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.input( editableField, { target: { innerText: 'new value' } } );
+
+		// Assert.
+		expect( screen.getByText( 'test-error' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.input( editableField, { target: { innerText: value } } );
+
+		// Assert.
+		expect( screen.getByText( 'no-error' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.keyDown( editableField, { key: 'Enter' } );
+
+		// Assert.
+		expect( onSubmit ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not submit, and only close the edit mode on blur if there is an error', () => {
+		// Arrange.
+		const onSubmit = jest.fn();
+		const newValue = 'invalid-value';
+		const validation = jest.fn().mockReturnValue( 'Nope' );
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( validation ).toHaveBeenCalledWith( newValue );
+
+		// Act.
+		fireEvent.blur( editableField );
+
+		// Assert.
+		expect( onSubmit ).not.toHaveBeenCalled();
+		expect( screen.getByText( 'not-editing' ) ).toBeInTheDocument();
+	} );
+} );
+
+function mockBlur( element: HTMLElement ) {
+	const originalBlur = element.blur;
+	element.blur = jest.fn( () => {
+		originalBlur.call( element );
+		fireEvent.blur( element );
+	} );
+}

package/src/hooks/use-editable.ts

@@ -21,8 +21,6 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 	};
 
 	const closeEditMode = () => {
-		ref.current?.blur();
-
 		setError( null );
 		onError?.( null );
 		setIsEditing( false );
@@ -30,6 +28,7 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 
 	const submit = ( newValue: string ) => {
 		if ( ! isDirty( newValue ) ) {
+			closeEditMode();
 			return;
 		}
 
@@ -62,7 +61,10 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 
 		if ( [ 'Enter' ].includes( event.key ) ) {
 			event.preventDefault();
-			return submit( ( event.target as HTMLElement ).innerText );
+			// submission is invoked only on blur, to avoid issues with double-submission in certain cases
+			if ( ! error ) {
+				ref.current?.blur();
+			}
 		}
 	};
 
@@ -74,11 +76,20 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 		onClick?.( event );
 	};
 
+	const handleBlur = () => {
+		if ( error ) {
+			closeEditMode();
+			return;
+		}
+
+		submit( ( ref.current as HTMLElement ).innerText );
+	};
+
 	const listeners = {
 		onClick: handleClick,
 		onKeyDown: handleKeyDown,
 		onInput: onChange,
-		onBlur: closeEditMode,
+		onBlur: handleBlur,
 	} as const;
 
 	const attributes = {

package/src/hooks/__tests__/use-editable.test.ts

@@ -1,209 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import { useEditable } from '../use-editable';
-
-describe( 'useEditable', () => {
-	it( 'should return editable content attributes and handlers', () => {
-		// Arrange & Act.
-		const { result } = renderHook( () =>
-			useEditable( {
-				value: '',
-				onSubmit: jest.fn(),
-			} )
-		);
-
-		const props = result.current.getProps();
-
-		// Assert.
-		expect( props ).toEqual( {
-			value: '',
-			role: 'textbox',
-			contentEditable: false,
-			suppressContentEditableWarning: undefined,
-			onBlur: expect.any( Function ),
-			onClick: expect.any( Function ),
-			onInput: expect.any( Function ),
-			onKeyDown: expect.any( Function ),
-		} );
-	} );
-
-	it( 'should set editable to true', () => {
-		// Arrange & Act.
-		const { result } = renderHook( () => useEditable( { value: '', onSubmit: jest.fn() } ) );
-
-		// Assert.
-		expect( result.current.isEditing ).toBe( false );
-
-		// Act.
-		act( result.current.openEditMode );
-
-		// Assert.
-		expect( result.current.isEditing ).toBe( true );
-		expect( result.current.getProps() ).toMatchObject( {
-			contentEditable: true,
-			suppressContentEditableWarning: true,
-		} );
-	} );
-
-	it( 'should call onSubmit with the new value on enter', async () => {
-		// Arrange.
-		const onSubmit = jest.fn();
-		const value = 'Some value';
-		const newValue = 'New value';
-		const validation = jest.fn();
-
-		// Act.
-		const { result } = renderHook( () =>
-			useEditable( {
-				value,
-				onSubmit,
-				validation,
-			} )
-		);
-
-		act( () => {
-			result.current.openEditMode();
-			result.current.getProps().onInput( { target: { innerText: newValue } } as never );
-		} );
-
-		// Assert.
-		expect( validation ).toHaveBeenCalledWith( newValue );
-
-		// Act.
-		const { onKeyDown } = result.current.getProps();
-
-		act( () => {
-			onKeyDown( {
-				key: 'Enter',
-				stopPropagation: jest.fn(),
-				preventDefault: jest.fn(),
-				target: { innerText: newValue },
-			} as never );
-		} );
-
-		expect( onSubmit ).toHaveBeenCalledWith( newValue );
-	} );
-
-	it( 'should remove the editable content attribute on blur', () => {
-		// Arrange
-		const { result } = renderHook( () =>
-			useEditable( {
-				value: '',
-				onSubmit: jest.fn(),
-			} )
-		);
-
-		// Act.
-		act( result.current.openEditMode );
-
-		// Assert.
-		expect( result.current.isEditing ).toBe( true );
-
-		// Act.
-		act( result.current.getProps().onBlur );
-
-		// Assert.
-		expect( result.current.isEditing ).toBe( false );
-	} );
-
-	it( 'should set error message id validation fails', () => {
-		// Arrange.
-		const newValue = 'invalid-value';
-		const value = 'Some value';
-		const onSubmit = jest.fn();
-
-		const validation = ( v: string ) => {
-			if ( v === newValue ) {
-				return 'Nope';
-			}
-
-			return null;
-		};
-
-		const { result } = renderHook( () =>
-			useEditable( {
-				value,
-				onSubmit,
-				validation,
-			} )
-		);
-
-		// Act.
-		act( result.current.openEditMode );
-
-		// Assert.
-		expect( result.current.error ).toBeNull();
-
-		// Act.
-		act( () => {
-			result.current.getProps().onInput( { target: { innerText: newValue } } as never );
-		} );
-
-		// Assert.
-		expect( result.current.error ).toBe( 'Nope' );
-
-		// Act.
-		act( () => {
-			result.current.getProps().onKeyDown( {
-				key: 'Enter',
-				stopPropagation: jest.fn(),
-				preventDefault: jest.fn(),
-				target: { innerText: newValue },
-			} as never );
-		} );
-
-		// Assert.
-		expect( onSubmit ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should not run validation & submit if the value has not changed', () => {
-		// Arrange.
-		const value = 'initial value';
-		const onSubmit = jest.fn();
-
-		const validation = () => {
-			return 'test-error';
-		};
-
-		const { result } = renderHook( () =>
-			useEditable( {
-				value,
-				onSubmit,
-				validation,
-			} )
-		);
-
-		// Act.
-		act( result.current.openEditMode );
-
-		// Assert.
-		expect( result.current.error ).toBeNull();
-
-		// Act.
-		act( () => {
-			result.current.getProps().onInput( { target: { innerText: 'new value' } } as never );
-		} );
-
-		// Assert.
-		expect( result.current.error ).toBe( 'test-error' );
-
-		act( () => {
-			result.current.getProps().onInput( { target: { innerText: value } } as never );
-		} );
-
-		expect( result.current.error ).toBe( null );
-
-		// Act.
-		act( () => {
-			result.current.getProps().onKeyDown( {
-				key: 'Enter',
-				stopPropagation: jest.fn(),
-				preventDefault: jest.fn(),
-				target: { innerText: value },
-			} as never );
-		} );
-
-		// Assert.
-		expect( onSubmit ).not.toHaveBeenCalled();
-	} );
-} );