Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TinyMCE per block: Small tweaks #244

Merged
merged 1 commit into from
Mar 11, 2017
Merged

TinyMCE per block: Small tweaks #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions tinymce-per-block/build/app.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 1 addition & 5 deletions tinymce-per-block/src/blocks/html-block/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,7 @@ export default class HtmlBlockForm extends Component {
render() {
const { api, block, isSelected, first, last, focusConfig } = this.props;
const splitValue = ( left, right ) => {
api.change( {
content: left,
externalChange: ( block.externalChange || 0 ) + 1
} );
api.change( { content: left } );
if ( right ) {
api.appendBlock( {
...block,
Expand Down Expand Up @@ -65,7 +62,6 @@ export default class HtmlBlockForm extends Component {
<EditableComponent
ref={ this.bindEditable }
content={ block.content }
externalChange={ block.externalChange }
moveCursorUp={ api.moveCursorUp }
moveCursorDown={ api.moveCursorDown }
splitValue={ splitValue }
Expand Down
3 changes: 1 addition & 2 deletions tinymce-per-block/src/blocks/html-block/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@ registerBlock( 'html', {
const currentBlock = state.blocks[ index ];
const blockToMerge = state.blocks[ index + 1 ];
const newBlock = Object.assign( {}, currentBlock, {
content: currentBlock.content + blockToMerge.content,
externalChange: ( currentBlock.externalChange || 0 ) + 1
content: currentBlock.content + blockToMerge.content
} );
const newBlocks = [
...state.blocks.slice( 0, index ),
Expand Down
6 changes: 1 addition & 5 deletions tinymce-per-block/src/blocks/inline-text-block/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,7 @@ export default class InlineTextBlockForm extends Component {
const { api, block, setToolbarState, focusConfig } = this.props;

const splitValue = ( left, right ) => {
api.change( {
content: left,
externalChange: ( block.externalChange || 0 ) + 1
} );
api.change( { content: left } );
if ( right ) {
api.appendBlock( {
...block,
Expand All @@ -35,7 +32,6 @@ export default class InlineTextBlockForm extends Component {
<EditableComponent
ref={ this.bindEditable }
content={ block.content }
externalChange={ block.externalChange }
moveCursorUp={ api.moveCursorUp }
moveCursorDown={ api.moveCursorDown }
splitValue={ splitValue }
Expand Down
7 changes: 1 addition & 6 deletions tinymce-per-block/src/blocks/quote-block/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,7 @@ export default class QuoteBlockForm extends Component {
render() {
const { api, block, first, last, isSelected, focusConfig } = this.props;
const splitValue = ( left, right ) => {
api.change( {
cite: left,
citeExternalChange: ( block.citeExternalChange || 0 ) + 1
} );
api.change( { cite: left } );
api.appendBlock( {
blockType: 'text',
content: right
Expand Down Expand Up @@ -100,7 +97,6 @@ export default class QuoteBlockForm extends Component {
<EditableComponent
ref={ this.bindContent }
content={ block.content }
externalChange={ block.externalChange }
moveCursorUp={ api.moveCursorUp }
moveCursorDown={ this.moveToCite }
mergeWithPrevious={ api.mergeWithPrevious }
Expand All @@ -122,7 +118,6 @@ export default class QuoteBlockForm extends Component {
mergeWithPrevious={ this.moveToContent }
remove={ this.moveToContent }
content={ block.cite }
externalChange={ block.citeExternalChange }
splitValue={ splitValue }
onChange={ ( value ) => api.change( { cite: value } ) }
setToolbarState={ focusInput === 'cite' ? this.setToolbarState : undefined }
Expand Down
5 changes: 4 additions & 1 deletion tinymce-per-block/src/blocks/text-block/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,10 @@ registerBlock( 'text', {
const content = div.childNodes.length === 1 && div.firstChild.nodeName === 'P'
? div.firstChild.innerHTML
: block.content;
const rawContent = `<p style="text-align: ${ block.align };">${ content }</p>`;
const alignStyle = block.align && block.align !== 'no-align'
? ` style="text-align: ${ block.align };"`
: '';
const rawContent = `<p${ alignStyle }>${ content }</p>`;

return {
blockType: 'text',
Expand Down
16 changes: 10 additions & 6 deletions tinymce-per-block/src/external/wp-blocks/editable/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,14 @@ export default class EditableComponent extends Component {

updateContent() {
// This could not be called on each content change, it used to change the cursor position
const bookmark = this.editor.selection.getBookmark( 2, true );
let bookmark;
if ( this.props.focusConfig ) {
bookmark = this.editor.selection.getBookmark( 2, true );
}
this.editor.setContent( this.props.content );
this.editor.selection.moveToBookmark( bookmark );
if ( this.props.focusConfig ) {
this.editor.selection.moveToBookmark( bookmark );
}
}

executeCommand = ( ...args ) => {
Expand All @@ -70,9 +75,7 @@ export default class EditableComponent extends Component {
this.focus();
}

// We should be able to compare content instead
// But I came up with externalChange due the moving cursor bugs when spitting/merging content
if ( this.props.externalChange !== prevProps.externalChange ) {
if ( this.props.content !== prevProps.content ) {
this.updateContent();
}
}
Expand Down Expand Up @@ -143,6 +146,7 @@ export default class EditableComponent extends Component {
const after = getHtml( childNodes.slice( splitIndex ) );
const hasAfter = !! childNodes.slice( splitIndex )
.reduce( ( memo, node ) => memo + node.textContent, '' );
this.editor.setContent( this.props.content );
if ( before ) {
this.props.splitValue( before, hasAfter ? after : '' );
}
Expand Down Expand Up @@ -202,7 +206,7 @@ export default class EditableComponent extends Component {
this.editor = editor;

editor.on( 'init', this.onInit );
editor.on( 'change focusout undo redo', this.onChange );
editor.on( 'focusout undo redo', this.onChange );
editor.on( 'keydown', this.onKeyDown );
editor.on( 'paste', this.onPaste );
editor.on( 'nodechange', this.syncToolbar );
Expand Down
2 changes: 1 addition & 1 deletion tinymce-per-block/src/renderers/block/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { createElement, Component } from 'wp-elements';
import { map, debounce } from 'lodash';
import { map, debounce, isEqual } from 'lodash';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import { getBlock } from 'wp-blocks';
Expand Down
4 changes: 2 additions & 2 deletions tinymce-per-block/src/renderers/block/updater.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const blockLevelUpdater = ( state, command ) => {
},

append: ( { block: commandBlock } ) => {
const createdBlock = commandBlock ? commandBlock : { blockType: 'text', content: ' ' };
const createdBlock = commandBlock ? commandBlock : { blockType: 'text', content: '' };
const appenedBlockId = uniqueId();
const newBlocks = [
...state.blocks.slice( 0, currentIndex + 1 ),
Expand Down Expand Up @@ -92,7 +92,7 @@ const blockLevelUpdater = ( state, command ) => {
moveCursorDown: () => {
const nextBlock = state.blocks[ currentIndex + 1 ];
return mergeStates( {
focus: nextBlock ? { uid: nextBlock.uid, config: { end: true } } : state.focus,
focus: nextBlock ? { uid: nextBlock.uid, config: { start: true } } : state.focus,
selected: null
} );
},
Expand Down
1 change: 0 additions & 1 deletion tinymce-per-block/src/utils/state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export const mergeInlineTextBlocks = ( state, index ) => {
const blockToMerge = state.blocks[ index + 1 ];
const newBlock = Object.assign( {}, currentBlock, {
content: getLeaves( currentBlock.content ) + getLeaves( blockToMerge.content ),
externalChange: ( currentBlock.externalChange || 0 ) + 1
} );
const newBlocks = [
...state.blocks.slice( 0, index ),
Expand Down