Merge pull request #100 from wordpress-mobile/feature/parse-html-into…

…-blocks

Parse html into known blocks

src/app/AppContainer.js

@@ -6,6 +6,7 @@ import {
 	moveBlockUpAction,
 	moveBlockDownAction,
 	deleteBlockAction,
+	parseBlocksAction,
 } from '../store/actions';
 import MainApp from './MainApp';
 
@@ -31,6 +32,10 @@ const mapDispatchToProps = ( dispatch, ownProps ) => {
 		deleteBlockAction: ( clientId ) => {
 			dispatch( deleteBlockAction( clientId ) );
 		},
+		parseBlocksAction: ( html ) => {
+			dispatch( parseBlocksAction( html ) );
+		},
+
 	};
 };
 

src/block-management/block-manager.js

@@ -22,6 +22,7 @@ export type BlockListType = {
 	moveBlockUpAction: string => mixed,
 	moveBlockDownAction: string => mixed,
 	deleteBlockAction: string => mixed,
+	parseBlocksAction: string => mixed,
 	blocks: Array<BlockType>,
 	aztechtml: string,
 	refresh: boolean,
@@ -31,6 +32,7 @@ type PropsType = BlockListType;
 type StateType = {
 	dataSource: DataSource,
 	showHtml: boolean,
+	html: string,
 };
 
 export default class BlockManager extends React.Component<PropsType, StateType> {
@@ -41,6 +43,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		this.state = {
 			dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ),
 			showHtml: false,
+			html: '',
 		};
 	}
 
@@ -58,6 +61,17 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		return -1;
 	}
 
+	static getDerivedStateFromProps( props: PropsType, state: StateType ) {
+		if ( props.fullparse === true ) {
+			return {
+				...state,
+				dataSource: new DataSource( props.blocks, ( item: BlockType ) => item.clientId ),
+			};
+		}
+		// no state change necessary
+		return null;
+	}
+
 	onToolbarButtonPressed( button: number, clientId: string ) {
 		const dataSourceBlockIndex = this.getDataSourceIndexFromUid( clientId );
 		switch ( button ) {
@@ -96,6 +110,12 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			}, '' );
 	}
 
+	parseHTML() {
+		const { parseBlocksAction } = this.props;
+		const { html } = this.state;
+		parseBlocksAction( html );
+	}
+
 	componentDidUpdate() {
 		// List has been updated, tell the recycler view to update the view
 		this.state.dataSource.setDirty();
@@ -106,7 +126,8 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		const index = this.getDataSourceIndexFromUid( clientId );
 		const dataSource = this.state.dataSource;
 		const block = dataSource.get( this.getDataSourceIndexFromUid( clientId ) );
-		dataSource.set( index, { ...block, attributes: attributes } );
+		block.attributes = attributes;
+		dataSource.set( index, block );
 		// Update Redux store
 		this.props.onChange( clientId, attributes );
 	}
@@ -149,7 +170,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 						activeText={ 'On' }
 						inActiveText={ 'Off' }
 						value={ this.state.showHtml }
-						onValueChange={ ( value ) => this.setState( { showHtml: value } ) }
+						onValueChange={ this.handleSwitchEditor }
 					/>
 				</View>
 				{ this.state.showHtml && this.renderHTML() }
@@ -158,6 +179,21 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		);
 	}
 
+	handleSwitchEditor = ( showHtml: boolean ) => {
+		if ( showHtml ) {
+			const html = this.serializeToHtml();
+			this.handleHTMLUpdate( html );
+		} else {
+			this.parseHTML();
+		}
+
+		this.setState( { showHtml } );
+	}
+
+	handleHTMLUpdate = ( html: string ) => {
+		this.setState( { html } );
+	}
+
 	renderItem( value: { item: BlockType, clientId: string } ) {
 		return (
 			<BlockHolder
@@ -179,8 +215,10 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 				<TextInput
 					multiline
 					numberOfLines={ 0 }
-					style={ styles.htmlView }>
-					{ this.serializeToHtml() }
+					style={ styles.htmlView }
+					value={ this.state.html }
+					onChangeText={ this.handleHTMLUpdate }>
+
 				</TextInput>
 			</KeyboardAvoidingView>
 		);

src/store/actions/ActionTypes.js

@@ -10,5 +10,6 @@ export default {
 		MOVE_UP: 'BLOCK_MOVE_UP_ACTION',
 		MOVE_DOWN: 'BLOCK_MOVE_DOWN_ACTION',
 		DELETE: 'BLOCK_DELETE_ACTION',
+		PARSE: 'BLOCK_PARSE_ACTION',
 	},
 };

src/store/actions/index.js

@@ -10,6 +10,11 @@ export type BlockActionType = string => {
 	clientId: string,
 };
 
+export type ParseActionType = string => {
+	type: $Values<typeof ActionTypes.BLOCK>,
+	html: string,
+};
+
 export function updateBlockAttributes( clientId: string, attributes: mixed ) {
 	return {
 		type: ActionTypes.BLOCK.UPDATE_ATTRIBUTES,
@@ -37,3 +42,8 @@ export const deleteBlockAction: BlockActionType = clientId => ( {
 	type: ActionTypes.BLOCK.DELETE,
 	clientId,
 } );
+
+export const parseBlocksAction: ParseActionType = html => ( {
+	type: ActionTypes.BLOCK.PARSE,
+	html,
+} );

src/store/reducers/index.js

@@ -8,6 +8,7 @@ import { find, findIndex, reduce } from 'lodash';
 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 => {
@@ -108,6 +109,10 @@ export const reducer = (
 			blocks.splice( index, 1 );
 			return { blocks: blocks, refresh: ! state.refresh };
 		}
+		case ActionTypes.BLOCK.PARSE: {
+			const parsed = parse(action.html)
+			return { blocks: parsed, refresh: ! state.refresh, fullparse: true };
+		}
 		default:
 			return state;
 	}

src/store/reducers/test.js

@@ -4,6 +4,7 @@
 
 import { reducer } from './';
 import * as actions from '../actions/';
+import { registerCoreBlocks } from '@gutenberg/core-blocks';
 
 describe( 'Store', () => {
 	describe( 'reducer', () => {
@@ -12,6 +13,8 @@ describe( 'Store', () => {
 		let initialState;
 
 		beforeAll( () => {
+			registerCoreBlocks()
+
 			__iniState = {
 				blocks: [
 					{
@@ -156,5 +159,16 @@ describe( 'Store', () => {
 			// the code block should be at the bottom
 			expect( newState.blocks[ 1 ].blockType ).toEqual( 'core/code' );
 		} );
+
+		it( 'parses the html string into a new array of blocks', () => {
+			const htmlContent = '<!--more-->'
+			const html = '<!-- wp:more -->' + htmlContent + '<!-- /wp:more -->'
+
+			const newState = reducer( initialState, actions.parseBlocksAction( html ) );
+
+			expect( newState.blocks ).toHaveLength( 1 );
+			expect( newState.blocks[ 0 ].originalContent ).toEqual( htmlContent );
+			expect( newState.blocks[ 0 ].name ).toEqual( 'core/more' );
+		})
 	} );
 } );