@elementor/editor-canvas 4.1.0-737 → 4.1.0-739

package/dist/index.js

@@ -1187,6 +1187,9 @@ function getArgsElementType(args) {
 function getElementType(element) {
   return element?.model.get("widgetType") || element?.model.get("elType");
 }
+function getClipboardElementType(element) {
+  return element?.widgetType || element?.elType;
+}
 function isElementWithinFormSelector(element) {
   return !!element?.view?.el?.closest('form,[data-element_type="e-form"]');
 }
@@ -1204,7 +1207,7 @@ function hasElementTypes(element, types) {
 }
 function hasClipboardElementType(elements, type) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType === type) {
       return true;
     }
@@ -1213,13 +1216,22 @@ function hasClipboardElementType(elements, type) {
 }
 function hasClipboardElementTypes(elements, types) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType && types.has(elementType)) {
       return true;
     }
     return element.elements ? hasClipboardElementTypes(element.elements, types) : false;
   });
 }
+function movedContainersIncludeAtomicFormRoot(containers) {
+  return containers.some((container) => getElementType(container) === FORM_ELEMENT_TYPE);
+}
+function clipboardRootsAreAtomicForms(elements) {
+  if (!elements.length) {
+    return false;
+  }
+  return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -1257,7 +1269,7 @@ function blockFormFieldMove(args) {
   const hasFormFieldElement = containers.some(
     (container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
   );
-  if (hasFormFieldElement && !isWithinForm(target)) {
+  if (hasFormFieldElement && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
     handleBlockedFormField();
     return true;
   }
@@ -1273,7 +1285,7 @@ function blockFormFieldPaste(args) {
     return false;
   }
   const hasFormFieldElement = hasClipboardElementTypes(data.clipboard.elements, FORM_FIELD_ELEMENT_TYPES);
-  if (hasFormFieldElement && !isWithinForm(args.container)) {
+  if (hasFormFieldElement && !isWithinForm(args.container) && !clipboardRootsAreAtomicForms(data.clipboard.elements)) {
     handleBlockedFormField();
     return true;
   }
@@ -1453,14 +1465,74 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/video-src-transformer.ts
+// src/transformers/shared/svg-src-transformer.ts
+var import_dompurify = __toESM(require("dompurify"));
 var import_wp_media2 = require("@elementor/wp-media");
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  const sanitized = import_dompurify.default.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, signal) {
+  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) {
+  if (typeof id !== "number" || id <= 0) {
+    return null;
+  }
+  return id;
+}
+var svgSrcTransformer = createTransformer(async (value, { signal }) => {
+  const id = resolveSvgSrcId(value.id);
+  const urlFromValue = typeof value.url === "string" ? value.url : null;
+  let url = urlFromValue;
+  if (id && !urlFromValue) {
+    const attachment = await (0, import_wp_media2.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 };
+});
+
+// src/transformers/shared/video-src-transformer.ts
+var import_wp_media3 = require("@elementor/wp-media");
 var videoSrcTransformer = createTransformer(async (value) => {
   const { id, url } = value;
   if (!id) {
     return { id: null, url };
   }
-  const attachment = await (0, import_wp_media2.getMediaAttachment)({ id });
+  const attachment = await (0, import_wp_media3.getMediaAttachment)({ id });
   return {
     id,
     url: attachment?.url ?? url
@@ -1469,7 +1541,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).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).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts

package/dist/index.mjs

@@ -1153,6 +1153,9 @@ function getArgsElementType(args) {
 function getElementType(element) {
   return element?.model.get("widgetType") || element?.model.get("elType");
 }
+function getClipboardElementType(element) {
+  return element?.widgetType || element?.elType;
+}
 function isElementWithinFormSelector(element) {
   return !!element?.view?.el?.closest('form,[data-element_type="e-form"]');
 }
@@ -1170,7 +1173,7 @@ function hasElementTypes(element, types) {
 }
 function hasClipboardElementType(elements, type) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType === type) {
       return true;
     }
@@ -1179,13 +1182,22 @@ function hasClipboardElementType(elements, type) {
 }
 function hasClipboardElementTypes(elements, types) {
   return elements.some((element) => {
-    const elementType = element.widgetType || element.elType;
+    const elementType = getClipboardElementType(element);
     if (elementType && types.has(elementType)) {
       return true;
     }
     return element.elements ? hasClipboardElementTypes(element.elements, types) : false;
   });
 }
+function movedContainersIncludeAtomicFormRoot(containers) {
+  return containers.some((container) => getElementType(container) === FORM_ELEMENT_TYPE);
+}
+function clipboardRootsAreAtomicForms(elements) {
+  if (!elements.length) {
+    return false;
+  }
+  return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -1223,7 +1235,7 @@ function blockFormFieldMove(args) {
   const hasFormFieldElement = containers.some(
     (container) => container ? hasElementTypes(container, FORM_FIELD_ELEMENT_TYPES) : false
   );
-  if (hasFormFieldElement && !isWithinForm(target)) {
+  if (hasFormFieldElement && !isWithinForm(target) && !movedContainersIncludeAtomicFormRoot(containers)) {
     handleBlockedFormField();
     return true;
   }
@@ -1239,7 +1251,7 @@ function blockFormFieldPaste(args) {
     return false;
   }
   const hasFormFieldElement = hasClipboardElementTypes(data.clipboard.elements, FORM_FIELD_ELEMENT_TYPES);
-  if (hasFormFieldElement && !isWithinForm(args.container)) {
+  if (hasFormFieldElement && !isWithinForm(args.container) && !clipboardRootsAreAtomicForms(data.clipboard.elements)) {
     handleBlockedFormField();
     return true;
   }
@@ -1419,14 +1431,74 @@ var plainTransformer = createTransformer((value) => {
   return value;
 });
 
-// src/transformers/shared/video-src-transformer.ts
+// src/transformers/shared/svg-src-transformer.ts
+import DOMPurify from "dompurify";
 import { getMediaAttachment as getMediaAttachment2 } from "@elementor/wp-media";
+var SVG_INLINE_STYLES = "width: 100%; height: 100%; overflow: unset;";
+function processSvgContent(svgText) {
+  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, signal) {
+  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) {
+  if (typeof id !== "number" || id <= 0) {
+    return null;
+  }
+  return id;
+}
+var svgSrcTransformer = createTransformer(async (value, { signal }) => {
+  const id = resolveSvgSrcId(value.id);
+  const urlFromValue = typeof value.url === "string" ? value.url : null;
+  let url = urlFromValue;
+  if (id && !urlFromValue) {
+    const attachment = await getMediaAttachment2({ 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 };
+});
+
+// src/transformers/shared/video-src-transformer.ts
+import { getMediaAttachment as getMediaAttachment3 } from "@elementor/wp-media";
 var videoSrcTransformer = createTransformer(async (value) => {
   const { id, url } = value;
   if (!id) {
     return { id: null, url };
   }
-  const attachment = await getMediaAttachment2({ id });
+  const attachment = await getMediaAttachment3({ id });
   return {
     id,
     url: attachment?.url ?? url
@@ -1435,7 +1507,7 @@ var videoSrcTransformer = createTransformer(async (value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).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).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("query", queryTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("svg-src", svgSrcTransformer).register("video-src", videoSrcTransformer).register("attributes", attributesTransformer).register("date-time", dateTimeTransformer).register("html-v2", htmlV2Transformer).register("html-v3", htmlV3Transformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts

package/package.json

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

package/src/form-structure/__tests__/form-structure-utils.test.ts

@@ -0,0 +1,70 @@
+import type { V1Element } from '@elementor/editor-elements';
+
+import {
+	clipboardRootsAreAtomicForms,
+	FORM_ELEMENT_TYPE,
+	getClipboardElementType,
+	movedContainersIncludeAtomicFormRoot,
+} from '../utils';
+
+function mockElement( widgetType?: string, elType?: string ): V1Element {
+	return {
+		model: {
+			get: ( key: string ) => {
+				if ( key === 'widgetType' ) {
+					return widgetType;
+				}
+				if ( key === 'elType' ) {
+					return elType;
+				}
+				return undefined;
+			},
+		},
+	} as V1Element;
+}
+
+describe( 'form-structure utils', () => {
+	describe( 'getClipboardElementType', () => {
+		it( 'prefers widgetType over elType', () => {
+			expect( getClipboardElementType( { widgetType: 'e-form-input', elType: 'widget' } ) ).toBe(
+				'e-form-input'
+			);
+		} );
+
+		it( 'falls back to elType', () => {
+			expect( getClipboardElementType( { elType: FORM_ELEMENT_TYPE } ) ).toBe( FORM_ELEMENT_TYPE );
+		} );
+
+		it( 'returns undefined when absent', () => {
+			expect( getClipboardElementType( {} ) ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'movedContainersIncludeAtomicFormRoot', () => {
+		it( 'returns true when a top-level moved container is e-form', () => {
+			const form = mockElement( undefined, FORM_ELEMENT_TYPE );
+
+			expect( movedContainersIncludeAtomicFormRoot( [ form ] ) ).toBe( true );
+		} );
+
+		it( 'returns false when moved containers are only form fields', () => {
+			const input = mockElement( 'e-form-input', 'widget' );
+
+			expect( movedContainersIncludeAtomicFormRoot( [ input ] ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'clipboardRootsAreAtomicForms', () => {
+		it( 'returns true when every root is e-form', () => {
+			expect( clipboardRootsAreAtomicForms( [ { elType: FORM_ELEMENT_TYPE, elements: [] } ] ) ).toBe( true );
+		} );
+
+		it( 'returns false when a root is a bare form field', () => {
+			expect( clipboardRootsAreAtomicForms( [ { widgetType: 'e-form-input', elements: [] } ] ) ).toBe( false );
+		} );
+
+		it( 'returns false for empty roots', () => {
+			expect( clipboardRootsAreAtomicForms( [] ) ).toBe( false );
+		} );
+	} );
+} );

package/src/form-structure/enforce-form-ancestor-commands.ts

@@ -3,6 +3,7 @@ import { blockCommand } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import {
+	clipboardRootsAreAtomicForms,
 	type CreateArgs,
 	FORM_FIELD_ELEMENT_TYPES,
 	getArgsElementType,
@@ -10,6 +11,7 @@ import {
 	hasElementTypes,
 	isWithinForm,
 	type MoveArgs,
+	movedContainersIncludeAtomicFormRoot,
 	type PasteArgs,
 	type StorageContent,
 } from './utils';
@@ -60,7 +62,7 @@ function blockFormFieldMove( args: MoveArgs ): boolean {
 		container ? hasElementTypes( container, FORM_FIELD_ELEMENT_TYPES ) : false
 	);
 
-	if ( hasFormFieldElement && ! isWithinForm( target ) ) {
+	if ( hasFormFieldElement && ! isWithinForm( target ) && ! movedContainersIncludeAtomicFormRoot( containers ) ) {
 		handleBlockedFormField();
 
 		return true;
@@ -86,7 +88,11 @@ function blockFormFieldPaste( args: PasteArgs ): boolean {
 
 	const hasFormFieldElement = hasClipboardElementTypes( data.clipboard.elements, FORM_FIELD_ELEMENT_TYPES );
 
-	if ( hasFormFieldElement && ! isWithinForm( args.container ) ) {
+	if (
+		hasFormFieldElement &&
+		! isWithinForm( args.container ) &&
+		! clipboardRootsAreAtomicForms( data.clipboard.elements )
+	) {
 		handleBlockedFormField();
 
 		return true;

package/src/form-structure/utils.ts

@@ -50,6 +50,10 @@ export function getElementType( element?: V1Element ): string | undefined {
 	return element?.model.get( 'widgetType' ) || element?.model.get( 'elType' );
 }
 
+export function getClipboardElementType( element?: ClipboardElement ): string | undefined {
+	return element?.widgetType || element?.elType;
+}
+
 export function isElementWithinFormSelector( element?: V1Element ): boolean {
 	return !! element?.view?.el?.closest( 'form,[data-element_type="e-form"]' );
 }
@@ -72,7 +76,7 @@ export function hasElementTypes( element: V1Element, types: Set< string > ): boo
 
 export function hasClipboardElementType( elements: ClipboardElement[], type: string ): boolean {
 	return elements.some( ( element ) => {
-		const elementType = element.widgetType || element.elType;
+		const elementType = getClipboardElementType( element );
 
 		if ( elementType === type ) {
 			return true;
@@ -84,7 +88,7 @@ export function hasClipboardElementType( elements: ClipboardElement[], type: str
 
 export function hasClipboardElementTypes( elements: ClipboardElement[], types: Set< string > ): boolean {
 	return elements.some( ( element ) => {
-		const elementType = element.widgetType || element.elType;
+		const elementType = getClipboardElementType( element );
 
 		if ( elementType && types.has( elementType ) ) {
 			return true;
@@ -93,3 +97,15 @@ export function hasClipboardElementTypes( elements: ClipboardElement[], types: S
 		return element.elements ? hasClipboardElementTypes( element.elements, types ) : false;
 	} );
 }
+
+export function movedContainersIncludeAtomicFormRoot( containers: ( V1Element | undefined )[] ): boolean {
+	return containers.some( ( container ) => getElementType( container ) === FORM_ELEMENT_TYPE );
+}
+
+export function clipboardRootsAreAtomicForms( elements: ClipboardElement[] ): boolean {
+	if ( ! elements.length ) {
+		return false;
+	}
+
+	return elements.every( ( el ) => getClipboardElementType( el ) === FORM_ELEMENT_TYPE );
+}

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 { svgSrcTransformer } from './transformers/shared/svg-src-transformer';
 import { videoSrcTransformer } from './transformers/shared/video-src-transformer';
 
 export function initSettingsTransformers() {
@@ -18,6 +19,7 @@ export function initSettingsTransformers() {
 		.register( 'query', queryTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
+		.register( 'svg-src', svgSrcTransformer )
 		.register( 'video-src', videoSrcTransformer )
 		.register( 'attributes', attributesTransformer )
 		.register( 'date-time', dateTimeTransformer )

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 };
+} );