Skip to content

Commit

Permalink
Add enter patterns
Browse files Browse the repository at this point in the history
  • Loading branch information
ellatrix committed Jul 3, 2017
1 parent 990e2fe commit 8dd67ac
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 56 deletions.
73 changes: 19 additions & 54 deletions blocks/editable/patterns.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* External dependencies
*/
import tinymce from 'tinymce';
import { find, get, escapeRegExp, trimStart } from 'lodash';
import { find, get, escapeRegExp, trimStart, partition } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -28,21 +28,15 @@ export default function( editor ) {
var VK = tinymce.util.VK;
var settings = editor.settings.wptextpattern || {};

const spacePatterns = getBlockTypes().reduce( ( acc, blockType ) => {
const patterns = getBlockTypes().reduce( ( acc, blockType ) => {
const transformsFrom = get( blockType, 'transforms.from', [] );
const transforms = transformsFrom.filter( ( { type } ) => type === 'pattern' );
return [ ...acc, ...transforms ];
}, [] );

var enterPatterns = settings.enter || [
// { start: '##', format: 'h2' },
// { start: '###', format: 'h3' },
// { start: '####', format: 'h4' },
// { start: '#####', format: 'h5' },
// { start: '######', format: 'h6' },
// { start: '>', format: 'blockquote' },
// { regExp: /^(-){3,}$/, element: 'hr' }
];
const [ enterPatterns, spacePatterns ] = partition( patterns, ( { regExp } ) =>
regExp.source.endsWith( '$' )
);

var inlinePatterns = settings.inline || [
{ delimiter: '`', format: 'code' }
Expand Down Expand Up @@ -209,6 +203,10 @@ export default function( editor ) {
}

function space() {
if ( ! onReplace ) {
return;
}

var rng = editor.selection.getRng(),
node = rng.startContainer,
parent,
Expand Down Expand Up @@ -243,60 +241,27 @@ export default function( editor ) {
}

function enter() {
var rng = editor.selection.getRng(),
start = rng.startContainer,
node = firstTextNode( start ),
i = enterPatterns.length,
text, pattern, parent;

if ( ! node ) {
if ( ! onReplace || ! inline ) {
return;
}

text = node.data;
// Merge text nodes.
editor.getBody().normalize();

while ( i-- ) {
if ( enterPatterns[ i ].start ) {
if ( text.indexOf( enterPatterns[ i ].start ) === 0 ) {
pattern = enterPatterns[ i ];
break;
}
} else if ( enterPatterns[ i ].regExp ) {
if ( enterPatterns[ i ].regExp.test( text ) ) {
pattern = enterPatterns[ i ];
break;
}
}
}
const content = getContent();

if ( ! pattern ) {
if ( ! content.length ) {
return;
}

if ( node === start && tinymce.trim( text ) === pattern.start ) {
const pattern = find( enterPatterns, ( { regExp } ) => regExp.test( content[ 0 ] ) )

if ( ! pattern ) {
return;
}

editor.once( 'keyup', function() {
editor.undoManager.add();

editor.undoManager.transact( function() {
if ( pattern.format ) {
editor.formatter.apply( pattern.format, {}, node );
node.replaceData( 0, node.data.length, trimStart( node.data.slice( pattern.start.length ) ) );
} else if ( pattern.element ) {
parent = node.parentNode && node.parentNode.parentNode;

if ( parent ) {
parent.replaceChild( document.createElement( pattern.element ), node.parentNode );
}
}
} );
const block = pattern.transform( { content } );

// We need to wait for native events to be triggered.
setTimeout( function() {
canUndo = 'enter';
} );
} );
editor.once( 'keyup', () => onReplace( [ block ] ) );
}
}
12 changes: 11 additions & 1 deletion blocks/library/code/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { __ } from 'i18n';
* Internal dependencies
*/
import './style.scss';
import { registerBlockType, query } from '../../api';
import { registerBlockType, query, createBlock } from '../../api';

const { prop } = query;

Expand All @@ -27,6 +27,16 @@ registerBlockType( 'core/code', {
content: prop( 'code', 'textContent' ),
},

transforms: {
from: [
{
type: 'pattern',
regExp: /^```$/,
transform: () => createBlock( 'core/code' ),
},
],
},

edit( { attributes, setAttributes, className } ) {
return (
<TextareaAutosize
Expand Down
9 changes: 9 additions & 0 deletions blocks/library/quote/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,15 @@ registerBlockType( 'core/quote', {
} );
},
},
{
type: 'pattern',
regExp: /^>\s/,
transform: ( { content } ) => {
return createBlock( 'core/quote', {
value: content,
} );
},
},
],
to: [
{
Expand Down
12 changes: 11 additions & 1 deletion blocks/library/separator/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { __ } from 'i18n';
* Internal dependencies
*/
import './block.scss';
import { registerBlockType } from '../../api';
import { registerBlockType, createBlock } from '../../api';

registerBlockType( 'core/separator', {
title: __( 'Separator' ),
Expand All @@ -16,6 +16,16 @@ registerBlockType( 'core/separator', {

category: 'layout',

transforms: {
from: [
{
type: 'pattern',
regExp: /^-{3,}$/,
transform: () => createBlock( 'core/separator' ),
},
],
},

edit( { className } ) {
return <hr className={ className } />;
},
Expand Down

0 comments on commit 8dd67ac

Please sign in to comment.