@elementor/editor-documents 0.11.4 → 0.11.5

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' ];
 }

package/src/sync/sync-store.ts

@@ -23,50 +23,48 @@ export function syncStore() {
 function syncInitialization() {
 	const { init } = slice.actions;
 
-	listenTo(
-		v1ReadyEvent(),
-		() => {
-			const documentsManager = getV1DocumentsManager();
+	listenTo( v1ReadyEvent(), () => {
+		const documentsManager = getV1DocumentsManager();
 
-			const entities = Object.entries( documentsManager.documents )
-				.reduce( ( acc: Record<string, Document>, [ id, document ] ) => {
-					acc[ id ] = normalizeV1Document( document );
+		const entities = Object.entries( documentsManager.documents ).reduce(
+			( acc: Record< string, Document >, [ id, document ] ) => {
+				acc[ id ] = normalizeV1Document( document );
 
-					return acc;
-				}, {} );
+				return acc;
+			},
+			{}
+		);
 
-			__dispatch( init( {
+		__dispatch(
+			init( {
 				entities,
 				hostId: documentsManager.getInitialId(),
 				activeId: documentsManager.getCurrentId(),
-			} ) );
-		}
-	);
+			} )
+		);
+	} );
 }
 
 function syncActiveDocument() {
 	const { activateDocument, setAsHost } = slice.actions;
 
-	listenTo(
-		commandEndEvent( 'editor/documents/open' ),
-		() => {
-			const documentsManager = getV1DocumentsManager();
-			const currentDocument = normalizeV1Document( documentsManager.getCurrent() );
+	listenTo( commandEndEvent( 'editor/documents/open' ), () => {
+		const documentsManager = getV1DocumentsManager();
+		const currentDocument = normalizeV1Document( documentsManager.getCurrent() );
 
-			__dispatch( activateDocument( currentDocument ) );
+		__dispatch( activateDocument( currentDocument ) );
 
-			if ( documentsManager.getInitialId() === currentDocument.id ) {
-				__dispatch( setAsHost( currentDocument.id ) );
-			}
+		if ( documentsManager.getInitialId() === currentDocument.id ) {
+			__dispatch( setAsHost( currentDocument.id ) );
 		}
-	);
+	} );
 }
 
 function syncOnDocumentSave() {
 	const { startSaving, endSaving, startSavingDraft, endSavingDraft } = slice.actions;
 
 	const isDraft = ( e: ListenerEvent ) => {
-		const event = e as CommandEvent<{ status: string }>;
+		const event = e as CommandEvent< { status: string } >;
 
 		/**
 		 * @see https://github.com/elementor/elementor/blob/5f815d40a/assets/dev/js/editor/document/save/hooks/ui/save/before.js#L18-L22
@@ -74,39 +72,31 @@ function syncOnDocumentSave() {
 		return event.args?.status === 'autosave';
 	};
 
-	listenTo(
-		commandStartEvent( 'document/save/save' ),
-		( e ) => {
-			if ( isDraft( e ) ) {
-				__dispatch( startSavingDraft() );
-				return;
-			}
-
-			__dispatch( startSaving() );
+	listenTo( commandStartEvent( 'document/save/save' ), ( e ) => {
+		if ( isDraft( e ) ) {
+			__dispatch( startSavingDraft() );
+			return;
 		}
-	);
-
-	listenTo(
-		commandEndEvent( 'document/save/save' ),
-		( e ) => {
-			const activeDocument = normalizeV1Document(
-				getV1DocumentsManager().getCurrent()
-			);
-
-			if ( isDraft( e ) ) {
-				__dispatch( endSavingDraft( activeDocument ) );
-			} else {
-				__dispatch( endSaving( activeDocument ) );
-			}
+
+		__dispatch( startSaving() );
+	} );
+
+	listenTo( commandEndEvent( 'document/save/save' ), ( e ) => {
+		const activeDocument = normalizeV1Document( getV1DocumentsManager().getCurrent() );
+
+		if ( isDraft( e ) ) {
+			__dispatch( endSavingDraft( activeDocument ) );
+		} else {
+			__dispatch( endSaving( activeDocument ) );
 		}
-	);
+	} );
 }
 
 function syncOnTitleChange() {
 	const { updateActiveDocument } = slice.actions;
 
 	const updateTitle = debounce( ( e: ListenerEvent ) => {
-		const event = e as CommandEvent<{ settings: { post_title?: string } }>;
+		const event = e as CommandEvent< { settings: { post_title?: string } } >;
 
 		if ( ! ( 'post_title' in event.args?.settings ) ) {
 			return;
@@ -118,17 +108,14 @@ function syncOnTitleChange() {
 		__dispatch( updateActiveDocument( { title: newTitle } ) );
 	}, 400 );
 
-	listenTo(
-		commandEndEvent( 'document/elements/settings' ),
-		updateTitle
-	);
+	listenTo( commandEndEvent( 'document/elements/settings' ), updateTitle );
 }
 
 function syncOnExitToChange() {
 	const { updateActiveDocument } = slice.actions;
 
 	const updateExitTo = debounce( ( e: ListenerEvent ) => {
-		const event = e as CommandEvent<{ settings: { exit_to?: string } }>;
+		const event = e as CommandEvent< { settings: { exit_to?: string } } >;
 
 		if ( ! ( 'exit_to' in event.args?.settings ) ) {
 			return;
@@ -141,32 +128,26 @@ function syncOnExitToChange() {
 		__dispatch( updateActiveDocument( { links: { platformEdit: newExitTo, permalink } } ) );
 	}, 400 );
 
-	listenTo(
-		commandEndEvent( 'document/elements/settings' ),
-		updateExitTo
-	);
+	listenTo( commandEndEvent( 'document/elements/settings' ), updateExitTo );
 }
 
 function syncOnDocumentChange() {
 	const { markAsDirty, markAsPristine } = slice.actions;
 
-	listenTo(
-		commandEndEvent( 'document/save/set-is-modified' ),
-		() => {
-			const currentDocument = getV1DocumentsManager().getCurrent();
-
-			if ( currentDocument.editor.isChanged ) {
-				__dispatch( markAsDirty() );
-				return;
-			}
+	listenTo( commandEndEvent( 'document/save/set-is-modified' ), () => {
+		const currentDocument = getV1DocumentsManager().getCurrent();
 
-			__dispatch( markAsPristine() );
+		if ( currentDocument.editor.isChanged ) {
+			__dispatch( markAsDirty() );
+			return;
 		}
-	);
+
+		__dispatch( markAsPristine() );
+	} );
 }
 
-function debounce<TArgs extends unknown[]>( fn: ( ...args: TArgs ) => unknown, timeout: number ) {
-	let timer: ReturnType<typeof setTimeout>;
+function debounce< TArgs extends unknown[] >( fn: ( ...args: TArgs ) => unknown, timeout: number ) {
+	let timer: ReturnType< typeof setTimeout >;
 
 	return ( ...args: TArgs ) => {
 		clearTimeout( timer );

package/src/sync/utils.ts

@@ -11,7 +11,8 @@ export function getV1DocumentsManager() {
 }
 
 export function getV1DocumentsExitTo( documentData: V1Document ) {
-	const exitPreference = ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'exit_to' ) || 'this_post';
+	const exitPreference =
+		( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'exit_to' ) || 'this_post';
 
 	switch ( exitPreference ) {
 		case 'dashboard':
@@ -26,7 +27,7 @@ export function getV1DocumentsExitTo( documentData: V1Document ) {
 	}
 }
 
-export function getV1DocumentShowCopyAndShare( documentData: V1Document|null ) {
+export function getV1DocumentShowCopyAndShare( documentData: V1Document | null ) {
 	return documentData?.config?.panel?.show_copy_and_share ?? false;
 }