@elementor/editor-components 4.2.0-934 → 4.2.0-936

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.2.0-934",
+  "version": "4.2.0-936",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,32 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-934",
-    "@elementor/editor-canvas": "4.2.0-934",
-    "@elementor/editor-controls": "4.2.0-934",
-    "@elementor/editor-documents": "4.2.0-934",
-    "@elementor/editor-editing-panel": "4.2.0-934",
-    "@elementor/editor-elements": "4.2.0-934",
-    "@elementor/editor-elements-panel": "4.2.0-934",
-    "@elementor/editor-global-classes": "4.2.0-934",
-    "@elementor/editor-mcp": "4.2.0-934",
-    "@elementor/editor-templates": "4.2.0-934",
-    "@elementor/editor-panels": "4.2.0-934",
-    "@elementor/editor-props": "4.2.0-934",
-    "@elementor/editor-styles-repository": "4.2.0-934",
-    "@elementor/editor-ui": "4.2.0-934",
-    "@elementor/editor-v1-adapters": "4.2.0-934",
-    "@elementor/http-client": "4.2.0-934",
+    "@elementor/editor": "4.2.0-936",
+    "@elementor/editor-canvas": "4.2.0-936",
+    "@elementor/editor-controls": "4.2.0-936",
+    "@elementor/editor-documents": "4.2.0-936",
+    "@elementor/editor-editing-panel": "4.2.0-936",
+    "@elementor/editor-elements": "4.2.0-936",
+    "@elementor/editor-elements-panel": "4.2.0-936",
+    "@elementor/editor-mcp": "4.2.0-936",
+    "@elementor/editor-templates": "4.2.0-936",
+    "@elementor/editor-panels": "4.2.0-936",
+    "@elementor/editor-props": "4.2.0-936",
+    "@elementor/editor-ui": "4.2.0-936",
+    "@elementor/editor-v1-adapters": "4.2.0-936",
+    "@elementor/http-client": "4.2.0-936",
     "@elementor/icons": "~1.75.1",
-    "@elementor/events": "4.2.0-934",
-    "@elementor/query": "4.2.0-934",
-    "@elementor/schema": "4.2.0-934",
-    "@elementor/store": "4.2.0-934",
+    "@elementor/events": "4.2.0-936",
+    "@elementor/query": "4.2.0-936",
+    "@elementor/schema": "4.2.0-936",
+    "@elementor/store": "4.2.0-936",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-934",
+    "@elementor/utils": "4.2.0-936",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.2.0-934",
-    "@elementor/editor-current-user": "4.2.0-934"
+    "@elementor/editor-notifications": "4.2.0-936",
+    "@elementor/editor-current-user": "4.2.0-936",
+    "@elementor/editor-embedded-documents-manager": "4.2.0-936"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/index.ts

@@ -77,7 +77,6 @@ export type {
 	OverridableProps,
 	OverridablePropsGroup,
 	PublishedComponent,
-	StylesDefinition,
 	UnpublishedComponent,
 	UpdatedComponentName,
 } from './types';

package/src/init.ts

@@ -8,7 +8,7 @@ import { getV1CurrentDocument } from '@elementor/editor-documents';
 import { registerEditingPanelReplacement } from '@elementor/editor-editing-panel';
 import { type V1ElementData } from '@elementor/editor-elements';
 import { injectTab } from '@elementor/editor-elements-panel';
-import { stylesRepository } from '@elementor/editor-styles-repository';
+import { embeddedDocumentsManager } from '@elementor/editor-embedded-documents-manager';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { __registerSlice as registerSlice } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
@@ -26,15 +26,12 @@ import { PopulateStore } from './populate-store';
 import { initCircularNestingPrevention } from './prevent-circular-nesting';
 import { loadComponentsAssets } from './store/actions/load-components-assets';
 import { removeComponentStyles } from './store/actions/remove-component-styles';
-import { componentsStylesProvider } from './store/components-styles-provider';
 import { slice } from './store/store';
 import { beforeSave } from './sync/before-save';
 import { initLoadComponentDataAfterInstanceAdded } from './sync/load-component-data-after-instance-added';
 import { type ExtendedWindow } from './types';
 
 export function init() {
-	stylesRepository.register( componentsStylesProvider );
-
 	registerSlice( slice );
 
 	registerElementType( COMPONENT_WIDGET_TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
@@ -59,14 +56,20 @@ export function init() {
 		component: PopulateStore,
 	} );
 
-	registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
-		const { id, config } = getV1CurrentDocument();
+	registerDataHook( 'after', 'editor/documents/attach-preview', () => {
+		const { id, config } = getV1CurrentDocument() ?? {};
 
-		if ( id ) {
-			removeComponentStyles( id );
+		if ( ! id ) {
+			return;
 		}
 
-		await loadComponentsAssets( ( config?.elements as V1ElementData[] ) ?? [] );
+		removeComponentStyles( id );
+
+		void loadComponentsAssets( ( config?.elements as V1ElementData[] ) ?? [] );
+	} );
+
+	embeddedDocumentsManager.onDocumentLoad( ( _documentId, data ) => {
+		void loadComponentsAssets( data.elements ?? [] );
 	} );
 
 	injectIntoLogic( {

package/src/store/actions/load-components-assets.ts

@@ -1,15 +1,17 @@
 import { isDocumentDirty, setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { type V1ElementData } from '@elementor/editor-elements';
+import { embeddedDocumentsManager } from '@elementor/editor-embedded-documents-manager';
 
 import { type ComponentDocumentsMap, getComponentDocuments } from '../../utils/get-component-documents';
 import { loadComponentsOverridableProps } from './load-components-overridable-props';
-import { loadComponentsStyles } from './load-components-styles';
 
 export async function loadComponentsAssets( elements: V1ElementData[] ) {
-	const documents = await getComponentDocuments( elements );
+	const documents = await getComponentDocuments( { elements, isRecursive: false } );
 
 	updateDocumentState( documents );
-	loadComponentsStyles( documents );
+	documents.forEach( ( document, id ) => {
+		embeddedDocumentsManager.setDocument( id, document );
+	} );
 
 	await loadComponentsOverridableProps( [ ...documents.keys() ] );
 }

package/src/store/actions/remove-component-styles.ts

@@ -1,9 +1,5 @@
-import { __dispatch as dispatch } from '@elementor/store';
-
 import { apiClient } from '../../api';
-import { slice } from '../store';
 
 export function removeComponentStyles( id: number ) {
 	apiClient.invalidateComponentConfigCache( id );
-	dispatch( slice.actions.removeStyles( { id } ) );
 }

package/src/store/dispatchers.ts

@@ -24,12 +24,6 @@ export const componentsActions = {
 	resetUnpublished() {
 		dispatch( slice.actions.resetUnpublished() );
 	},
-	removeStyles( id: ComponentId ) {
-		dispatch( slice.actions.removeStyles( { id } ) );
-	},
-	addStyles( styles: Record< string, unknown > ) {
-		dispatch( slice.actions.addStyles( styles ) );
-	},
 	addCreatedThisSession( uid: string ) {
 		dispatch( slice.actions.addCreatedThisSession( uid ) );
 	},

package/src/store/extensible-slice.ts

@@ -65,14 +65,6 @@ const baseSlice = createSlice( {
 		resetUnpublished: ( state ) => {
 			state.unpublishedData = [];
 		},
-		removeStyles( state, { payload }: PayloadAction< { id: ComponentId } > ) {
-			const { [ payload.id ]: _, ...rest } = state.styles;
-
-			state.styles = rest;
-		},
-		addStyles: ( state, { payload } ) => {
-			state.styles = { ...state.styles, ...payload };
-		},
 		addCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
 			state.createdThisSession.push( payload );
 		},

package/src/store/store-types.ts

@@ -1,12 +1,6 @@
 import { type V1Document } from '@elementor/editor-documents';
 
-import {
-	type Component,
-	type ComponentId,
-	type PublishedComponent,
-	type StylesDefinition,
-	type UnpublishedComponent,
-} from '../types';
+import { type Component, type ComponentId, type PublishedComponent, type UnpublishedComponent } from '../types';
 
 export type SanitizeAttributes = 'overridableProps';
 
@@ -14,7 +8,6 @@ export type ComponentsState = {
 	data: PublishedComponent[];
 	unpublishedData: UnpublishedComponent[];
 	loadStatus: 'idle' | 'pending' | 'error';
-	styles: StylesDefinition;
 	createdThisSession: Component[ 'uid' ][];
 	archivedThisSession: ComponentId[];
 	path: ComponentsPathItem[];
@@ -36,7 +29,6 @@ export const initialState: ComponentsState = {
 	data: [],
 	unpublishedData: [],
 	loadStatus: 'idle',
-	styles: {},
 	createdThisSession: [],
 	archivedThisSession: [],
 	path: [],

package/src/store/store.ts

@@ -13,7 +13,6 @@ export { initialState, SLICE_NAME } from './store-types';
 export const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
 export const selectArchivedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].archivedThisSession;
 const selectLoadStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].loadStatus;
-const selectStylesDefinitions = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
 const selectUnpublishedData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].unpublishedData;
 const getCreatedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].createdThisSession;
 const getPath = ( state: ComponentsSlice ) => state[ SLICE_NAME ].path;
@@ -46,21 +45,6 @@ export const selectUnpublishedComponents = createSelector(
 );
 export const selectLoadIsPending = createSelector( selectLoadStatus, ( status ) => status === 'pending' );
 export const selectLoadIsError = createSelector( selectLoadStatus, ( status ) => status === 'error' );
-export const selectStyles = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
-export const selectFlatStyles = createSelector(
-	selectStylesDefinitions,
-	( _state: ComponentsSlice, excludeComponentId: ComponentId | null = null ) => excludeComponentId,
-	( data, excludeComponentId ) => {
-		if ( excludeComponentId === null ) {
-			return Object.values( data ).flat();
-		}
-
-		return Object.entries( data )
-			.filter( ( [ id ] ) => id !== String( excludeComponentId ) )
-			.map( ( [ , styles ] ) => styles )
-			.flat();
-	}
-);
 export const selectCreatedThisSession = createSelector(
 	getCreatedThisSession,
 	( createdThisSession ) => createdThisSession

package/src/sync/publish-draft-components-in-page-before-save.ts

@@ -22,7 +22,7 @@ export async function publishDraftComponentsInPageBeforeSave( { status, elements
 		return;
 	}
 
-	const documents = await getComponentDocuments( elements );
+	const documents = await getComponentDocuments( { elements } );
 
 	const draftIds = [ ...documents.values() ].filter( isDocumentDirty ).map( ( document ) => document.id );
 

package/src/types.ts

@@ -1,7 +1,6 @@
 import { type RenderContext } from '@elementor/editor-canvas';
 import { type V1Element, type V1ElementData } from '@elementor/editor-elements';
 import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
-import type { StyleDefinition } from '@elementor/editor-styles';
 
 export type ComponentFormValues = {
 	componentName: string;
@@ -9,8 +8,6 @@ export type ComponentFormValues = {
 
 export type ComponentId = number;
 
-export type StylesDefinition = Record< ComponentId, StyleDefinition[] >;
-
 export type Component = PublishedComponent | UnpublishedComponent;
 
 export type PublishedComponent = BaseComponent & {

package/src/utils/get-component-documents.ts

@@ -9,16 +9,26 @@ export type ComponentDocumentsMap = Map< number, Document >;
 
 type ProcessedCache = Map< number, Promise< Document | null > >;
 
-export async function getComponentDocuments(
-	elements: V1ElementData[],
-	cache: ProcessedCache = new Map()
-): Promise< ComponentDocumentsMap > {
-	const componentIds = await getComponentIds( elements, cache );
+type GetterParams = {
+	elements: V1ElementData[];
+	cache?: ProcessedCache;
+	isRecursive?: boolean;
+};
+export async function getComponentDocuments( {
+	elements,
+	cache = new Map(),
+	isRecursive = true,
+}: GetterParams ): Promise< ComponentDocumentsMap > {
+	const componentIds = await getComponentIds( elements, cache, isRecursive );
 
 	return getDocumentsMap( componentIds, cache );
 }
 
-async function getComponentIds( elements: V1ElementData[], cache: ProcessedCache ): Promise< number[] > {
+async function getComponentIds(
+	elements: V1ElementData[],
+	cache: ProcessedCache,
+	isRecursive: boolean
+): Promise< number[] > {
 	const results = await Promise.all(
 		elements.map( async ( { widgetType, elType, elements: childElements, settings } ) => {
 			const ids: number[] = [];
@@ -41,8 +51,8 @@ async function getComponentIds( elements: V1ElementData[], cache: ProcessedCache
 				childElements = doc?.elements;
 			}
 
-			if ( childElements?.length ) {
-				const childIds = await getComponentIds( childElements, cache );
+			if ( isRecursive && childElements?.length ) {
+				const childIds = await getComponentIds( childElements, cache, isRecursive );
 				ids.push( ...childIds );
 			}
 

package/src/store/actions/load-components-styles.ts

@@ -1,50 +0,0 @@
-import { type Document } from '@elementor/editor-documents';
-import { type V1ElementData } from '@elementor/editor-elements';
-import { addDocumentClasses } from '@elementor/editor-global-classes';
-import { type StyleDefinition } from '@elementor/editor-styles';
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-
-import { type ComponentDocumentsMap } from '../../utils/get-component-documents';
-import { selectStyles, slice } from '../store';
-
-export function loadComponentsStyles( documents: ComponentDocumentsMap ) {
-	if ( ! documents.size ) {
-		return;
-	}
-
-	const knownComponents = selectStyles( getState() );
-	const unknownDocuments = new Map( [ ...documents.entries() ].filter( ( [ id ] ) => ! knownComponents[ id ] ) );
-
-	if ( ! unknownDocuments.size ) {
-		return;
-	}
-
-	addStyles( unknownDocuments );
-}
-
-function addStyles( documents: ComponentDocumentsMap ) {
-	const styles = Object.fromEntries(
-		[ ...documents.entries() ].map( ( [ id, document ] ) => {
-			addDocumentClasses( id );
-
-			return [ id, extractStylesFromDocument( document ) ];
-		} )
-	);
-
-	dispatch( slice.actions.addStyles( styles ) );
-}
-
-function extractStylesFromDocument( document: Document ): Array< StyleDefinition > {
-	if ( ! document.elements?.length ) {
-		return [];
-	}
-
-	return document.elements.flatMap( extractStylesFromElement );
-}
-
-function extractStylesFromElement( element: V1ElementData ): Array< StyleDefinition > {
-	return [
-		...Object.values( element.styles ?? {} ),
-		...( element.elements ?? [] ).flatMap( extractStylesFromElement ),
-	];
-}

package/src/store/components-styles-provider.ts

@@ -1,26 +0,0 @@
-import { getCurrentDocumentId } from '@elementor/editor-elements';
-import { createStylesProvider } from '@elementor/editor-styles-repository';
-import { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';
-
-import { selectFlatStyles, SLICE_NAME } from './store';
-
-export const componentsStylesProvider = createStylesProvider( {
-	key: 'components-styles',
-	priority: 100,
-	subscribe: ( cb ) =>
-		subscribeWithSelector(
-			( state ) => state[ SLICE_NAME ],
-			() => {
-				cb();
-			}
-		),
-	actions: {
-		all: () => {
-			const currentDocumentId = getCurrentDocumentId();
-			return selectFlatStyles( getState(), currentDocumentId );
-		},
-		get: ( id ) => {
-			return selectFlatStyles( getState() ).find( ( style ) => style.id === id ) ?? null;
-		},
-	},
-} );