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

package/dist/index.js

@@ -1453,14 +1453,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 +1529,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

@@ -1419,14 +1419,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 +1495,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-738",
   "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-738",
+    "dompurify": "^3.2.6",
+    "@elementor/editor-controls": "4.1.0-738",
+    "@elementor/editor-documents": "4.1.0-738",
+    "@elementor/editor-elements": "4.1.0-738",
+    "@elementor/editor-interactions": "4.1.0-738",
+    "@elementor/editor-mcp": "4.1.0-738",
+    "@elementor/editor-notifications": "4.1.0-738",
+    "@elementor/editor-props": "4.1.0-738",
+    "@elementor/editor-responsive": "4.1.0-738",
+    "@elementor/editor-styles": "4.1.0-738",
+    "@elementor/editor-styles-repository": "4.1.0-738",
+    "@elementor/editor-ui": "4.1.0-738",
+    "@elementor/editor-v1-adapters": "4.1.0-738",
+    "@elementor/schema": "4.1.0-738",
+    "@elementor/twing": "4.1.0-738",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-737",
-    "@elementor/wp-media": "4.1.0-737",
+    "@elementor/utils": "4.1.0-738",
+    "@elementor/wp-media": "4.1.0-738",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

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