@elementor/editor-canvas 4.4.0-beta1 → 4.4.0-beta2

package/dist/index.mjs

@@ -1122,7 +1122,7 @@ import * as React9 from "react";
 import {
   __privateUseListenTo as useListenTo5,
   commandEndEvent as commandEndEvent3,
-  getCanvasIframeDocument as getCanvasIframeDocument4
+  getCanvasIframeDocument as getCanvasIframeDocument5
 } from "@elementor/editor-v1-adapters";
 import { Portal as Portal2 } from "@elementor/ui";
 
@@ -1239,6 +1239,25 @@ function signalizedProcess(signal, steps = []) {
   };
 }
 
+// src/hooks/use-pregenerated-links-handoff.ts
+import { useLayoutEffect } from "react";
+import { getCanvasIframeDocument as getCanvasIframeDocument4 } from "@elementor/editor-v1-adapters";
+function usePregeneratedLinksHandoff(canvasHead, renderedProviders) {
+  useLayoutEffect(() => {
+    if (!isCurrentCanvasHead(canvasHead)) {
+      return;
+    }
+    Object.entries(renderedProviders).forEach(([providerKey, { provider, items }]) => {
+      if (items.length > 0 && provider.isPregeneratedLink) {
+        removeProviderPregeneratedLinks(providerKey, provider.isPregeneratedLink);
+      }
+    });
+  }, [canvasHead, renderedProviders]);
+}
+function isCurrentCanvasHead(canvasHead) {
+  return !!canvasHead && canvasHead === getCanvasIframeDocument4()?.head;
+}
+
 // src/hooks/use-style-prop-resolver.ts
 import { useMemo as useMemo3 } from "react";
 import { getStylesSchema } from "@elementor/editor-styles";
@@ -1524,7 +1543,7 @@ function useStyleRenderer(resolve) {
 }
 
 // src/hooks/use-style-items.ts
-function useStyleItems() {
+function useStyleItems(canvasHead) {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = useBreakpoints();
@@ -1571,6 +1590,7 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
+  usePregeneratedLinksHandoff(canvasHead, styleItems);
   const breakpointSorter = useMemo5(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
@@ -1608,9 +1628,6 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getC
       const cache = getCache();
       const hasDiffInfo = current !== void 0 && previous !== void 0;
       const hasCache = cache.orderedIds.length > 0;
-      if (hasCache && provider.isPregeneratedLink) {
-        removeProviderPregeneratedLinks(provider.getKey(), provider.isPregeneratedLink);
-      }
       if (hasDiffInfo && hasCache) {
         return updateItems(cache, previous, current, signal);
       }
@@ -1712,7 +1729,7 @@ function rebuildCache(cache, allStyles, items) {
 // src/components/style-renderer.tsx
 function StyleRenderer() {
   const container = usePortalContainer2();
-  const styleItems = useStyleItems();
+  const styleItems = useStyleItems(container);
   const linksAttrs = useDocumentsCssLinks();
   if (!container) {
     return null;
@@ -1720,7 +1737,7 @@ function StyleRenderer() {
   return /* @__PURE__ */ React9.createElement(Portal2, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React9.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React9.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
-  return useListenTo5(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument4()?.head);
+  return useListenTo5(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument5()?.head);
 }
 function filterUniqueStyleDefinitions(styleItems) {
   const seen = /* @__PURE__ */ new Map();
@@ -2793,6 +2810,7 @@ function createDomRenderer() {
   const environment = createEnvironment(loader);
   environment.registerEscapingStrategy(escapeHtmlTag, "html_tag");
   environment.registerEscapingStrategy(escapeURL, "full_url");
+  environment.registerEscapingStrategy(escapeJsIdentifier, "js_identifier");
   return {
     register: loader.setTemplate,
     render: environment.render
@@ -2806,6 +2824,12 @@ function escapeHtmlTag(value) {
   const normalizedTag = value?.toLowerCase?.() ?? "";
   return allowedTags.includes(normalizedTag) ? value : "div";
 }
+var JS_IDENTIFIER_PATTERN = /^[A-Za-z0-9_]+$/;
+function escapeJsIdentifier(value) {
+  const id = String(value ?? "");
+  const match = id.match(JS_IDENTIFIER_PATTERN);
+  return match?.[0] === id ? id : "";
+}
 function escapeURL(value) {
   const allowedProtocols = ["http:", "https:", "mailto:", "tel:"];
   try {
@@ -3592,7 +3616,7 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 import * as React10 from "react";
-import { useCallback as useCallback2, useEffect as useEffect12, useLayoutEffect, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect12, useLayoutEffect as useLayoutEffect2, useState as useState8 } from "react";
 import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { Box as Box3 } from "@elementor/ui";
@@ -3803,7 +3827,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     whileElementsMounted: autoUpdate2,
     middleware: [horizontalShifterMiddleware, flip()]
   });
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
@@ -4312,7 +4336,7 @@ function initTabsModelExtensions() {
 }
 
 // src/mcp/canvas-mcp.ts
-import { Schema as Schema3 } from "@elementor/editor-props";
+import { Schema as Schema4 } from "@elementor/editor-props";
 
 // src/mcp/resources/available-widgets-resource.ts
 import { httpService as httpService3 } from "@elementor/http-client";
@@ -4686,6 +4710,7 @@ var initGeneralContextResource = (reg) => {
 
 // src/mcp/resources/selected-element-resource.ts
 import { getContainer as getContainer3, getSelectedElements, getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
+import { Schema } from "@elementor/editor-props";
 import {
   __privateListenTo as listenTo4,
   commandEndEvent as commandEndEvent7
@@ -4796,13 +4821,19 @@ function getElementProperties(container, widgetType) {
   if (!settings || typeof settings !== "object") {
     return null;
   }
-  const widgetConfig = widgetType ? getWidgetsCache3()?.[widgetType] : null;
+  const widgetsCache = getWidgetsCache3();
+  const widgetConfig = widgetType ? widgetsCache?.[widgetType] : null;
   const controls = widgetConfig?.controls;
+  const schemaType = widgetType ?? container.model.get("elType") ?? null;
+  const propsSchema = schemaType ? widgetsCache?.[schemaType]?.atomic_props_schema : void 0;
   const filtered = {};
   for (const [key, value] of Object.entries(settings)) {
     if (value === void 0 || value === null || value === "") {
       continue;
     }
+    if (Schema.isPropSensitive(propsSchema?.[key])) {
+      continue;
+    }
     const controlDefault = controls?.[key]?.default;
     if (controlDefault !== void 0 && JSON.stringify(value) === JSON.stringify(controlDefault)) {
       continue;
@@ -4836,7 +4867,7 @@ function getElementDisplayName(container) {
 // src/mcp/tools/configure-element/tool.ts
 import { getContainer as getContainer4, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
 import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
-import { Schema as Schema2 } from "@elementor/editor-props";
+import { Schema as Schema3 } from "@elementor/editor-props";
 
 // src/mcp/utils/do-update-element-property.ts
 import {
@@ -4846,7 +4877,7 @@ import {
   updateElementSettings,
   updateElementStyle
 } from "@elementor/editor-elements";
-import { getPropSchemaFromCache as getPropSchemaFromCache2, Schema } from "@elementor/editor-props";
+import { getPropSchemaFromCache as getPropSchemaFromCache2, Schema as Schema2 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema2, getVariantByMeta } from "@elementor/editor-styles";
 import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
 
@@ -4999,7 +5030,7 @@ var UnsupportedPropertyError = class extends Error {
 };
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return Schema.adjustLlmPropValueSchema(value, {
+  return Schema2.adjustLlmPropValueSchema(value, {
     forceKey,
     transformers: {
       ...Utils.globalVariablesLLMResolvers,
@@ -5106,7 +5137,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = Schema2.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -5353,7 +5384,7 @@ var initConfigureElementTool = (reg) => {
       const toUpdate = Object.entries(propertiesToUpdate);
       const skippedProps = [];
       for (const [propertyName, propertyValue] of toUpdate) {
-        if (!Schema2.isPropKeyConfigurable(propertyName)) {
+        if (!Schema3.isPropKeyConfigurable(propertyName, widgetData.atomic_props_schema[propertyName])) {
           throw new Error(`Not allowed to update ${propertyName}`);
         }
         try {
@@ -5614,7 +5645,7 @@ var initGetPageStructureTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  Schema3.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
+  Schema4.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -6220,10 +6251,10 @@ function getRectClipPath(rect, viewport) {
 import {
   __privateUseListenTo as useListenTo6,
   commandEndEvent as commandEndEvent8,
-  getCanvasIframeDocument as getCanvasIframeDocument5
+  getCanvasIframeDocument as getCanvasIframeDocument6
 } from "@elementor/editor-v1-adapters";
 function useCanvasDocument() {
-  return useListenTo6(commandEndEvent8("editor/documents/attach-preview"), () => getCanvasIframeDocument5());
+  return useListenTo6(commandEndEvent8("editor/documents/attach-preview"), () => getCanvasIframeDocument6());
 }
 
 // src/hooks/use-escape-on-canvas.ts

package/package.json

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

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

@@ -64,6 +64,7 @@ describe( '<StyleRenderer />', () => {
 		render( <StyleRenderer /> );
 
 		// Assert.
+		expect( useStyleItems ).toHaveBeenCalledWith( mockContainer );
 		// eslint-disable-next-line testing-library/no-test-id-queries
 		expect( screen.getByTestId( 'portal' ) ).toMatchSnapshot();
 	} );

package/src/components/style-renderer.tsx

@@ -13,7 +13,7 @@ import { type StyleItem } from '../renderers/create-styles-renderer';
 export function StyleRenderer() {
 	const container = usePortalContainer();
 
-	const styleItems = useStyleItems();
+	const styleItems = useStyleItems( container );
 	const linksAttrs = useDocumentsCssLinks();
 
 	if ( ! container ) {

package/src/hooks/__tests__/use-style-items.test.ts

@@ -1,12 +1,18 @@
 import { createMockStyleDefinition, createMockStyleDefinitionWithVariants, createMockStylesProvider } from 'test-utils';
 import { type StyleDefinition } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
-import { registerDataHook } from '@elementor/editor-v1-adapters';
+import { getCanvasIframeDocument, registerDataHook } from '@elementor/editor-v1-adapters';
 import { act, renderHook } from '@testing-library/react';
 
+import { removeProviderPregeneratedLinks } from '../../utils/pregenerated-links-removal';
 import { useStyleItems } from '../use-style-items';
 import { useStyleRenderer } from '../use-style-renderer';
 
+jest.mock( '../../utils/pregenerated-links-removal', () => ( {
+	removeProviderPregeneratedLinks: jest.fn(),
+	resetRemovedProviders: jest.fn(),
+} ) );
+
 jest.mock( '@elementor/editor-styles-repository', () => ( {
 	...jest.requireActual( '@elementor/editor-styles-repository' ),
 	stylesRepository: {
@@ -17,6 +23,7 @@ jest.mock( '@elementor/editor-styles-repository', () => ( {
 jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	...jest.requireActual( '@elementor/editor-v1-adapters' ),
 	registerDataHook: jest.fn(),
+	getCanvasIframeDocument: jest.fn(),
 } ) );
 
 jest.mock( '../use-style-prop-resolver', () => ( {
@@ -513,4 +520,158 @@ describe( 'useStyleItems', () => {
 		expect( renderStylesMock.mock.calls[ 0 ][ 0 ].styles[ 0 ].id ).toBe( 'style2' );
 		expect( result.current ).toHaveLength( 3 );
 	} );
+
+	describe( 'pregenerated links removal', () => {
+		let attachPreviewCallback: () => Promise< void >;
+		let canvasDocument: Document;
+
+		beforeEach( () => {
+			jest.mocked( removeProviderPregeneratedLinks ).mockClear();
+
+			canvasDocument = document.implementation.createHTMLDocument();
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( canvasDocument );
+
+			jest.mocked( registerDataHook ).mockImplementation( ( position, command, callback ) => {
+				if ( command === 'editor/documents/attach-preview' && position === 'after' ) {
+					attachPreviewCallback = callback as never;
+				}
+
+				return null as never;
+			} );
+		} );
+
+		const createProviderWithPregeneratedLinks = ( key: string, styles: StyleDefinition[] ) => ( {
+			...createMockStylesProvider( { key }, styles ),
+			isPregeneratedLink: jest.fn(),
+		} );
+
+		it( 'should not remove pregenerated links before the canvas head is available', async () => {
+			// Arrange.
+			const provider = createProviderWithPregeneratedLinks( 'global-classes', [
+				createMockStyleDefinition( { id: 'style1' } ),
+			] );
+
+			jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ provider ] );
+
+			const { result } = renderHook( () => useStyleItems( null ) );
+
+			// Act.
+			await act( async () => {
+				await attachPreviewCallback?.();
+			} );
+
+			await act( async () => {
+				await attachPreviewCallback?.();
+			} );
+
+			// Assert.
+			expect( result.current ).toHaveLength( 1 );
+			expect( removeProviderPregeneratedLinks ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should remove pregenerated links once rendered items are committed into the canvas head', async () => {
+			// Arrange.
+			const provider = createProviderWithPregeneratedLinks( 'global-classes', [
+				createMockStyleDefinition( { id: 'style1' } ),
+			] );
+
+			jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ provider ] );
+
+			const { rerender } = renderHook( ( { head } ) => useStyleItems( head ), {
+				initialProps: { head: null as HTMLElement | null },
+			} );
+
+			await act( async () => {
+				await attachPreviewCallback?.();
+			} );
+
+			// Act.
+			rerender( { head: canvasDocument.head } );
+
+			// Assert.
+			expect( removeProviderPregeneratedLinks ).toHaveBeenCalledTimes( 1 );
+			expect( removeProviderPregeneratedLinks ).toHaveBeenCalledWith(
+				'global-classes',
+				provider.isPregeneratedLink
+			);
+		} );
+
+		it( 'should not remove pregenerated links while the portal targets a stale document head', async () => {
+			// Arrange.
+			const provider = createProviderWithPregeneratedLinks( 'global-classes', [
+				createMockStyleDefinition( { id: 'style1' } ),
+			] );
+
+			jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ provider ] );
+
+			const staleDocument = document.implementation.createHTMLDocument();
+
+			const { rerender } = renderHook( ( { head } ) => useStyleItems( head ), {
+				initialProps: { head: staleDocument.head },
+			} );
+
+			// Act.
+			await act( async () => {
+				await attachPreviewCallback?.();
+			} );
+
+			// Assert.
+			expect( removeProviderPregeneratedLinks ).not.toHaveBeenCalled();
+
+			// Act.
+			rerender( { head: canvasDocument.head } );
+
+			// Assert.
+			expect( removeProviderPregeneratedLinks ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should keep pregenerated links while the provider has no rendered items', async () => {
+			// Arrange.
+			const placeholderStyle: StyleDefinition = {
+				id: 'g-placeholder',
+				type: 'class',
+				label: 'placeholder',
+				variants: [],
+			};
+
+			const provider = createProviderWithPregeneratedLinks( 'global-classes', [ placeholderStyle ] );
+
+			jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ provider ] );
+
+			const { result } = renderHook( () => useStyleItems( canvasDocument.head ) );
+
+			// Act.
+			await act( async () => {
+				await attachPreviewCallback?.();
+			} );
+
+			await act( async () => {
+				await attachPreviewCallback?.();
+			} );
+
+			// Assert.
+			expect( result.current ).toEqual( [] );
+			expect( removeProviderPregeneratedLinks ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should not remove links for providers without pregenerated links', async () => {
+			// Arrange.
+			const provider = createMockStylesProvider( { key: 'provider1' }, [
+				createMockStyleDefinition( { id: 'style1' } ),
+			] );
+
+			jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ provider ] );
+
+			const { result } = renderHook( () => useStyleItems( canvasDocument.head ) );
+
+			// Act.
+			await act( async () => {
+				await attachPreviewCallback?.();
+			} );
+
+			// Assert.
+			expect( result.current ).toHaveLength( 1 );
+			expect( removeProviderPregeneratedLinks ).not.toHaveBeenCalled();
+		} );
+	} );
 } );

package/src/hooks/use-pregenerated-links-handoff.ts

@@ -0,0 +1,33 @@
+import { useLayoutEffect } from 'react';
+import { type StylesProvider } from '@elementor/editor-styles-repository';
+import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
+
+import { type StyleItem } from '../renderers/create-styles-renderer';
+import { removeProviderPregeneratedLinks } from '../utils/pregenerated-links-removal';
+
+type RenderedProviders = Record< string, { provider: StylesProvider; items: StyleItem[] } >;
+
+// The pregenerated <link /> css can only be dropped once the client-side <style /> tags replacing it are committed
+// into the canvas, otherwise the canvas is painted without any of the provider's styles.
+export function usePregeneratedLinksHandoff(
+	canvasHead: HTMLElement | null | undefined,
+	renderedProviders: RenderedProviders
+) {
+	useLayoutEffect( () => {
+		if ( ! isCurrentCanvasHead( canvasHead ) ) {
+			return;
+		}
+
+		Object.entries( renderedProviders ).forEach( ( [ providerKey, { provider, items } ] ) => {
+			if ( items.length > 0 && provider.isPregeneratedLink ) {
+				removeProviderPregeneratedLinks( providerKey, provider.isPregeneratedLink );
+			}
+		} );
+	}, [ canvasHead, renderedProviders ] );
+}
+
+// The portal container is resolved before the preview document replaces the iframe's initial document,
+// so a stale head would let the live canvas lose its pregenerated links while the styles render elsewhere.
+function isCurrentCanvasHead( canvasHead?: HTMLElement | null ): canvasHead is HTMLElement {
+	return !! canvasHead && canvasHead === getCanvasIframeDocument()?.head;
+}

package/src/hooks/use-style-items.ts

@@ -6,9 +6,10 @@ import { registerDataHook } from '@elementor/editor-v1-adapters';
 
 import { type RendererStyleDefinition, type StyleItem, type StyleRenderer } from '../renderers/create-styles-renderer';
 import { abortPreviousRuns } from '../utils/abort-previous-runs';
-import { removeProviderPregeneratedLinks, resetRemovedProviders } from '../utils/pregenerated-links-removal';
+import { resetRemovedProviders } from '../utils/pregenerated-links-removal';
 import { signalizedProcess } from '../utils/signalized-process';
 import { useOnMount } from './use-on-mount';
+import { usePregeneratedLinksHandoff } from './use-pregenerated-links-handoff';
 import { useStylePropResolver } from './use-style-prop-resolver';
 import { useStyleRenderer } from './use-style-renderer';
 
@@ -28,7 +29,7 @@ type ProviderAndSubscriber = {
 
 type ProviderAndStyleItemsMap = Record< string, ProviderAndStyleItems >;
 
-export function useStyleItems() {
+export function useStyleItems( canvasHead?: HTMLElement | null ) {
 	const resolve = useStylePropResolver();
 	const renderStyles = useStyleRenderer( resolve );
 	const breakpoints = useBreakpoints();
@@ -88,6 +89,8 @@ export function useStyleItems() {
 		} );
 	} );
 
+	usePregeneratedLinksHandoff( canvasHead, styleItems );
+
 	const breakpointSorter = useMemo(
 		() => createBreakpointSorter( breakpoints.map( ( breakpoint ) => breakpoint.id ) ),
 		[ breakpoints ]
@@ -158,11 +161,6 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, getC
 				const hasDiffInfo = current !== undefined && previous !== undefined;
 				const hasCache = cache.orderedIds.length > 0;
 
-				if ( hasCache && provider.isPregeneratedLink ) {
-					// if styles were rendered already (i.e. hasCache = true), we can safely remove the pregenerated css rules imported via <link /> tags
-					removeProviderPregeneratedLinks( provider.getKey(), provider.isPregeneratedLink );
-				}
-
 				if ( hasDiffInfo && hasCache ) {
 					return updateItems( cache, previous, current, signal );
 				}

package/src/mcp/resources/__tests__/selected-element-resource.test.ts

@@ -0,0 +1,106 @@
+import { getContainer, getSelectedElements, getWidgetsCache } from '@elementor/editor-elements';
+
+import { initSelectedElementResource } from '../selected-element-resource';
+
+jest.mock( '@elementor/editor-elements', () => ( {
+	getContainer: jest.fn(),
+	getSelectedElements: jest.fn(),
+	getWidgetsCache: jest.fn(),
+} ) );
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	__privateListenTo: jest.fn(),
+	commandEndEvent: jest.fn(),
+} ) );
+
+type ResourceHandler = () => Promise< { contents: { text: string }[] } >;
+
+const stringProp = ( meta: Record< string, unknown > = {} ) => ( {
+	kind: 'plain',
+	key: 'string',
+	settings: {},
+	meta,
+} );
+
+const givenSelectedContainer = ( modelProps: Record< string, unknown >, settings: Record< string, unknown > ) => {
+	jest.mocked( getSelectedElements ).mockReturnValue( [ { id: 'el-1' } ] as never );
+	jest.mocked( getContainer ).mockReturnValue( {
+		id: 'el-1',
+		type: modelProps.widgetType ? 'widget' : ( modelProps.elType as string ),
+		model: {
+			get: ( key: string ) => modelProps[ key ],
+			config: { atomic: true },
+		},
+		settings: {
+			toJSON: () => settings,
+		},
+	} as never );
+};
+
+const readProperties = async () => {
+	const resource = jest.fn();
+	initSelectedElementResource( { resource, sendResourceUpdated: jest.fn() } as never );
+
+	const handler = resource.mock.calls[ 0 ][ 3 ] as ResourceHandler;
+	const result = await handler();
+
+	return JSON.parse( result.contents[ 0 ].text ).properties;
+};
+
+describe( 'selected-element-resource', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'omits sensitive props of an atomic widget', async () => {
+		// Arrange.
+		jest.mocked( getWidgetsCache ).mockReturnValue( {
+			'e-heading': {
+				atomic_props_schema: {
+					tag: stringProp(),
+					api_key: stringProp( { sensitive: true } ),
+				},
+			},
+		} as never );
+
+		givenSelectedContainer(
+			{ elType: 'widget', widgetType: 'e-heading' },
+			{
+				tag: { $$type: 'string', value: 'h2' },
+				api_key: { $$type: 'string', value: 'secret' },
+			}
+		);
+
+		// Act.
+		const properties = await readProperties();
+
+		// Assert.
+		expect( properties ).toEqual( { tag: { $$type: 'string', value: 'h2' } } );
+	} );
+
+	it( 'omits sensitive props of an atomic element that has no widgetType', async () => {
+		// Arrange.
+		jest.mocked( getWidgetsCache ).mockReturnValue( {
+			'e-form': {
+				atomic_props_schema: {
+					'form-name': stringProp(),
+					'mailchimp-api-key': stringProp( { sensitive: true } ),
+				},
+			},
+		} as never );
+
+		givenSelectedContainer(
+			{ elType: 'e-form' },
+			{
+				'form-name': { $$type: 'string', value: 'Contact' },
+				'mailchimp-api-key': { $$type: 'string', value: 'secret' },
+			}
+		);
+
+		// Act.
+		const properties = await readProperties();
+
+		// Assert.
+		expect( properties ).toEqual( { 'form-name': { $$type: 'string', value: 'Contact' } } );
+	} );
+} );