@elementor/editor-canvas 4.5.0-1154 → 4.5.0-1156

package/dist/index.js

@@ -1179,7 +1179,7 @@ function usePortalContainer() {
 
 // src/components/style-renderer.tsx
 var React9 = __toESM(require("react"));
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_ui4 = require("@elementor/ui");
 
 // src/hooks/use-documents-css-links.ts
@@ -1230,11 +1230,11 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles3 = require("@elementor/editor-styles");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 
 // src/utils/abort-previous-runs.ts
 function abortPreviousRuns(cb) {
@@ -1291,10 +1291,29 @@ function signalizedProcess(signal, steps = []) {
   };
 }
 
-// src/hooks/use-style-prop-resolver.ts
+// src/hooks/use-pregenerated-links-handoff.ts
 var import_react14 = require("react");
-var import_editor_styles = require("@elementor/editor-styles");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+function usePregeneratedLinksHandoff(canvasHead, renderedProviders) {
+  (0, import_react14.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 === (0, import_editor_v1_adapters8.getCanvasIframeDocument)()?.head;
+}
+
+// src/hooks/use-style-prop-resolver.ts
+var import_react15 = require("react");
+var import_editor_styles = require("@elementor/editor-styles");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-props-resolver.ts
 var import_editor_props = require("@elementor/editor-props");
@@ -1441,19 +1460,19 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return (0, import_react14.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles.getStylesSchema)(),
       onPropResolve: ({ propValue, propType }) => {
-        maybeEnqueueFontFromStyleProp(propType, propValue, import_editor_v1_adapters8.enqueueFont);
+        maybeEnqueueFontFromStyleProp(propType, propValue, import_editor_v1_adapters9.enqueueFont);
       }
     });
   }, []);
 }
 
 // src/hooks/use-style-renderer.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
 // src/renderers/create-styles-renderer.ts
@@ -1562,7 +1581,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = (0, import_editor_responsive.useBreakpointsMap)();
-  return (0, import_react15.useMemo)(() => {
+  return (0, import_react16.useMemo)(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1572,13 +1591,13 @@ function useStyleRenderer(resolve) {
 }
 
 // src/hooks/use-style-items.ts
-function useStyleItems() {
+function useStyleItems(canvasHead) {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = (0, import_editor_responsive2.useBreakpoints)();
-  const [styleItems, setStyleItems] = (0, import_react16.useState)({});
-  const styleItemsCacheRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = (0, import_react16.useMemo)(() => {
+  const [styleItems, setStyleItems] = (0, import_react17.useState)({});
+  const styleItemsCacheRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
+  const providerAndSubscribers = (0, import_react17.useMemo)(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1604,7 +1623,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1613,17 +1632,18 @@ function useStyleItems() {
     };
   }, [providerAndSubscribers]);
   useOnMount(() => {
-    (0, import_editor_v1_adapters9.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    (0, import_editor_v1_adapters10.registerDataHook)("after", "editor/documents/attach-preview", async () => {
       resetRemovedProviders();
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = (0, import_react16.useMemo)(
+  usePregeneratedLinksHandoff(canvasHead, styleItems);
+  const breakpointSorter = (0, import_react17.useMemo)(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return (0, import_react16.useMemo)(
+  return (0, import_react17.useMemo)(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1656,9 +1676,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);
       }
@@ -1760,7 +1777,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;
@@ -1768,7 +1785,7 @@ function StyleRenderer() {
   return /* @__PURE__ */ React9.createElement(import_ui4.Portal, { 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 (0, import_editor_v1_adapters10.__privateUseListenTo)((0, import_editor_v1_adapters10.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters10.getCanvasIframeDocument)()?.head);
+  return (0, import_editor_v1_adapters11.__privateUseListenTo)((0, import_editor_v1_adapters11.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters11.getCanvasIframeDocument)()?.head);
 }
 function filterUniqueStyleDefinitions(styleItems) {
   const seen = /* @__PURE__ */ new Map();
@@ -1791,7 +1808,7 @@ function filterUniqueStyleDefinitions(styleItems) {
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 
 // src/form-structure/utils.ts
@@ -1893,15 +1910,15 @@ var FORM_FIELDS_OUTSIDE_ALERT = {
   id: "form-fields-outside-form-blocked"
 };
 function initFormAncestorEnforcement() {
-  (0, import_editor_v1_adapters11.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/create",
     condition: blockFormFieldCreate
   });
-  (0, import_editor_v1_adapters11.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/move",
     condition: blockFormFieldMove
   });
-  (0, import_editor_v1_adapters11.blockCommand)({
+  (0, import_editor_v1_adapters12.blockCommand)({
     command: "document/elements/paste",
     condition: blockFormFieldPaste
   });
@@ -1951,7 +1968,7 @@ function handleBlockedFormField() {
 
 // src/form-structure/form-atom-added-hints.ts
 var import_editor_notifications2 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_i18n2 = require("@wordpress/i18n");
 var MOVE_COMMAND = "document/elements/move";
 var FORM_ATOM_HINTS = {
@@ -1966,7 +1983,7 @@ var FORM_ATOM_HINTS = {
 };
 var notificationCounter = 0;
 function initFormAtomAddedHints() {
-  (0, import_editor_v1_adapters12.registerDataHook)("after", "document/elements/create", (args, _result, options) => {
+  (0, import_editor_v1_adapters13.registerDataHook)("after", "document/elements/create", (args, _result, options) => {
     if (options?.commandsCurrentTrace?.includes(MOVE_COMMAND)) {
       return;
     }
@@ -1985,7 +2002,7 @@ function initFormAtomAddedHints() {
 
 // src/form-structure/hidden-field-hint.ts
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 var MOVE_COMMAND2 = "document/elements/move";
 var notificationCounter2 = 0;
@@ -1997,7 +2014,7 @@ function createHiddenFieldNotification() {
   };
 }
 function initHiddenFieldHint() {
-  (0, import_editor_v1_adapters13.registerDataHook)("after", "document/elements/create", (args, _result, options) => {
+  (0, import_editor_v1_adapters14.registerDataHook)("after", "document/elements/create", (args, _result, options) => {
     if (options?.commandsCurrentTrace?.includes(MOVE_COMMAND2)) {
       return;
     }
@@ -2010,7 +2027,7 @@ function initHiddenFieldHint() {
 // src/form-structure/prevent-duplicate-form-atoms-commands.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_notifications4 = 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");
 var MOVE_COMMAND3 = "document/elements/move";
 var SINGLE_INSTANCE_FORM_ATOM_ALERTS = {
@@ -2027,10 +2044,10 @@ var SINGLE_INSTANCE_FORM_ATOM_ALERTS = {
 };
 var SINGLE_INSTANCE_FORM_ATOM_TYPES = Object.keys(SINGLE_INSTANCE_FORM_ATOM_ALERTS);
 function initDuplicateFormAtomsPrevention() {
-  (0, import_editor_v1_adapters14.registerDataHook)("dependency", "document/elements/create", (args, options) => {
+  (0, import_editor_v1_adapters15.registerDataHook)("dependency", "document/elements/create", (args, options) => {
     return !blockDuplicateCreate(args, options);
   });
-  (0, import_editor_v1_adapters14.blockCommand)({
+  (0, import_editor_v1_adapters15.blockCommand)({
     command: "document/elements/move",
     condition: blockDuplicateMove
   });
@@ -2074,7 +2091,7 @@ function formHasElementType(form, type, excluded = /* @__PURE__ */ new Set()) {
 
 // src/form-structure/prevent-form-nesting-commands.ts
 var import_editor_notifications5 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters16 = require("@elementor/editor-v1-adapters");
 var import_i18n5 = require("@wordpress/i18n");
 var FORM_NESTING_ALERT = {
   type: "default",
@@ -2082,15 +2099,15 @@ var FORM_NESTING_ALERT = {
   id: "form-nesting-blocked"
 };
 function initFormNestingPrevention() {
-  (0, import_editor_v1_adapters15.blockCommand)({
+  (0, import_editor_v1_adapters16.blockCommand)({
     command: "document/elements/create",
     condition: blockFormCreate
   });
-  (0, import_editor_v1_adapters15.blockCommand)({
+  (0, import_editor_v1_adapters16.blockCommand)({
     command: "document/elements/move",
     condition: blockFormMove
   });
-  (0, import_editor_v1_adapters15.blockCommand)({
+  (0, import_editor_v1_adapters16.blockCommand)({
     command: "document/elements/paste",
     condition: blockFormPaste
   });
@@ -2828,7 +2845,7 @@ function initStyleTransformers() {
 
 // src/legacy/init-legacy-views.ts
 var import_editor_elements9 = require("@elementor/editor-elements");
-var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
 
 // src/renderers/create-dom-renderer.ts
 var import_twing = require("@elementor/twing");
@@ -3579,7 +3596,7 @@ var import_client = require("react-dom/client");
 var React11 = __toESM(require("react"));
 var import_editor_elements8 = require("@elementor/editor-elements");
 var import_editor_props4 = require("@elementor/editor-props");
-var import_editor_v1_adapters16 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/legacy/replacements/base.ts
@@ -3626,14 +3643,14 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 var React10 = __toESM(require("react"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui5 = require("@elementor/ui");
-var import_react19 = require("@floating-ui/react");
+var import_react20 = require("@floating-ui/react");
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3664,8 +3681,8 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
-  const asyncUnmountInlineEditor = (0, import_react17.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  (0, import_react17.useEffect)(() => {
+  const asyncUnmountInlineEditor = (0, import_react18.useCallback)(() => queueMicrotask(handleUnmount), [handleUnmount]);
+  (0, import_react18.useEffect)(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3675,8 +3692,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const [anchor, setAnchor] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3690,7 +3707,7 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  const clearAnchor = (0, import_react17.useCallback)(() => {
+  const clearAnchor = (0, import_react18.useCallback)(() => {
     setAnchor(null);
   }, []);
   return { onSelectionEnd, anchor, clearAnchor };
@@ -3770,21 +3787,21 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = (0, import_react18.useState)(true);
-  const [editor, setEditor] = (0, import_react18.useState)(null);
+  const [active, setActive] = (0, import_react19.useState)(true);
+  const [editor, setEditor] = (0, import_react19.useState)(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
     }
   }, [active, clearAnchor, requestDestroy]);
-  const dismiss = (0, import_react18.useCallback)(() => {
+  const dismiss = (0, import_react19.useCallback)(() => {
     setEditor(null);
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3823,25 +3840,25 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = (0, import_react18.useState)(inlineEditedElement);
-  (0, import_react18.useEffect)(() => {
+  const [overlayRefElement, setOverlayElement] = (0, import_react19.useState)(inlineEditedElement);
+  (0, import_react19.useEffect)(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
   return overlayRefElement ? /* @__PURE__ */ React10.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
 };
 var InlineEditingToolbar = ({ anchor, editor, id }) => {
-  const { refs, floatingStyles } = (0, import_react19.useFloating)({
+  const { refs, floatingStyles } = (0, import_react20.useFloating)({
     placement: "top",
     strategy: "fixed",
     transform: false,
-    whileElementsMounted: import_react19.autoUpdate,
-    middleware: [horizontalShifterMiddleware, (0, import_react19.flip)()]
+    whileElementsMounted: import_react20.autoUpdate,
+    middleware: [horizontalShifterMiddleware, (0, import_react20.flip)()]
   });
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React10.createElement(import_react19.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(import_react20.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React10.createElement(
     import_ui5.Box,
     {
       ref: refs.setFloating,
@@ -3898,7 +3915,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return this.editing;
   }
   shouldRenderReplacement() {
-    return this.isInlineEditingEligible() && (0, import_editor_v1_adapters16.getCurrentEditMode)() === "edit";
+    return this.isInlineEditingEligible() && (0, import_editor_v1_adapters17.getCurrentEditMode)() === "edit";
   }
   handleRenderInlineEditor = () => {
     if (this.isEditingModeActive() || !this.isInlineEditingEligible()) {
@@ -3985,7 +4002,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const valueToSave = this.createContentPropValue(value);
-    (0, import_editor_v1_adapters16.undoable)(
+    (0, import_editor_v1_adapters17.undoable)(
       {
         do: () => {
           const prevValue = this.getInlineEditablePropValue();
@@ -4027,7 +4044,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return null;
   }
   runCommand(key, value) {
-    (0, import_editor_v1_adapters16.__privateRunCommandSync)(
+    (0, import_editor_v1_adapters17.__privateRunCommandSync)(
       "document/elements/set-settings",
       {
         container: (0, import_editor_elements8.getContainer)(this.id),
@@ -4037,7 +4054,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       },
       { internal: true }
     );
-    (0, import_editor_v1_adapters16.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
+    (0, import_editor_v1_adapters17.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
   }
   getExpectedTag() {
     const tagPropType = this.getTagPropType();
@@ -4202,12 +4219,12 @@ function registerModelExtensions(type, extensions) {
 }
 function registerElementType(type, elementTypeGenerator) {
   elementsLegacyTypes[type] = elementTypeGenerator;
-  if ((0, import_editor_v1_adapters17.__privateIsReady)()) {
+  if ((0, import_editor_v1_adapters18.__privateIsReady)()) {
     registerElementInLegacyManager(type, createDomRenderer());
   }
 }
 function initLegacyViews() {
-  (0, import_editor_v1_adapters17.__privateListenTo)((0, import_editor_v1_adapters17.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters18.__privateListenTo)((0, import_editor_v1_adapters18.v1ReadyEvent)(), () => {
     const widgetsCache = (0, import_editor_elements9.getWidgetsCache)() ?? {};
     const renderer = createDomRenderer();
     registerProPromotionTypes(widgetsCache);
@@ -4420,7 +4437,7 @@ var initBestPracticesResource = (reg) => {
 
 // src/mcp/resources/document-structure-resource.ts
 var import_editor_elements10 = require("@elementor/editor-elements");
-var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
 var DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 var initDocumentStructureResource = (reg) => {
   const { resource, sendResourceUpdated } = reg;
@@ -4433,15 +4450,15 @@ var initDocumentStructureResource = (reg) => {
       sendResourceUpdated({ uri: DOCUMENT_STRUCTURE_URI });
     }
   };
-  (0, import_editor_v1_adapters18.__privateListenTo)(
+  (0, import_editor_v1_adapters19.__privateListenTo)(
     [
-      (0, import_editor_v1_adapters18.commandEndEvent)("document/elements/create"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("document/elements/delete"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("document/elements/move"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("document/elements/copy"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("document/elements/paste"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("editor/documents/attach-preview"),
-      (0, import_editor_v1_adapters18.commandEndEvent)("editor/documents/switch")
+      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/create"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/delete"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/move"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/copy"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("document/elements/paste"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("editor/documents/attach-preview"),
+      (0, import_editor_v1_adapters19.commandEndEvent)("editor/documents/switch")
     ],
     updateDocumentStructure
   );
@@ -4544,7 +4561,7 @@ var initDynamicTagsResource = (reg) => {
 };
 
 // src/mcp/resources/editor-state-resource.ts
-var import_editor_v1_adapters19 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
 var CURRENTLY_VIEWED_SCREEN = "The user is currently viewing the Elementor editor";
 var PAGE_CONTENT_CHARACTER_LIMIT = 500;
 var PREVIEW_TEXT_NODE_MIN_LENGTH = 2;
@@ -4565,8 +4582,8 @@ var initEditorStateResource = (reg) => {
     lastSerializedState = serialized;
     sendResourceUpdated({ uri: EDITOR_STATE_URI });
   };
-  (0, import_editor_v1_adapters19.__privateListenTo)(
-    [(0, import_editor_v1_adapters19.commandEndEvent)("editor/documents/switch"), (0, import_editor_v1_adapters19.commandEndEvent)("editor/documents/attach-preview")],
+  (0, import_editor_v1_adapters20.__privateListenTo)(
+    [(0, import_editor_v1_adapters20.commandEndEvent)("editor/documents/switch"), (0, import_editor_v1_adapters20.commandEndEvent)("editor/documents/attach-preview")],
     notifyIfChanged
   );
   lastSerializedState = JSON.stringify(buildState());
@@ -4640,7 +4657,7 @@ function getPageTitle() {
 }
 
 // src/mcp/resources/general-context-resource.ts
-var import_editor_v1_adapters20 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 var GENERAL_CONTEXT_URI = "elementor://context/general";
 var initGeneralContextResource = (reg) => {
   const { resource, sendResourceUpdated } = reg;
@@ -4701,11 +4718,11 @@ var initGeneralContextResource = (reg) => {
       };
     }
   );
-  (0, import_editor_v1_adapters20.__privateListenTo)(
+  (0, import_editor_v1_adapters21.__privateListenTo)(
     [
-      (0, import_editor_v1_adapters20.commandEndEvent)("editor/documents/switch"),
-      (0, import_editor_v1_adapters20.commandEndEvent)("editor/documents/attach-preview"),
-      (0, import_editor_v1_adapters20.commandEndEvent)("document/elements/settings")
+      (0, import_editor_v1_adapters21.commandEndEvent)("editor/documents/switch"),
+      (0, import_editor_v1_adapters21.commandEndEvent)("editor/documents/attach-preview"),
+      (0, import_editor_v1_adapters21.commandEndEvent)("document/elements/settings")
     ],
     pushUpdateIfChanged
   );
@@ -4715,7 +4732,7 @@ var initGeneralContextResource = (reg) => {
 // src/mcp/resources/selected-element-resource.ts
 var import_editor_elements11 = require("@elementor/editor-elements");
 var import_editor_props6 = require("@elementor/editor-props");
-var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
 var SELECTED_ELEMENT_URI = "elementor://context/selected-element";
 var initSelectedElementResource = (reg) => {
   const { resource, sendResourceUpdated } = reg;
@@ -4746,11 +4763,11 @@ var initSelectedElementResource = (reg) => {
     }
     publishIfChanged(readSelectionFromEditor());
   };
-  (0, import_editor_v1_adapters21.__privateListenTo)(
+  (0, import_editor_v1_adapters22.__privateListenTo)(
     [
-      (0, import_editor_v1_adapters21.commandEndEvent)("document/elements/select"),
-      (0, import_editor_v1_adapters21.commandEndEvent)("document/elements/deselect-all"),
-      (0, import_editor_v1_adapters21.commandEndEvent)("document/elements/settings")
+      (0, import_editor_v1_adapters22.commandEndEvent)("document/elements/select"),
+      (0, import_editor_v1_adapters22.commandEndEvent)("document/elements/deselect-all"),
+      (0, import_editor_v1_adapters22.commandEndEvent)("document/elements/settings")
     ],
     onCommand
   );
@@ -4874,7 +4891,7 @@ var import_editor_props8 = require("@elementor/editor-props");
 var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_props7 = require("@elementor/editor-props");
 var import_editor_styles4 = require("@elementor/editor-styles");
-var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/mcp/utils/merge-custom-css.ts
 var CUSTOM_CSS_SEPARATOR = "\n";
@@ -4943,11 +4960,11 @@ function resolveCanonicalPropKeys(elementType, props) {
 }
 
 // src/mcp/utils/resolve-dynamic-tag.ts
-var import_editor_v1_adapters22 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters23 = require("@elementor/editor-v1-adapters");
 var DYNAMIC_PROP_TYPE_KEY = "dynamic";
 var OMITTED_DYNAMIC_SETTING_KEYS = ["fallback"];
 var getAtomicDynamicTags = () => {
-  const config = (0, import_editor_v1_adapters22.getElementorConfig)();
+  const config = (0, import_editor_v1_adapters23.getElementorConfig)();
   return config.atomicDynamicTags?.tags ?? {};
 };
 var getDynamicTagNamesByCategories = (categories) => {
@@ -5148,7 +5165,7 @@ Expected Schema: ${jsonSchema}`
     },
     withHistory: false
   });
-  (0, import_editor_v1_adapters23.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
+  (0, import_editor_v1_adapters24.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
 };
 
 // src/mcp/tools/configure-element/prompt.ts
@@ -5754,14 +5771,14 @@ Note: The "size" property controls image resolution/loading, not visual size. Se
 // src/prevent-link-in-link-commands.ts
 var import_editor_elements15 = require("@elementor/editor-elements");
 var import_editor_notifications6 = require("@elementor/editor-notifications");
-var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters25 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
 function initLinkInLinkPrevention() {
-  (0, import_editor_v1_adapters24.blockCommand)({
+  (0, import_editor_v1_adapters25.blockCommand)({
     command: "document/elements/paste",
     condition: blockLinkInLinkPaste
   });
-  (0, import_editor_v1_adapters24.blockCommand)({
+  (0, import_editor_v1_adapters25.blockCommand)({
     command: "document/elements/move",
     condition: blockLinkInLinkMove
   });
@@ -5837,7 +5854,7 @@ function shouldBlock(sourceElements, targetElements) {
 // src/style-commands/paste-style.ts
 var import_editor_elements18 = require("@elementor/editor-elements");
 var import_editor_props11 = require("@elementor/editor-props");
-var import_editor_v1_adapters26 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters27 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements16 = require("@elementor/editor-elements");
@@ -5884,9 +5901,9 @@ function getTitleForContainers(containers) {
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters25 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters26 = require("@elementor/editor-v1-adapters");
 var import_i18n9 = require("@wordpress/i18n");
-var undoablePasteElementStyle = () => (0, import_editor_v1_adapters25.undoable)(
+var undoablePasteElementStyle = () => (0, import_editor_v1_adapters26.undoable)(
   {
     do: ({ containers, newStyle }) => {
       return containers.map((container) => {
@@ -5962,12 +5979,12 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters25.undoable)(
 // src/style-commands/paste-style.ts
 function initPasteStyleCommand() {
   const pasteElementStyleCommand = undoablePasteElementStyle();
-  (0, import_editor_v1_adapters26.blockCommand)({
+  (0, import_editor_v1_adapters27.blockCommand)({
     command: "document/elements/paste-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters26.__privateListenTo)(
-    (0, import_editor_v1_adapters26.commandStartEvent)("document/elements/paste-style"),
+  (0, import_editor_v1_adapters27.__privateListenTo)(
+    (0, import_editor_v1_adapters27.commandStartEvent)("document/elements/paste-style"),
     (e) => pasteStyles(e.args, pasteElementStyleCommand)
   );
 }
@@ -6018,14 +6035,14 @@ function pasteClasses(containers, classes) {
 }
 
 // src/style-commands/reset-style.ts
-var import_editor_v1_adapters28 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters29 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements19 = require("@elementor/editor-elements");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters27 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters28 = require("@elementor/editor-v1-adapters");
 var import_i18n10 = require("@wordpress/i18n");
-var undoableResetElementStyle = () => (0, import_editor_v1_adapters27.undoable)(
+var undoableResetElementStyle = () => (0, import_editor_v1_adapters28.undoable)(
   {
     do: ({ containers }) => {
       return containers.map((container) => {
@@ -6069,12 +6086,12 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters27.undoable)(
 // src/style-commands/reset-style.ts
 function initResetStyleCommand() {
   const resetElementStyles = undoableResetElementStyle();
-  (0, import_editor_v1_adapters28.blockCommand)({
+  (0, import_editor_v1_adapters29.blockCommand)({
     command: "document/elements/reset-style",
     condition: hasAtomicWidgets
   });
-  (0, import_editor_v1_adapters28.__privateListenTo)(
-    (0, import_editor_v1_adapters28.commandStartEvent)("document/elements/reset-style"),
+  (0, import_editor_v1_adapters29.__privateListenTo)(
+    (0, import_editor_v1_adapters29.commandStartEvent)("document/elements/reset-style"),
     (e) => resetStyles(e.args, resetElementStyles)
   );
 }
@@ -6226,15 +6243,15 @@ function getRectClipPath(rect, viewport) {
 }
 
 // src/hooks/use-canvas-document.ts
-var import_editor_v1_adapters29 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters30 = require("@elementor/editor-v1-adapters");
 function useCanvasDocument() {
-  return (0, import_editor_v1_adapters29.__privateUseListenTo)((0, import_editor_v1_adapters29.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters29.getCanvasIframeDocument)());
+  return (0, import_editor_v1_adapters30.__privateUseListenTo)((0, import_editor_v1_adapters30.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters30.getCanvasIframeDocument)());
 }
 
 // src/hooks/use-escape-on-canvas.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!canvasDocument) {
       return;
     }

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();
@@ -3592,7 +3609,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 +3820,7 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     whileElementsMounted: autoUpdate2,
     middleware: [horizontalShifterMiddleware, flip()]
   });
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
@@ -6227,10 +6244,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.5.0-1154",
+  "version": "4.5.0-1156",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.5.0-1154",
-    "@elementor/editor-controls": "4.5.0-1154",
-    "@elementor/editor-documents": "4.5.0-1154",
-    "@elementor/editor-elements": "4.5.0-1154",
-    "@elementor/editor-interactions": "4.5.0-1154",
-    "@elementor/editor-mcp": "4.5.0-1154",
-    "@elementor/editor-notifications": "4.5.0-1154",
-    "@elementor/editor-props": "4.5.0-1154",
-    "@elementor/editor-responsive": "4.5.0-1154",
-    "@elementor/editor-styles": "4.5.0-1154",
-    "@elementor/editor-styles-repository": "4.5.0-1154",
-    "@elementor/editor-ui": "4.5.0-1154",
-    "@elementor/editor-v1-adapters": "4.5.0-1154",
-    "@elementor/events": "4.5.0-1154",
-    "@elementor/http-client": "4.5.0-1154",
-    "@elementor/schema": "4.5.0-1154",
-    "@elementor/twing": "4.5.0-1154",
+    "@elementor/editor": "4.5.0-1156",
+    "@elementor/editor-controls": "4.5.0-1156",
+    "@elementor/editor-documents": "4.5.0-1156",
+    "@elementor/editor-elements": "4.5.0-1156",
+    "@elementor/editor-interactions": "4.5.0-1156",
+    "@elementor/editor-mcp": "4.5.0-1156",
+    "@elementor/editor-notifications": "4.5.0-1156",
+    "@elementor/editor-props": "4.5.0-1156",
+    "@elementor/editor-responsive": "4.5.0-1156",
+    "@elementor/editor-styles": "4.5.0-1156",
+    "@elementor/editor-styles-repository": "4.5.0-1156",
+    "@elementor/editor-ui": "4.5.0-1156",
+    "@elementor/editor-v1-adapters": "4.5.0-1156",
+    "@elementor/events": "4.5.0-1156",
+    "@elementor/http-client": "4.5.0-1156",
+    "@elementor/schema": "4.5.0-1156",
+    "@elementor/twing": "4.5.0-1156",
     "@elementor/ui": "1.41.4",
-    "@elementor/utils": "4.5.0-1154",
-    "@elementor/wp-media": "4.5.0-1154",
+    "@elementor/utils": "4.5.0-1156",
+    "@elementor/wp-media": "4.5.0-1156",
     "@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 );
 				}