@elementor/editor-canvas 4.0.0 → 4.0.1

package/dist/index.mjs

@@ -910,22 +910,30 @@ function useStyleItems() {
   const [styleItems, setStyleItems] = useState3({});
   const styleItemsCacheRef = useRef2(/* @__PURE__ */ new Map());
   const providerAndSubscribers = useMemo4(() => {
-    return stylesRepository2.getProviders().map((provider) => {
-      const providerKey = provider.getKey();
+    const createEmptyCache = () => {
+      return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
+    };
+    const getCache = (provider) => {
+      const providerKey = safeGetKey(provider);
+      if (!providerKey) {
+        return createEmptyCache();
+      }
       if (!styleItemsCacheRef.current.has(providerKey)) {
-        styleItemsCacheRef.current.set(providerKey, { orderedIds: [], itemsById: /* @__PURE__ */ new Map() });
+        styleItemsCacheRef.current.set(providerKey, createEmptyCache());
       }
-      const cache = styleItemsCacheRef.current.get(providerKey);
-      return {
+      return styleItemsCacheRef.current.get(providerKey);
+    };
+    return stylesRepository2.getProviders().map(
+      (provider) => ({
         provider,
         subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems,
-          cache
+          getCache: () => getCache(provider)
         })
-      };
-    });
+      })
+    );
   }, [renderStyles]);
   useEffect6(() => {
     const unsubscribes = providerAndSubscribers.map(
@@ -965,15 +973,23 @@ function stateSorter({ state: stateA }, { state: stateB }) {
 function createBreakpointSorter(breakpointsOrder) {
   return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
 }
-function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cache }) {
+function safeGetKey(provider) {
+  try {
+    return provider.getKey();
+  } catch {
+    return null;
+  }
+}
+function createProviderSubscriber2({ provider, renderStyles, setStyleItems, getCache }) {
   return abortPreviousRuns(
     (abortController, previous, current) => signalizedProcess(abortController.signal).then((_, signal) => {
+      const cache = getCache();
       const hasDiffInfo = current !== void 0 && previous !== void 0;
       const hasCache = cache.orderedIds.length > 0;
       if (hasDiffInfo && hasCache) {
-        return updateItems(previous, current, signal);
+        return updateItems(cache, previous, current, signal);
       }
-      return createItems(signal);
+      return createItems(cache, signal);
     }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
@@ -981,7 +997,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
       }));
     }).execute()
   );
-  async function updateItems(previous, current, signal) {
+  async function updateItems(cache, previous, current, signal) {
     const changedIds = getChangedStyleIds(previous, current);
     cache.orderedIds = provider.actions.all().map((style) => style.id).reverse();
     if (changedIds.length > 0) {
@@ -996,7 +1012,7 @@ function createProviderSubscriber2({ provider, renderStyles, setStyleItems, cach
     }
     return getOrderedItems(cache);
   }
-  async function createItems(signal) {
+  async function createItems(cache, signal) {
     const allStyles = provider.actions.all();
     const styles = [...allStyles].reverse().map((style) => {
       return {
@@ -1391,14 +1407,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 +1483,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
@@ -2287,9 +2363,11 @@ function createNestedTemplatedElementView({
   });
 }
 
+// src/legacy/replacements/manager.ts
+import { createRoot } from "react-dom/client";
+
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 import * as React6 from "react";
-import { createRoot } from "react-dom/client";
 import { getContainer, getElementLabel, getElementType as getElementType2 } from "@elementor/editor-elements";
 import {
   htmlV3PropTypeUtil as htmlV3PropTypeUtil2,
@@ -2312,6 +2390,8 @@ var ReplacementBase = class {
   type;
   id;
   refreshView;
+  reactRoot;
+  reactContainer;
   constructor(settings) {
     this.getSetting = settings.getSetting;
     this.setSetting = settings.setSetting;
@@ -2319,6 +2399,8 @@ var ReplacementBase = class {
     this.type = settings.type;
     this.id = settings.id;
     this.refreshView = settings.refreshView;
+    this.reactRoot = settings.reactRoot;
+    this.reactContainer = settings.reactContainer;
   }
   static getTypes() {
     return null;
@@ -2339,7 +2421,7 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 import * as React5 from "react";
-import { useEffect as useEffect8, useLayoutEffect, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useLayoutEffect, useState as useState5 } from "react";
 import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
 import { Box as Box2, ThemeProvider } from "@elementor/ui";
 import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal2, useFloating as useFloating2 } from "@floating-ui/react";
@@ -2369,7 +2451,8 @@ var INLINE_EDITING_PROPERTY_PER_TYPE = {
   "e-button": "text",
   "e-form-label": "text",
   "e-heading": "title",
-  "e-paragraph": "paragraph"
+  "e-paragraph": "paragraph",
+  "e-form-submit-button": "text"
 };
 var getInlineEditorElement = (elementWrapper, expectedTag) => {
   return !expectedTag ? null : elementWrapper.querySelector(expectedTag);
@@ -2387,6 +2470,11 @@ var useOnClickOutsideIframe = (handleUnmount) => {
 };
 var useRenderToolbar = (ownerDocument, id) => {
   const [anchor, setAnchor] = useState4(null);
+  useEffect7(() => {
+    if (!anchor) {
+      removeToolbarAnchor(ownerDocument, id);
+    }
+  }, [anchor, ownerDocument, id]);
   const onSelectionEnd = (view) => {
     const hasSelection = !view.state.selection.empty;
     removeToolbarAnchor(ownerDocument, id);
@@ -2396,7 +2484,10 @@ var useRenderToolbar = (ownerDocument, id) => {
       setAnchor(null);
     }
   };
-  return { onSelectionEnd, anchor };
+  const clearAnchor = useCallback(() => {
+    setAnchor(null);
+  }, []);
+  return { onSelectionEnd, anchor, clearAnchor };
 };
 var createAnchorBasedOnSelection = (ownerDocument, id) => {
   const frameWindow = ownerDocument.defaultView;
@@ -2463,46 +2554,59 @@ var horizontalShifterMiddleware = {
 };
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
-var EDITOR_WRAPPER_SELECTOR = "inline-editor-wrapper";
 var CanvasInlineEditor = ({
   elementClasses,
   initialValue,
   expectedTag,
   rootElement,
+  contentElement,
   id,
   setValue,
-  ...props
+  requestDestroy
 }) => {
+  const [active, setActive] = useState5(true);
   const [editor, setEditor] = useState5(null);
-  const { onSelectionEnd, anchor: toolbarAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  const onBlur = () => {
-    removeToolbarAnchor(rootElement.ownerDocument, id);
-    props.onBlur();
-  };
-  useOnClickOutsideIframe(onBlur);
-  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement("style", null, `
-			.ProseMirror > * {
-				height: 100%;
-			}
-			.${EDITOR_WRAPPER_SELECTOR} .ProseMirror > button[contenteditable="true"] {
-				height: auto;
-				cursor: text;
-			}
-			`), /* @__PURE__ */ React5.createElement(
+  const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
+  useEffect8(() => {
+    if (!active) {
+      clearAnchor();
+      requestDestroy();
+    }
+  }, [active, clearAnchor, requestDestroy]);
+  const dismiss = useCallback2(() => {
+    setEditor(null);
+    setActive(false);
+  }, []);
+  useOnClickOutsideIframe(dismiss);
+  useEffect8(() => {
+    const ownerDocument = contentElement.ownerDocument;
+    const handleClickAway = (event) => {
+      if (contentElement.contains(event.target)) {
+        return;
+      }
+      dismiss();
+    };
+    ownerDocument.addEventListener("mousedown", handleClickAway);
+    return () => ownerDocument.removeEventListener("mousedown", handleClickAway);
+  }, [contentElement, dismiss]);
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(InlineEditingOverlay, { expectedTag, rootElement, id }), /* @__PURE__ */ React5.createElement(
     InlineEditor,
     {
       onEditorCreate: setEditor,
+      mountElement: contentElement,
       editorProps: {
         attributes: {
-          style: "outline: none;overflow-wrap: normal;height:100%"
+          style: "outline: none; display: inherit; justify-content: inherit; align-items: inherit; flex-direction: inherit; text-align: inherit;"
         }
       },
       elementClasses,
       value: initialValue,
       setValue,
-      onBlur,
+      onBlur: dismiss,
       autofocus: true,
-      expectedTag,
       onSelectionEnd
     }
   ), toolbarAnchor && editor && /* @__PURE__ */ React5.createElement(InlineEditingToolbar, { anchor: toolbarAnchor, editor, id }));
@@ -2531,7 +2635,18 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
     refs.setReference(anchor);
     return () => refs.setReference(null);
   }, [anchor, refs]);
-  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(Box2, { ref: refs.setFloating, role: "presentation", style: { ...floatingStyles, pointerEvents: "none" } }, /* @__PURE__ */ React5.createElement(InlineEditorToolbar, { editor, elementId: id })));
+  return /* @__PURE__ */ React5.createElement(FloatingPortal2, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React5.createElement(
+    Box2,
+    {
+      ref: refs.setFloating,
+      role: "presentation",
+      style: {
+        ...floatingStyles,
+        pointerEvents: "none"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(InlineEditorToolbar, { editor, elementId: id })
+  ));
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
@@ -2565,8 +2680,8 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var HISTORY_DEBOUNCE_WAIT = 800;
 var InlineEditingReplacement = class extends ReplacementBase {
-  inlineEditorRoot = null;
   handlerAttached = false;
+  editing = false;
   getReplacementKey() {
     return "inline-editing";
   }
@@ -2574,7 +2689,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
     return Object.keys(INLINE_EDITING_PROPERTY_PER_TYPE);
   }
   isEditingModeActive() {
-    return !!this.inlineEditorRoot;
+    return this.editing;
   }
   shouldRenderReplacement() {
     return this.isInlineEditingEligible() && getCurrentEditMode() === "edit";
@@ -2617,8 +2732,8 @@ var InlineEditingReplacement = class extends ReplacementBase {
   resetInlineEditorRoot() {
     this.element.removeEventListener("click", this.handleRenderInlineEditor);
     this.handlerAttached = false;
-    this.inlineEditorRoot?.unmount?.();
-    this.inlineEditorRoot = null;
+    this.reactRoot.render(null);
+    this.editing = false;
   }
   unmountInlineEditor() {
     this.resetInlineEditorRoot();
@@ -2729,12 +2844,16 @@ var InlineEditingReplacement = class extends ReplacementBase {
     if (this.isEditingModeActive()) {
       this.resetInlineEditorRoot();
     }
-    const elementClasses = this.element.children?.[0]?.classList.toString() ?? "";
+    const contentElement = this.element.children?.[0];
+    if (!contentElement) {
+      return;
+    }
+    const elementClasses = contentElement.classList.toString();
     const propValue = this.getExtractedContentValue();
     const expectedTag = this.getExpectedTag();
-    this.element.innerHTML = "";
-    this.inlineEditorRoot = createRoot(this.element);
-    this.inlineEditorRoot.render(
+    contentElement.innerHTML = "";
+    this.editing = true;
+    this.reactRoot.render(
       /* @__PURE__ */ React6.createElement(
         CanvasInlineEditor,
         {
@@ -2742,9 +2861,10 @@ var InlineEditingReplacement = class extends ReplacementBase {
           initialValue: propValue,
           expectedTag,
           rootElement: this.element,
+          contentElement,
           id: this.id,
           setValue: this.setContentValue.bind(this),
-          onBlur: this.unmountInlineEditor.bind(this)
+          requestDestroy: this.unmountInlineEditor.bind(this)
         }
       )
     );
@@ -2773,16 +2893,24 @@ var createViewWithReplacements = (options) => {
   return class extends TemplatedView {
     #replacement = null;
     #config;
+    #reactContainer;
+    #reactRoot;
     constructor(...args) {
       super(...args);
       const settings = this.model.get("settings");
+      this.#reactContainer = this.el.ownerDocument.createElement("div");
+      this.#reactContainer.style.display = "none";
+      this.el.ownerDocument.body.appendChild(this.#reactContainer);
+      this.#reactRoot = createRoot(this.#reactContainer);
       this.#config = {
         getSetting: settings.get.bind(settings),
         setSetting: settings.set.bind(settings),
         element: this.el,
         type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
         id: this?.model?.get("id") ?? null,
-        refreshView: this.refreshView.bind(this)
+        refreshView: this.refreshView.bind(this),
+        reactRoot: this.#reactRoot,
+        reactContainer: this.#reactContainer
       };
     }
     refreshView() {
@@ -2803,6 +2931,8 @@ var createViewWithReplacements = (options) => {
     }
     onDestroy() {
       this.#triggerAltMethod("onDestroy");
+      this.#reactRoot.unmount();
+      this.#reactContainer.remove();
     }
     _afterRender() {
       this.#triggerAltMethod("_afterRender");

package/package.json

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

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

@@ -13,6 +13,10 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	commandEndEvent: jest.fn(),
 } ) );
 
+jest.mock( '@elementor/editor-documents', () => ( {
+	getCurrentDocument: jest.fn().mockReturnValue( { id: 1 } ),
+} ) );
+
 jest.mock( '@elementor/ui', () => ( {
 	Portal: jest.fn( ( { children } ) => <div data-testid="portal">{ children }</div> ),
 } ) );

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

@@ -340,6 +340,74 @@ describe( 'useStyleItems', () => {
 		expect( breakpointOrderAfterUpdate ).toEqual( [ 'desktop', 'tablet', 'mobile' ] );
 	} );
 
+	it( 'should recover and render styles when a provider key becomes available after initial failure', async () => {
+		// Arrange.
+		let shouldThrow = true;
+
+		const dynamicKey: () => string = () => {
+			if ( shouldThrow ) {
+				throw new Error( 'Document not ready' );
+			}
+
+			return 'late-provider';
+		};
+
+		const failingThenSucceedingProvider = createMockStylesProvider(
+			{
+				key: dynamicKey,
+				priority: 2,
+			},
+			[ createMockStyleDefinition( { id: 'late-style1' } ), createMockStyleDefinition( { id: 'late-style2' } ) ]
+		);
+
+		const stableProvider = createMockStylesProvider(
+			{
+				key: 'stable-provider',
+				priority: 1,
+			},
+			[
+				createMockStyleDefinition( { id: 'stable-style1' } ),
+				createMockStyleDefinition( { id: 'stable-style2' } ),
+			]
+		);
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [
+			failingThenSucceedingProvider,
+			stableProvider,
+		] );
+
+		let attachPreviewCallback: () => Promise< void >;
+
+		jest.mocked( registerDataHook ).mockImplementation( ( position, command, callback ) => {
+			if ( command === 'editor/documents/attach-preview' && position === 'after' ) {
+				attachPreviewCallback = callback as never;
+			}
+
+			return null as never;
+		} );
+
+		// Act.
+		const { result } = renderHook( () => useStyleItems() );
+
+		// Assert - hook should not crash, should return empty initially.
+		expect( result.current ).toEqual( [] );
+
+		// Act - simulate document becoming ready, then trigger attach-preview.
+		shouldThrow = false;
+
+		await act( async () => {
+			await attachPreviewCallback?.();
+		} );
+
+		// Assert - both providers' styles should render in correct priority order.
+		expect( result.current ).toEqual( [
+			{ id: 'stable-style2', breakpoint: 'desktop' },
+			{ id: 'stable-style1', breakpoint: 'desktop' },
+			{ id: 'late-style2', breakpoint: 'desktop' },
+			{ id: 'late-style1', breakpoint: 'desktop' },
+		] );
+	} );
+
 	it( 'should only re-render changed styles on differential update', async () => {
 		// Arrange.
 		const renderStylesMock = jest.fn().mockImplementation( ( { styles } ) =>

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

@@ -36,25 +36,35 @@ export function useStyleItems() {
 	const styleItemsCacheRef = useRef< Map< string, StyleItemsCache > >( new Map() );
 
 	const providerAndSubscribers = useMemo( () => {
-		return stylesRepository.getProviders().map( ( provider ): ProviderAndSubscriber => {
-			const providerKey = provider.getKey();
+		const createEmptyCache = () => {
+			return { orderedIds: [], itemsById: new Map() };
+		};
+
+		const getCache = ( provider: StylesProvider ): StyleItemsCache => {
+			const providerKey = safeGetKey( provider );
+
+			if ( ! providerKey ) {
+				return createEmptyCache();
+			}
 
 			if ( ! styleItemsCacheRef.current.has( providerKey ) ) {
-				styleItemsCacheRef.current.set( providerKey, { orderedIds: [], itemsById: new Map() } );
+				styleItemsCacheRef.current.set( providerKey, createEmptyCache() );
 			}
 
-			const cache = styleItemsCacheRef.current.get( providerKey ) as StyleItemsCache;
+			return styleItemsCacheRef.current.get( providerKey ) as StyleItemsCache;
+		};
 
-			return {
+		return stylesRepository.getProviders().map(
+			( provider ): ProviderAndSubscriber => ( {
 				provider,
 				subscriber: createProviderSubscriber( {
 					provider,
 					renderStyles,
 					setStyleItems,
-					cache,
+					getCache: () => getCache( provider ),
 				} ),
-			};
-		} );
+			} )
+		);
 	}, [ renderStyles ] );
 
 	useEffect( () => {
@@ -122,25 +132,34 @@ function createBreakpointSorter( breakpointsOrder: BreakpointId[] ) {
 		breakpointsOrder.indexOf( breakpointB as BreakpointId );
 }
 
+function safeGetKey( provider: StylesProvider ): string | null {
+	try {
+		return provider.getKey();
+	} catch {
+		return null;
+	}
+}
+
 type CreateProviderSubscriberArgs = {
 	provider: StylesProvider;
 	renderStyles: StyleRenderer;
 	setStyleItems: Dispatch< SetStateAction< ProviderAndStyleItemsMap > >;
-	cache: StyleItemsCache;
+	getCache: () => StyleItemsCache;
 };
 
-function createProviderSubscriber( { provider, renderStyles, setStyleItems, cache }: CreateProviderSubscriberArgs ) {
+function createProviderSubscriber( { provider, renderStyles, setStyleItems, getCache }: CreateProviderSubscriberArgs ) {
 	return abortPreviousRuns( ( abortController, previous?: StylesCollection, current?: StylesCollection ) =>
 		signalizedProcess( abortController.signal )
 			.then( ( _, signal ) => {
+				const cache = getCache();
 				const hasDiffInfo = current !== undefined && previous !== undefined;
 				const hasCache = cache.orderedIds.length > 0;
 
 				if ( hasDiffInfo && hasCache ) {
-					return updateItems( previous, current, signal );
+					return updateItems( cache, previous, current, signal );
 				}
 
-				return createItems( signal );
+				return createItems( cache, signal );
 			} )
 			.then( ( items ) => {
 				setStyleItems( ( prev ) => ( {
@@ -151,7 +170,12 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 			.execute()
 	);
 
-	async function updateItems( previous: StylesCollection, current: StylesCollection, signal: AbortSignal ) {
+	async function updateItems(
+		cache: StyleItemsCache,
+		previous: StylesCollection,
+		current: StylesCollection,
+		signal: AbortSignal
+	) {
 		const changedIds = getChangedStyleIds( previous, current );
 
 		cache.orderedIds = provider.actions
@@ -178,7 +202,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 		return getOrderedItems( cache );
 	}
 
-	async function createItems( signal: AbortSignal ) {
+	async function createItems( cache: StyleItemsCache, signal: AbortSignal ) {
 		const allStyles = provider.actions.all();
 
 		const styles = [ ...allStyles ].reverse().map( ( style ) => {