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' );
+ })
  } );
 } );