@elementor/editor-canvas 4.3.0-999 → 4.4.0-1065

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

@@ -0,0 +1,122 @@
+import { createTransformer } from '../create-transformer';
+import type { TransformerOptions } from '../types';
+import { processSvgContent } from './process-svg-content';
+
+type IconValue = {
+	value?: unknown;
+	library?: unknown;
+};
+
+type FontAwesomeIconJson = [ number, number, unknown, unknown, string ];
+
+const FONT_AWESOME_JSON = {
+	width: 0,
+	height: 1,
+	path: 4,
+} as const;
+
+const fontAwesomeJsonCache = new Map< string, Record< string, FontAwesomeIconJson > >();
+
+export const iconTransformer = createTransformer( async ( value: IconValue, { signal }: TransformerOptions ) => {
+	const iconValue = typeof value.value === 'string' ? value.value : null;
+	const library = typeof value.library === 'string' ? value.library : null;
+
+	if ( ! iconValue || ! library ) {
+		return { html: null, url: null };
+	}
+
+	const iconName = getFontAwesomeIconName( iconValue );
+	const jsonFileName = getFontAwesomeJsonFileName( library );
+
+	if ( ! iconName || ! jsonFileName ) {
+		return { html: null, url: null };
+	}
+
+	const icons = await fetchFontAwesomeIcons( jsonFileName, signal );
+	const iconData = icons?.[ iconName ];
+
+	if ( ! iconData ) {
+		return { html: null, url: null };
+	}
+
+	const svgText = buildFontAwesomeSvg( iconData );
+	const html = processSvgContent( svgText );
+
+	return { html, url: null };
+} );
+
+function getFontAwesomeIconName( iconValue: string ): string | null {
+	const match = iconValue.match( /^fa\S*\s+fa-(.+)$/ );
+
+	return match?.[ 1 ] ?? null;
+}
+
+function getFontAwesomeJsonFileName( library: string ): string | null {
+	if ( ! library.startsWith( 'fa-' ) ) {
+		return null;
+	}
+
+	return library.replace( /^fa-/, '' );
+}
+
+function getAssetsBaseUrl(): string | null {
+	const assetsUrl = window.elementorCommon?.config?.urls?.assets;
+
+	return typeof assetsUrl === 'string' && assetsUrl !== '' ? assetsUrl : null;
+}
+
+async function fetchFontAwesomeIcons(
+	jsonFileName: string,
+	signal?: AbortSignal
+): Promise< Record< string, FontAwesomeIconJson > | null > {
+	const cached = fontAwesomeJsonCache.get( jsonFileName );
+
+	if ( cached ) {
+		return cached;
+	}
+
+	const icons = await loadFontAwesomeIcons( jsonFileName, signal );
+
+	if ( icons ) {
+		fontAwesomeJsonCache.set( jsonFileName, icons );
+	}
+
+	return icons;
+}
+
+async function loadFontAwesomeIcons(
+	jsonFileName: string,
+	signal?: AbortSignal
+): Promise< Record< string, FontAwesomeIconJson > | null > {
+	const assetsUrl = getAssetsBaseUrl();
+
+	if ( ! assetsUrl ) {
+		return null;
+	}
+
+	try {
+		const response = await fetch( `${ assetsUrl }lib/font-awesome/json/${ jsonFileName }.json`, { signal } );
+
+		if ( ! response.ok ) {
+			return null;
+		}
+
+		const data = ( await response.json() ) as { icons?: Record< string, FontAwesomeIconJson > };
+
+		return data.icons ?? null;
+	} catch {
+		return null;
+	}
+}
+
+function buildFontAwesomeSvg( iconData: FontAwesomeIconJson ): string {
+	const width = iconData[ FONT_AWESOME_JSON.width ];
+	const height = iconData[ FONT_AWESOME_JSON.height ];
+	const path = iconData[ FONT_AWESOME_JSON.path ];
+
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ width } ${ height }"><path d="${ path }"></path></svg>`;
+}
+
+export function resetFontAwesomeIconsCache() {
+	fontAwesomeJsonCache.clear();
+}

package/src/transformers/shared/process-svg-content.ts

@@ -0,0 +1,26 @@
+import DOMPurify from 'dompurify';
+
+const SVG_INLINE_STYLES = 'width: 100%; height: 100%; overflow: unset;';
+
+export 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;
+}

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

@@ -1,39 +1,14 @@
-import DOMPurify from 'dompurify';
 import { getMediaAttachment } from '@elementor/wp-media';
 
 import { createTransformer } from '../create-transformer';
 import type { TransformerOptions } from '../types';
+import { processSvgContent } from './process-svg-content';
 
 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 } );

package/src/utils/__tests__/sanitize-escaped-html.test.ts

@@ -0,0 +1,105 @@
+import { sanitizeEscapedHtml } from '../sanitize-escaped-html';
+
+const TEST_ALLOWED_HTML_WRAPPER_TAGS = [ 'a', 'div', 'span', 'strong' ];
+
+describe( 'sanitizeEscapedHtml', () => {
+	beforeEach( () => {
+		window.elementorCommon = {
+			config: {
+				allowedHTMLWrapperTags: TEST_ALLOWED_HTML_WRAPPER_TAGS,
+			},
+		};
+	} );
+
+	afterEach( () => {
+		delete window.elementorCommon;
+	} );
+
+	it( 'returns an empty string for nullish values', () => {
+		// Arrange & Act & Assert.
+		expect( sanitizeEscapedHtml( null ) ).toBe( '' );
+		expect( sanitizeEscapedHtml( '' ) ).toBe( '' );
+	} );
+
+	it( 'keeps allowed tags and strips disallowed tags', () => {
+		// Arrange.
+		const value = 'Hello <script>alert(1)</script><strong>world</strong>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toBe( 'Hello <strong>world</strong>' );
+	} );
+
+	it( 'fails closed when the localized allowlist is missing', () => {
+		// Arrange.
+		delete window.elementorCommon;
+		const value = '<strong>world</strong>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toBe( 'world' );
+	} );
+
+	it( 'strips javascript href from links', () => {
+		// Arrange.
+		const value = '<a href="javascript:alert(1)">click</a>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).not.toContain( 'javascript:' );
+		expect( result ).toContain( 'click' );
+	} );
+
+	it( 'strips data href from links', () => {
+		// Arrange.
+		const value = '<a href="data:text/html,<script>alert(1)</script>">click</a>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).not.toMatch( /<a\s+href=/i );
+		expect( result ).toContain( 'click' );
+	} );
+
+	it( 'preserves non-operational attributes', () => {
+		// Arrange.
+		const value =
+			'<span id="e-1" class="foo bar" style="color: red;" title="t" lang="en" dir="ltr" role="text" data-x="1" aria-label="label">world</span>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toContain( 'id="e-1"' );
+		expect( result ).toContain( 'class="foo bar"' );
+		expect( result ).toContain( 'style="color: red;"' );
+		expect( result ).toContain( 'title="t"' );
+		expect( result ).toContain( 'lang="en"' );
+		expect( result ).toContain( 'dir="ltr"' );
+		expect( result ).toContain( 'role="text"' );
+		expect( result ).toContain( 'data-x="1"' );
+		expect( result ).toContain( 'aria-label="label"' );
+		expect( result ).toContain( 'world' );
+	} );
+
+	it( 'strips functional event-handler attributes', () => {
+		// Arrange.
+		const value = '<span id="e-1" onclick="evil()" onmouseover="evil()">world</span>';
+
+		// Act.
+		const result = sanitizeEscapedHtml( value );
+
+		// Assert.
+		expect( result ).toContain( 'id="e-1"' );
+		expect( result ).not.toContain( 'onclick' );
+		expect( result ).not.toContain( 'onmouseover' );
+		expect( result ).toContain( 'world' );
+	} );
+} );

package/src/utils/sanitize-escaped-html.ts

@@ -0,0 +1,32 @@
+import DOMPurify from 'dompurify';
+
+const ALLOWED_NON_OPERATIONAL_ATTRS = [
+	'href',
+	'target',
+	'class',
+	'id',
+	'style',
+	'title',
+	'lang',
+	'dir',
+	'role',
+] as const;
+
+function getAllowedHtmlWrapperTags(): readonly string[] {
+	return window.elementorCommon?.config?.allowedHTMLWrapperTags ?? [];
+}
+
+export function sanitizeEscapedHtml( value: string | null ): string {
+	if ( ! value ) {
+		return '';
+	}
+
+	const allowedTags = [ ...getAllowedHtmlWrapperTags() ];
+
+	return DOMPurify.sanitize( value, {
+		ALLOWED_TAGS: allowedTags,
+		ALLOWED_ATTR: [ ...ALLOWED_NON_OPERATIONAL_ATTRS ],
+		ALLOW_DATA_ATTR: true,
+		ALLOW_ARIA_ATTR: true,
+	} );
+}

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

@@ -1,133 +0,0 @@
-import { getCurrentDocument, reloadCurrentDocument } from '@elementor/editor-documents';
-import { getContainer, selectElement } from '@elementor/editor-elements';
-import { type MCPRegistryEntry } from '@elementor/editor-mcp';
-import { AxiosError, type HttpResponse, httpService } from '@elementor/http-client';
-import { z } from '@elementor/schema';
-
-const MCP_PROXY_URL = 'elementor/v1/mcp-proxy';
-
-type BuildCompositionResponse = {
-	success: boolean;
-	post_id: number;
-	root_element_ids: string[];
-	preview_url: string;
-	version: string;
-	resolved_xml: string;
-	llm_instructions: string;
-	warnings?: string[];
-};
-
-export const initBuildCompositionTool = ( reg: MCPRegistryEntry ) => {
-	const { addTool } = reg;
-
-	addTool( {
-		name: 'build-composition',
-		description:
-			'Build a V4 element composition on the Elementor canvas via the server-side MCP ability. ' +
-			'Pass the raw XML tags directly as xmlStructure — do NOT wrap the value in <![CDATA[ ... ]]>, ' +
-			'code fences, or quotes. The document is saved as a draft. Reload the editor after calling ' +
-			'this tool to see the result.',
-		schema: {
-			xmlStructure: z
-				.string()
-				.describe(
-					'Valid XML structure with custom Elementor widget tags. Every element MUST have a unique ' +
-						'configuration-id attribute (e.g. <e-heading configuration-id="hero-title"></e-heading>). ' +
-						'No attributes, classes, IDs, or text nodes in XML. Pass raw XML — do not wrap in CDATA.'
-				),
-			elementConfig: z
-				.record(
-					z.string().describe( 'configuration-id' ),
-					z.record( z.string().describe( 'property name' ), z.any().describe( 'PropValue' ) )
-				)
-				.optional()
-				.describe( 'Map configuration-id → widget PropValues ($$type + value).' ),
-			style: z
-				.record(
-					z.string().describe( 'configuration-id' ),
-					z.record( z.string().describe( 'CSS property name' ), z.string().describe( 'CSS value' ) )
-				)
-				.optional()
-				.describe(
-					'Map configuration-id → raw CSS declarations (property → value strings; no selectors). ' +
-						'Server converts to native styles; unconvertible declarations become the element custom CSS.'
-				),
-			parentId: z
-				.string()
-				.optional()
-				.describe( "ID of the parent container. Omit or pass 'document' to insert at document root." ),
-			dryRun: z
-				.boolean()
-				.optional()
-				.describe( 'If true, validate and return the resolved tree without persisting.' ),
-		},
-		outputSchema: {
-			rootElementIds: z.array( z.string() ),
-			previewUrl: z.string(),
-			version: z.string(),
-			resolvedXml: z.string(),
-			llmInstructions: z.string(),
-			warnings: z.array( z.string() ).optional(),
-		},
-		handler: async ( { xmlStructure, elementConfig, style, parentId, dryRun } ) => {
-			const document = getCurrentDocument();
-
-			if ( ! document?.id ) {
-				throw new Error( 'No active document found.' );
-			}
-
-			try {
-				const { data } = await httpService().post< HttpResponse< BuildCompositionResponse > >( MCP_PROXY_URL, {
-					tool: 'build-composition',
-					input: {
-						post_id: document.id,
-						xml_structure: xmlStructure,
-						element_config: elementConfig ?? {},
-						style: style ?? {},
-						parent_id: parentId ?? 'document',
-						dry_run: dryRun ?? false,
-					},
-				} );
-
-				if ( ! dryRun ) {
-					await reloadCurrentDocument();
-
-					const [ firstRootId ] = data.data.root_element_ids;
-					if ( firstRootId ) {
-						selectElement( firstRootId );
-						getContainer( firstRootId )?.view?.el?.scrollIntoView( {
-							behavior: 'smooth',
-							block: 'center',
-						} );
-					}
-				}
-
-				return {
-					rootElementIds: data.data.root_element_ids,
-					previewUrl: data.data.preview_url,
-					version: data.data.version,
-					resolvedXml: data.data.resolved_xml,
-					llmInstructions: data.data.llm_instructions,
-					warnings: data.data.warnings,
-				};
-			} catch ( error ) {
-				throw new Error( getErrorMessage( error ) );
-			}
-		},
-	} );
-};
-
-function getErrorMessage( error: unknown ): string {
-	if ( error instanceof AxiosError ) {
-		const data = error.response?.data as { message?: string; code?: string } | undefined;
-		if ( data?.message ) {
-			return data.code ? `${ data.code }: ${ data.message }` : data.message;
-		}
-	}
-
-	if ( error instanceof Error ) {
-		return error.message;
-	}
-
-	return 'build-composition failed with an unknown error.';
-}

package/src/mcp/tools/get-element-config/tool.ts

@@ -1,114 +0,0 @@
-import { getContainer, getElementStyles, getWidgetsCache, type V1Element } from '@elementor/editor-elements';
-import { type MCPRegistryEntry } from '@elementor/editor-mcp';
-import { type PropValue, Schema } from '@elementor/editor-props';
-import { z } from '@elementor/schema';
-
-const schema = {
-	elementId: z.string(),
-};
-
-const outputSchema = {
-	properties: z
-		.record( z.string(), z.any() )
-		.describe( 'A record mapping PropTypes to their corresponding PropValues' ),
-	style: z
-		.record( z.string(), z.any() )
-		.describe( 'A record mapping StyleSchema properties to their corresponding PropValues' ),
-	childElements: z
-		.array(
-			z.object( {
-				id: z.string(),
-				elementType: z.string(),
-				childElements: z
-					.array( z.any() )
-					.describe( 'An array of child element IDs, when applicable, same structure recursively' ),
-			} )
-		)
-		.describe( 'An array of child element IDs, when applicable, with recursive structure' ),
-};
-type ElementStructure = {
-	id: string;
-	elementType: string;
-	childElements: ElementStructure[];
-};
-const structuredElements = ( element: V1Element ): ElementStructure[] => {
-	const children = element.children || [];
-	return children.map( ( child ) => {
-		return {
-			id: child.id,
-			elementType: child.model.get( 'elType' ) || child.model.get( 'widgetType' ) || 'unknown',
-			childElements: structuredElements( child ),
-		};
-	} );
-};
-
-export const initGetElementConfigTool = ( reg: MCPRegistryEntry ) => {
-	const { addTool } = reg;
-
-	addTool( {
-		name: 'get-element-configuration-values',
-		description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
-		schema,
-		outputSchema,
-		handler: async ( { elementId } ) => {
-			const element = getContainer( elementId );
-			if ( ! element ) {
-				throw new Error( `Element with ID ${ elementId } not found.` );
-			}
-			const elementType = element.model.get( 'widgetType' ) || element.model.get( 'elType' ) || '';
-			const widgetData = getWidgetsCache()?.[ elementType ];
-			if ( ! widgetData ) {
-				throw new Error(
-					`Unknown element type: ${ elementType }. Check the available-widgets resource for valid types.`
-				);
-			}
-			if ( ! widgetData.atomic_props_schema ) {
-				throw new Error(
-					`This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${ elementType }`
-				);
-			}
-			const elementRawSettings = element.settings;
-			const propSchema = getWidgetsCache()?.[ elementType ]?.atomic_props_schema;
-
-			if ( ! elementRawSettings || ! propSchema ) {
-				throw new Error( `No settings or prop schema found for element ID: ${ elementId }` );
-			}
-
-			const propValues: Record< string, PropValue > = {};
-			const stylePropValues: Record< string, PropValue > = {};
-
-			Schema.configurableKeys( propSchema ).forEach( ( key ) => {
-				propValues[ key ] = structuredClone( elementRawSettings.get( key ) );
-			} );
-			const elementStyles = getElementStyles( elementId ) || {};
-			const localStyle = Object.values( elementStyles ).find( ( style ) => style.label === 'local' );
-
-			if ( localStyle ) {
-				const defaultVariant = localStyle.variants.find(
-					( variant ) => variant.meta.breakpoint === 'desktop' && ! variant.meta.state
-				);
-				if ( defaultVariant ) {
-					const styleProps = defaultVariant.props || {};
-					Object.keys( styleProps ).forEach( ( stylePropName ) => {
-						if ( typeof styleProps[ stylePropName ] !== 'undefined' ) {
-							stylePropValues[ stylePropName ] = structuredClone( styleProps[ stylePropName ] );
-						}
-					} );
-					if ( defaultVariant.custom_css ) {
-						stylePropValues.custom_css = atob( defaultVariant.custom_css.raw );
-					}
-				}
-			}
-
-			return {
-				properties: {
-					...propValues,
-				},
-				style: {
-					...stylePropValues,
-				},
-				childElements: structuredElements( element ),
-			};
-		},
-	} );
-};