Skip to content

Commit

Permalink
Split text block on double enter
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed Apr 13, 2017
1 parent 5997ed7 commit 4d9eaef
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 25 deletions.
48 changes: 30 additions & 18 deletions blocks/components/editable/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { last } from 'lodash';

/**
* Internal dependencies
Expand Down Expand Up @@ -60,25 +61,36 @@ export default class Editable extends wp.element.Component {
}

onKeyDown( event ) {
if ( ! this.props.tagName && event.keyCode === 13 ) {
// Wait for the event to propagate
setTimeout( () => {
// Getting the content before and after the cursor
this.editor.selection.getStart();
const childNodes = Array.from( this.editor.getBody().childNodes );
const splitIndex = childNodes.indexOf( this.editor.selection.getStart() );
const getHtml = ( nodes ) => nodes.reduce( ( memo, node ) => memo + node.outerHTML, '' );
const beforeNodes = childNodes.slice( 0, splitIndex );
const before = getHtml( beforeNodes );
const after = getHtml( childNodes.slice( splitIndex ) );

// Splitting into two blocks
this.editor.setContent( this.props.value );
const hasAfter = !! childNodes.slice( splitIndex )
.reduce( ( memo, node ) => memo + node.textContent, '' );
this.props.onSplit( before, hasAfter ? after : '' );
} );
if ( this.props.tagName || event.keyCode !== 13 ) {
return;
}

// Wait for the event to propagate
setTimeout( () => {
// Getting the content before and after the cursor
this.editor.selection.getStart();
const childNodes = Array.from( this.editor.getBody().childNodes );
const splitIndex = childNodes.indexOf( this.editor.selection.getStart() );
const getHtml = ( nodes ) => nodes.reduce( ( memo, node ) => memo + node.outerHTML, '' );
const beforeNodes = childNodes.slice( 0, splitIndex );
const lastNodeBeforeCursor = last( beforeNodes );
// Avoid splitting on single enter
if (
! lastNodeBeforeCursor ||
lastNodeBeforeCursor.childNodes.length !== 1 ||
lastNodeBeforeCursor.firstChild.tagName !== 'BR'
) {
return;
}
const before = getHtml( beforeNodes.slice( 0, beforeNodes.length - 1 ) );
const after = getHtml( childNodes.slice( splitIndex ) );

// Splitting into two blocks
this.editor.setContent( this.props.value );
const hasAfter = !! childNodes.slice( splitIndex )
.reduce( ( memo, node ) => memo + node.textContent, '' );
this.props.onSplit( before, hasAfter ? after : '' );
} );
}

bindNode( ref ) {
Expand Down
9 changes: 5 additions & 4 deletions blocks/library/text/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ registerBlock( 'core/text', {
category: 'common',

attributes: {
content: html( 'p' ),
align: prop( 'p', 'style.textAlign' )
content: html( 'div' ),
align: prop( 'div', 'style.textAlign' )
},

controls: [
Expand Down Expand Up @@ -76,9 +76,10 @@ registerBlock( 'core/text', {
const { align, content } = attributes;

return (
<p
<div
style={ align ? { textAlign: align } : null }
dangerouslySetInnerHTML={ { __html: content } } />
dangerouslySetInnerHTML={ { __html: content } }
/>
);
}
} );
6 changes: 3 additions & 3 deletions post-content.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ window._wpGutenbergPost = {
'<!-- /wp:core/heading -->',

'<!-- wp:core/text -->',
'<p>I imagine prior to the launch of the iPod, or the iPhone, there were teams saying the same thing: the copy + paste guys are <em>so close</em> to being ready and we know Walt Mossberg is going to ding us for this so let\'s just not ship to the manufacturers in China for just a few more weeks… The Apple teams were probably embarrassed. But <strong>if you\'re not embarrassed when you ship your first version you waited too long</strong>.</p>',
'<div><p>I imagine prior to the launch of the iPod, or the iPhone, there were teams saying the same thing: the copy + paste guys are <em>so close</em> to being ready and we know Walt Mossberg is going to ding us for this so let\'s just not ship to the manufacturers in China for just a few more weeks… The Apple teams were probably embarrassed. But <strong>if you\'re not embarrassed when you ship your first version you waited too long</strong>.</p></div>',
'<!-- /wp:core/text -->',

'<!-- wp:core/image -->',
'<figure><img src="https://cldup.com/Bc9YxmqFnJ.jpg" /></figure>',
'<!-- /wp:core/image -->',

'<!-- wp:core/text -->',
'<p>A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.</p>',
'<div><p>A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.</p></div>',
'<!-- /wp:core/text -->',

'<!-- wp:core/quote -->',
Expand All @@ -29,7 +29,7 @@ window._wpGutenbergPost = {
'<!-- /wp:core/image -->',

'<!-- wp:core/text -->',
'<p>By shipping early and often you have the unique competitive advantage of hearing from real people what they think of your work, which in best case helps you anticipate market direction, and in worst case gives you a few people rooting for you that you can email when your team pivots to a new idea. Nothing can recreate the crucible of real usage.</p>',
'<div><p>By shipping early and often you have the unique competitive advantage of hearing from real people what they think of your work, which in best case helps you anticipate market direction, and in worst case gives you a few people rooting for you that you can email when your team pivots to a new idea. Nothing can recreate the crucible of real usage.</p></div>',
'<!-- /wp:core/text -->',

'<!-- wp:core/list -->',
Expand Down

0 comments on commit 4d9eaef

Please sign in to comment.