Skip to content

Commit

Permalink
TinyMCE per block: API refactor (#230)
Browse files Browse the repository at this point in the history 
- extract commands (action creators ?)
 - Handle updating the editor content from state (introducing externalChange)
  • Loading branch information
@youknowriad
youknowriad authored Mar 10, 2017
1 parent c4ea069 commit f9fce4d
Show file tree
Hide file tree
Showing 18 changed files with 513 additions and 513 deletions.
4 changes: 2 additions & 2 deletions tinymce-per-block/src/assets/stylesheets/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
@import '~blocks/quote-block/style';
@import '~blocks/embed-block/style';
@import '~external/dashicons/style';
@import '~renderers/block/block-list/style';
@import '~renderers/html/html-editor/style';
@import '~renderers/block/style';
@import '~renderers/html/style';
@import '~controls/block-arrangement/style';
@import '~controls/editable-format-toolbar/style';
@import '~controls/transform-block-toolbar/style';
Expand Down
37 changes: 18 additions & 19 deletions tinymce-per-block/src/blocks/embed-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,24 @@ import FigureAlignmentToolbar from 'controls/figure-alignment-toolbar';

export default class EmbedBlockForm extends Component {
merge = () => {
this.props.remove();
this.props.api.remove();
};

setAlignment = ( id ) => {
this.props.change( { align: id } );
this.props.api.change( { align: id } );
};

render() {
const { block, isSelected, change, moveCursorUp, moveCursorDown, first, last,
remove, focusConfig, focus, moveBlockUp, moveBlockDown, appendBlock, select, unselect } = this.props;
const { api, block, isSelected, first, last, focusConfig } = this.props;

const removePrevious = () => {
if ( ! block.url ) {
remove();
api.remove();
}
};
const splitValue = ( left, right ) => {
change( { caption: left } );
appendBlock( {
api.change( { caption: left } );
api.appendBlock( {
blockType: 'text',
content: right
} );
Expand All @@ -44,7 +43,7 @@ export default class EmbedBlockForm extends Component {
return (
<div className={ classNames( 'embed-block', block.align ) }>
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
{ isSelected &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
Expand All @@ -54,8 +53,8 @@ export default class EmbedBlockForm extends Component {
}

<div onClick={ () => {
select();
! focusConfig && focus();
api.select();
! focusConfig && api.focus();
} }>
{ ! block.url &&
<div className="embed-block__form">
Expand All @@ -64,13 +63,13 @@ export default class EmbedBlockForm extends Component {
</div>
<EnhancedInputComponent
ref={ this.bindInput }
moveCursorUp={ moveCursorUp }
moveCursorUp={ api.moveCursorUp }
removePrevious={ removePrevious }
moveCursorDown={ moveCursorDown }
moveCursorDown={ api.moveCursorDown }
value={ block.url }
onChange={ ( value ) => change( { url: value } ) }
onChange={ ( value ) => api.change( { url: value } ) }
focusConfig={ focusConfig }
onFocusChange={ ( config ) => focus( config ) }
onFocusChange={ api.focus }
placeholder="Paste URL to embed here..."
/>
</div>
Expand All @@ -82,18 +81,18 @@ export default class EmbedBlockForm extends Component {
<div className="embed-block__caption">
<EnhancedInputComponent
ref={ this.bindCaption }
moveCursorUp={ moveCursorUp }
moveCursorUp={ api.moveCursorUp }
removePrevious={ removePrevious }
moveCursorDown={ moveCursorDown }
moveCursorDown={ api.moveCursorDown }
splitValue={ splitValue }
value={ block.caption }
onChange={ ( value ) => {
change( { caption: value } );
unselect();
api.change( { caption: value } );
api.unselect();
} }
placeholder="Write caption"
focusConfig={ focusConfig }
onFocusChange={ focus }
onFocusChange={ api.focus }
/>
</div>
}
Expand Down
10 changes: 5 additions & 5 deletions tinymce-per-block/src/blocks/heading-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,21 @@ export default class HeadingBlockForm extends Component {
};

setSize = ( size ) => () => {
this.props.change( { size } );
this.props.api.change( { size } );
};

render() {
const { block, isSelected, moveBlockUp, moveBlockDown, select, transform, first, last } = this.props;
const { api, block, isSelected, first, last } = this.props;
const sizes = [ 'h1', 'h2', 'h3' ];

return (
<div>
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
{ isSelected && (
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
<TransformBlockToolbar blockType="heading" onTransform={ transform } />
<TransformBlockToolbar blockType="heading" onTransform={ api.transform } />
</div>

<div className="block-list__block-controls-group">
Expand All @@ -64,7 +64,7 @@ export default class HeadingBlockForm extends Component {
</div>
</div>
) }
<div className={ `heading-block__form ${ block.size }` } onClick={ select }>
<div className={ `heading-block__form ${ block.size }` } onClick={ api.select }>
<InlineTextBlockForm
ref={ this.bindForm }
{ ...this.props }
Expand Down
45 changes: 25 additions & 20 deletions tinymce-per-block/src/blocks/html-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,21 @@ export default class HtmlBlockForm extends Component {
return;
}

const { block: { content }, remove, change, focus } = this.props;
focus( { end: true } );
remove( block.uid );
change( { content: content + block.content } );
setTimeout( () => this.editable.updateContent() );
const { api, block: { content, externalChange = 0 } } = this.props;
api.focus( { end: true } );
api.remove( block.uid );
api.change( {
content: content + block.content,
externalChange: externalChange + 1
} );
}

bindEditable = ( ref ) => {
this.editable = ref;
}

setAlignment = ( align ) => {
this.props.change( { align } );
this.props.api.change( { align } );
};

bindFormatToolbar = ( ref ) => {
Expand All @@ -39,17 +41,19 @@ export default class HtmlBlockForm extends Component {
};

render() {
const { block, isSelected, change, moveCursorUp, moveCursorDown, appendBlock, first, last,
mergeWithPrevious, remove, focusConfig, focus, moveBlockUp, moveBlockDown, select, unselect } = this.props;
const { api, block, isSelected, first, last, focusConfig } = this.props;
const splitValue = ( left, right ) => {
change( { content: left } );
api.change( {
content: left,
externalChange: ( block.externalChange || 0 ) + 1
} );
if ( right ) {
appendBlock( {
api.appendBlock( {
...block,
content: right
} );
} else {
appendBlock();
api.appendBlock();
}
};
const selectedTextAlign = block.align || 'left';
Expand All @@ -60,7 +64,7 @@ export default class HtmlBlockForm extends Component {
return (
<div>
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
{ isSelected && (
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
Expand All @@ -72,20 +76,21 @@ export default class HtmlBlockForm extends Component {
</div>
</div>
) }
<div className="html-block__form" style={ style } onClick={ select }>
<div className="html-block__form" style={ style } onClick={ api.select }>
<EditableComponent
ref={ this.bindEditable }
content={ block.content }
moveCursorUp={ moveCursorUp }
moveCursorDown={ moveCursorDown }
externalChange={ block.externalChange }
moveCursorUp={ api.moveCursorUp }
moveCursorDown={ api.moveCursorDown }
splitValue={ splitValue }
mergeWithPrevious={ mergeWithPrevious }
remove={ remove }
mergeWithPrevious={ api.mergeWithPrevious }
remove={ api.remove }
setToolbarState={ this.setToolbarState }
onChange={ ( value ) => change( { content: value } ) }
onChange={ ( value ) => api.change( { content: value } ) }
focusConfig={ focusConfig }
onFocusChange={ focus }
onType={ unselect }
onFocusChange={ api.focus }
onType={ api.unselect }
/>
</div>
</div>
Expand Down
29 changes: 14 additions & 15 deletions tinymce-per-block/src/blocks/image-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,23 @@ import FigureAlignmentToolbar from 'controls/figure-alignment-toolbar';
export default class ImageBlockForm extends Component {

merge() {
this.props.remove();
this.props.api.remove();
}

setAlignment = ( id ) => {
this.props.change( { align: id } );
this.props.api.change( { align: id } );
};

render() {
const { block, change, moveCursorDown, moveCursorUp, remove, appendBlock, first, last,
isSelected, focusConfig, focus, moveBlockUp, moveBlockDown, select, unselect } = this.props;
const { api, block, first, last, isSelected, focusConfig } = this.props;
const removePrevious = () => {
if ( ! block.caption ) {
remove();
api.remove();
}
};
const splitValue = ( left, right ) => {
change( { caption: left } );
appendBlock( {
api.change( { caption: left } );
api.appendBlock( {
blockType: 'text',
content: right
} );
Expand All @@ -37,7 +36,7 @@ export default class ImageBlockForm extends Component {
return (
<div className={ classNames( 'image-block__form', block.align ) }>
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
moveBlockUp={ api.moveBlockUp } moveBlockDown={ api.moveBlockDown } /> }
{ isSelected &&
<div className="block-list__block-controls">
<div className="block-list__block-controls-group">
Expand All @@ -46,25 +45,25 @@ export default class ImageBlockForm extends Component {
</div>
}
<div onClick={ () => {
select();
! focusConfig && focus();
api.select();
! focusConfig && api.focus();
} }>
<img src={ block.src } className="image-block__display" />
{ ( focusConfig || block.caption ) &&
<div className="image-block__caption">
<EnhancedInputComponent
moveCursorUp={ moveCursorUp }
moveCursorUp={ api.moveCursorUp }
removePrevious={ removePrevious }
moveCursorDown={ moveCursorDown }
moveCursorDown={ api.moveCursorDown }
splitValue={ splitValue }
value={ block.caption }
onChange={ ( value ) => {
change( { caption: value } );
unselect();
api.change( { caption: value } );
api.unselect();
} }
placeholder="Write caption"
focusConfig={ focusConfig }
onFocusChange={ focus }
onFocusChange={ api.focus }
/>
</div>
}
Expand Down
40 changes: 22 additions & 18 deletions tinymce-per-block/src/blocks/inline-text-block/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,13 @@ export default class InlineTextBlockForm extends Component {
return html;
};

const { block: { content }, remove, change, focus } = this.props;
focus( { end: true } );
remove( block.uid );
change( { content: getLeaves( content ) + getLeaves( block.content ) } );
setTimeout( () => this.editable.updateContent() );
const { api, block: { content, externalChange = 0 } } = this.props;
api.focus( { end: true } );
api.remove( block.uid );
api.change( {
content: getLeaves( content ) + getLeaves( block.content ),
externalChange: externalChange + 1
} );
}

bindEditable = ( ref ) => {
Expand All @@ -36,36 +38,38 @@ export default class InlineTextBlockForm extends Component {
};

render() {
const { block, change, moveCursorUp, moveCursorDown, appendBlock,
mergeWithPrevious, remove, setToolbarState, focus, focusConfig, unselect } = this.props;
const { api, block, setToolbarState, focusConfig } = this.props;

const splitValue = ( left, right ) => {
change( { content: left } );
setTimeout( () => this.editable.updateContent() );
api.change( {
content: left,
externalChange: ( block.externalChange || 0 ) + 1
} );
if ( right ) {
appendBlock( {
api.appendBlock( {
...block,
content: right
} );
} else {
appendBlock();
api.appendBlock();
}
};

return (
<EditableComponent
ref={ this.bindEditable }
content={ block.content }
moveCursorUp={ moveCursorUp }
moveCursorDown={ moveCursorDown }
externalChange={ block.externalChange }
moveCursorUp={ api.moveCursorUp }
moveCursorDown={ api.moveCursorDown }
splitValue={ splitValue }
mergeWithPrevious={ mergeWithPrevious }
remove={ remove }
onChange={ ( value ) => change( { content: value } ) }
mergeWithPrevious={ api.mergeWithPrevious }
remove={ api.remove }
onChange={ ( value ) => api.change( { content: value } ) }
setToolbarState={ setToolbarState }
focusConfig={ focusConfig }
onFocusChange={ focus }
onType={ unselect }
onFocusChange={ api.focus }
onType={ api.unselect }
inline
single
/>
Expand Down
Loading

0 comments on commit f9fce4d

Please sign in to comment.