Detect content changed

package.json

@@ -89,6 +89,7 @@
     "jsc-android": "224109.x.x",
     "jsdom-jscore": "git+https://github.com/iamcco/jsdom-jscore-rn.git#6eac88dd5d5e7c21ce6382abde7dbc376d7f7f59",
     "jsx-to-string": "^1.3.1",
+    "md5": "^2.2.1",
     "memize": "^1.0.5",
     "node-libs-react-native": "^1.0.2",
     "node-sass": "^4.8.3",

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java

@@ -1,7 +1,7 @@
 package org.wordpress.mobile.ReactNativeGutenbergBridge;
 
 public interface GutenbergBridgeJS2Parent {
-    void responseHtml(String html);
+    void responseHtml(String html, boolean changed);
 
     interface MediaSelectedCallback {
         void onMediaSelected(String mediaUrl);

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java

@@ -36,8 +36,8 @@ public void getHtmlFromJS() {
     }
 
     @ReactMethod
-    public void provideToNative_Html(String html) {
-        mGutenbergBridgeJS2Parent.responseHtml(html);
+    public void provideToNative_Html(String html, boolean changed) {
+        mGutenbergBridgeJS2Parent.responseHtml(html, changed);
     }
 
     @ReactMethod

src/store/gutenbergBridgeMiddleware.js

@@ -3,8 +3,9 @@
  * @flow
  */
 
-// Gutenberg imports
-import { serialize } from '@wordpress/blocks';
+import md5 from 'md5';
+
+import { store2html } from './utils';
 
 import type { Store, Dispatch } from 'redux';
 
@@ -15,11 +16,10 @@ import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 export default ( store: Store ) => ( next: Dispatch ) => ( action: BlockActionType ) => {
 	switch ( action.type ) {
 		case ActionTypes.BLOCK.SERIALIZE_ALL: {
-			const html = store
-				.getState()
-				.blocks.map( serialize )
-				.join( '\n\n' );
-			RNReactNativeGutenbergBridge.provideToNative_Html( html );
+			const html = store2html( store );
+			const hash = md5( html );
+			const oldHash = store.getState().initialHtmlHash;
+			RNReactNativeGutenbergBridge.provideToNative_Html( html, oldHash !== hash );
 		}
 	}
 

src/store/index.js

@@ -5,48 +5,25 @@
 
 // Gutenberg imports
 import { registerCoreBlocks } from '@wordpress/block-library';
-import {
-	parse,
-	registerBlockType,
-	setUnregisteredTypeHandlerName,
-} from '@wordpress/blocks';
+import { registerBlockType, setUnregisteredTypeHandlerName } from '@wordpress/blocks';
 
 import { createStore, applyMiddleware } from 'redux';
 import { reducer } from './reducers';
+import { html2State } from './utils';
 
 import * as UnsupportedBlock from '../block-types/unsupported-block/';
 
 import gutenbergBridgeMiddleware from './gutenbergBridgeMiddleware';
 
-export type BlockType = {
-	clientId: string,
-	name: string,
-	isValid: boolean,
-	attributes: Object,
-	innerBlocks: Array<BlockType>,
-	focused: boolean,
-};
+import type { StateType } from './types';
 
-export type StateType = {
-	blocks: Array<BlockType>,
-	refresh: boolean,
-};
+export * from './utils';
+export * from './types';
 
 registerCoreBlocks();
 registerBlockType( UnsupportedBlock.name, UnsupportedBlock.settings );
 setUnregisteredTypeHandlerName( UnsupportedBlock.name );
 
-export function html2State( html: string ) {
-	const blocksFromHtml = parse( html );
-	const state: StateType = {
-		// TODO: get blocks list block state should be externalized (shared with Gutenberg at some point?).
-		// If not it should be created from a string parsing (commented HTML to json).
-		blocks: blocksFromHtml.map( ( block ) => ( { ...block, focused: false } ) ),
-		refresh: false,
-	};
-	return state;
-}
-
 // const devToolsEnhancer =
 // 	// ( 'development' === process.env.NODE_ENV && require( 'remote-redux-devtools' ).default ) ||
 // 	() => {};

src/store/reducers/index.js

@@ -5,10 +5,11 @@
 
 import { find, findIndex, reduce } from 'lodash';
 
+import { html2State } from '../utils';
+
 import ActionTypes from '../actions/ActionTypes';
 import type { StateType } from '../';
 import type { BlockActionType } from '../actions';
-import { parse } from '@wordpress/blocks';
 
 function findBlock( blocks, clientId: string ) {
 	return find( blocks, ( obj ) => {
@@ -32,7 +33,7 @@ function insertBlock( blocks, block, clientIdAbove ) {
 }
 
 export const reducer = (
-	state: StateType = { blocks: [], refresh: false },
+	state: StateType = { blocks: [], initialHtmlHash: '', refresh: false, fullparse: false },
 	action: BlockActionType
 ) => {
 	const blocks = [ ...state.blocks ];
@@ -72,7 +73,7 @@ export const reducer = (
 			// Otherwise merge attributes into state
 			block.attributes = nextAttributes;
 
-			return { blocks: blocks, refresh: ! state.refresh };
+			return { blocks: blocks, initialHtmlHash: state.initialHtmlHash, refresh: ! state.refresh };
 		}
 		case ActionTypes.BLOCK.FOCUS: {
 			const destBlock = findBlock( blocks, action.clientId );
@@ -83,7 +84,7 @@ export const reducer = (
 			}
 
 			destBlock.focused = true;
-			return { blocks: blocks, refresh: ! state.refresh };
+			return { blocks: blocks, initialHtmlHash: state.initialHtmlHash, refresh: ! state.refresh };
 		}
 		case ActionTypes.BLOCK.MOVE_UP: {
 			if ( blocks[ 0 ].clientId === action.clientId ) {
@@ -94,7 +95,7 @@ export const reducer = (
 			const tmp = blocks[ index ];
 			blocks[ index ] = blocks[ index - 1 ];
 			blocks[ index - 1 ] = tmp;
-			return { blocks: blocks, refresh: ! state.refresh };
+			return { blocks: blocks, initialHtmlHash: state.initialHtmlHash, refresh: ! state.refresh };
 		}
 		case ActionTypes.BLOCK.MOVE_DOWN: {
 			if ( blocks[ blocks.length - 1 ].clientId === action.clientId ) {
@@ -105,27 +106,29 @@ export const reducer = (
 			const tmp = blocks[ index ];
 			blocks[ index ] = blocks[ index + 1 ];
 			blocks[ index + 1 ] = tmp;
-			return { blocks: blocks, refresh: ! state.refresh };
+			return { blocks: blocks, initialHtmlHash: state.initialHtmlHash, refresh: ! state.refresh };
 		}
 		case ActionTypes.BLOCK.DELETE: {
 			const index = findBlockIndex( blocks, action.clientId );
 			blocks.splice( index, 1 );
-			return { blocks: blocks, refresh: ! state.refresh };
+			return { blocks: blocks, initialHtmlHash: state.initialHtmlHash, refresh: ! state.refresh };
 		}
 		case ActionTypes.BLOCK.CREATE: {
 			// TODO we need to set focused: true and search for the currently focused block and
 			// set that one to `focused: false`.
 			insertBlock( blocks, action.block, action.clientIdAbove );
-			return { blocks: blocks, refresh: ! state.refresh };
+			return { blocks: blocks, initialHtmlHash: state.initialHtmlHash, refresh: ! state.refresh };
 		}
 		case ActionTypes.BLOCK.PARSE: {
-			const parsed = parse( action.html );
-			return { blocks: parsed, refresh: ! state.refresh, fullparse: true };
+			const newState = html2State( action.html );
+			newState.refresh = ! state.refresh;
+			newState.fullparse = true;
+			return newState;
 		}
 		case ActionTypes.BLOCK.MERGE: {
 			const index = findBlockIndex( blocks, action.blockOneClientId );
 			blocks.splice( index, 2, action.block );
-			return { blocks: blocks, refresh: ! state.refresh };
+			return { blocks: blocks, initialHtmlHash: state.initialHtmlHash, refresh: ! state.refresh };
 		}
 		default:
 			return state;

src/store/types.js

@@ -0,0 +1,20 @@
+/**
+ * @format
+ * @flow
+ */
+
+export type BlockType = {
+	clientId: string,
+	name: string,
+	isValid: boolean,
+	attributes: Object,
+	innerBlocks: Array<BlockType>,
+	focused: boolean,
+};
+
+export type StateType = {
+	blocks: Array<BlockType>,
+	initialHtmlHash: string,
+	refresh: boolean,
+	fullparse: boolean,
+};

src/store/utils.js

@@ -0,0 +1,35 @@
+/**
+ * @format
+ * @flow
+ */
+
+// Gutenberg imports
+import { parse, serialize } from '@wordpress/blocks';
+
+import md5 from 'md5';
+import { Store } from 'redux';
+
+import type { BlockType, StateType } from './';
+
+export function html2State( html: string ) {
+	const blocksFromHtml = parse( html );
+	const reserialized = blocks2html( blocksFromHtml );
+	const hash = md5( reserialized );
+	const state: StateType = {
+		// TODO: get blocks list block state should be externalized (shared with Gutenberg at some point?).
+		// If not it should be created from a string parsing (commented HTML to json).
+		blocks: blocksFromHtml.map( ( block ) => ( { ...block, focused: false } ) ),
+		initialHtmlHash: hash,
+		refresh: false,
+		fullparse: false,
+	};
+	return state;
+}
+
+export function blocks2html( blocks: Array<BlockType> ) {
+	return blocks.map( serialize ).join( '\n\n' );
+}
+
+export function store2html( store: Store ) {
+	return blocks2html( store.getState().blocks );
+}

yarn.lock

@@ -2404,6 +2404,11 @@ chardet@^0.4.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
   integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
+charenc@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=
+
 chownr@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
@@ -2806,6 +2811,11 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+crypt@~0.0.1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -4562,7 +4572,7 @@ is-arrayish@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
-is-buffer@^1.1.4, is-buffer@^1.1.5:
+is-buffer@^1.1.4, is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -5743,6 +5753,15 @@ md5.js@^1.3.4:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+md5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
+  integrity sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=
+  dependencies:
+    charenc "~0.0.1"
+    crypt "~0.0.1"
+    is-buffer "~1.1.1"
+
 mem@1.1.0, mem@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"