@elementor/editor-documents 0.11.3 → 0.11.5

package/src/init.ts

@@ -1,9 +1,16 @@
 import { syncStore } from './sync';
 import { __registerSlice } from '@elementor/store';
 import { slice } from './store';
+import { injectIntoLogic } from '@elementor/editor';
+import { LogicHooks } from './components/logic-hooks';
 
 export default function init() {
 	initStore();
+
+	injectIntoLogic( {
+		id: 'documents-hooks',
+		component: LogicHooks,
+	} );
 }
 
 function initStore() {

package/src/store/index.ts

@@ -2,10 +2,10 @@ import { Document } from '../types';
 import { __createSlice, PayloadAction } from '@elementor/store';
 
 type State = {
-	entities: Record<Document['id'], Document>,
-	activeId: Document['id'] | null, // The currently editing document.
-	hostId: Document['id'] | null, // The document that host all the other documents.
-}
+	entities: Record< Document[ 'id' ], Document >;
+	activeId: Document[ 'id' ] | null; // The currently editing document.
+	hostId: Document[ 'id' ] | null; // The document that host all the other documents.
+};
 
 const initialState: State = {
 	entities: {},
@@ -13,7 +13,7 @@ const initialState: State = {
 	hostId: null,
 };
 
-type StateWithActiveId = Omit<State, 'activeId'> & { activeId: NonNullable<State['activeId']> };
+type StateWithActiveId = Omit< State, 'activeId' > & { activeId: NonNullable< State[ 'activeId' ] > };
 
 function hasActiveEntity( state: State ): state is StateWithActiveId {
 	return !! ( state.activeId && state.entities[ state.activeId ] );
@@ -23,22 +23,22 @@ export const slice = __createSlice( {
 	name: 'documents',
 	initialState,
 	reducers: {
-		init( state, { payload } : PayloadAction<State> ) {
+		init( state, { payload }: PayloadAction< State > ) {
 			state.entities = payload.entities;
 			state.hostId = payload.hostId;
 			state.activeId = payload.activeId;
 		},
 
-		activateDocument( state, action: PayloadAction<Document> ) {
+		activateDocument( state, action: PayloadAction< Document > ) {
 			state.entities[ action.payload.id ] = action.payload;
 			state.activeId = action.payload.id;
 		},
 
-		setAsHost( state, action: PayloadAction<Document['id']> ) {
+		setAsHost( state, action: PayloadAction< Document[ 'id' ] > ) {
 			state.hostId = action.payload;
 		},
 
-		updateActiveDocument( state, action: PayloadAction<Partial<Document>> ) {
+		updateActiveDocument( state, action: PayloadAction< Partial< Document > > ) {
 			if ( hasActiveEntity( state ) ) {
 				state.entities[ state.activeId ] = {
 					...state.entities[ state.activeId ],
@@ -53,7 +53,7 @@ export const slice = __createSlice( {
 			}
 		},
 
-		endSaving( state, action: PayloadAction<Document> ) {
+		endSaving( state, action: PayloadAction< Document > ) {
 			if ( hasActiveEntity( state ) ) {
 				state.entities[ state.activeId ] = {
 					...action.payload,
@@ -68,7 +68,7 @@ export const slice = __createSlice( {
 			}
 		},
 
-		endSavingDraft( state, action: PayloadAction<Document> ) {
+		endSavingDraft( state, action: PayloadAction< Document > ) {
 			if ( hasActiveEntity( state ) ) {
 				state.entities[ state.activeId ] = {
 					...action.payload,

package/src/store/selectors.ts

@@ -1,24 +1,16 @@
 import { slice } from './index';
 import { __createSelector, SliceState } from '@elementor/store';
 
-type State = SliceState<typeof slice>;
+type State = SliceState< typeof slice >;
 
 const selectEntities = ( state: State ) => state.documents.entities;
 const selectActiveId = ( state: State ) => state.documents.activeId;
 const selectHostId = ( state: State ) => state.documents.hostId;
 
-export const selectActiveDocument = __createSelector(
-	selectEntities,
-	selectActiveId,
-	( entities, activeId ) => activeId && entities[ activeId ]
-		? entities[ activeId ]
-		: null,
+export const selectActiveDocument = __createSelector( selectEntities, selectActiveId, ( entities, activeId ) =>
+	activeId && entities[ activeId ] ? entities[ activeId ] : null
 );
 
-export const selectHostDocument = __createSelector(
-	selectEntities,
-	selectHostId,
-	( entities, hostId ) => hostId && entities[ hostId ]
-		? entities[ hostId ]
-		: null,
+export const selectHostDocument = __createSelector( selectEntities, selectHostId, ( entities, hostId ) =>
+	hostId && entities[ hostId ] ? entities[ hostId ] : null
 );

package/src/sync/__tests__/sync-store.test.ts

@@ -12,12 +12,12 @@ import {
 import { selectActiveDocument } from '../../store/selectors';
 import { getV1DocumentPermalink, getV1DocumentsExitTo } from '../utils';
 
-type WindowWithOptionalElementor = Omit<ExtendedWindow, 'elementor'> & {
-	elementor?: ExtendedWindow['elementor'];
-}
+type WindowWithOptionalElementor = Omit< ExtendedWindow, 'elementor' > & {
+	elementor?: ExtendedWindow[ 'elementor' ];
+};
 
 describe( '@elementor/editor-documents - Sync Store', () => {
-	let store: Store<SliceState<typeof slice>>;
+	let store: Store< SliceState< typeof slice > >;
 
 	beforeEach( () => {
 		jest.useFakeTimers();
@@ -34,10 +34,7 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 
 	it( 'should sync documents on V1 load', () => {
 		// Arrange.
-		mockV1DocumentsManager( [
-			makeMockV1Document( { id: 1 } ),
-			makeMockV1Document( { id: 2 } ),
-		], 'this_post' );
+		mockV1DocumentsManager( [ makeMockV1Document( { id: 1 } ), makeMockV1Document( { id: 2 } ) ], 'this_post' );
 
 		// Act.
 		dispatchV1ReadyEvent();
@@ -45,7 +42,7 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 		// Assert.
 		const storeState = store.getState();
 
-		expect( storeState.documents.entities ).toEqual<Record<number, Document>>( {
+		expect( storeState.documents.entities ).toEqual< Record< number, Document > >( {
 			1: {
 				id: 1,
 				title: 'Document 1',
@@ -112,10 +109,7 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 		},
 	] )( 'should sync active document on $type', ( { dispatchEvent } ) => {
 		// Arrange.
-		mockV1DocumentsManager( [
-			makeMockV1Document( { id: 1 } ),
-			makeMockV1Document( { id: 2 } ),
-		], 'this_post', 2 );
+		mockV1DocumentsManager( [ makeMockV1Document( { id: 1 } ), makeMockV1Document( { id: 2 } ) ], 'this_post', 2 );
 
 		// Act.
 		dispatchEvent();
@@ -123,7 +117,7 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 		// Assert.
 		const currentDocument = selectActiveDocument( store.getState() );
 
-		expect( currentDocument ).toEqual<Document>( {
+		expect( currentDocument ).toEqual< Document >( {
 			id: 2,
 			title: 'Document 2',
 			type: {
@@ -160,30 +154,27 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 			openAsHost: false,
 			expectedHost: 1,
 		},
-	] )( 'should sync host document when a new host is opened { openAsHost: $openAsHost }', ( { openAsHost, expectedHost } ) => {
-		// Arrange.
-		const mockDocument1 = makeMockV1Document( { id: 1 } );
-		const mockDocument2 = makeMockV1Document( { id: 2 } );
+	] )(
+		'should sync host document when a new host is opened { openAsHost: $openAsHost }',
+		( { openAsHost, expectedHost } ) => {
+			// Arrange.
+			const mockDocument1 = makeMockV1Document( { id: 1 } );
+			const mockDocument2 = makeMockV1Document( { id: 2 } );
 
-		mockV1DocumentsManager( [
-			mockDocument1,
-			mockDocument2,
-		], 'this_post', 1, 1 );
+			mockV1DocumentsManager( [ mockDocument1, mockDocument2 ], 'this_post', 1, 1 );
 
-		// Populate the documents state.
-		dispatchV1ReadyEvent();
+			// Populate the documents state.
+			dispatchV1ReadyEvent();
 
-		// Act - Mock a host document change.
-		mockV1DocumentsManager( [
-			mockDocument1,
-			mockDocument2,
-		], 'this_post', 2, openAsHost ? 2 : 1 );
+			// Act - Mock a host document change.
+			mockV1DocumentsManager( [ mockDocument1, mockDocument2 ], 'this_post', 2, openAsHost ? 2 : 1 );
 
-		dispatchCommandAfter( 'editor/documents/open' );
+			dispatchCommandAfter( 'editor/documents/open' );
 
-		// Assert.
-		expect( store.getState().documents.hostId ).toBe( expectedHost );
-	} );
+			// Assert.
+			expect( store.getState().documents.hostId ).toBe( expectedHost );
+		}
+	);
 
 	it( 'should sync saving state of a document on V1 load', () => {
 		// Arrange.
@@ -208,9 +199,7 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 
 	it( 'should sync saving state of a document on save', () => {
 		// Arrange.
-		mockV1DocumentsManager( [
-			makeMockV1Document(),
-		] );
+		mockV1DocumentsManager( [ makeMockV1Document() ] );
 
 		// Populate the documents state.
 		dispatchV1ReadyEvent();
@@ -235,9 +224,7 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 
 	it( 'should sync draft saving state of a document on save', () => {
 		// Arrange.
-		mockV1DocumentsManager( [
-			makeMockV1Document(),
-		] );
+		mockV1DocumentsManager( [ makeMockV1Document() ] );
 
 		// Populate the documents state.
 		dispatchV1ReadyEvent();
@@ -268,15 +255,17 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 		// Arrange.
 		const mockDocument = makeMockV1Document( { id: 1 } );
 
-		mockV1DocumentsManager( [ {
-			...mockDocument,
-			config: {
-				...mockDocument.config,
-				revisions: {
-					current_id: 2,
+		mockV1DocumentsManager( [
+			{
+				...mockDocument,
+				config: {
+					...mockDocument.config,
+					revisions: {
+						current_id: 2,
+					},
 				},
 			},
-		} ] );
+		] );
 
 		// Act.
 		dispatchV1ReadyEvent();
@@ -289,9 +278,7 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 		// Arrange.
 		const mockDocument = makeMockV1Document();
 
-		mockV1DocumentsManager( [
-			mockDocument,
-		] );
+		mockV1DocumentsManager( [ mockDocument ] );
 
 		// Populate the documents state.
 		dispatchV1ReadyEvent();
@@ -373,30 +360,38 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 
 	it( 'should update the document when finish saving', () => {
 		// Arrange.
-		mockV1DocumentsManager( [
-			makeMockV1Document( {
-				id: 1,
-				status: 'draft',
-				title: 'test',
-			} ),
-		], 'this_post' );
+		mockV1DocumentsManager(
+			[
+				makeMockV1Document( {
+					id: 1,
+					status: 'draft',
+					title: 'test',
+				} ),
+			],
+			'this_post'
+		);
 
 		// Populate the documents state.
 		dispatchV1ReadyEvent();
 
 		// Mock a change.
-		mockV1DocumentsManager( [
-			makeMockV1Document( {
-				id: 1,
-				status: 'publish',
-				title: 'test title changed',
-			} ),
-		], 'dashboard' );
+		mockV1DocumentsManager(
+			[
+				makeMockV1Document( {
+					id: 1,
+					status: 'publish',
+					title: 'test title changed',
+				} ),
+			],
+			'dashboard'
+		);
 
 		// Assert.
 		expect( selectActiveDocument( store.getState() )?.title ).toBe( 'test' );
 		expect( selectActiveDocument( store.getState() )?.status.value ).toBe( 'draft' );
-		expect( selectActiveDocument( store.getState() )?.links.platformEdit ).toBe( 'https://localhost/wp-admin/post.php?post=1&action=edit' );
+		expect( selectActiveDocument( store.getState() )?.links.platformEdit ).toBe(
+			'https://localhost/wp-admin/post.php?post=1&action=edit'
+		);
 
 		// Act.
 		dispatchCommandAfter( 'document/save/save' );
@@ -407,55 +402,57 @@ describe( '@elementor/editor-documents - Sync Store', () => {
 		expect( selectActiveDocument( store.getState() )?.links.platformEdit ).toBe( 'https://localhost/wp-admin/' );
 	} );
 
-	it.each( [
-		'dashboard',
-		'this_post',
-		'all_posts',
-	] as ExitTo[] )( 'should sync active document $ExitTo', ( exitTo ) => {
-		// Arrange.
-		const mockDocument = makeMockV1Document( { id: 1 } );
-		mockV1DocumentsManager( [
-			mockDocument,
-		], exitTo );
+	it.each( [ 'dashboard', 'this_post', 'all_posts' ] as ExitTo[] )(
+		'should sync active document $ExitTo',
+		( exitTo ) => {
+			// Arrange.
+			const mockDocument = makeMockV1Document( { id: 1 } );
+			mockV1DocumentsManager( [ mockDocument ], exitTo );
 
-		// Populate the documents state.
-		dispatchV1ReadyEvent();
+			// Populate the documents state.
+			dispatchV1ReadyEvent();
 
-		// Assert.
-		const currentDocument = selectActiveDocument( store.getState() );
-		const platformEdit = getV1DocumentsExitTo( mockDocument );
-		const permalink = getV1DocumentPermalink( mockDocument );
+			// Assert.
+			const currentDocument = selectActiveDocument( store.getState() );
+			const platformEdit = getV1DocumentsExitTo( mockDocument );
+			const permalink = getV1DocumentPermalink( mockDocument );
 
-		expect( currentDocument ).toEqual<Document>( {
-			id: 1,
-			title: 'Document 1',
-			type: {
-				value: 'wp-page',
-				label: 'WP-PAGE',
-			},
-			links: {
-				platformEdit,
-				permalink,
-			},
-			status: {
-				value: 'publish',
-				label: 'PUBLISH',
-			},
-			isDirty: false,
-			isSaving: false,
-			isSavingDraft: false,
-			userCan: {
-				publish: true,
-			},
-			permissions: {
-				allowAddingWidgets: true,
-				showCopyAndShare: false,
-			},
-		} );
-	} );
+			expect( currentDocument ).toEqual< Document >( {
+				id: 1,
+				title: 'Document 1',
+				type: {
+					value: 'wp-page',
+					label: 'WP-PAGE',
+				},
+				links: {
+					platformEdit,
+					permalink,
+				},
+				status: {
+					value: 'publish',
+					label: 'PUBLISH',
+				},
+				isDirty: false,
+				isSaving: false,
+				isSavingDraft: false,
+				userCan: {
+					publish: true,
+				},
+				permissions: {
+					allowAddingWidgets: true,
+					showCopyAndShare: false,
+				},
+			} );
+		}
+	);
 } );
 
-function mockV1DocumentsManager( documentsArray: V1Document[], exitTo: ExitTo = 'this_post', current = 1, initial = 1 ) {
+function mockV1DocumentsManager(
+	documentsArray: V1Document[],
+	exitTo: ExitTo = 'this_post',
+	current = 1,
+	initial = 1
+) {
 	( window as unknown as WindowWithOptionalElementor ).elementor = {
 		getPreferences: () => exitTo,
 		documents: makeDocumentsManager( documentsArray, current, initial ),

package/src/sync/__tests__/test-utils.ts

@@ -1,21 +1,25 @@
 import { V1Document } from '../../types';
 
 export function dispatchCommandBefore( command: string, args: object = {} ) {
-	window.dispatchEvent( new CustomEvent( 'elementor/commands/run/before', {
-		detail: {
-			command,
-			args,
-		},
-	} ) );
+	window.dispatchEvent(
+		new CustomEvent( 'elementor/commands/run/before', {
+			detail: {
+				command,
+				args,
+			},
+		} )
+	);
 }
 
 export function dispatchCommandAfter( command: string, args: object = {} ) {
-	window.dispatchEvent( new CustomEvent( 'elementor/commands/run/after', {
-		detail: {
-			command,
-			args,
-		},
-	} ) );
+	window.dispatchEvent(
+		new CustomEvent( 'elementor/commands/run/after', {
+			detail: {
+				command,
+				args,
+			},
+		} )
+	);
 }
 
 export function dispatchWindowEvent( event: string ) {
@@ -27,7 +31,7 @@ export function dispatchV1ReadyEvent() {
 }
 
 export function makeDocumentsManager( documentsArray: V1Document[], current = 1, initial = current ) {
-	const documents = documentsArray.reduce( ( acc: Record<number, V1Document>, document ) => {
+	const documents = documentsArray.reduce( ( acc: Record< number, V1Document >, document ) => {
 		acc[ document.id ] = document;
 
 		return acc;
@@ -53,10 +57,10 @@ export function makeMockV1Document( {
 	status = 'publish',
 	type = 'wp-page',
 }: {
-	id?: number,
-	status?: string,
-	title?: string,
-	type?: string,
+	id?: number;
+	status?: string;
+	title?: string;
+	type?: string;
 } = {} ): V1Document {
 	return {
 		id,
@@ -97,10 +101,10 @@ export function makeMockV1Document( {
 }
 
 // Mock Backbone's settings model.
-function makeV1Settings<T extends object>( settings: T ) {
+function makeV1Settings< T extends object >( settings: T ) {
 	return {
 		get( key: keyof T ) {
 			return settings[ key ];
 		},
-	} as V1Document['container']['settings'];
+	} as V1Document[ 'container' ][ 'settings' ];
 }