@elementor/editor-canvas 3.33.0-98 → 3.34.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-98",
+  "version": "3.34.2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,23 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-98",
-    "@elementor/editor-notifications": "3.33.0-98",
-    "@elementor/editor-documents": "3.33.0-98",
-    "@elementor/editor-elements": "3.33.0-98",
-    "@elementor/editor-props": "3.33.0-98",
-    "@elementor/editor-responsive": "3.33.0-98",
-    "@elementor/editor-styles": "3.33.0-98",
-    "@elementor/editor-styles-repository": "3.33.0-98",
-    "@elementor/editor-v1-adapters": "3.33.0-98",
-    "@elementor/twing": "3.33.0-98",
-    "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-98",
-    "@elementor/wp-media": "3.33.0-98",
+    "@elementor/editor": "3.34.2",
+    "@elementor/editor-controls": "3.34.2",
+    "@elementor/editor-documents": "3.34.2",
+    "@elementor/editor-elements": "3.34.2",
+    "@elementor/editor-interactions": "3.34.2",
+    "@elementor/editor-notifications": "3.34.2",
+    "@elementor/editor-props": "3.34.2",
+    "@elementor/editor-responsive": "3.34.2",
+    "@elementor/editor-styles": "3.34.2",
+    "@elementor/editor-styles-repository": "3.34.2",
+    "@elementor/editor-v1-adapters": "3.34.2",
+    "@elementor/editor-mcp": "3.34.2",
+    "@elementor/schema": "3.34.2",
+    "@elementor/twing": "3.34.2",
+    "@elementor/ui": "1.36.17",
+    "@elementor/utils": "3.34.2",
+    "@elementor/wp-media": "3.34.2",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/__tests__/settings-props-resolver.test.ts

@@ -1,7 +1,5 @@
-import { createMockStyleDefinition, createMockStylesProvider } from 'test-utils';
 import {
 	booleanPropTypeUtil,
-	classesPropTypeUtil,
 	imageAttachmentIdPropType,
 	imagePropTypeUtil,
 	imageSrcPropTypeUtil,
@@ -12,7 +10,6 @@ import {
 	stringPropTypeUtil,
 	urlPropTypeUtil,
 } from '@elementor/editor-props';
-import { stylesRepository } from '@elementor/editor-styles-repository';
 import { getMediaAttachment } from '@elementor/wp-media';
 
 import { initSettingsTransformers } from '../init-settings-transformers';
@@ -21,7 +18,6 @@ import { settingsTransformersRegistry } from '../settings-transformers-registry'
 import { mockAttachmentData } from './mock-attachment-data';
 import {
 	booleanPropType,
-	classesPropType,
 	imagePropType,
 	linkPropType,
 	numberPropType,
@@ -69,42 +65,6 @@ describe( 'settings props resolver', () => {
 				boolean: true,
 			},
 		},
-		{
-			name: 'classes',
-			props: {
-				classes: classesPropTypeUtil.create( [
-					'test-1',
-					'test-2-suffix',
-					'without-provider',
-					'',
-					null as unknown as string,
-					undefined as unknown as string,
-				] ),
-			},
-			prepare: () => {
-				jest.mocked( stylesRepository.getProviders ).mockReturnValue( [
-					createMockStylesProvider( {
-						key: 'test-1-provider',
-						actions: {
-							all: () => [ createMockStyleDefinition( { id: 'test-1' } ) ],
-						},
-					} ),
-					createMockStylesProvider( {
-						key: 'test-2-provider',
-						actions: {
-							resolveCssName: ( id ) => `${ id }-suffix`,
-							all: () => [ createMockStyleDefinition( { id: 'test-2' } ) ],
-						},
-					} ),
-				] );
-			},
-			schema: {
-				classes: classesPropType(),
-			},
-			expected: {
-				classes: [ 'test-1', 'test-2-suffix', 'without-provider' ],
-			},
-		},
 		{
 			name: 'link',
 			props: {

package/src/__tests__/styles-prop-resolver.test.ts

@@ -316,6 +316,7 @@ describe( 'styles prop resolver', () => {
 			props: {
 				background: backgroundPropTypeUtil.create( {
 					color: colorPropTypeUtil.create( '#000' ),
+					clip: stringPropTypeUtil.create( 'text' ),
 					'background-overlay': backgroundOverlayPropTypeUtil.create( [
 						backgroundColorOverlayPropTypeUtil.create( {
 							color: colorPropTypeUtil.create( 'blue' ),
@@ -370,6 +371,7 @@ describe( 'styles prop resolver', () => {
 			},
 			expected: {
 				'background-color': '#000',
+				'background-clip': 'text',
 				'background-attachment': 'scroll,scroll,scroll,fixed',
 				'background-image':
 					'linear-gradient(blue, blue),linear-gradient(yellow, yellow),url(thumbnail-image-url-123),url(medium_large-image-url-123)',
@@ -378,6 +380,15 @@ describe( 'styles prop resolver', () => {
 				'background-size': 'auto auto,auto auto,1400px auto,auto',
 			},
 		},
+		{
+			name: 'mix-blend-mode',
+			props: {
+				'mix-blend-mode': stringPropTypeUtil.create( 'multiply' ),
+			},
+			expected: {
+				'mix-blend-mode': 'multiply',
+			},
+		},
 		{
 			name: 'filter',
 			props: {
@@ -560,6 +571,7 @@ describe( 'styles prop resolver', () => {
 			props: {
 				background: backgroundPropTypeUtil.create( {
 					color: colorPropTypeUtil.create( '#000' ),
+					clip: stringPropTypeUtil.create( 'border-box' ),
 					'background-overlay': backgroundOverlayPropTypeUtil.create( [
 						backgroundImageOverlayPropTypeUtil.create( {
 							image: imagePropTypeUtil.create( {
@@ -581,6 +593,7 @@ describe( 'styles prop resolver', () => {
 			},
 			expected: {
 				'background-color': '#000',
+				'background-clip': 'border-box',
 				'background-image': 'url(original-image-url-123)',
 				'background-repeat': 'repeat',
 				'background-size': '1400px auto',

package/src/components/__tests__/__snapshots__/style-renderer.test.tsx.snap

@@ -4,14 +4,10 @@ exports[`<StyleRenderer /> should render styles and links in portal when contain
 <div
   data-testid="portal"
 >
-  <style
-    data-e-style-id="style1"
-  >
+  <style>
     .test { color: red; }
   </style>
-  <style
-    data-e-style-id="style2"
-  >
+  <style>
     .test2 { color: blue; }
   </style>
   <link

package/src/components/__tests__/elements-overlays.test.tsx

@@ -1,18 +1,25 @@
 import * as React from 'react';
 import { createDOMElement, createMockElement, createMockElementType, renderWithTheme } from 'test-utils';
 import { getElements, useSelectedElement } from '@elementor/editor-elements';
-import { __privateUseIsRouteActive as useIsRouteActive, useEditMode } from '@elementor/editor-v1-adapters';
-import { act, screen } from '@testing-library/react';
-
-import { CANVAS_WRAPPER_ID } from '../element-overlay';
+import {
+	__privateUseIsRouteActive as useIsRouteActive,
+	isExperimentActive,
+	useEditMode,
+} from '@elementor/editor-v1-adapters';
+import { screen, waitFor } from '@testing-library/react';
+
+import { hasInlineEditableProperty } from '../../utils/inline-editing-utils';
 import { ElementsOverlays } from '../elements-overlays';
+import { CANVAS_WRAPPER_ID } from '../outline-overlay';
 
 jest.mock( '@elementor/editor-elements' );
 jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	...jest.requireActual( '@elementor/editor-v1-adapters' ),
 	useEditMode: jest.fn(),
 	__privateUseIsRouteActive: jest.fn(),
+	isExperimentActive: jest.fn(),
 } ) );
+jest.mock( '../../utils/inline-editing-utils' );
 
 describe( '<ElementsOverlays />', () => {
 	beforeEach( () => {
@@ -23,6 +30,8 @@ describe( '<ElementsOverlays />', () => {
 
 		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( false );
+		jest.mocked( hasInlineEditableProperty ).mockReturnValue( false );
+		jest.mocked( isExperimentActive ).mockReturnValue( true );
 
 		jest.mocked( getElements ).mockReturnValue( [
 			createMockElement( {
@@ -68,16 +77,15 @@ describe( '<ElementsOverlays />', () => {
 		} );
 
 		// Act.
-		// eslint-disable-next-line testing-library/no-unnecessary-act
-		await act( () => renderWithTheme( <ElementsOverlays /> ) );
+		renderWithTheme( <ElementsOverlays /> );
 
 		// Assert.
-		const overlay = screen.getByRole( 'presentation' );
-
-		expect( overlay ).toHaveAttribute( 'data-element-overlay', 'atomic2' );
-
-		// eslint-disable-next-line testing-library/no-test-id-queries
-		expect( screen.getByTestId( CANVAS_WRAPPER_ID ) ).toContainElement( overlay );
+		await waitFor( () => {
+			const overlay = screen.getByRole( 'presentation' );
+			expect( overlay ).toHaveAttribute( 'data-element-overlay', 'atomic2' );
+			// eslint-disable-next-line testing-library/no-test-id-queries
+			expect( screen.getByTestId( CANVAS_WRAPPER_ID ) ).toContainElement( overlay );
+		} );
 	} );
 
 	it.each( [
@@ -128,4 +136,80 @@ describe( '<ElementsOverlays />', () => {
 		// Assert.
 		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
 	} );
+
+	it( 'should return null when editor is not in edit mode', () => {
+		// Arrange
+		jest.mocked( useEditMode ).mockReturnValue( 'preview' );
+		jest.mocked( useIsRouteActive ).mockReturnValue( false );
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'atomic1', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		const { container } = renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		expect( container ).toBeEmptyDOMElement();
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should return null when panel/global route is active', () => {
+		// Arrange
+		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
+		jest.mocked( useIsRouteActive ).mockReturnValue( true );
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'atomic1', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		const { container } = renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		expect( container ).toBeEmptyDOMElement();
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should render OutlineOverlay for atomic elements', async () => {
+		// Arrange
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'atomic1', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		const overlay = await screen.findByRole( 'presentation' );
+		expect( overlay ).toBeInTheDocument();
+		expect( overlay ).toHaveAttribute( 'data-element-overlay', 'atomic1' );
+	} );
+
+	it( 'should render InlineEditorOverlay only for selected elements that support inline editing', async () => {
+		// Arrange
+		const headingEl = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '50' } } );
+
+		jest.mocked( getElements ).mockReturnValue( [
+			createMockElement( {
+				model: { id: 'heading-element' },
+				view: { el: headingEl, getDomElement: () => ( { get: () => headingEl } ) },
+			} ),
+		] );
+
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: 'heading-element', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act
+		renderWithTheme( <ElementsOverlays /> );
+
+		// Assert
+		await waitFor( () => {
+			const overlay = screen.getByRole( 'presentation' );
+			expect( overlay ).toHaveAttribute( 'data-element-overlay', 'heading-element' );
+		} );
+	} );
 } );

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/__tests__/style-renderer.test.tsx

@@ -46,8 +46,8 @@ describe( '<StyleRenderer />', () => {
 		const mockContainer = document.createElement( 'div' );
 
 		const mockCssItems = [
-			{ id: 'style1', value: '.test { color: red; }', breakpoint: 'desktop' },
-			{ id: 'style2', value: '.test2 { color: blue; }', breakpoint: 'desktop' },
+			{ id: 'style1', value: '.test { color: red; }', breakpoint: 'desktop', state: null },
+			{ id: 'style2', value: '.test2 { color: blue; }', breakpoint: 'desktop', state: null },
 		];
 
 		const mockLinkAttrs = [

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 ];