diff --git a/src/app/AppContainer.js b/src/app/AppContainer.js index 855d503d64..7e77e2cda6 100644 --- a/src/app/AppContainer.js +++ b/src/app/AppContainer.js @@ -32,8 +32,8 @@ const mapDispatchToProps = ( dispatch, ownProps ) => { deleteBlockAction: ( clientId ) => { dispatch( deleteBlockAction( clientId ) ); }, - createBlockAction: ( clientId, block ) => { - dispatch( createBlockAction( clientId, block ) ); + createBlockAction: ( clientId, block, clientIdAbove ) => { + dispatch( createBlockAction( clientId, block, clientIdAbove ) ); }, }; }; diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index 5c04836589..09b3f67ba2 100644 --- a/src/block-management/block-manager.js +++ b/src/block-management/block-manager.js @@ -19,7 +19,7 @@ export type BlockListType = { moveBlockUpAction: string => mixed, moveBlockDownAction: string => mixed, deleteBlockAction: string => mixed, - createBlockAction: ( string, BlockType ) => mixed, + createBlockAction: ( string, BlockType, string ) => mixed, blocks: Array, aztechtml: string, refresh: boolean, @@ -94,8 +94,6 @@ export default class BlockManager extends React.Component } onToolbarButtonPressed( button: number, clientId: string ) { - // TODO: don't remove - to be used when working on direct insertion - // const dataSourceBlockIndex = this.getDataSourceIndexFromClientId( clientId ); switch ( button ) { case ToolbarButton.UP: this.props.moveBlockUpAction( clientId ); @@ -107,15 +105,10 @@ export default class BlockManager extends React.Component this.props.deleteBlockAction( clientId ); break; case ToolbarButton.PLUS: - // TODO: direct access insertion: it would be nice to pass the dataSourceBlockIndex here, - // so in this way we know the new block should be inserted right after this one - // instead of being appended to the end. - // this.props.createBlockAction( clientId, dataSourceBlockIndex ); - // TODO: block type picker here instead of hardcoding a core/code block const newBlock = createBlock( 'core/paragraph', { content: 'new test text for a core/paragraph block' } ); const newBlockWithFocusedState = { ...newBlock, focused: false }; - this.props.createBlockAction( newBlockWithFocusedState.clientId, newBlockWithFocusedState ); + this.props.createBlockAction( newBlockWithFocusedState.clientId, newBlockWithFocusedState, clientId ); break; case ToolbarButton.SETTINGS: // TODO: implement settings diff --git a/src/store/actions/index.js b/src/store/actions/index.js index f7b7ce5f89..56d23e9cac 100644 --- a/src/store/actions/index.js +++ b/src/store/actions/index.js @@ -38,8 +38,9 @@ export const deleteBlockAction: BlockActionType = clientId => ( { clientId, } ); -export const createBlockAction: BlockActionType = (clientId, block) => ( { +export const createBlockAction: BlockActionType = (clientId, block, clientIdAbove) => ( { type: ActionTypes.BLOCK.CREATE, block: block, clientId, + clientIdAbove: clientIdAbove, } ); diff --git a/src/store/actions/test.js b/src/store/actions/test.js index 153c5ea7c8..14e58c7eee 100644 --- a/src/store/actions/test.js +++ b/src/store/actions/test.js @@ -39,7 +39,7 @@ describe( 'Store', () => { it( 'should create an action to create a block', () => { registerCoreBlocks(); const newBlock = createBlock( 'core/code', { content: 'new test text for a core/code block' } ); - const action = actions.createBlockAction( '1', newBlock ); + const action = actions.createBlockAction( '1', newBlock, '0' ); expect( action.type ).toEqual( ActionTypes.BLOCK.CREATE ); } ); diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js index 46f14a8755..0e74b45907 100644 --- a/src/store/reducers/index.js +++ b/src/store/reducers/index.js @@ -21,6 +21,21 @@ function findBlockIndex( blocks, clientId: string ) { } ); } +/* + * insert block into blocks[], below / after block having uidAbove +*/ +function insertBlock( blocks, block, uidAbove ) { + // TODO we need to set focused: true and search for the currently focused block and + // set that one to `focused: false`. + const insertionIndex = findBlockIndex( blocks, uidAbove ); + if (insertionIndex === blocks.length - 1) { + // append new block to blocks list + blocks.push(block); + } else { + blocks.splice(insertionIndex + 1, 0, block); + } +} + export const reducer = ( state: StateType = { blocks: [], refresh: false }, action: BlockActionType @@ -109,9 +124,7 @@ export const reducer = ( return { blocks: blocks, 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`. - blocks.push(action.block); + insertBlock(blocks, action.block, action.clientIdAbove); return { blocks: blocks, refresh: ! state.refresh }; } default: