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

package/dist/index.js

@@ -586,7 +586,7 @@ function usePortalContainer() {
 
 // src/components/style-renderer.tsx
 var React4 = __toESM(require("react"));
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_ui3 = require("@elementor/ui");
 
 // src/hooks/use-documents-css-links.ts
@@ -641,7 +641,7 @@ var import_react10 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/utils/abort-previous-runs.ts
 function abortPreviousRuns(cb) {
@@ -655,6 +655,30 @@ function abortPreviousRuns(cb) {
   };
 }
 
+// src/utils/pregenerated-links-removal.ts
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var removedProviderKeys = /* @__PURE__ */ new Set();
+function removeProviderPregeneratedLinks(providerKey, removePregeneratedLink) {
+  if (removedProviderKeys.has(providerKey)) {
+    return;
+  }
+  const iframeDocument = (0, import_editor_v1_adapters6.getCanvasIframeDocument)();
+  if (!iframeDocument) {
+    return;
+  }
+  const links = iframeDocument.head.querySelectorAll('link[rel="stylesheet"]');
+  links.forEach((link) => {
+    const { id, href, media } = link;
+    if (removePregeneratedLink({ id, href, media })) {
+      link.remove();
+    }
+  });
+  removedProviderKeys.add(providerKey);
+}
+function resetRemovedProviders() {
+  removedProviderKeys.clear();
+}
+
 // src/utils/signalized-process.ts
 function signalizedProcess(signal, steps = []) {
   return {
@@ -677,7 +701,7 @@ function signalizedProcess(signal, steps = []) {
 // src/hooks/use-style-prop-resolver.ts
 var import_react8 = require("react");
 var import_editor_styles2 = require("@elementor/editor-styles");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-props-resolver.ts
 var import_editor_props2 = require("@elementor/editor-props");
@@ -811,7 +835,7 @@ function useStylePropResolver() {
         if (key !== "font-family" || typeof value !== "string") {
           return;
         }
-        (0, import_editor_v1_adapters6.enqueueFont)(value);
+        (0, import_editor_v1_adapters7.enqueueFont)(value);
       }
     });
   }, []);
@@ -970,7 +994,8 @@ function useStyleItems() {
     };
   }, [providerAndSubscribers]);
   useOnMount(() => {
-    (0, import_editor_v1_adapters7.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    (0, import_editor_v1_adapters8.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+      resetRemovedProviders();
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
@@ -1004,6 +1029,9 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     (abortController, previous, current) => signalizedProcess(abortController.signal).then((_, signal) => {
       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(previous, current, signal);
       }
@@ -1117,7 +1145,7 @@ function StyleRenderer() {
   return /* @__PURE__ */ React4.createElement(import_ui3.Portal, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
-  return (0, import_editor_v1_adapters8.__privateUseListenTo)((0, import_editor_v1_adapters8.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters8.getCanvasIframeDocument)()?.head);
+  return (0, import_editor_v1_adapters9.__privateUseListenTo)((0, import_editor_v1_adapters9.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters9.getCanvasIframeDocument)()?.head);
 }
 function filterUniqueStyleDefinitions(styleItems) {
   const seen = /* @__PURE__ */ new Map();
@@ -1140,7 +1168,7 @@ function filterUniqueStyleDefinitions(styleItems) {
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 
 // src/form-structure/utils.ts
@@ -1200,15 +1228,15 @@ var FORM_FIELDS_OUTSIDE_ALERT = {
   id: "form-fields-outside-form-blocked"
 };
 function initFormAncestorEnforcement() {
-  (0, import_editor_v1_adapters9.blockCommand)({
+  (0, import_editor_v1_adapters10.blockCommand)({
     command: "document/elements/create",
     condition: blockFormFieldCreate
   });
-  (0, import_editor_v1_adapters9.blockCommand)({
+  (0, import_editor_v1_adapters10.blockCommand)({
     command: "document/elements/move",
     condition: blockFormFieldMove
   });
-  (0, import_editor_v1_adapters9.blockCommand)({
+  (0, import_editor_v1_adapters10.blockCommand)({
     command: "document/elements/paste",
     condition: blockFormFieldPaste
   });
@@ -1257,7 +1285,7 @@ function handleBlockedFormField() {
 
 // src/form-structure/prevent-form-nesting-commands.ts
 var import_editor_notifications2 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_i18n2 = require("@wordpress/i18n");
 var FORM_NESTING_ALERT = {
   type: "default",
@@ -1265,15 +1293,15 @@ var FORM_NESTING_ALERT = {
   id: "form-nesting-blocked"
 };
 function initFormNestingPrevention() {
-  (0, import_editor_v1_adapters10.blockCommand)({
+  (0, import_editor_v1_adapters11.blockCommand)({
     command: "document/elements/create",
     condition: blockFormCreate
   });
-  (0, import_editor_v1_adapters10.blockCommand)({
+  (0, import_editor_v1_adapters11.blockCommand)({
     command: "document/elements/move",
     condition: blockFormMove
   });
-  (0, import_editor_v1_adapters10.blockCommand)({
+  (0, import_editor_v1_adapters11.blockCommand)({
     command: "document/elements/paste",
     condition: blockFormPaste
   });
@@ -1425,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
@@ -1441,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
@@ -1778,7 +1866,7 @@ function initStyleTransformers() {
 
 // src/legacy/init-legacy-views.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
-var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
 var import_twing = require("@elementor/twing");
@@ -2326,7 +2414,7 @@ var React6 = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/legacy/replacements/base.ts
@@ -2607,7 +2695,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return !!this.inlineEditorRoot;
   }
   shouldRenderReplacement() {
-    return this.isInlineEditingEligible() && (0, import_editor_v1_adapters11.getCurrentEditMode)() === "edit";
+    return this.isInlineEditingEligible() && (0, import_editor_v1_adapters12.getCurrentEditMode)() === "edit";
   }
   handleRenderInlineEditor = () => {
     if (this.isEditingModeActive() || !this.isInlineEditingEligible()) {
@@ -2685,7 +2773,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       content: parsed.content ? import_editor_props4.stringPropTypeUtil.create(parsed.content) : null,
       children: parsed.children
     });
-    (0, import_editor_v1_adapters11.undoable)(
+    (0, import_editor_v1_adapters12.undoable)(
       {
         do: () => {
           const prevValue = this.getInlineEditablePropValue();
@@ -2727,7 +2815,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return null;
   }
   runCommand(key, value) {
-    (0, import_editor_v1_adapters11.__privateRunCommandSync)(
+    (0, import_editor_v1_adapters12.__privateRunCommandSync)(
       "document/elements/set-settings",
       {
         container: (0, import_editor_elements5.getContainer)(this.id),
@@ -2737,7 +2825,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       },
       { internal: true }
     );
-    (0, import_editor_v1_adapters11.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
+    (0, import_editor_v1_adapters12.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
   }
   getExpectedTag() {
     const tagPropType = this.getTagPropType();
@@ -2889,7 +2977,7 @@ function registerElementType(type, elementTypeGenerator) {
   elementsLegacyTypes[type] = elementTypeGenerator;
 }
 function initLegacyViews() {
-  (0, import_editor_v1_adapters12.__privateListenTo)((0, import_editor_v1_adapters12.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters13.__privateListenTo)((0, import_editor_v1_adapters13.v1ReadyEvent)(), () => {
     const widgetsCache = (0, import_editor_elements6.getWidgetsCache)() ?? {};
     const legacyWindow = window;
     const renderer = createDomRenderer();
@@ -2968,7 +3056,7 @@ function initTabsModelExtensions() {
 }
 
 // src/mcp/resources/document-structure-resource.ts
-var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
   const { resource, sendResourceUpdated } = reg;
@@ -2981,14 +3069,14 @@ var initDocumentStructureResource = (reg) => {
       sendResourceUpdated({ uri: DOCUMENT_STRUCTURE_URI });
     }
   };
-  (0, import_editor_v1_adapters13.__privateListenTo)(
+  (0, import_editor_v1_adapters14.__privateListenTo)(
     [
-      (0, import_editor_v1_adapters13.commandEndEvent)("document/elements/create"),
-      (0, import_editor_v1_adapters13.commandEndEvent)("document/elements/delete"),
-      (0, import_editor_v1_adapters13.commandEndEvent)("document/elements/move"),
-      (0, import_editor_v1_adapters13.commandEndEvent)("document/elements/copy"),
-      (0, import_editor_v1_adapters13.commandEndEvent)("document/elements/paste"),
-      (0, import_editor_v1_adapters13.commandEndEvent)("editor/documents/attach-preview")
+      (0, import_editor_v1_adapters14.commandEndEvent)("document/elements/create"),
+      (0, import_editor_v1_adapters14.commandEndEvent)("document/elements/delete"),
+      (0, import_editor_v1_adapters14.commandEndEvent)("document/elements/move"),
+      (0, import_editor_v1_adapters14.commandEndEvent)("document/elements/copy"),
+      (0, import_editor_v1_adapters14.commandEndEvent)("document/elements/paste"),
+      (0, import_editor_v1_adapters14.commandEndEvent)("editor/documents/attach-preview")
     ],
     updateDocumentStructure
   );
@@ -4197,14 +4285,14 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters14.blockCommand)({
+  (0, import_editor_v1_adapters15.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters14.blockCommand)({
+  (0, import_editor_v1_adapters15.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -4280,7 +4368,7 @@ function shouldBlock(sourceElements, targetElements) {
 // src/style-commands/paste-style.ts
 var import_editor_elements15 = require("@elementor/editor-elements");
 var import_editor_props10 = require("@elementor/editor-props");
-var import_editor_v1_adapters16 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements13 = require("@elementor/editor-elements");
@@ -4327,9 +4415,9 @@ function getTitleForContainers(containers) {
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements14 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters16 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters15.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters16.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -4405,12 +4493,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters15.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters16.blockCommand)({
+  (0, import_editor_v1_adapters17.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters16.__privateListenTo)(
-    (0, import_editor_v1_adapters16.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters17.__privateListenTo)(
+    (0, import_editor_v1_adapters17.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -4461,14 +4549,14 @@ function pasteClasses(containers, classes) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements16 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters17.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters18.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -4512,12 +4600,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters17.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters18.blockCommand)({
+  (0, import_editor_v1_adapters19.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters18.__privateListenTo)(
-    (0, import_editor_v1_adapters18.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters19.__privateListenTo)(
+    (0, import_editor_v1_adapters19.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }

package/dist/index.mjs

@@ -543,7 +543,7 @@ import * as React4 from "react";
 import {
   __privateUseListenTo as useListenTo4,
   commandEndEvent as commandEndEvent3,
-  getCanvasIframeDocument as getCanvasIframeDocument3
+  getCanvasIframeDocument as getCanvasIframeDocument4
 } from "@elementor/editor-v1-adapters";
 import { Portal as Portal2 } from "@elementor/ui";
 
@@ -617,6 +617,30 @@ function abortPreviousRuns(cb) {
   };
 }
 
+// src/utils/pregenerated-links-removal.ts
+import { getCanvasIframeDocument as getCanvasIframeDocument3 } from "@elementor/editor-v1-adapters";
+var removedProviderKeys = /* @__PURE__ */ new Set();
+function removeProviderPregeneratedLinks(providerKey, removePregeneratedLink) {
+  if (removedProviderKeys.has(providerKey)) {
+    return;
+  }
+  const iframeDocument = getCanvasIframeDocument3();
+  if (!iframeDocument) {
+    return;
+  }
+  const links = iframeDocument.head.querySelectorAll('link[rel="stylesheet"]');
+  links.forEach((link) => {
+    const { id, href, media } = link;
+    if (removePregeneratedLink({ id, href, media })) {
+      link.remove();
+    }
+  });
+  removedProviderKeys.add(providerKey);
+}
+function resetRemovedProviders() {
+  removedProviderKeys.clear();
+}
+
 // src/utils/signalized-process.ts
 function signalizedProcess(signal, steps = []) {
   return {
@@ -937,6 +961,7 @@ function useStyleItems() {
   }, [providerAndSubscribers]);
   useOnMount(() => {
     registerDataHook2("after", "editor/documents/attach-preview", async () => {
+      resetRemovedProviders();
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
@@ -970,6 +995,9 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     (abortController, previous, current) => signalizedProcess(abortController.signal).then((_, signal) => {
       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(previous, current, signal);
       }
@@ -1083,7 +1111,7 @@ function StyleRenderer() {
   return /* @__PURE__ */ React4.createElement(Portal2, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React4.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React4.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
-  return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument3()?.head);
+  return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument4()?.head);
 }
 function filterUniqueStyleDefinitions(styleItems) {
   const seen = /* @__PURE__ */ new Map();
@@ -1391,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
@@ -1407,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-736",
+  "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-736",
-    "@elementor/editor-controls": "4.1.0-736",
-    "@elementor/editor-documents": "4.1.0-736",
-    "@elementor/editor-elements": "4.1.0-736",
-    "@elementor/editor-interactions": "4.1.0-736",
-    "@elementor/editor-mcp": "4.1.0-736",
-    "@elementor/editor-notifications": "4.1.0-736",
-    "@elementor/editor-props": "4.1.0-736",
-    "@elementor/editor-responsive": "4.1.0-736",
-    "@elementor/editor-styles": "4.1.0-736",
-    "@elementor/editor-styles-repository": "4.1.0-736",
-    "@elementor/editor-ui": "4.1.0-736",
-    "@elementor/editor-v1-adapters": "4.1.0-736",
-    "@elementor/schema": "4.1.0-736",
-    "@elementor/twing": "4.1.0-736",
+    "@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-736",
-    "@elementor/wp-media": "4.1.0-736",
+    "@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/hooks/use-style-items.ts

@@ -6,6 +6,7 @@ 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 { signalizedProcess } from '../utils/signalized-process';
 import { useOnMount } from './use-on-mount';
 import { useStylePropResolver } from './use-style-prop-resolver';
@@ -69,6 +70,8 @@ export function useStyleItems() {
 
 	useOnMount( () => {
 		registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
+			resetRemovedProviders();
+
 			const promises = providerAndSubscribers.map( async ( { subscriber } ) => subscriber() );
 
 			await Promise.all( promises );
@@ -136,6 +139,11 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 				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( previous, current, signal );
 				}

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

package/src/utils/__tests__/pregenerated-links-removal.test.ts

@@ -0,0 +1,208 @@
+import { type PregeneratedLinkItem } from '@elementor/editor-styles-repository';
+import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
+
+import { removeProviderPregeneratedLinks, resetRemovedProviders } from '../pregenerated-links-removal';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	getCanvasIframeDocument: jest.fn(),
+} ) );
+
+function createLink( id: string, href: string, media: string = 'all' ): HTMLLinkElement {
+	const link = document.createElement( 'link' );
+	link.setAttribute( 'rel', 'stylesheet' );
+	link.setAttribute( 'id', id );
+	link.setAttribute( 'href', href );
+	link.setAttribute( 'media', media );
+
+	return link;
+}
+
+describe( 'pregenerated-links-removal', () => {
+	const createHead = () => {
+		const head = document.createElement( 'head' );
+		head.appendChild( createLink( 'base-desktop-css', 'base-desktop.css' ) );
+		head.appendChild( createLink( 'base-tablet-css', 'base-tablet.css' ) );
+		head.appendChild( createLink( 'global-preview-desktop-css', 'global-preview-desktop.css' ) );
+		head.appendChild( createLink( 'global-preview-mobile_extra-css', 'global-preview-mobile_extra.css' ) );
+		head.appendChild( createLink( 'local-123-preview-desktop-css', 'local-123-preview-desktop.css' ) );
+		head.appendChild( createLink( 'local-456-preview-desktop-css', 'local-456-preview-desktop.css' ) );
+		head.appendChild( createLink( 'elementor-post-123-css', 'elementor-post-123.css' ) );
+		head.appendChild( createLink( 'other-plugin-css', 'other-plugin.css' ) );
+		return head;
+	};
+
+	beforeEach( () => {
+		resetRemovedProviders();
+	} );
+
+	describe( 'removeProviderPregeneratedLinks', () => {
+		it( 'should remove links matching global pattern', () => {
+			// Arrange.
+			const head = createHead();
+			const mockDocument = { head } as Document;
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( mockDocument );
+
+			// Act.
+			removeProviderPregeneratedLinks( 'global-classes', ( { id } ) =>
+				/^global-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+
+			// Assert.
+			const remainingLinkIds = Array.from( head.querySelectorAll( 'link' ) ).map( ( link ) =>
+				link.getAttribute( 'id' )
+			);
+
+			expect( remainingLinkIds ).not.toContain( 'global-preview-desktop-css' );
+			expect( remainingLinkIds ).not.toContain( 'global-preview-mobile_extra-css' );
+			expect( remainingLinkIds ).toContain( 'base-desktop-css' );
+			expect( remainingLinkIds ).toContain( 'local-123-preview-desktop-css' );
+			expect( remainingLinkIds ).toContain( 'other-plugin-css' );
+		} );
+
+		it( 'should remove links matching local pattern', () => {
+			// Arrange.
+			const head = createHead();
+			const mockDocument = { head } as Document;
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( mockDocument );
+
+			// Act.
+			removeProviderPregeneratedLinks( 'document-elements-123', ( { id } ) =>
+				/^local-\d+-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+
+			// Assert.
+			const remainingLinkIds = Array.from( head.querySelectorAll( 'link' ) ).map( ( link ) =>
+				link.getAttribute( 'id' )
+			);
+
+			expect( remainingLinkIds ).not.toContain( 'local-123-preview-desktop-css' );
+			expect( remainingLinkIds ).not.toContain( 'local-456-preview-desktop-css' );
+			expect( remainingLinkIds ).toContain( 'global-preview-desktop-css' );
+			expect( remainingLinkIds ).toContain( 'base-desktop-css' );
+		} );
+
+		it( 'should not remove links when provider was already processed', () => {
+			// Arrange.
+			const head = createHead();
+			const mockDocument = { head } as Document;
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( mockDocument );
+
+			const initialLinkCount = head.querySelectorAll( 'link' ).length;
+
+			// Act.
+			removeProviderPregeneratedLinks( 'global-classes', ( { id } ) =>
+				/^global-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+			const afterFirstRemoval = head.querySelectorAll( 'link' ).length;
+
+			removeProviderPregeneratedLinks( 'global-classes', ( { id } ) =>
+				/^global-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+			const afterSecondCall = head.querySelectorAll( 'link' ).length;
+
+			// Assert.
+			expect( afterFirstRemoval ).toBeLessThan( initialLinkCount );
+			expect( afterSecondCall ).toBe( afterFirstRemoval );
+		} );
+
+		it( 'should handle different providers independently', () => {
+			// Arrange.
+			const head = createHead();
+			const mockDocument = { head } as Document;
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( mockDocument );
+
+			// Act.
+			removeProviderPregeneratedLinks( 'global-classes', ( { id } ) =>
+				/^global-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+			removeProviderPregeneratedLinks( 'document-elements-123', ( { id } ) =>
+				/^local-\d+-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+
+			// Assert.
+			const remainingLinkIds = Array.from( head.querySelectorAll( 'link' ) ).map( ( link ) =>
+				link.getAttribute( 'id' )
+			);
+
+			expect( remainingLinkIds ).not.toContain( 'global-preview-desktop-css' );
+			expect( remainingLinkIds ).not.toContain( 'local-123-preview-desktop-css' );
+			expect( remainingLinkIds ).toContain( 'base-desktop-css' );
+			expect( remainingLinkIds ).toContain( 'elementor-post-123-css' );
+			expect( remainingLinkIds ).toContain( 'other-plugin-css' );
+		} );
+
+		it( 'should do nothing when iframe document is not available', () => {
+			// Arrange.
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( null );
+
+			// Act & Assert - should not throw.
+			expect( () => {
+				removeProviderPregeneratedLinks( 'global-classes', ( { id } ) =>
+					/^global-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+				);
+			} ).not.toThrow();
+		} );
+
+		it( 'should pass id, path, and media from each link to the predicate', () => {
+			const head = document.createElement( 'head' );
+
+			const link1Params = {
+				id: 'test-123',
+				href: 'test-123.css',
+				media: 'all',
+			};
+			const link2Params = {
+				id: 'test-456',
+				href: 'alternative-test-456.css',
+				media: 'screen and (max-width: 1024px)',
+			};
+			const link1 = createLink( link1Params.id, link1Params.href, link1Params.media );
+			const link2 = createLink( link2Params.id, link2Params.href, link2Params.media );
+			head.appendChild( link1 );
+			head.appendChild( link2 );
+
+			const mockDocument = { head } as Document;
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( mockDocument );
+
+			const received: PregeneratedLinkItem[] = [];
+			removeProviderPregeneratedLinks( 'pregenerated-link-attrs', ( item ) => {
+				received.push( item );
+				return false;
+			} );
+
+			expect( received ).toMatchObject( [
+				{ ...link1Params, href: link1.href },
+				{ ...link2Params, href: link2.href },
+			] );
+		} );
+	} );
+
+	describe( 'resetRemovedProviders', () => {
+		it( 'should allow re-removal after reset', () => {
+			// Arrange.
+			const head = createHead();
+			const mockDocument = { head } as Document;
+			jest.mocked( getCanvasIframeDocument ).mockReturnValue( mockDocument );
+
+			removeProviderPregeneratedLinks( 'global-classes', ( { id } ) =>
+				/^global-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+			const countAfterFirstRemoval = head.querySelectorAll( 'link' ).length;
+
+			head.appendChild( createLink( 'global-preview-widescreen-css', 'global-preview-widescreen.css' ) );
+
+			const countAfterAddingNewLink = head.querySelectorAll( 'link' ).length;
+
+			// Act.
+			resetRemovedProviders();
+			removeProviderPregeneratedLinks( 'global-classes', ( { id } ) =>
+				/^global-(preview|frontend)-[a-zA-Z_-]+-css$/.test( id )
+			);
+
+			// Assert.
+			const countAfterSecondRemoval = head.querySelectorAll( 'link' ).length;
+			expect( countAfterAddingNewLink ).toBe( countAfterFirstRemoval + 1 );
+			expect( countAfterSecondRemoval ).toBe( countAfterFirstRemoval );
+		} );
+	} );
+} );

package/src/utils/pregenerated-links-removal.ts

@@ -0,0 +1,35 @@
+import { type PregeneratedLinkItem } from '@elementor/editor-styles-repository';
+import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
+
+const removedProviderKeys = new Set< string >();
+
+export function removeProviderPregeneratedLinks(
+	providerKey: string,
+	removePregeneratedLink: ( pregeneratedLinkItem: PregeneratedLinkItem ) => boolean
+): void {
+	if ( removedProviderKeys.has( providerKey ) ) {
+		return;
+	}
+
+	const iframeDocument = getCanvasIframeDocument();
+
+	if ( ! iframeDocument ) {
+		return;
+	}
+
+	const links = iframeDocument.head.querySelectorAll< HTMLLinkElement >( 'link[rel="stylesheet"]' );
+
+	links.forEach( ( link ) => {
+		const { id, href, media } = link;
+
+		if ( removePregeneratedLink( { id, href, media } ) ) {
+			link.remove();
+		}
+	} );
+
+	removedProviderKeys.add( providerKey );
+}
+
+export function resetRemovedProviders(): void {
+	removedProviderKeys.clear();
+}