@elementor/editor-canvas 4.1.0-751 → 4.1.0-753

package/dist/index.js

@@ -968,22 +968,30 @@ function useStyleItems() {
   const [styleItems, setStyleItems] = (0, import_react10.useState)({});
   const styleItemsCacheRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
   const providerAndSubscribers = (0, import_react10.useMemo)(() => {
-    return import_editor_styles_repository2.stylesRepository.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 import_editor_styles_repository2.stylesRepository.getProviders().map(
+      (provider) => ({
         provider,
         subscriber: createProviderSubscriber2({
           provider,
           renderStyles,
           setStyleItems,
-          cache
+          getCache: () => getCache(provider)
         })
-      };
-    });
+      })
+    );
   }, [renderStyles]);
   (0, import_react10.useEffect)(() => {
     const unsubscribes = providerAndSubscribers.map(
@@ -1024,18 +1032,26 @@ 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 (hasCache && provider.isPregeneratedLink) {
         removeProviderPregeneratedLinks(provider.getKey(), provider.isPregeneratedLink);
       }
       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,
@@ -1043,7 +1059,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) {
@@ -1058,7 +1074,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 {

package/dist/index.mjs

@@ -934,22 +934,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(
@@ -990,18 +998,26 @@ 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 (hasCache && provider.isPregeneratedLink) {
         removeProviderPregeneratedLinks(provider.getKey(), provider.isPregeneratedLink);
       }
       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,
@@ -1009,7 +1025,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) {
@@ -1024,7 +1040,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 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.1.0-751",
+  "version": "4.1.0-753",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-751",
+    "@elementor/editor": "4.1.0-753",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.1.0-751",
-    "@elementor/editor-documents": "4.1.0-751",
-    "@elementor/editor-elements": "4.1.0-751",
-    "@elementor/editor-interactions": "4.1.0-751",
-    "@elementor/editor-mcp": "4.1.0-751",
-    "@elementor/editor-notifications": "4.1.0-751",
-    "@elementor/editor-props": "4.1.0-751",
-    "@elementor/editor-responsive": "4.1.0-751",
-    "@elementor/editor-styles": "4.1.0-751",
-    "@elementor/editor-styles-repository": "4.1.0-751",
-    "@elementor/editor-ui": "4.1.0-751",
-    "@elementor/editor-v1-adapters": "4.1.0-751",
-    "@elementor/schema": "4.1.0-751",
-    "@elementor/twing": "4.1.0-751",
+    "@elementor/editor-controls": "4.1.0-753",
+    "@elementor/editor-documents": "4.1.0-753",
+    "@elementor/editor-elements": "4.1.0-753",
+    "@elementor/editor-interactions": "4.1.0-753",
+    "@elementor/editor-mcp": "4.1.0-753",
+    "@elementor/editor-notifications": "4.1.0-753",
+    "@elementor/editor-props": "4.1.0-753",
+    "@elementor/editor-responsive": "4.1.0-753",
+    "@elementor/editor-styles": "4.1.0-753",
+    "@elementor/editor-styles-repository": "4.1.0-753",
+    "@elementor/editor-ui": "4.1.0-753",
+    "@elementor/editor-v1-adapters": "4.1.0-753",
+    "@elementor/schema": "4.1.0-753",
+    "@elementor/twing": "4.1.0-753",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-751",
-    "@elementor/wp-media": "4.1.0-751",
+    "@elementor/utils": "4.1.0-753",
+    "@elementor/wp-media": "4.1.0-753",
     "@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

@@ -37,25 +37,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( () => {
@@ -125,17 +135,26 @@ 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;
 
@@ -145,10 +164,10 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems, cach
 				}
 
 				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 ) => ( {
@@ -159,7 +178,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
@@ -186,7 +210,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 ) => {