@elementor/editor-canvas 4.0.0-682 → 4.0.0-beta5

package/src/legacy/replacements/manager.ts

@@ -1,3 +1,5 @@
+import { createRoot, type Root } from 'react-dom/client';
+
 import type { CreateTemplatedElementTypeOptions } from '../create-templated-element-type';
 import { createTemplatedElementView } from '../create-templated-element-type';
 import type { ElementType, ElementView, LegacyWindow, ReplacementSettings } from '../types';
@@ -34,11 +36,18 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 	return class extends TemplatedView {
 		#replacement: ReplacementBaseInterface | null = null;
 		#config: ReplacementSettings;
+		#reactContainer: HTMLElement;
+		#reactRoot: Root;
 
 		constructor( ...args: unknown[] ) {
 			super( ...args );
 			const settings = this.model.get( 'settings' );
 
+			this.#reactContainer = this.el.ownerDocument.createElement( 'div' );
+			this.#reactContainer.style.display = 'none';
+			this.el.ownerDocument.body.appendChild( this.#reactContainer );
+			this.#reactRoot = createRoot( this.#reactContainer );
+
 			this.#config = {
 				getSetting: settings.get.bind( settings ),
 				setSetting: settings.set.bind( settings ),
@@ -46,6 +55,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 				type: this?.model?.get( 'widgetType' ) ?? this.container?.model?.get( 'elType' ) ?? null,
 				id: this?.model?.get( 'id' ) ?? null,
 				refreshView: this.refreshView.bind( this ),
+				reactRoot: this.#reactRoot,
+				reactContainer: this.#reactContainer,
 			};
 		}
 
@@ -72,6 +83,8 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 
 		onDestroy() {
 			this.#triggerAltMethod( 'onDestroy' );
+			this.#reactRoot.unmount();
+			this.#reactContainer.remove();
 		}
 
 		_afterRender() {

package/src/legacy/types.ts

@@ -1,3 +1,4 @@
+import { type Root } from 'react-dom/client';
 import { type V1Element } from '@elementor/editor-elements';
 import { type Props, type PropValue } from '@elementor/editor-props';
 
@@ -203,6 +204,7 @@ type BackboneCollection< Model extends object > = {
 
 export type ElementModel = {
 	id: string;
+	originId?: string;
 	elType: string;
 	settings: BackboneModel< Props >;
 	editor_settings: Record< string, unknown >;
@@ -240,4 +242,6 @@ export type ReplacementSettings = {
 	id: string;
 	element: HTMLElement;
 	refreshView: () => void;
+	reactRoot: Root;
+	reactContainer: HTMLElement;
 };

package/src/mcp/canvas-mcp.ts

@@ -10,14 +10,12 @@ import { initGetElementConfigTool } from './tools/get-element-config/tool';
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	const { setMCPDescription } = reg;
 	setMCPDescription(
-		`Everything related to creative design, layout, styling and building the pages, specifically element of type "widget".
+		`Everything related to V4 ( Atomic ) canvas.
 # Canvas workflow for new compositions
-- Check existing global variables
-- Check existing global classes
-- Create missing global variables
-- Create reusable global classes
-- Build valid XML with minimal inline styles (layout/positioning only)
-- Apply global classes to elements`
+- Configure elements settings and styles
+- Build compositions/sections out of V4 atomic elements using context aware designs using the website resources
+- Get and retrieve element configuration values
+`
 	);
 	initWidgetsSchemaResource( reg );
 	initDocumentStructureResource( reg );

package/src/mcp/resources/breakpoints-resource.ts

@@ -5,7 +5,7 @@ import { v1ReadyEvent } from '@elementor/editor-v1-adapters';
 export const BREAKPOINTS_SCHEMA_URI = 'elementor://breakpoints/list';
 
 export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	const getBreakpointsList = () => {
 		const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
@@ -34,9 +34,16 @@ export const initBreakpointsResource = ( reg: MCPRegistryEntry ) => {
 		],
 	} );
 
-	mcpServer.resource( 'breakpoints ', BREAKPOINTS_SCHEMA_URI, () => {
-		return buildResourceResponse();
-	} );
+	resource(
+		'breakpoints ',
+		BREAKPOINTS_SCHEMA_URI,
+		{
+			description: 'Breakpoints list.',
+		},
+		() => {
+			return buildResourceResponse();
+		}
+	);
 
 	window.addEventListener( v1ReadyEvent().name, () => {
 		sendResourceUpdated( {

package/src/mcp/resources/document-structure-resource.ts

@@ -39,7 +39,7 @@ type ElementorContainer = {
 export const DOCUMENT_STRUCTURE_URI = 'elementor://document/structure';
 
 export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
-	const { mcpServer, sendResourceUpdated } = reg;
+	const { resource, sendResourceUpdated } = reg;
 
 	let currentDocumentStructure: string | null = null;
 
@@ -69,18 +69,23 @@ export const initDocumentStructureResource = ( reg: MCPRegistryEntry ) => {
 	// Initialize on load
 	updateDocumentStructure();
 
-	mcpServer.resource( 'document-structure', DOCUMENT_STRUCTURE_URI, async () => {
-		const structure = getDocumentStructure();
-
-		return {
-			contents: [
-				{
-					uri: DOCUMENT_STRUCTURE_URI,
-					text: JSON.stringify( structure, null, 2 ),
-				},
-			],
-		};
-	} );
+	resource(
+		'document-structure',
+		DOCUMENT_STRUCTURE_URI,
+		{
+			description: 'Document structure.',
+		},
+		async () => {
+			return {
+				contents: [
+					{
+						uri: DOCUMENT_STRUCTURE_URI,
+						text: JSON.stringify( getDocumentStructure(), null, 2 ),
+					},
+				],
+			};
+		}
+	);
 };
 
 function getDocumentStructure() {

package/src/mcp/tools/build-composition/tool.ts

@@ -1,3 +1,4 @@
+import { getCurrentDocument } from '@elementor/editor-documents';
 import {
 	createElement,
 	deleteElement,
@@ -10,6 +11,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
 import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
+import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
 import { generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
 
@@ -37,6 +39,8 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 			const errors: Error[] = [];
 			const rootContainers: V1Element[] = [];
 			const documentContainer = getContainer( 'document' ) as unknown as V1Element;
+			const currentDocument = getCurrentDocument();
+			const targetContainer = getCompositionTargetContainer( documentContainer, currentDocument?.type.value );
 			try {
 				const compositionBuilder = CompositionBuilder.fromXMLString( xmlStructure, {
 					createElement,
@@ -50,7 +54,7 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 					configErrors,
 					invalidStyles,
 					rootContainers: generatedRootContainers,
-				} = compositionBuilder.build( documentContainer );
+				} = compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );

package/src/mcp/utils/__tests__/get-composition-target-container.test.ts

@@ -0,0 +1,59 @@
+import { type V1Element } from '@elementor/editor-elements';
+
+import { getCompositionTargetContainer } from '../get-composition-target-container';
+
+const createMockContainer = ( id: string, children?: V1Element[] ): V1Element =>
+	( {
+		id,
+		model: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		settings: { get: jest.fn(), set: jest.fn(), toJSON: jest.fn() },
+		children,
+	} ) as unknown as V1Element;
+
+describe( 'getCompositionTargetContainer', () => {
+	it( 'should return first child when document type is elementor_component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( firstChild );
+	} );
+
+	it( 'should return document container when document type is not a component', () => {
+		// Arrange
+		const firstChild = createMockContainer( 'child-1' );
+		const documentContainer = createMockContainer( 'document', [ firstChild ] );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'page' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when document type is undefined', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, undefined );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+
+	it( 'should return document container when component has no children', () => {
+		// Arrange
+		const documentContainer = createMockContainer( 'document' );
+
+		// Act
+		const result = getCompositionTargetContainer( documentContainer, 'elementor_component' );
+
+		// Assert
+		expect( result ).toBe( documentContainer );
+	} );
+} );

package/src/mcp/utils/get-composition-target-container.ts

@@ -0,0 +1,15 @@
+import { COMPONENT_DOCUMENT_TYPE } from '@elementor/editor-documents';
+import { type V1Element } from '@elementor/editor-elements';
+
+export function getCompositionTargetContainer(
+	documentContainer: V1Element,
+	documentType: string | undefined
+): V1Element {
+	const firstChild = documentContainer.children?.[ 0 ];
+
+	if ( documentType === COMPONENT_DOCUMENT_TYPE && firstChild ) {
+		return firstChild;
+	}
+
+	return documentContainer;
+}

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

@@ -118,6 +118,123 @@ describe( 'renderStyles', () => {
 	} );
 } );
 
+describe( 'breakpoint deduplication', () => {
+	it( 'should render all breakpoints when same id has multiple breakpoint variants', async () => {
+		// Arrange - simulates output from breakToBreakpoints in use-style-items.
+		const desktopStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [ { meta: { breakpoint: null, state: null }, props: { 'font-size': '16px' }, custom_css: null } ],
+		};
+		const tabletStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const mobileStyle: RendererStyleDefinition = {
+			...desktopStyle,
+			variants: [
+				{ meta: { breakpoint: 'mobile', state: null }, props: { 'font-size': '12px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+				mobile: { width: 768, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ desktopStyle, tabletStyle, mobileStyle ] } );
+
+		// Assert - all three breakpoints must be rendered (previously tablet/mobile were dropped).
+		expect( result ).toHaveLength( 3 );
+		expect( result.map( ( r ) => r.breakpoint ) ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
+		expect( result[ 0 ].value ).toContain( 'font-size:16px' );
+		expect( result[ 1 ].value ).toContain( '@media(max-width:992px)' );
+		expect( result[ 1 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 2 ].value ).toContain( '@media(max-width:768px)' );
+		expect( result[ 2 ].value ).toContain( 'font-size:12px' );
+	} );
+
+	it( 'should deduplicate same id + breakpoint + state combinations', async () => {
+		// Arrange - two styles with same id, breakpoint, and state should dedupe.
+		const style1: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const style2: RendererStyleDefinition = {
+			...style1,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ style1, style2 ] } );
+
+		// Assert - should only render first occurrence.
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+	} );
+
+	it( 'should render separately when same id + breakpoint have different states', async () => {
+		// Arrange - same id and breakpoint but different states should NOT dedupe.
+		const normalStyle: RendererStyleDefinition = {
+			id: 'button-style',
+			type: 'class',
+			cssName: 'e-button',
+			label: 'Button',
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: null }, props: { 'font-size': '14px' }, custom_css: null },
+			],
+		};
+		const hoverStyle: RendererStyleDefinition = {
+			...normalStyle,
+			variants: [
+				{ meta: { breakpoint: 'tablet', state: 'hover' }, props: { 'font-size': '16px' }, custom_css: null },
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( {
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+			} as BreakpointsMap,
+			resolve,
+		} );
+
+		// Act.
+		const result = await renderStyles( { styles: [ normalStyle, hoverStyle ] } );
+
+		// Assert - both should be rendered since states differ.
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].state ).toBeNull();
+		expect( result[ 0 ].value ).toContain( 'font-size:14px' );
+		expect( result[ 1 ].state ).toBe( 'hover' );
+		expect( result[ 1 ].value ).toContain( 'font-size:16px' );
+	} );
+} );
+
 describe( 'custom_css rendering', () => {
 	it( 'should not render custom_css if raw is empty', async () => {
 		// Arrange.

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

@@ -46,14 +46,24 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 	class: '.',
 };
 
+const DEFAULT_BREAKPOINT = 'desktop';
+const DEFAULT_STATE = 'normal';
+
+function getStyleUniqueKey( style: RendererStyleDefinition ): string {
+	const breakpoint = style.variants[ 0 ]?.meta?.breakpoint ?? DEFAULT_BREAKPOINT;
+	const state = style.variants[ 0 ]?.meta?.state ?? DEFAULT_STATE;
+	return `${ style.id }-${ breakpoint }-${ state }`;
+}
+
 export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '' }: CreateStyleRendererArgs ) {
 	return async ( { styles, signal }: StyleRendererArgs ): Promise< StyleItem[] > => {
-		const seenIds = new Set< string >();
+		const seenKeys = new Set< string >();
 		const uniqueStyles = styles.filter( ( style ) => {
-			if ( seenIds.has( style.id ) ) {
+			const key = getStyleUniqueKey( style );
+			if ( seenKeys.has( key ) ) {
 				return false;
 			}
-			seenIds.add( style.id );
+			seenKeys.add( key );
 			return true;
 		} );
 

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

@@ -0,0 +1,184 @@
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { svgSrcTransformer } from '../svg-src-transformer';
+
+jest.mock( '@elementor/wp-media' );
+
+const mockedGetMediaAttachment = jest.mocked( getMediaAttachment );
+
+const SAMPLE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100v100H0z"/></svg>';
+
+const mockFetch = ( body: string, contentType = 'image/svg+xml', ok = true ) => {
+	global.fetch = jest.fn().mockResolvedValue( {
+		ok,
+		headers: new Headers( { 'content-type': contentType } ),
+		text: () => Promise.resolve( body ),
+	} );
+};
+
+describe( 'svgSrcTransformer', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	it( 'fetches SVG and returns processed html with currentColor fill', async () => {
+		// Arrange.
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/icon.svg' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'fill="currentColor"' ),
+			url: 'https://example.com/icon.svg',
+		} );
+	} );
+
+	it( 'adds inline styles to the svg element', async () => {
+		// Arrange.
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = ( await svgSrcTransformer(
+			{ id: null, url: 'https://example.com/icon.svg' },
+			{ key: 'svg' }
+		) ) as { html: string; url: string };
+
+		// Assert.
+		expect( result.html ).toContain( 'width: 100%' );
+		expect( result.html ).toContain( 'height: 100%' );
+		expect( result.html ).toContain( 'overflow: unset' );
+	} );
+
+	it( 'returns null html when url is null', async () => {
+		// Arrange & Act.
+		const result = await svgSrcTransformer( { id: null, url: null }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+		expect( mockedGetMediaAttachment ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resolves url from attachment id then fetches SVG', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( {
+			url: 'https://example.com/resolved.svg',
+		} as never );
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: 42, url: null }, { key: 'svg' } );
+
+		// Assert.
+		expect( mockedGetMediaAttachment ).toHaveBeenCalledWith( { id: 42 } );
+		expect( result ).toEqual( {
+			html: expect.stringContaining( 'fill="currentColor"' ),
+			url: 'https://example.com/resolved.svg',
+		} );
+	} );
+
+	it( 'falls back to provided url when attachment lookup fails', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( null as never );
+		mockFetch( SAMPLE_SVG );
+
+		// Act.
+		const result = ( await svgSrcTransformer(
+			{ id: 99, url: 'https://example.com/fallback.svg' },
+			{ key: 'svg' }
+		) ) as { html: string; url: string };
+
+		// Assert.
+		expect( result.url ).toBe( 'https://example.com/fallback.svg' );
+		expect( result.html ).toContain( 'fill="currentColor"' );
+	} );
+
+	it( 'returns null html when id is set but attachment and url are missing', async () => {
+		// Arrange.
+		mockedGetMediaAttachment.mockResolvedValue( null as never );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: 7, url: null }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( { html: null, url: null } );
+	} );
+
+	it( 'returns null html when fetch fails', async () => {
+		// Arrange.
+		mockFetch( '', 'image/svg+xml', false );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/missing.svg' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: null,
+			url: 'https://example.com/missing.svg',
+		} );
+	} );
+
+	it( 'returns null html when content is not SVG', async () => {
+		// Arrange.
+		mockFetch( '<html><body>Not SVG</body></html>', 'text/html' );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/page.html' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: null,
+			url: 'https://example.com/page.html',
+		} );
+	} );
+
+	it( 'merges with existing style attribute', async () => {
+		// Arrange.
+		const svgWithStyle = '<svg xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0 0"/></svg>';
+		mockFetch( svgWithStyle );
+
+		// Act.
+		const result = ( await svgSrcTransformer(
+			{ id: null, url: 'https://example.com/styled.svg' },
+			{ key: 'svg' }
+		) ) as { html: string; url: string };
+
+		// Assert.
+		expect( result.html ).toContain( 'display: block' );
+		expect( result.html ).toContain( 'width: 100%' );
+	} );
+
+	it( 'returns null html when response has no svg element', async () => {
+		// Arrange.
+		mockFetch( '<div>Not an SVG</div>' );
+
+		// Act.
+		const result = await svgSrcTransformer( { id: null, url: 'https://example.com/not-svg.svg' }, { key: 'svg' } );
+
+		// Assert.
+		expect( result ).toEqual( {
+			html: null,
+			url: 'https://example.com/not-svg.svg',
+		} );
+	} );
+
+	it( 'passes abort signal to fetch', async () => {
+		// Arrange.
+		mockFetch( SAMPLE_SVG );
+		const controller = new AbortController();
+
+		// Act.
+		await svgSrcTransformer(
+			{ id: null, url: 'https://example.com/icon.svg' },
+			{ key: 'svg', signal: controller.signal }
+		);
+
+		// Assert.
+		expect( global.fetch ).toHaveBeenCalledWith( 'https://example.com/icon.svg', { signal: controller.signal } );
+	} );
+} );

package/src/transformers/shared/svg-src-transformer.ts

@@ -0,0 +1,87 @@
+import DOMPurify from 'dompurify';
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { createTransformer } from '../create-transformer';
+import type { TransformerOptions } from '../types';
+
+type SvgSrc = {
+	id?: unknown;
+	url?: unknown;
+};
+
+const SVG_INLINE_STYLES = 'width: 100%; height: 100%; overflow: unset;';
+
+function processSvgContent( svgText: string ): string | null {
+	const sanitized = DOMPurify.sanitize( svgText, {
+		USE_PROFILES: { svg: true, svgFilters: true },
+	} );
+
+	const parser = new DOMParser();
+	const doc = parser.parseFromString( sanitized, 'image/svg+xml' );
+	const svgElement = doc.querySelector( 'svg' );
+
+	if ( ! svgElement ) {
+		return null;
+	}
+
+	svgElement.setAttribute( 'fill', 'currentColor' );
+
+	const existingStyle = svgElement.getAttribute( 'style' ) ?? '';
+	const trimmed = existingStyle.trim();
+	const merged = trimmed ? `${ trimmed.replace( /;$/, '' ) }; ${ SVG_INLINE_STYLES }` : SVG_INLINE_STYLES;
+	svgElement.setAttribute( 'style', merged );
+
+	return svgElement.outerHTML;
+}
+
+async function fetchSvgContent( url: string, signal?: AbortSignal ): Promise< string | null > {
+	try {
+		const response = await fetch( url, { signal } );
+
+		if ( ! response.ok ) {
+			return null;
+		}
+
+		const contentType = response.headers.get( 'content-type' ) ?? '';
+		const isSvg = contentType.includes( 'svg' ) || contentType.includes( 'xml' ) || url.endsWith( '.svg' );
+
+		if ( ! isSvg ) {
+			return null;
+		}
+
+		return await response.text();
+	} catch {
+		return null;
+	}
+}
+
+function resolveSvgSrcId( id: unknown ): number | null {
+	if ( typeof id !== 'number' || id <= 0 ) {
+		return null;
+	}
+
+	return id;
+}
+
+export const svgSrcTransformer = createTransformer( async ( value: SvgSrc, { signal }: TransformerOptions ) => {
+	const id = resolveSvgSrcId( value.id );
+	const urlFromValue = typeof value.url === 'string' ? value.url : null;
+
+	let url: string | null | undefined = urlFromValue;
+
+	if ( id && ! urlFromValue ) {
+		const attachment = await getMediaAttachment( { id } );
+		url = attachment?.url ?? null;
+	}
+
+	const resolvedUrl = typeof url === 'string' ? url : null;
+
+	if ( ! resolvedUrl ) {
+		return { html: null, url: null };
+	}
+
+	const svgText = await fetchSvgContent( resolvedUrl, signal );
+	const html = svgText ? processSvgContent( svgText ) : null;
+
+	return { html, url: resolvedUrl };
+} );