[RNMobile] Add autosave to mobile apps

packages/edit-post/src/components/layout/index.native.js

@@ -12,6 +12,7 @@ import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { HTMLTextInput, KeyboardAvoidingView, ReadableContentView, withTheme } from '@wordpress/components';
+import { AutosaveMonitor } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -116,6 +117,7 @@ class Layout extends Component {
 
 		return (
 			<SafeAreaView style={ useStyle( styles.container, styles.containerDark ) } onLayout={ this.onRootViewLayout }>
+				<AutosaveMonitor />
 				<View style={ useStyle( styles.background, styles.backgroundDark ) }>
 					{ isHtmlView ? this.renderHTML() : this.renderVisual() }
 				</View>

packages/editor/src/components/index.native.js

@@ -1,5 +1,6 @@
 
 // Post Related Components
+export { default as AutosaveMonitor } from './autosave-monitor';
 export { default as PostTitle } from './post-title';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';

packages/editor/src/store/actions.native.js

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 
 export * from './actions.js';
 
@@ -14,3 +18,12 @@ export function togglePostTitleSelection( isSelected = true ) {
 		isSelected,
 	};
 }
+
+/**
+ * Action generator used in signalling that the post should autosave.
+ *
+ * @param {Object?} options Extra flags to identify the autosave.
+ */
+export function* autosave( ) {
+	RNReactNativeGutenbergBridge.editorDidAutosave();
+}

packages/editor/src/store/reducer.native.js

@@ -26,6 +26,10 @@ import {
 	editorSettings,
 } from './reducer.js';
 
+import { EDITOR_SETTINGS_DEFAULTS } from './defaults.js';
+
+EDITOR_SETTINGS_DEFAULTS.autosaveInterval = 2; // This is a way to override default on mobile
+
 export * from './reducer.js';
 
 /**

packages/editor/src/store/selectors.native.js

@@ -1,3 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistrySelector } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	isEditedPostDirty,
+	isEditedPostSaveable,
+	hasChangedContent,
+} from './selectors.js';
 
 export * from './selectors.js';
 
@@ -11,3 +24,32 @@ export * from './selectors.js';
 export function isPostTitleSelected( state ) {
 	return state.postTitle.isSelected;
 }
+
+/**
+ * Returns true if the post can be autosaved, or false otherwise.
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} autosave A raw autosave object from the REST API.
+ *
+ * @return {boolean} Whether the post can be autosaved.
+ */
+export const isEditedPostAutosaveable = createRegistrySelector( ( ) => function( state ) {
+	// A post must contain a title, an excerpt, or non-empty content to be valid for autosaving.
+	if ( ! isEditedPostSaveable( state ) ) {
+		return false;
+	}
+
+	// To avoid an expensive content serialization, use the content dirtiness
+	// flag in place of content field comparison against the known autosave.
+	// This is not strictly accurate, and relies on a tolerance toward autosave
+	// request failures for unnecessary saves.
+	if ( hasChangedContent( state ) ) {
+		return true;
+	}
+
+	if ( isEditedPostDirty( state ) ) {
+		return true;
+	}
+
+	return false;
+} );

test/native/setup.js

@@ -14,6 +14,7 @@ jest.mock( 'react-native-gutenberg-bridge', () => {
 		subscribeUpdateHtml: jest.fn(),
 		subscribeMediaAppend: jest.fn(),
 		editorDidMount: jest.fn(),
+		editorDidAutosave: jest.fn(),
 		subscribeMediaUpload: jest.fn(),
 		requestMediaPickFromMediaLibrary: jest.fn(),
 		requestMediaPickFromDeviceLibrary: jest.fn(),