@elementor/editor-canvas 4.0.0-607 → 4.0.0-619

package/src/components/style-renderer.tsx

@@ -8,6 +8,7 @@ import { Portal } from '@elementor/ui';
 
 import { useDocumentsCssLinks } from '../hooks/use-documents-css-links';
 import { useStyleItems } from '../hooks/use-style-items';
+import { type StyleItem } from '../renderers/create-styles-renderer';
 
 export function StyleRenderer() {
 	const container = usePortalContainer();
@@ -21,8 +22,8 @@ export function StyleRenderer() {
 
 	return (
 		<Portal container={ container }>
-			{ styleItems.map( ( item, i ) => (
-				<style key={ `${ item.id }-${ i }-${ item.breakpoint }` }>{ item.value }</style>
+			{ filterUniqueStyleDefinitions( styleItems ).map( ( item ) => (
+				<style key={ `${ item.id }-${ item.breakpoint }-${ item.state ?? 'normal' }` }>{ item.value }</style>
 			) ) }
 			{ linksAttrs.map( ( attrs ) => (
 				<link { ...attrs } key={ attrs.id } />
@@ -34,3 +35,29 @@ export function StyleRenderer() {
 function usePortalContainer() {
 	return useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => getCanvasIframeDocument()?.head );
 }
+
+// we load local styles also from components, which are handled differently
+// to avoid having "Encountered two children with the same key" - adding this filtering to avoid rendering the same style twice
+function filterUniqueStyleDefinitions( styleItems: StyleItem[] ) {
+	const seen = new Map< string, StyleItem[] >();
+
+	return styleItems.filter( ( style ) => {
+		const existingStyle = seen.get( style.id );
+
+		if ( existingStyle ) {
+			const existingStyleVariant = existingStyle.find(
+				( s ) => s.breakpoint === style.breakpoint && s.state === style.state
+			);
+
+			if ( existingStyleVariant ) {
+				return false;
+			}
+
+			existingStyle.push( style );
+			return true;
+		}
+
+		seen.set( style.id, [ style ] );
+		return true;
+	} );
+}

package/src/hooks/__tests__/use-style-items.test.ts

@@ -28,7 +28,7 @@ jest.mock( '../use-style-renderer', () => ( {
 } ) );
 
 jest.mock( '@elementor/editor-responsive', () => ( {
-	getBreakpoints: jest.fn().mockReturnValue( [
+	useBreakpoints: jest.fn().mockReturnValue( [
 		{ id: 'desktop', label: 'Desktop' },
 		{ id: 'tablet', label: 'Tablet' },
 		{ id: 'mobile', label: 'Mobile' },
@@ -39,10 +39,12 @@ describe( 'useStyleItems', () => {
 	beforeEach( () => {
 		jest.mocked( useStyleRenderer ).mockReturnValue(
 			jest.fn().mockImplementation( ( { styles } ) =>
-				styles.map( ( style: StyleDefinition ) => ( {
-					id: style.id,
-					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
-				} ) )
+				Promise.resolve(
+					styles.map( ( style: StyleDefinition ) => ( {
+						id: style.id,
+						breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+					} ) )
+				)
 			)
 		);
 	} );
@@ -229,4 +231,106 @@ describe( 'useStyleItems', () => {
 			{ id: 'style1', breakpoint: 'mobile' },
 		] );
 	} );
+
+	it( 'should use cached items when no changes detected', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [
+			createMockStyleDefinition( { id: 'style1' } ),
+			createMockStyleDefinition( { id: 'style2' } ),
+		] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		// Act - initial render.
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: null, state: null },
+				props: { a: 1 },
+			} );
+		} );
+
+		// Assert.
+		expect( renderStylesMock ).toHaveBeenCalledTimes( 1 );
+		expect( result.current ).toHaveLength( 2 );
+
+		// Act - trigger update with same props (updateProps mutates in place, same reference).
+		renderStylesMock.mockClear();
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: null, state: null },
+				props: { a: 1 },
+			} );
+		} );
+
+		// Assert - renderStyles should not be called when no changes detected.
+		expect( renderStylesMock ).not.toHaveBeenCalled();
+		expect( result.current ).toHaveLength( 2 );
+	} );
+
+	it( 'should only re-render changed styles on differential update', async () => {
+		// Arrange.
+		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>
+			Promise.resolve(
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
+		);
+
+		jest.mocked( useStyleRenderer ).mockReturnValue( renderStylesMock );
+
+		const mockProvider = createMockStylesProvider( { key: 'provider1', priority: 1 }, [
+			createMockStyleDefinition( { id: 'style1' } ),
+			createMockStyleDefinition( { id: 'style2' } ),
+			createMockStyleDefinition( { id: 'style3' } ),
+		] );
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider ] );
+
+		// Act - initial render.
+		const { result } = renderHook( () => useStyleItems() );
+
+		await act( async () => {
+			mockProvider.actions.updateProps?.( {
+				id: 'style1',
+				meta: { breakpoint: null, state: null },
+				props: { a: 1 },
+			} );
+		} );
+
+		// Assert - initial render includes all styles.
+		expect( renderStylesMock ).toHaveBeenCalledTimes( 1 );
+		expect( renderStylesMock.mock.calls[ 0 ][ 0 ].styles ).toHaveLength( 3 );
+		expect( result.current ).toHaveLength( 3 );
+
+		// Act - update style2 using update action (creates new object reference).
+		renderStylesMock.mockClear();
+
+		await act( async () => {
+			mockProvider.actions.update?.( { id: 'style2', label: 'Updated Style 2' } );
+		} );
+
+		// Assert - only the changed style should be rendered.
+		expect( renderStylesMock ).toHaveBeenCalledTimes( 1 );
+		expect( renderStylesMock.mock.calls[ 0 ][ 0 ].styles ).toHaveLength( 1 );
+		expect( renderStylesMock.mock.calls[ 0 ][ 0 ].styles[ 0 ].id ).toBe( 'style2' );
+		expect( result.current ).toHaveLength( 3 );
+	} );
 } );

package/src/hooks/use-style-items.ts

@@ -1,6 +1,6 @@
-import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
-import { type BreakpointId, getBreakpoints } from '@elementor/editor-responsive';
-import { isClassState, type StyleDefinitionClassState } from '@elementor/editor-styles';
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
+import { type BreakpointId, useBreakpoints } from '@elementor/editor-responsive';
+import { isClassState, type StyleDefinition, type StyleDefinitionClassState } from '@elementor/editor-styles';
 import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 
@@ -11,26 +11,47 @@ import { useOnMount } from './use-on-mount';
 import { useStylePropResolver } from './use-style-prop-resolver';
 import { useStyleRenderer } from './use-style-renderer';
 
+type StylesCollection = Record< string, StyleDefinition >;
+
+type StyleItemsCache = {
+	orderedIds: string[];
+	itemsById: Map< string, StyleItem[] >;
+};
+
 type ProviderAndStyleItems = { provider: StylesProvider; items: StyleItem[] };
 
-type ProviderAndSubscriber = { provider: StylesProvider; subscriber: () => Promise< void > };
+type ProviderAndSubscriber = {
+	provider: StylesProvider;
+	subscriber: ( previous?: StylesCollection, current?: StylesCollection ) => Promise< void >;
+};
 
 type ProviderAndStyleItemsMap = Record< string, ProviderAndStyleItems >;
 
 export function useStyleItems() {
 	const resolve = useStylePropResolver();
 	const renderStyles = useStyleRenderer( resolve );
+	const breakpoints = useBreakpoints();
 
 	const [ styleItems, setStyleItems ] = useState< ProviderAndStyleItemsMap >( {} );
+	const styleItemsCacheRef = useRef< Map< string, StyleItemsCache > >( new Map() );
 
 	const providerAndSubscribers = useMemo( () => {
 		return stylesRepository.getProviders().map( ( provider ): ProviderAndSubscriber => {
+			const providerKey = provider.getKey();
+
+			if ( ! styleItemsCacheRef.current.has( providerKey ) ) {
+				styleItemsCacheRef.current.set( providerKey, { orderedIds: [], itemsById: new Map() } );
+			}
+
+			const cache = styleItemsCacheRef.current.get( providerKey ) as StyleItemsCache;
+
 			return {
 				provider,
 				subscriber: createProviderSubscriber( {
 					provider,
 					renderStyles,
 					setStyleItems,
+					cache,
 				} ),
 			};
 		} );
@@ -54,33 +75,30 @@ export function useStyleItems() {
 		} );
 	} );
 
-	const breakpointsOrder = getBreakpoints().map( ( breakpoint ) => breakpoint.id );
+	const breakpointSorter = useMemo(
+		() => createBreakpointSorter( breakpoints.map( ( breakpoint ) => breakpoint.id ) ),
+		[ breakpoints ]
+	);
 
 	return useMemo(
 		() =>
 			Object.values( styleItems )
-				.sort( sortByProviderPriority )
+				.sort( prioritySorter )
 				.flatMap( ( { items } ) => items )
-				.sort( sortByStateType )
-				.sort( sortByBreakpoint( breakpointsOrder ) ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ styleItems, breakpointsOrder.join( '-' ) ]
+				.sort( stateSorter )
+				.sort( breakpointSorter ),
+		[ styleItems, breakpointSorter ]
 	);
 }
-function sortByProviderPriority(
+
+function prioritySorter(
 	{ provider: providerA }: ProviderAndStyleItems,
 	{ provider: providerB }: ProviderAndStyleItems
 ) {
 	return providerA.priority - providerB.priority;
 }
 
-function sortByBreakpoint( breakpointsOrder: BreakpointId[] ) {
-	return ( { breakpoint: breakpointA }: StyleItem, { breakpoint: breakpointB }: StyleItem ) =>
-		breakpointsOrder.indexOf( breakpointA as BreakpointId ) -
-		breakpointsOrder.indexOf( breakpointB as BreakpointId );
-}
-
-function sortByStateType( { state: stateA }: StyleItem, { state: stateB }: StyleItem ) {
+function stateSorter( { state: stateA }: StyleItem, { state: stateB }: StyleItem ) {
 	if (
 		isClassState( stateA as StyleDefinitionClassState ) &&
 		! isClassState( stateB as StyleDefinitionClassState )
@@ -98,28 +116,31 @@ function sortByStateType( { state: stateA }: StyleItem, { state: stateB }: Style
 	return 0;
 }
 
+function createBreakpointSorter( breakpointsOrder: BreakpointId[] ) {
+	return ( { breakpoint: breakpointA }: StyleItem, { breakpoint: breakpointB }: StyleItem ) =>
+		breakpointsOrder.indexOf( breakpointA as BreakpointId ) -
+		breakpointsOrder.indexOf( breakpointB as BreakpointId );
+}
+
 type CreateProviderSubscriberArgs = {
 	provider: StylesProvider;
 	renderStyles: StyleRenderer;
 	setStyleItems: Dispatch< SetStateAction< ProviderAndStyleItemsMap > >;
+	cache: StyleItemsCache;
 };
 
-function createProviderSubscriber( { provider, renderStyles, setStyleItems }: CreateProviderSubscriberArgs ) {
-	return abortPreviousRuns( ( abortController ) =>
+function createProviderSubscriber( { provider, renderStyles, setStyleItems, cache }: CreateProviderSubscriberArgs ) {
+	return abortPreviousRuns( ( abortController, previous?: StylesCollection, current?: StylesCollection ) =>
 		signalizedProcess( abortController.signal )
 			.then( ( _, signal ) => {
-				const styles = provider.actions.all().map( ( __, index, items ) => {
-					const lastPosition = items.length - 1;
-
-					const style = items[ lastPosition - index ];
+				const hasDiffInfo = current !== undefined && previous !== undefined;
+				const hasCache = cache.orderedIds.length > 0;
 
-					return {
-						...style,
-						cssName: provider.actions.resolveCssName( style.id ),
-					};
-				} );
+				if ( hasDiffInfo && hasCache ) {
+					return updateItems( previous, current, signal );
+				}
 
-				return renderStyles( { styles: breakToBreakpoints( styles ), signal } );
+				return createItems( signal );
 			} )
 			.then( ( items ) => {
 				setStyleItems( ( prev ) => ( {
@@ -130,6 +151,50 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems }: Cr
 			.execute()
 	);
 
+	async function updateItems( previous: StylesCollection, current: StylesCollection, signal: AbortSignal ) {
+		const changedIds = getChangedStyleIds( previous, current );
+
+		cache.orderedIds = provider.actions
+			.all()
+			.map( ( style ) => style.id )
+			.reverse();
+
+		if ( changedIds.length > 0 ) {
+			const changedStyles = changedIds
+				.map( ( id ) => provider.actions.get( id ) )
+				.filter( ( style ): style is StyleDefinition => !! style )
+				.map( ( style ) => ( {
+					...style,
+					cssName: provider.actions.resolveCssName( style.id ),
+				} ) );
+
+			return renderStyles( { styles: breakToBreakpoints( changedStyles ), signal } ).then( ( rendered ) => {
+				updateCacheItems( cache, rendered );
+
+				return getOrderedItems( cache );
+			} );
+		}
+
+		return getOrderedItems( cache );
+	}
+
+	async function createItems( signal: AbortSignal ) {
+		const allStyles = provider.actions.all();
+
+		const styles = allStyles.reverse().map( ( style ) => {
+			return {
+				...style,
+				cssName: provider.actions.resolveCssName( style.id ),
+			};
+		} );
+
+		return renderStyles( { styles: breakToBreakpoints( styles ), signal } ).then( ( rendered ) => {
+			rebuildCache( cache, allStyles, rendered );
+
+			return rendered;
+		} );
+	}
+
 	function breakToBreakpoints( styles: RendererStyleDefinition[] ) {
 		return Object.values(
 			styles.reduce(
@@ -157,3 +222,52 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems }: Cr
 		).flatMap( ( breakpointMap ) => Object.values( breakpointMap ) );
 	}
 }
+
+function getChangedStyleIds( previous: StylesCollection, current: StylesCollection ): string[] {
+	const changedIds: string[] = [];
+
+	for ( const id of Object.keys( current ) ) {
+		const currentStyle = current[ id ];
+		const previousStyle = previous[ id ];
+
+		if ( ! previousStyle || currentStyle !== previousStyle ) {
+			changedIds.push( id );
+		}
+	}
+
+	return changedIds;
+}
+
+function getOrderedItems( cache: StyleItemsCache ): StyleItem[] {
+	return cache.orderedIds
+		.map( ( id ) => cache.itemsById.get( id ) )
+		.filter( ( items ): items is StyleItem[] => items !== undefined )
+		.flat();
+}
+
+function updateCacheItems( cache: StyleItemsCache, changedItems: StyleItem[] ): void {
+	for ( const item of changedItems ) {
+		const existing = cache.itemsById.get( item.id );
+		if ( existing ) {
+			const idx = existing.findIndex( ( e ) => e.breakpoint === item.breakpoint && e.state === item.state );
+			if ( idx >= 0 ) {
+				existing[ idx ] = item;
+			} else {
+				existing.push( item );
+			}
+		} else {
+			cache.itemsById.set( item.id, [ item ] );
+		}
+	}
+}
+
+function rebuildCache( cache: StyleItemsCache, allStyles: StyleDefinition[], items: StyleItem[] ): void {
+	cache.orderedIds = allStyles.map( ( style ) => style.id ).reverse();
+	cache.itemsById.clear();
+
+	for ( const item of items ) {
+		const existing = cache.itemsById.get( item.id ) || [];
+		existing.push( item );
+		cache.itemsById.set( item.id, existing );
+	}
+}

package/src/init-settings-transformers.ts

@@ -9,6 +9,7 @@ import { queryTransformer } from './transformers/settings/query-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
 import { imageTransformer } from './transformers/shared/image-transformer';
 import { plainTransformer } from './transformers/shared/plain-transformer';
+import { videoSrcTransformer } from './transformers/shared/video-src-transformer';
 
 export function initSettingsTransformers() {
 	settingsTransformersRegistry
@@ -17,6 +18,7 @@ export function initSettingsTransformers() {
 		.register( 'query', queryTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
+		.register( 'video-src', videoSrcTransformer )
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )
 		.register( 'html-v2', htmlV2Transformer )

package/src/init.tsx

@@ -1,5 +1,4 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
-import { init as initInteractionsRepository } from '@elementor/editor-interactions';
 import { getMCPByDomain } from '@elementor/editor-mcp';
 
 import { ClassesRename } from './components/classes-rename';
@@ -32,8 +31,6 @@ export function init() {
 
 	initSettingsTransformers();
 
-	initInteractionsRepository();
-
 	injectIntoTop( {
 		id: 'elements-overlays',
 		component: ElementsOverlays,

package/src/legacy/types.ts

@@ -47,6 +47,9 @@ export type LegacyWindow = Window & {
 				},
 			];
 		$previewWrapper: JQueryElement;
+		helpers: {
+			hasPro: () => boolean;
+		};
 	};
 };
 
@@ -80,6 +83,7 @@ export declare class ElementView {
 		length: number;
 		findByIndex: ( index: number ) => ElementView;
 		each: ( callback: ( view: ElementView ) => void ) => void;
+		map: < T >( callback: ( view: ElementView ) => T ) => T[];
 	};
 
 	constructor( ...args: unknown[] );
@@ -216,7 +220,16 @@ type ToJSON< T > = {
 
 type ContextMenuGroup = {
 	name: string;
-	actions: unknown[];
+	actions: ContextMenuAction[];
+};
+
+export type ContextMenuAction = {
+	name: string;
+	icon: string;
+	title: string | ( () => string );
+	shortcut?: string;
+	isEnabled: () => boolean;
+	callback: ( _: unknown, eventData: unknown ) => void;
 };
 
 export type ReplacementSettings = {

package/src/renderers/create-styles-renderer.ts

@@ -48,7 +48,16 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 
 export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '' }: CreateStyleRendererArgs ) {
 	return async ( { styles, signal }: StyleRendererArgs ): Promise< StyleItem[] > => {
-		const stylesCssPromises = styles.map( async ( style ) => {
+		const seenIds = new Set< string >();
+		const uniqueStyles = styles.filter( ( style ) => {
+			if ( seenIds.has( style.id ) ) {
+				return false;
+			}
+			seenIds.add( style.id );
+			return true;
+		} );
+
+		const stylesCssPromises = uniqueStyles.map( async ( style ) => {
 			const variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {
 				const css = await propsToCss( { props: variant.props, resolve, signal } );
 				const customCss = customCssToString( variant.custom_css );

package/src/transformers/shared/__tests__/video-src-transformer.test.ts

@@ -0,0 +1,159 @@
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { videoSrcTransformer } from '../video-src-transformer';
+
+jest.mock( '@elementor/wp-media' );
+
+const mockedGetMediaAttachment = jest.mocked( getMediaAttachment );
+
+describe( 'videoSrcTransformer', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'returns url when only url is provided', async () => {
+		// Arrange.
+		const value = {
+			id: null,
+			url: 'https://example.com/video.mp4',
+		};
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: null,
+			url: 'https://example.com/video.mp4',
+		} );
+		expect( mockedGetMediaAttachment ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resolves url from attachment when id is provided', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( {
+			url: 'https://example.com/resolved-video.mp4',
+		} as never );
+		const value = {
+			id: 123,
+			url: null,
+		};
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: 123,
+			url: 'https://example.com/resolved-video.mp4',
+		} );
+		expect( mockedGetMediaAttachment ).toHaveBeenCalledWith( { id: 123 } );
+	} );
+
+	it( 'uses attachment url over provided url when id exists', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( {
+			url: 'https://example.com/attachment-url.mp4',
+		} as never );
+		const value = {
+			id: 456,
+			url: 'https://example.com/original-url.mp4',
+		};
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: 456,
+			url: 'https://example.com/attachment-url.mp4',
+		} );
+	} );
+
+	it( 'falls back to provided url when attachment lookup fails', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( null as never );
+		const value = {
+			id: 789,
+			url: 'https://example.com/fallback.mp4',
+		};
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: 789,
+			url: 'https://example.com/fallback.mp4',
+		} );
+	} );
+
+	it( 'handles empty object', async () => {
+		// Arrange.
+		const value = {} as { id: null; url: null };
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: null,
+			url: undefined,
+		} );
+	} );
+
+	it( 'handles both id and url being null', async () => {
+		// Arrange.
+		const value = {
+			id: null,
+			url: null,
+		};
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: null,
+			url: null,
+		} );
+	} );
+
+	it( 'handles id of 0 as falsy (no attachment lookup)', async () => {
+		// Arrange.
+		const value = {
+			id: 0,
+			url: 'https://example.com/video.mp4',
+		};
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: null,
+			url: 'https://example.com/video.mp4',
+		} );
+		expect( mockedGetMediaAttachment ).not.toHaveBeenCalled();
+	} );
+
+	it( 'handles undefined url with valid id', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( {
+			url: 'https://example.com/resolved.mp4',
+		} as never );
+		const value = {
+			id: 123,
+			url: undefined,
+		} as unknown as { id: number; url: null };
+
+		// Act.
+		const result = await videoSrcTransformer( value, { key: 'source' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			id: 123,
+			url: 'https://example.com/resolved.mp4',
+		} );
+	} );
+} );