Skip to content

Commit

Permalink
TinyMCE Per Block: Adding a selected block state (#194)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Mar 7, 2017
1 parent 3decf55 commit 7ffd75e
Show file tree
Hide file tree
Showing 11 changed files with 62 additions and 36 deletions.
22 changes: 11 additions & 11 deletions tinymce-per-block/build/app.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions tinymce-per-block/src/blocks/embed-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default class EmbedBlockForm extends Component {
};

render() {
const { block, isFocused, change, moveUp, moveDown, remove, focusConfig, focus } = this.props;
const { block, isSelected, change, moveUp, moveDown, remove, focusConfig, focus } = this.props;

const removePrevious = () => {
if ( ! block.url ) {
Expand All @@ -29,7 +29,7 @@ export default class EmbedBlockForm extends Component {

return (
<div>
{ isFocused && <BlockArrangement block={ block } /> }
{ isSelected && <BlockArrangement block={ block } /> }
<div className="embed-block__form">
<div className="embed-block__content" dangerouslySetInnerHTML={ { __html: html } } />
<EnhancedInputComponent
Expand Down
4 changes: 2 additions & 2 deletions tinymce-per-block/src/blocks/heading-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default class HeadingBlockForm extends Component {
};

render() {
const { block, isFocused } = this.props;
const { block, isSelected } = this.props;
const sizes = [
{ id: 'h1', icon: EditorHeading1Icon },
{ id: 'h2', icon: EditorHeading2Icon },
Expand All @@ -40,7 +40,7 @@ export default class HeadingBlockForm extends Component {

return (
<div>
{ isFocused && (
{ isSelected && (
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
{ sizes.map( ( { id, icon: Icon } ) =>
Expand Down
6 changes: 3 additions & 3 deletions tinymce-per-block/src/blocks/html-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default class HtmlBlockForm extends Component {
};

render() {
const { block, isFocused, change, moveUp, moveDown, appendBlock,
const { block, isSelected, change, moveUp, moveDown, appendBlock,
mergeWithPrevious, remove, focusConfig, focus } = this.props;
const splitValue = ( left, right ) => {
change( { content: left } );
Expand All @@ -58,8 +58,8 @@ export default class HtmlBlockForm extends Component {

return (
<div>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused && (
{ isSelected && <BlockArrangement block={ block } /> }
{ isSelected && (
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
<AlignmentToolbar value={ selectedTextAlign } onChange={ this.setAlignment } />
Expand Down
8 changes: 4 additions & 4 deletions tinymce-per-block/src/blocks/image-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default class ImageBlockForm extends Component {
};

render() {
const { block, change, moveDown, moveUp, remove, appendBlock, isFocused, focusConfig, focus } = this.props;
const { block, change, moveDown, moveUp, remove, appendBlock, isSelected, focusConfig, focus } = this.props;
const removePrevious = () => {
if ( ! block.caption ) {
remove();
Expand All @@ -51,8 +51,8 @@ export default class ImageBlockForm extends Component {

return (
<div className={ classNames( 'image-block__form', alignValue ) }>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused &&
{ isSelected && <BlockArrangement block={ block } /> }
{ isSelected &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
{ imageAlignments.map( ( { id, icon: Icon } ) =>
Expand All @@ -73,7 +73,7 @@ export default class ImageBlockForm extends Component {
src={ block.src }
className="image-block__display"
onClick={ () => {
! isFocused && focus();
! focusConfig && focus();
} }
/>
<div className="image-block__caption">
Expand Down
6 changes: 3 additions & 3 deletions tinymce-per-block/src/blocks/quote-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default class QuoteBlockForm extends Component {

render() {
const { block, change, moveUp, moveDown, remove,
mergeWithPrevious, appendBlock, isFocused, focusConfig, focus } = this.props;
mergeWithPrevious, appendBlock, isSelected, focusConfig, focus } = this.props;
const splitValue = ( left, right ) => {
change( { cite: left } );
appendBlock( {
Expand All @@ -74,8 +74,8 @@ export default class QuoteBlockForm extends Component {

return (
<div>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused &&
{ isSelected && <BlockArrangement block={ block } /> }
{ isSelected &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
<EditableFormatToolbar editable={ focusInput === 'content' ? this.content : this.cite } ref={ this.bindFormatToolbar } />
Expand Down
6 changes: 3 additions & 3 deletions tinymce-per-block/src/blocks/text-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,16 @@ export default class TextBlockForm extends Component {
};

render() {
const { block, isFocused } = this.props;
const { block, isSelected } = this.props;
const selectedTextAlign = block.align || 'left';
const style = {
textAlign: selectedTextAlign
};

return (
<div>
{ isFocused && <BlockArrangement block={ block } /> }
{ isFocused &&
{ isSelected && <BlockArrangement block={ block } /> }
{ isSelected &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
<AlignmentToolbar value={ block.align } onChange={ this.setAlignment } />
Expand Down
3 changes: 2 additions & 1 deletion tinymce-per-block/src/controls/editable-format-toolbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ export default class EditableFormatToolbar extends Component {
} );
}

toggleLinkModal = () => {
toggleLinkModal = ( event ) => {
event.stopPropagation();
this.setState( {
linkModal: {
open: ! this.state.linkModal.open,
Expand Down
2 changes: 1 addition & 1 deletion tinymce-per-block/src/renderers/block/block-list/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
border-left-color: mix( $gray-light, $gray-dark-300, 80% );
}

&.is-focused > div {
&.is-selected > div {
border-color: mix( $gray-light, $gray-dark-300, 80% );
}
}
Expand Down
12 changes: 9 additions & 3 deletions tinymce-per-block/src/renderers/block/block-list/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default class BlockListBlock extends Component {
}

render() {
const { block, isFocused, focusConfig } = this.props;
const { block, isSelected, focusConfig } = this.props;
const blockDefinition = getBlock( block.blockType );
if ( ! blockDefinition ) {
return null;
Expand All @@ -31,7 +31,7 @@ export default class BlockListBlock extends Component {
}

const classes = classNames( 'block-list__block', {
'is-focused': isFocused
'is-selected': isSelected
} );

const { executeCommand, tabIndex, onFocus } = this.props;
Expand Down Expand Up @@ -74,6 +74,11 @@ export default class BlockListBlock extends Component {
executeCommand( {
type: 'moveDown'
} );
},
select() {
executeCommand( {
type: 'select'
} );
}
};

Expand All @@ -83,12 +88,13 @@ export default class BlockListBlock extends Component {
tabIndex={ tabIndex }
onFocus={ onFocus }
className={ classes }
onClick={ state.select }
>
<Form
ref={ this.bindForm }
block={ block }
{ ...state }
isFocused={ isFocused }
isSelected={ isSelected }
focusConfig={ focusConfig }
/>
</div>
Expand Down
25 changes: 22 additions & 3 deletions tinymce-per-block/src/renderers/block/block-list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import BlockListBlock from './block';
class BlockList extends Component {
state = {
focusIndex: null,
focusConfig: {}
focusConfig: {},
selectedIndex: null,
};

blockNodes = [];
Expand All @@ -33,6 +34,12 @@ class BlockList extends Component {
} );
};

select = ( index ) => {
this.setState( {
selectedIndex: index
} );
}

bindBlock = ( index ) => ( ref ) => {
this.blockNodes[ index ] = ref;
};
Expand All @@ -56,6 +63,7 @@ class BlockList extends Component {
const newBlocks = [ ...content ];
newBlocks[ index ] = assign( {}, content[ index ], changes );
this.onChange( newBlocks );
this.select( null );
},
append: ( { block: commandBlock } ) => {
const createdBlock = commandBlock
Expand All @@ -67,6 +75,7 @@ class BlockList extends Component {
...content.slice( index + 1 )
] );
setTimeout( () => this.focus( index + 1, { start: true } ) );
this.select( null );
},
remove: ( { index: commandIndex } ) => {
const indexToRemove = commandIndex === undefined ? index : commandIndex;
Expand All @@ -78,13 +87,15 @@ class BlockList extends Component {
...content.slice( indexToRemove + 1 ),
] );
setTimeout( () => this.focus( indexToRemove - 1, { end: true } ) );
this.select( null );
},
mergeWithPrevious: () => {
const previousBlockNode = this.blockNodes[ index - 1 ];
if ( ! previousBlockNode ) {
return;
}
setTimeout( () => previousBlockNode.merge( content[ index ], index ) );
this.select( null );
},
focus: ( { config } ) => {
this.focus( index, config );
Expand All @@ -94,12 +105,20 @@ class BlockList extends Component {
if ( previousBlockNode ) {
this.focus( index - 1, { end: true } );
}
this.select( null );
},
moveDown: () => {
const nextBlockNode = this.blockNodes[ index + 1 ];
if ( nextBlockNode ) {
this.focus( index + 1, { start: true } );
}
this.select( null );
},
select: () => {
this.select( index );
},
unselect: () => {
this.select( null );
}
};

Expand All @@ -108,7 +127,7 @@ class BlockList extends Component {

render() {
const { content } = this.props;
const { focusIndex, focusConfig } = this.state;
const { focusIndex, focusConfig,  selectedIndex } = this.state;
return (
<div className="block-list">
{ map( content, ( block, index ) => {
Expand All @@ -119,7 +138,7 @@ class BlockList extends Component {
ref={ this.bindBlock( index ) }
key={ block.uid }
tabIndex={ index }
isFocused={ isFocused }
isSelected={ selectedIndex === index }
focusConfig={ isFocused ? focusConfig : null }
executeCommand={ ( command ) => this.executeCommand( index, block, command ) }
block={ block } />
Expand Down

0 comments on commit 7ffd75e

Please sign in to comment.