Experiment using a Native Editor that reuses the gutenberg store

package.json

@@ -13,6 +13,7 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@wordpress/babel-preset-default": "^1.1.2",
     "@wordpress/block-serialization-spec-parser": "^1.0.0",
+    "@wordpress/scripts": "^2.4.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.2",
     "babel-jest": "^23.6.0",
@@ -71,8 +72,8 @@
     "clean:metro": "rm -rf $TMPDIR/metro-cache-*;",
     "clean:react": "rm -rf $TMPDIR/react-*",
     "clean:node": "rm -rf node_modules",
-	"clean:watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all; true",
-	"clean:babel-cache": "rm -rf ./node_modules/.cache/babel-loader/*",
+    "clean:watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all; true",
+    "clean:babel-cache": "rm -rf ./node_modules/.cache/babel-loader/*",
     "lint": "eslint . --ext .js",
     "lint:fix": "yarn lint --fix"
   },
@@ -88,6 +89,8 @@
     "jsdom-jscore": "git+https://github.com/iamcco/jsdom-jscore-rn.git#6eac88dd5d5e7c21ce6382abde7dbc376d7f7f59",
     "jsx-to-string": "^1.3.1",
     "memize": "^1.0.5",
+    "moment": "^2.22.1",
+    "moment-timezone": "^0.5.16",
     "node-libs-react-native": "^1.0.2",
     "node-sass": "^4.8.3",
     "react": "16.5.0",
@@ -97,6 +100,9 @@
     "react-native-svg": "^6.5.2",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",
+    "redux-multi": "^0.1.12",
+    "redux-optimist": "^1.0.0",
+    "refx": "^3.0.0",
     "rememo": "^3.0.0",
     "shallowequal": "^1.0.2",
     "simple-html-tokenizer": "^0.5.1",

src/app/App.js

@@ -3,40 +3,19 @@
 
 import '../globals';
 
-import React from 'react';
-import { Provider } from 'react-redux';
-import { setupStore, html2State } from '../store';
-import AppContainer from './AppContainer';
-import { Store } from 'redux';
+// Gutenberg imports
+import { registerCoreBlocks } from '@wordpress/block-library';
+import {
+	registerBlockType,
+	setUnregisteredTypeHandlerName,
+} from '@wordpress/blocks';
 
-import initialHtml from './initial-html';
+import Editor from '../components/editor';
 
-type PropsType = {
-	initialData: string | Store,
-};
-type StateType = {
-	store: Store,
-};
+import * as UnsupportedBlock from '../block-types/unsupported-block/';
 
-export default class AppProvider extends React.Component<PropsType, StateType> {
-	state: StateType;
+registerCoreBlocks();
+registerBlockType( UnsupportedBlock.name, UnsupportedBlock.settings );
+setUnregisteredTypeHandlerName( UnsupportedBlock.name );
 
-	constructor( props: PropsType ) {
-		super( props );
-
-		this.state = {
-			store:
-				typeof props.initialData === 'object' ?
-					props.initialData :
-					setupStore( html2State( props.initialData || initialHtml ) ),
-		};
-	}
-
-	render() {
-		return (
-			<Provider store={ this.state.store }>
-				<AppContainer />
-			</Provider>
-		);
-	}
-}
+export default Editor;

src/app/App.test.js

@@ -3,9 +3,7 @@
 import renderer from 'react-test-renderer';
 
 import App from './App';
-import initialHtml from './initial-html';
-import { html2State, setupStore } from '../store';
-import BlockHolder from '../block-management/block-holder';
+import BlockListBlock from '../components/editor/block-list/block';
 
 describe( 'App', () => {
 	it( 'renders without crashing', () => {
@@ -15,17 +13,8 @@ describe( 'App', () => {
 	} );
 
 	it( 'renders without crashing with a block focused', () => {
-		// construct a state object with the first block focused
-		const state = html2State( initialHtml );
-		const block0 = { ...state.blocks[ 0 ] };
-		block0.focused = true;
-		state.blocks[ 0 ] = block0;
-
-		// create a Store with the state object
-		const store = setupStore( state );
-
-		// render an App using the specified Store
-		const app = renderer.create( <App initialData={ store } /> );
+		// render an App using the default Store
+		const app = renderer.create( <App /> );
 		const rendered = app.toJSON();
 
 		// App should be rendered OK
@@ -35,7 +24,7 @@ describe( 'App', () => {
 	it( 'Code block is a TextInput', () => {
 		renderer
 			.create( <App /> )
-			.root.findAllByType( BlockHolder )
+			.root.findAllByType( BlockListBlock )
 			.forEach( ( blockHolder ) => {
 				if ( 'core/code' === blockHolder.props.name ) {
 					// TODO: hardcoded indices are ugly and error prone. Can we do better here?
@@ -52,7 +41,7 @@ describe( 'App', () => {
 	it( 'Heading block test', () => {
 		renderer
 			.create( <App /> )
-			.root.findAllByType( BlockHolder )
+			.root.findAllByType( BlockListBlock )
 			.forEach( ( blockHolder ) => {
 				if ( 'core/heading' === blockHolder.props.name ) {
 					const aztec = blockHolder.findByType( 'RCTAztecView' );