@elementor/editor-documents 0.1.0

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

@@ -0,0 +1,19 @@
+import { getV1DocumentsManager } from '../utils';
+
+/**
+ * This test exists only because this function is being used only inside event handlers,
+ * and jest can't catch errors that are being thrown. Despite that, we need to test this
+ * specific behavior to make sure that we don't break the whole app when V1 isn't available.
+ * All of the other logic is tested as an integration test in the `sync-store.test.ts` file,
+ * while this one is a unit test.
+ *
+ * @see https://github.com/testing-library/react-testing-library/issues/624
+ */
+describe( '@elementor/editor-documents - Sync Utils', () => {
+	it( 'should throw when V1 documents manager is not available', () => {
+		// Act & Assert.
+		expect( () => {
+			getV1DocumentsManager();
+		} ).toThrow( 'Elementor Editor V1 documents manager not found' );
+	} );
+} );

package/src/sync/index.ts

@@ -0,0 +1 @@
+export { syncStore } from './sync-store';

package/src/sync/sync-store.ts

@@ -0,0 +1,115 @@
+import { Slice } from '../store';
+import { Document } from '../types';
+import { dispatch } from '@elementor/store';
+import { normalizeV1Document, getV1DocumentsManager } from './utils';
+import {
+	commandEndEvent,
+	CommandEvent,
+	commandStartEvent,
+	ListenerEvent,
+	listenTo,
+	v1ReadyEvent,
+} from '@elementor/editor-v1-adapters';
+
+export function syncStore( slice: Slice ) {
+	syncInitialization( slice );
+	syncActiveDocument( slice );
+	syncOnDocumentSave( slice );
+	syncOnDocumentChange( slice );
+}
+
+function syncInitialization( slice: Slice ) {
+	const { init } = slice.actions;
+
+	listenTo(
+		v1ReadyEvent(),
+		() => {
+			const documentsManager = getV1DocumentsManager();
+
+			const entities = Object.entries( documentsManager.documents )
+				.reduce( ( acc: Record<string, Document>, [ id, document ] ) => {
+					acc[ id ] = normalizeV1Document( document );
+
+					return acc;
+				}, {} );
+
+			dispatch( init( {
+				entities,
+				hostId: documentsManager.getInitialId(),
+				activeId: documentsManager.getCurrentId(),
+			} ) );
+		}
+	);
+}
+
+function syncActiveDocument( slice: Slice ) {
+	const { activateDocument } = slice.actions;
+
+	listenTo(
+		commandEndEvent( 'editor/documents/open' ),
+		() => {
+			const documentsManager = getV1DocumentsManager();
+			const currentDocument = normalizeV1Document( documentsManager.getCurrent() );
+
+			dispatch( activateDocument( currentDocument ) );
+		}
+	);
+}
+
+function syncOnDocumentSave( slice: Slice ) {
+	const { startSaving, endSaving, startSavingDraft, endSavingDraft } = slice.actions;
+
+	const isDraft = ( e: ListenerEvent ) => {
+		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
+		 */
+		return event.args?.status === 'autosave';
+	};
+
+	listenTo(
+		commandStartEvent( 'document/save/save' ),
+		( e ) => {
+			if ( isDraft( e ) ) {
+				dispatch( startSavingDraft() );
+				return;
+			}
+
+			dispatch( startSaving() );
+		}
+	);
+
+	listenTo(
+		commandEndEvent( 'document/save/save' ),
+		( e ) => {
+			const activeDocument = normalizeV1Document(
+				getV1DocumentsManager().getCurrent()
+			);
+
+			if ( isDraft( e ) ) {
+				dispatch( endSavingDraft( activeDocument ) );
+			} else {
+				dispatch( endSaving( activeDocument ) );
+			}
+		}
+	);
+}
+
+function syncOnDocumentChange( slice: Slice ) {
+	const { markAsDirty, markAsPristine } = slice.actions;
+
+	listenTo(
+		commandEndEvent( 'document/save/set-is-modified' ),
+		() => {
+			const currentDocument = getV1DocumentsManager().getCurrent();
+
+			if ( currentDocument.editor.isChanged ) {
+				dispatch( markAsDirty() );
+				return;
+			}
+
+			dispatch( markAsPristine() );
+		}
+	);
+}

package/src/sync/utils.ts

@@ -0,0 +1,35 @@
+import { Document, ExtendedWindow, V1Document } from '../types';
+
+export function getV1DocumentsManager() {
+	const documentsManager = ( window as unknown as ExtendedWindow ).elementor?.documents;
+
+	if ( ! documentsManager ) {
+		throw new Error( 'Elementor Editor V1 documents manager not found' );
+	}
+
+	return documentsManager;
+}
+
+export function normalizeV1Document( documentData: V1Document ): Document {
+	// Draft or autosave.
+	const isUnpublishedRevision = documentData.config.revisions.current_id !== documentData.id;
+
+	return {
+		id: documentData.id,
+		title: documentData.container.settings.get( 'post_title' ),
+		type: {
+			value: documentData.config.type,
+			label: documentData.config.panel.title,
+		},
+		status: {
+			value: documentData.config.status.value,
+			label: documentData.config.status.label,
+		},
+		isDirty: documentData.editor.isChanged || isUnpublishedRevision,
+		isSaving: documentData.editor.isSaving,
+		isSavingDraft: false,
+		userCan: {
+			publish: documentData.config.user.can_publish,
+		},
+	};
+}

package/src/types.ts

@@ -0,0 +1,62 @@
+export type Document = {
+	id: number,
+	title: string,
+	type: {
+		value: string,
+		label: string,
+	},
+	status: {
+		value: string,
+		label: string,
+	},
+	isDirty: boolean,
+	isSaving: boolean,
+	isSavingDraft: boolean,
+	userCan: {
+		publish?: boolean,
+	},
+};
+
+export type ExtendedWindow = Window & {
+	elementor: {
+		documents: {
+			documents: Record<string, V1Document>,
+			getCurrentId: () => number,
+			getInitialId: () => number,
+			getCurrent: () => V1Document,
+		}
+	}
+}
+
+export type V1Document = {
+	id: number,
+	config: {
+		type: string,
+		user: {
+			can_publish: boolean,
+		},
+		revisions: {
+			current_id: number,
+		}
+		panel: {
+			title: string,
+		}
+		status: {
+			value: string,
+			label: string,
+		}
+	},
+	editor: {
+		isChanged: boolean,
+		isSaving: boolean,
+	},
+	container: {
+		settings: V1Model<{
+			post_title: string,
+		}>,
+	}
+}
+
+type V1Model<T> = {
+	get: <K extends keyof T = keyof T>( key: K ) => T[K],
+}