diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx index f5728be..24b15a1 100644 --- a/src/ColumnsBlock/ColumnsBlockEdit.jsx +++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx @@ -82,6 +82,32 @@ class ColumnsBlockEdit extends React.Component { }; }; + handleKeyDown = ( + e, + index, + block, + node, + { + disableEnter = false, + disableArrowUp = false, + disableArrowDown = false, + } = {}, + ) => { + const hasblockActive = Object.keys(this.state.colSelections).length > 0; + if (e.key === 'ArrowUp' && !disableArrowUp && !hasblockActive) { + this.props.onFocusPreviousBlock(block, node); + e.preventDefault(); + } + if (e.key === 'ArrowDown' && !disableArrowDown && !hasblockActive) { + this.props.onFocusNextBlock(block, node); + e.preventDefault(); + } + if (e.key === 'Enter' && !disableEnter && !hasblockActive) { + this.props.onAddBlock(config.settings.defaultBlockType, index + 1); + e.preventDefault(); + } + }; + onChangeColumnSettings = (id, value) => { const { data, onChangeBlock, block } = this.props; const coldata = data.data; @@ -208,15 +234,23 @@ class ColumnsBlockEdit extends React.Component { } = config.blocks.blocksConfig[COLUMNSBLOCK]; const ColumnSchema = makeStyleSchema({ available_colors }); - // TODO: we have blockHasOwnFocusManagement, so we need to implement this: - // onKeyDown={(e) => { - // if (e.key === 'Enter') { - // this.onAddBlock(settings.defaultBlockType, index + 1); - // e.preventDefault(); - // } - // }} return ( -