@elementor/editor-documents 0.1.0

package/src/hooks/__tests__/use-active-document-actions.test.ts

@@ -0,0 +1,51 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useActiveDocumentActions from '../use-active-document-actions';
+import { openRoute, runCommand } from '@elementor/editor-v1-adapters';
+
+jest.mock( '@elementor/editor-v1-adapters' );
+
+describe( '@elementor/editor-documents - useActiveDocumentActions', () => {
+	it( 'should run documents actions', () => {
+		// Arrange.
+		const { result } = renderHook( () => useActiveDocumentActions() );
+
+		const {
+			save,
+			saveDraft,
+			saveTemplate,
+		} = result.current;
+
+		// Act.
+		save();
+		saveDraft();
+		saveTemplate();
+
+		// Assert.
+		expect( runCommand ).toHaveBeenCalledTimes( 2 );
+
+		expect( runCommand ).toHaveBeenNthCalledWith( 1, 'document/save/default' );
+		expect( runCommand ).toHaveBeenNthCalledWith( 2, 'document/save/draft' );
+
+		expect( openRoute ).toHaveBeenCalledTimes( 1 );
+		expect( openRoute ).toHaveBeenCalledWith( 'library/save-template' );
+	} );
+
+	it( 'should return memoized callbacks', () => {
+		// Arrange.
+		const { result, rerender } = renderHook( () => useActiveDocumentActions() );
+
+		const {
+			save,
+			saveDraft,
+			saveTemplate,
+		} = result.current;
+
+		// Act.
+		rerender();
+
+		// Assert.
+		expect( result.current.save ).toBe( save );
+		expect( result.current.saveDraft ).toBe( saveDraft );
+		expect( result.current.saveTemplate ).toBe( saveTemplate );
+	} );
+} );

package/src/hooks/__tests__/use-active-document.test.tsx

@@ -0,0 +1,35 @@
+import { Slice, createSlice } from '../../store';
+import useActiveDocument from '../use-active-document';
+import { createStore, dispatch, SliceState, Store } from '@elementor/store';
+import { createMockDocument, renderHookWithStore } from 'test-utils';
+
+describe( '@elementor/editor-documents - useActiveDocument', () => {
+	let store: Store<SliceState<Slice>>;
+	let slice: Slice;
+
+	beforeEach( () => {
+		slice = createSlice();
+		store = createStore();
+	} );
+
+	it( 'should return the current document', () => {
+		// Arrange.
+		const mockDocument = createMockDocument();
+
+		dispatch( slice.actions.activateDocument( mockDocument ) );
+
+		// Act.
+		const { result } = renderHookWithStore( useActiveDocument, store );
+
+		// Assert.
+		expect( result.current ).toBe( mockDocument );
+	} );
+
+	it( 'should return null when the current document is not found', () => {
+		// Act.
+		const { result } = renderHookWithStore( useActiveDocument, store );
+
+		// Assert.
+		expect( result.current ).toBeNull();
+	} );
+} );

package/src/hooks/__tests__/use-host-document.test.tsx

@@ -0,0 +1,46 @@
+import { Slice, createSlice } from '../../store';
+import { createStore, dispatch, SliceState, Store } from '@elementor/store';
+import useHostDocument from '../use-host-document';
+import { createMockDocument, renderHookWithStore } from 'test-utils';
+
+describe( '@elementor/editor-documents - useHostDocument', () => {
+	const mockDocument = createMockDocument();
+
+	let store: Store<SliceState<Slice>>;
+	let slice: Slice;
+
+	beforeEach( () => {
+		slice = createSlice();
+		store = createStore();
+	} );
+
+	it( 'should return the host document', () => {
+		// Arrange.
+		dispatch( slice.actions.init( {
+			entities: { [ mockDocument.id ]: mockDocument },
+			activeId: null,
+			hostId: mockDocument.id,
+		} ) );
+
+		// Act.
+		const { result } = renderHookWithStore( useHostDocument, store );
+
+		// Assert.
+		expect( result.current ).toEqual( expect.objectContaining( { id: mockDocument.id } ) );
+	} );
+
+	it( 'should return null when the host document is not found', () => {
+		// Arrange.
+		dispatch( slice.actions.init( {
+			entities: { [ mockDocument.id ]: mockDocument },
+			activeId: null,
+			hostId: null,
+		} ) );
+
+		// Act.
+		const { result } = renderHookWithStore( useHostDocument, store );
+
+		// Assert.
+		expect( result.current ).toBeNull();
+	} );
+} );

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { default as useActiveDocument } from './use-active-document';
+export { default as useActiveDocumentActions } from './use-active-document-actions';
+export { default as useHostDocument } from './use-host-document';

package/src/hooks/use-active-document-actions.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { openRoute, runCommand } from '@elementor/editor-v1-adapters';
+
+export default function useActiveDocumentActions() {
+	const save = useCallback( () => runCommand( 'document/save/default' ), [] );
+
+	const saveDraft = useCallback( () => runCommand( 'document/save/draft' ), [] );
+
+	const saveTemplate = useCallback( () => openRoute( 'library/save-template' ), [] );
+
+	return {
+		save,
+		saveDraft,
+		saveTemplate,
+	};
+}

package/src/hooks/use-active-document.ts

@@ -0,0 +1,6 @@
+import { useSelector } from '@elementor/store';
+import { selectActiveDocument } from '../store/selectors';
+
+export default function useActiveDocument() {
+	return useSelector( selectActiveDocument );
+}

package/src/hooks/use-host-document.ts

@@ -0,0 +1,6 @@
+import { useSelector } from '@elementor/store';
+import { selectHostDocument } from '../store/selectors';
+
+export default function useHostDocument() {
+	return useSelector( selectHostDocument );
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import init from './init';
+
+export * from './hooks';
+export * from './types';
+
+init();

package/src/init.ts

@@ -0,0 +1,12 @@
+import { syncStore } from './sync';
+import { createSlice } from './store';
+
+export default function init() {
+	initStore();
+}
+
+function initStore() {
+	const slice = createSlice();
+
+	syncStore( slice );
+}

package/src/store/index.ts

@@ -0,0 +1,83 @@
+import { Document } from '../types';
+import { addSlice, 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.
+}
+
+export type Slice = ReturnType<typeof createSlice>;
+
+const initialState: State = {
+	entities: {},
+	activeId: null,
+	hostId: null,
+};
+
+type StateWithActiveId = Omit<State, 'activeId'> & { activeId: NonNullable<State['activeId']> };
+
+function hasActiveEntity( state: State ): state is StateWithActiveId {
+	return !! ( state.activeId && state.entities[ state.activeId ] );
+}
+
+export function createSlice() {
+	return addSlice( {
+		name: 'documents',
+		initialState,
+		reducers: {
+			init( state, { payload } : PayloadAction<State> ) {
+				state.entities = payload.entities;
+				state.hostId = payload.hostId;
+				state.activeId = payload.activeId;
+			},
+
+			activateDocument( state, action: PayloadAction<Document> ) {
+				state.entities[ action.payload.id ] = action.payload;
+				state.activeId = action.payload.id;
+			},
+
+			startSaving( state ) {
+				if ( hasActiveEntity( state ) ) {
+					state.entities[ state.activeId ].isSaving = true;
+				}
+			},
+
+			endSaving( state, action: PayloadAction<Document> ) {
+				if ( hasActiveEntity( state ) ) {
+					state.entities[ state.activeId ] = {
+						...action.payload,
+						isSaving: false,
+					};
+				}
+			},
+
+			startSavingDraft: ( state ) => {
+				if ( hasActiveEntity( state ) ) {
+					state.entities[ state.activeId ].isSavingDraft = true;
+				}
+			},
+
+			endSavingDraft( state, action: PayloadAction<Document> ) {
+				if ( hasActiveEntity( state ) ) {
+					state.entities[ state.activeId ] = {
+						...action.payload,
+						isSavingDraft: false,
+					};
+				}
+			},
+
+			markAsDirty( state ) {
+				if ( hasActiveEntity( state ) ) {
+					state.entities[ state.activeId ].isDirty = true;
+				}
+			},
+
+			markAsPristine( state ) {
+				if ( hasActiveEntity( state ) ) {
+					state.entities[ state.activeId ].isDirty = false;
+				}
+			},
+		},
+	} );
+}

package/src/store/selectors.ts

@@ -0,0 +1,24 @@
+import type { Slice } from './index';
+import { createSelector, SliceState } from '@elementor/store';
+
+type State = SliceState<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 selectHostDocument = createSelector(
+	selectEntities,
+	selectHostId,
+	( entities, hostId ) => hostId && entities[ hostId ]
+		? entities[ hostId ]
+		: null,
+);

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

@@ -0,0 +1,295 @@
+import { syncStore } from '../';
+import { Slice, createSlice } from '../../store';
+import { ExtendedWindow, V1Document } from '../../types';
+import { createStore, SliceState, Store } from '@elementor/store';
+import {
+	dispatchCommandAfter,
+	dispatchCommandBefore,
+	dispatchV1ReadyEvent,
+	makeDocumentsManager,
+	makeMockV1Document,
+} from './test-utils';
+import { selectActiveDocument } from '../../store/selectors';
+
+type WindowWithOptionalElementor = Omit<ExtendedWindow, 'elementor'> & {
+	elementor?: ExtendedWindow['elementor'];
+}
+
+describe( '@elementor/editor-documents - Sync Store', () => {
+	let store: Store<SliceState<Slice>>;
+	let slice: Slice;
+
+	beforeEach( () => {
+		slice = createSlice();
+		store = createStore();
+
+		syncStore( slice );
+	} );
+
+	it( 'should sync documents on V1 load', () => {
+		// Arrange.
+		mockV1DocumentsManager( [
+			makeMockV1Document( { id: 1 } ),
+			makeMockV1Document( { id: 2 } ),
+		] );
+
+		// Act.
+		dispatchV1ReadyEvent();
+
+		// Assert.
+		const storeState = store.getState();
+
+		expect( storeState.documents.entities ).toEqual( {
+			1: {
+				id: 1,
+				title: 'Document 1',
+				type: {
+					value: 'wp-page',
+					label: 'WP-PAGE',
+				},
+				status: {
+					value: 'publish',
+					label: 'PUBLISH',
+				},
+				isDirty: false,
+				isSaving: false,
+				isSavingDraft: false,
+				userCan: {
+					publish: true,
+				},
+			},
+			2: {
+				id: 2,
+				title: 'Document 2',
+				type: {
+					value: 'wp-page',
+					label: 'WP-PAGE',
+				},
+				status: {
+					value: 'publish',
+					label: 'PUBLISH',
+				},
+				isDirty: false,
+				isSaving: false,
+				isSavingDraft: false,
+				userCan: {
+					publish: true,
+				},
+			},
+		} );
+	} );
+
+	it.each( [
+		{
+			type: 'V1 load',
+			dispatchEvent: () => dispatchV1ReadyEvent(),
+		},
+		{
+			type: 'document open',
+			dispatchEvent: () => dispatchCommandAfter( 'editor/documents/open' ),
+		},
+	] )( 'should sync active document on $type', ( { dispatchEvent } ) => {
+		// Arrange.
+		mockV1DocumentsManager( [
+			makeMockV1Document( { id: 1 } ),
+			makeMockV1Document( { id: 2 } ),
+		], 2 );
+
+		// Act.
+		dispatchEvent();
+
+		// Assert.
+		const currentDocument = selectActiveDocument( store.getState() );
+
+		expect( currentDocument ).toEqual( {
+			id: 2,
+			title: 'Document 2',
+			type: {
+				value: 'wp-page',
+				label: 'WP-PAGE',
+			},
+			status: {
+				value: 'publish',
+				label: 'PUBLISH',
+			},
+			isDirty: false,
+			isSaving: false,
+			isSavingDraft: false,
+			userCan: {
+				publish: true,
+			},
+		} );
+	} );
+
+	it( 'should sync saving state of a document on V1 load', () => {
+		// Arrange.
+		const mockDocument = makeMockV1Document();
+
+		mockV1DocumentsManager( [
+			{
+				...mockDocument,
+				editor: {
+					...mockDocument.editor,
+					isSaving: true,
+				},
+			},
+		] );
+
+		// Act.
+		dispatchV1ReadyEvent();
+
+		// Assert.
+		expect( selectActiveDocument( store.getState() )?.isSaving ).toBe( true );
+	} );
+
+	it( 'should sync saving state of a document on save', () => {
+		// Arrange.
+		mockV1DocumentsManager( [
+			makeMockV1Document(),
+		] );
+
+		// Populate the documents state.
+		dispatchV1ReadyEvent();
+
+		// Assert - Default state.
+		expect( selectActiveDocument( store.getState() )?.isSaving ).toBe( false );
+
+		// Act.
+		dispatchCommandBefore( 'document/save/save' );
+
+		// Assert - On save start.
+		expect( selectActiveDocument( store.getState() )?.isSaving ).toBe( true );
+		expect( selectActiveDocument( store.getState() )?.isSavingDraft ).toBe( false );
+
+		// Act.
+		dispatchCommandAfter( 'document/save/save' );
+
+		// Assert - On save end.
+		expect( selectActiveDocument( store.getState() )?.isSaving ).toBe( false );
+		expect( selectActiveDocument( store.getState() )?.isSavingDraft ).toBe( false );
+	} );
+
+	it( 'should sync draft saving state of a document on save', () => {
+		// Arrange.
+		mockV1DocumentsManager( [
+			makeMockV1Document(),
+		] );
+
+		// Populate the documents state.
+		dispatchV1ReadyEvent();
+
+		// Assert - Default state.
+		expect( selectActiveDocument( store.getState() )?.isSavingDraft ).toBe( false );
+
+		// Act.
+		dispatchCommandBefore( 'document/save/save', {
+			status: 'autosave',
+		} );
+
+		// Assert - On save start.
+		expect( selectActiveDocument( store.getState() )?.isSaving ).toBe( false );
+		expect( selectActiveDocument( store.getState() )?.isSavingDraft ).toBe( true );
+
+		// Act.
+		dispatchCommandAfter( 'document/save/save', {
+			status: 'autosave',
+		} );
+
+		// Assert - On save end.
+		expect( selectActiveDocument( store.getState() )?.isSaving ).toBe( false );
+		expect( selectActiveDocument( store.getState() )?.isSavingDraft ).toBe( false );
+	} );
+
+	it( 'should sync dirty state of a document when it has an autosave', () => {
+		// Arrange.
+		const mockDocument = makeMockV1Document( { id: 1 } );
+
+		mockV1DocumentsManager( [ {
+			...mockDocument,
+			config: {
+				...mockDocument.config,
+				revisions: {
+					current_id: 2,
+				},
+			},
+		} ] );
+
+		// Act.
+		dispatchV1ReadyEvent();
+
+		// Assert.
+		expect( selectActiveDocument( store.getState() )?.isDirty ).toBe( true );
+	} );
+
+	it( 'should sync dirty state of a document on document change', () => {
+		// Arrange.
+		const mockDocument = makeMockV1Document();
+
+		mockV1DocumentsManager( [
+			mockDocument,
+		] );
+
+		// Populate the documents state.
+		dispatchV1ReadyEvent();
+
+		// Mock a change.
+		mockDocument.editor.isChanged = true;
+
+		// Assert - Default state.
+		expect( selectActiveDocument( store.getState() )?.isDirty ).toBe( false );
+
+		// Act.
+		dispatchCommandAfter( 'document/save/set-is-modified' );
+
+		// Assert - After change.
+		expect( selectActiveDocument( store.getState() )?.isDirty ).toBe( true );
+
+		// Emulate a save / undo action that flips the `isChanged` back to `false`.
+		mockDocument.editor.isChanged = false;
+
+		dispatchCommandAfter( 'document/save/set-is-modified' );
+
+		// Assert - After change.
+		expect( selectActiveDocument( store.getState() )?.isDirty ).toBe( false );
+	} );
+
+	it( 'should update the document when finish saving', () => {
+		// Arrange.
+		mockV1DocumentsManager( [
+			makeMockV1Document( {
+				id: 1,
+				status: 'draft',
+				title: 'test',
+			} ),
+		] );
+
+		// Populate the documents state.
+		dispatchV1ReadyEvent();
+
+		// Mock a change.
+		mockV1DocumentsManager( [
+			makeMockV1Document( {
+				id: 1,
+				status: 'publish',
+				title: 'test title changed',
+			} ),
+		] );
+
+		// Assert.
+		expect( selectActiveDocument( store.getState() )?.title ).toBe( 'test' );
+		expect( selectActiveDocument( store.getState() )?.status.value ).toBe( 'draft' );
+
+		// Act.
+		dispatchCommandAfter( 'document/save/save' );
+
+		// Assert.
+		expect( selectActiveDocument( store.getState() )?.title ).toBe( 'test title changed' );
+		expect( selectActiveDocument( store.getState() )?.status.value ).toBe( 'publish' );
+	} );
+} );
+
+function mockV1DocumentsManager( documentsArray: V1Document[], current = 1 ) {
+	( window as unknown as WindowWithOptionalElementor ).elementor = {
+		documents: makeDocumentsManager( documentsArray, current ),
+	};
+}

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

@@ -0,0 +1,98 @@
+import { V1Document } from '../../types';
+
+export function dispatchCommandBefore( command: string, args: object = {} ) {
+	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,
+		},
+	} ) );
+}
+
+export function dispatchWindowEvent( event: string ) {
+	window.dispatchEvent( new CustomEvent( event ) );
+}
+
+export function dispatchV1ReadyEvent() {
+	dispatchWindowEvent( 'elementor/initialized' );
+}
+
+export function makeDocumentsManager( documentsArray: V1Document[], current = 1, initial = current ) {
+	const documents = documentsArray.reduce( ( acc: Record<number, V1Document>, document ) => {
+		acc[ document.id ] = document;
+
+		return acc;
+	}, {} );
+
+	return {
+		documents,
+		getCurrentId() {
+			return current;
+		},
+		getInitialId() {
+			return initial;
+		},
+		getCurrent() {
+			return this.documents[ this.getCurrentId() ];
+		},
+	};
+}
+
+export function makeMockV1Document( {
+	id = 1,
+	title = 'Document ' + id,
+	status = 'publish',
+	type = 'wp-page',
+}: {
+	id?: number,
+	status?: string,
+	title?: string,
+	type?: string,
+} = {} ): V1Document {
+	return {
+		id,
+		config: {
+			type,
+			user: {
+				can_publish: true,
+			},
+			revisions: {
+				current_id: id,
+			},
+			panel: {
+				title: type.toUpperCase(),
+			},
+			status: {
+				label: status.toUpperCase(),
+				value: status,
+			},
+		},
+		editor: {
+			isChanged: false,
+			isSaving: false,
+		},
+		container: {
+			settings: makeV1Settings( {
+				post_title: title,
+			} ),
+		},
+	};
+}
+
+// Mock Backbone's settings model.
+function makeV1Settings<T extends object>( settings: T ) {
+	return {
+		get( key: keyof T ) {
+			return settings[ key ];
+		},
+	} as V1Document['container']['settings'];
+}