@elementor/editor-styles-repository 4.3.0-beta1 → 4.3.0-beta3

package/dist/index.js

@@ -88,9 +88,19 @@ var DEFAULT_CAPABILITIES = {
   update: true,
   updateProps: true
 };
+var DENIED_CAPABILITIES = {
+  create: false,
+  delete: false,
+  update: false,
+  updateProps: false
+};
 var useUserStylesCapability = () => {
   const { capabilities } = (0, import_editor_current_user.useCurrentUserCapabilities)();
+  const hasContentOnlyAccess = (0, import_editor_current_user.useHasContentOnlyAccess)();
   const userCan = (providerKey) => {
+    if (hasContentOnlyAccess) {
+      return DENIED_CAPABILITIES;
+    }
     const provider = stylesRepository.getProviderByKey(providerKey);
     if (!provider?.capabilities) {
       return DEFAULT_CAPABILITIES;
@@ -197,7 +207,25 @@ var documentElementsStylesProvider = createStylesProvider({
   },
   priority: 50,
   isPregeneratedLink: ({ id }) => PREGENERATED_LINK_PATTERN.test(id),
-  subscribe: (cb) => (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, () => cb()),
+  subscribe: (cb) => {
+    let scheduledFrame = null;
+    const unsubscribe = (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, () => {
+      if (scheduledFrame !== null) {
+        return;
+      }
+      scheduledFrame = requestAnimationFrame(() => {
+        scheduledFrame = null;
+        cb();
+      });
+    });
+    return () => {
+      if (scheduledFrame !== null) {
+        cancelAnimationFrame(scheduledFrame);
+        scheduledFrame = null;
+      }
+      unsubscribe();
+    };
+  },
   actions: {
     all: (meta = {}) => {
       let elements = (0, import_editor_elements.getElements)();

package/dist/index.mjs

@@ -45,16 +45,26 @@ function useProviders() {
 import { useMemo } from "react";
 
 // src/hooks/use-user-styles-capability.ts
-import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
+import { useCurrentUserCapabilities, useHasContentOnlyAccess } from "@elementor/editor-current-user";
 var DEFAULT_CAPABILITIES = {
   create: true,
   delete: true,
   update: true,
   updateProps: true
 };
+var DENIED_CAPABILITIES = {
+  create: false,
+  delete: false,
+  update: false,
+  updateProps: false
+};
 var useUserStylesCapability = () => {
   const { capabilities } = useCurrentUserCapabilities();
+  const hasContentOnlyAccess = useHasContentOnlyAccess();
   const userCan = (providerKey) => {
+    if (hasContentOnlyAccess) {
+      return DENIED_CAPABILITIES;
+    }
     const provider = stylesRepository.getProviderByKey(providerKey);
     if (!provider?.capabilities) {
       return DEFAULT_CAPABILITIES;
@@ -167,7 +177,25 @@ var documentElementsStylesProvider = createStylesProvider({
   },
   priority: 50,
   isPregeneratedLink: ({ id }) => PREGENERATED_LINK_PATTERN.test(id),
-  subscribe: (cb) => listenTo(styleRerenderEvents, () => cb()),
+  subscribe: (cb) => {
+    let scheduledFrame = null;
+    const unsubscribe = listenTo(styleRerenderEvents, () => {
+      if (scheduledFrame !== null) {
+        return;
+      }
+      scheduledFrame = requestAnimationFrame(() => {
+        scheduledFrame = null;
+        cb();
+      });
+    });
+    return () => {
+      if (scheduledFrame !== null) {
+        cancelAnimationFrame(scheduledFrame);
+        scheduledFrame = null;
+      }
+      unsubscribe();
+    };
+  },
   actions: {
     all: (meta = {}) => {
       let elements = getElements();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "4.3.0-beta1",
+  "version": "4.3.0-beta3",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,13 +33,13 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-beta1",
-    "@elementor/editor-elements": "4.3.0-beta1",
-    "@elementor/editor-props": "4.3.0-beta1",
-    "@elementor/editor-styles": "4.3.0-beta1",
-    "@elementor/editor-v1-adapters": "4.3.0-beta1",
-    "@elementor/schema": "4.3.0-beta1",
-    "@elementor/utils": "4.3.0-beta1",
+    "@elementor/editor-current-user": "4.3.0-beta3",
+    "@elementor/editor-elements": "4.3.0-beta3",
+    "@elementor/editor-props": "4.3.0-beta3",
+    "@elementor/editor-styles": "4.3.0-beta3",
+    "@elementor/editor-v1-adapters": "4.3.0-beta3",
+    "@elementor/schema": "4.3.0-beta3",
+    "@elementor/utils": "4.3.0-beta3",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/__tests__/document-elements-styles-provider.test.ts

@@ -1,12 +1,24 @@
 import { createMockElement, createMockStyleDefinition } from 'test-utils';
-import { getCurrentDocumentId, getElements, getElementStyles, updateElementStyle } from '@elementor/editor-elements';
+import {
+	ELEMENT_STYLE_CHANGE_EVENT,
+	getCurrentDocumentId,
+	getElements,
+	getElementStyles,
+	updateElementStyle,
+} from '@elementor/editor-elements';
 import type { StyleDefinition } from '@elementor/editor-styles';
+import { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';
 
 import { InvalidElementsStyleProviderMetaError } from '../errors';
 import { documentElementsStylesProvider } from '../providers/document-elements-styles-provider';
 
 jest.mock( '@elementor/editor-elements' );
 
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	...jest.requireActual( '@elementor/editor-v1-adapters' ),
+	__privateListenTo: jest.fn(),
+} ) );
+
 describe( 'documentElementsStylesProvider', () => {
 	beforeEach( () => {
 		jest.mocked( getElements ).mockReturnValue( [
@@ -155,4 +167,94 @@ describe( 'documentElementsStylesProvider', () => {
 				)
 		).toThrow( new InvalidElementsStyleProviderMetaError() );
 	} );
+
+	describe( 'subscribe', () => {
+		const setupListener = () => {
+			const unsubscribeFromEvents = jest.fn();
+			let emit = () => {};
+
+			jest.mocked( listenTo ).mockImplementation( ( _events, callback ) => {
+				emit = () =>
+					callback( {
+						type: 'window-event',
+						event: ELEMENT_STYLE_CHANGE_EVENT,
+						originalEvent: new CustomEvent( ELEMENT_STYLE_CHANGE_EVENT ),
+					} );
+
+				return unsubscribeFromEvents;
+			} );
+
+			const frames: FrameRequestCallback[] = [];
+
+			jest.spyOn( window, 'requestAnimationFrame' ).mockImplementation( ( frame: FrameRequestCallback ) => {
+				frames.push( frame );
+
+				return frames.length;
+			} );
+
+			return {
+				emitStyleRerenderEvent: () => emit(),
+				runFrame: ( index: number ) => frames[ index ]( 0 ),
+				frames: () => frames,
+				unsubscribeFromEvents,
+			};
+		};
+
+		it( 'should notify subscribers once per frame regardless of the number of events', () => {
+			// Arrange.
+			const listener = setupListener();
+			const subscriber = jest.fn();
+
+			documentElementsStylesProvider.subscribe( subscriber );
+
+			// Act.
+			listener.emitStyleRerenderEvent();
+			listener.emitStyleRerenderEvent();
+			listener.emitStyleRerenderEvent();
+
+			// Assert.
+			expect( listener.frames() ).toHaveLength( 1 );
+			expect( subscriber ).not.toHaveBeenCalled();
+
+			// Act.
+			listener.runFrame( 0 );
+
+			// Assert.
+			expect( subscriber ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should schedule a new frame after the pending one ran', () => {
+			// Arrange.
+			const listener = setupListener();
+			const subscriber = jest.fn();
+
+			documentElementsStylesProvider.subscribe( subscriber );
+
+			// Act.
+			listener.emitStyleRerenderEvent();
+			listener.runFrame( 0 );
+			listener.emitStyleRerenderEvent();
+			listener.runFrame( 1 );
+
+			// Assert.
+			expect( subscriber ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'should cancel a pending frame when unsubscribing', () => {
+			// Arrange.
+			const listener = setupListener();
+			const subscriber = jest.fn();
+			const cancelAnimationFrameSpy = jest.spyOn( window, 'cancelAnimationFrame' ).mockImplementation();
+
+			const unsubscribe = documentElementsStylesProvider.subscribe( subscriber );
+
+			// Act.
+			listener.emitStyleRerenderEvent();
+			unsubscribe();
+
+			// Assert.
+			expect( cancelAnimationFrameSpy ).toHaveBeenCalledTimes( 1 );
+			expect( listener.unsubscribeFromEvents ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
 } );

package/src/hooks/__tests__/use-user-styles-capability.test.ts

@@ -0,0 +1,68 @@
+import { useCurrentUserCapabilities, useHasContentOnlyAccess } from '@elementor/editor-current-user';
+import { renderHook } from '@testing-library/react';
+
+import { documentElementsStylesProvider } from '../../providers/document-elements-styles-provider';
+import { stylesRepository } from '../../styles-repository';
+import { type StylesProvider } from '../../types';
+import { useUserStylesCapability } from '../use-user-styles-capability';
+
+jest.mock( '@elementor/editor-current-user' );
+jest.mock( '../../styles-repository' );
+
+const UPDATE_CAPABILITY = 'update_style';
+const PROVIDER_WITH_CAPABILITIES_KEY = 'provider-with-capabilities';
+
+const providerWithCapabilities: Pick< StylesProvider, 'getKey' | 'capabilities' > = {
+	getKey: () => PROVIDER_WITH_CAPABILITIES_KEY,
+	capabilities: {
+		create: UPDATE_CAPABILITY,
+		delete: UPDATE_CAPABILITY,
+		update: UPDATE_CAPABILITY,
+		updateProps: UPDATE_CAPABILITY,
+	},
+};
+
+const deniedCapabilities = {
+	create: false,
+	delete: false,
+	update: false,
+	updateProps: false,
+};
+
+describe( 'useUserStylesCapability', () => {
+	beforeEach( () => {
+		jest.mocked( useHasContentOnlyAccess ).mockReturnValue( false );
+
+		jest.mocked( useCurrentUserCapabilities ).mockReturnValue( {
+			capabilities: [ UPDATE_CAPABILITY ],
+			canUser: ( capability ) => capability === UPDATE_CAPABILITY,
+			isAdmin: false,
+		} );
+	} );
+
+	it( 'should deny all capabilities for content-only users on a provider without capabilities', () => {
+		// Arrange
+		jest.mocked( useHasContentOnlyAccess ).mockReturnValue( true );
+
+		jest.mocked( stylesRepository.getProviderByKey ).mockReturnValue( documentElementsStylesProvider );
+
+		// Act
+		const { result } = renderHook( () => useUserStylesCapability() );
+
+		// Assert
+		expect( result.current.userCan( 'document-elements-42' ) ).toEqual( deniedCapabilities );
+	} );
+
+	it( 'should deny all capabilities for content-only users on a provider with capabilities', () => {
+		// Arrange
+		jest.mocked( useHasContentOnlyAccess ).mockReturnValue( true );
+
+		jest.mocked( stylesRepository.getProviderByKey ).mockReturnValue( providerWithCapabilities as StylesProvider );
+
+		// Act
+		const { result } = renderHook( () => useUserStylesCapability() );
+
+		// Assert
+		expect( result.current.userCan( PROVIDER_WITH_CAPABILITIES_KEY ) ).toEqual( deniedCapabilities );
+	} );
+} );

package/src/hooks/use-user-styles-capability.ts

@@ -1,4 +1,4 @@
-import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
+import { useCurrentUserCapabilities, useHasContentOnlyAccess } from '@elementor/editor-current-user';
 
 import { stylesRepository } from '../styles-repository';
 import { type UserCapabilities } from '../types';
@@ -14,10 +14,22 @@ const DEFAULT_CAPABILITIES: UserCan = {
 	updateProps: true,
 };
 
+const DENIED_CAPABILITIES: UserCan = {
+	create: false,
+	delete: false,
+	update: false,
+	updateProps: false,
+};
+
 export const useUserStylesCapability = () => {
 	const { capabilities } = useCurrentUserCapabilities();
+	const hasContentOnlyAccess = useHasContentOnlyAccess();
 
 	const userCan = ( providerKey: string ): UserCan => {
+		if ( hasContentOnlyAccess ) {
+			return DENIED_CAPABILITIES;
+		}
+
 		const provider = stylesRepository.getProviderByKey( providerKey );
 
 		if ( ! provider?.capabilities ) {

package/src/providers/document-elements-styles-provider.ts

@@ -30,7 +30,29 @@ export const documentElementsStylesProvider = createStylesProvider( {
 	},
 	priority: 50,
 	isPregeneratedLink: ( { id } ) => PREGENERATED_LINK_PATTERN.test( id ),
-	subscribe: ( cb ) => listenTo( styleRerenderEvents, () => cb() ),
+	subscribe: ( cb ) => {
+		let scheduledFrame: number | null = null;
+
+		const unsubscribe = listenTo( styleRerenderEvents, () => {
+			if ( scheduledFrame !== null ) {
+				return;
+			}
+
+			scheduledFrame = requestAnimationFrame( () => {
+				scheduledFrame = null;
+				cb();
+			} );
+		} );
+
+		return () => {
+			if ( scheduledFrame !== null ) {
+				cancelAnimationFrame( scheduledFrame );
+				scheduledFrame = null;
+			}
+
+			unsubscribe();
+		};
+	},
 	actions: {
 		all: ( meta = {} ) => {
 			let elements = getElements();