Do not overwrite dataSource but instead keep it in sync using the ui …

…events

src/app/AppContainer.js

@@ -21,7 +21,7 @@ const mapStateToProps = ( state, ownProps ) => {
 
 	if ( ! isEqual( blocks, newBlocks ) ) {
 		blocks = newBlocks;
-		refresh = ! ownProps.refresh;
+		refresh = true;
 	}
 
 	return {
@@ -49,7 +49,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => {
 			ownProps.onRemove( clientId );
 		},
 		createBlockAction: ( clientId, block ) => {
-			ownProps.onInsertBlock( block, ownProps.selectedBlockIndex + 1 );
+			ownProps.onInsertBlock( block, ownProps.selectedBlockIndex + 1, ownProps.rootClientId );
 		},
 		parseBlocksAction: ( html ) => {
 			const parsed = parse( html );
@@ -79,6 +79,7 @@ export default compose( [
 		const selectedBlockClientId = getSelectedBlockClientId();
 
 		return {
+			rootClientId,
 			isBlockSelected,
 			selectedBlockIndex: getBlockIndex( selectedBlockClientId, rootClientId ),
 			blocks: getBlocks(),

src/block-management/block-manager.js

@@ -47,7 +47,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		super( props );
 		this.state = {
 			blocks: [],
-			dataSource: null,
+			dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ),
 			showHtml: false,
 			inspectBlocks: false,
 			blockTypePickerVisible: false,
@@ -56,13 +56,12 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	onBlockHolderPressed( clientId: string ) {
-		this.focusDataSourceItem( clientId );
 		this.props.focusBlockAction( clientId );
 	}
 
-	focusDataSourceItem( clientId: string ) {
-		for ( let i = 0; i < this.state.dataSource.size(); ++i ) {
-			const block = this.state.dataSource.get( i );
+	static focusDataSourceItem( dataSource: DataSource, clientId: string ) {
+		for ( let i = 0; i < dataSource.size(); ++i ) {
+			const block = dataSource.get( i );
 			if ( block.clientId === clientId ) {
 				block.focused = true;
 			} else {
@@ -102,26 +101,34 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 
 		// find currently focused block
 		const focusedItemIndex = this.findDataSourceIndexForFocusedItem();
-		const clientIdFocused = this.state.dataSource.get( focusedItemIndex ).clientId;
 
 		// create an empty block of the selected type
 		const newBlock = createBlock( itemValue, { content: 'new test text for a ' + itemValue + ' block' } );
-		newBlock.focused = false;
 
 		// set it into the datasource, and use the same object instance to send it to props/redux
 		this.state.dataSource.splice( focusedItemIndex + 1, 0, newBlock );
-		this.props.createBlockAction( newBlock.clientId, newBlock, clientIdFocused );
+		this.props.createBlockAction( newBlock.clientId, newBlock );
 
 		// now set the focus
 		this.props.focusBlockAction( newBlock.clientId );
 	}
 
 	static getDerivedStateFromProps( props: PropsType, state: StateType ) {
+		if ( props.fullparse === true ) {
+			return {
+				...state,
+				dataSource: new DataSource( props.blocks, ( item: BlockType ) => item.clientId ),
+			};
+		}
+
 		if ( state.blocks !== props.blocks ) {
+			const blockFocused = props.blocks.find( block => block.focused );
+			if ( blockFocused ) {
+				BlockManager.focusDataSourceItem( state.dataSource, blockFocused.clientId );
+			}
 			return {
 				...state,
 				blocks: props.blocks,
-				dataSource: new DataSource( props.blocks, ( item: BlockType ) => item.clientId ),
 			};
 		}