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

Jump to bottom

Embed URLs on paste from text block #2192

Merged
merged 4 commits into from
Aug 4, 2017
Merged

Embed URLs on paste from text block #2192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bafd01d
Embed URLs on paste from text block
ellatrix Aug 3, 2017
29a84f3
Attempt to embed all URLs
ellatrix Aug 4, 2017
aec2017
Split enter and space patterns
ellatrix Aug 4, 2017
f8e6208
Allow non-https URLs
ellatrix Aug 4, 2017
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
25 changes: 14 additions & 11 deletions blocks/editable/patterns.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 tinymce from 'tinymce';
import { endsWith, find, get, escapeRegExp, partition, drop } from 'lodash';
import { find, get, escapeRegExp, groupBy, drop } from 'lodash';

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

const patterns = getBlockTypes().reduce( ( acc, blockType ) => {
const {
paste: pastePatterns,
enter: enterPatterns,
undefined: spacePatterns,
} = groupBy( getBlockTypes().reduce( ( acc, blockType ) => {
const transformsFrom = get( blockType, 'transforms.from', [] );
const transforms = transformsFrom.filter( ( { type } ) => type === 'pattern' );
return [ ...acc, ...transforms ];
}, [] );

const [ enterPatterns, spacePatterns ] = partition(
patterns,
( { regExp } ) => endsWith( regExp.source, '$' ),
);
}, [] ), 'trigger' );

const inlinePatterns = settings.inline || [
{ delimiter: '`', format: 'code' },
Expand All @@ -49,6 +48,10 @@ export default function( editor ) {
canUndo = null;
} );

editor.on( 'pastepostprocess', () => {
setTimeout( () => searchFirstText( pastePatterns ) );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the setTimeout here (and the more recent inline handling), we need to make sure that the editor still exists in searchFirstText, since because it is called asynchronously, the editor might be removed in the time since scheduled. I discovered this in my own work (caused by an unrelated bug), but was difficult to track down the cause of the error'ing that occurs here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I noticed some issues too in another PR. While this specific line has been removed, it's still an issue in the keydown event callback.

} );

editor.on( 'keydown', function( event ) {
const { keyCode } = event;

Expand All @@ -66,7 +69,7 @@ export default function( editor ) {
enter();
// Wait for the browser to insert the character.
} else if ( keyCode === SPACE ) {
setTimeout( space );
setTimeout( () => searchFirstText( spacePatterns ) );
} else if ( keyCode > 47 && ! ( keyCode >= 91 && keyCode <= 93 ) ) {
setTimeout( inline );
}
Expand Down Expand Up @@ -172,7 +175,7 @@ export default function( editor ) {
} );
}

function space() {
function searchFirstText( patterns ) {
if ( ! onReplace ) {
return;
}
Expand All @@ -188,7 +191,7 @@ export default function( editor ) {

const firstText = content[ 0 ];

const { result, pattern } = spacePatterns.reduce( ( acc, item ) => {
const { result, pattern } = patterns.reduce( ( acc, item ) => {
return acc.result ? acc : {
result: item.regExp.exec( firstText ),
pattern: item,
Expand Down
1 change: 1 addition & 0 deletions blocks/library/code/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ registerBlockType( 'core/code', {
from: [
{
type: 'pattern',
trigger: 'enter',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside: These patterns are hard to discover. Didn't realize I had to Shift+Enter to trigger the transform.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They're broken in master. I need to fix it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Should work en plain enter.)

regExp: /^```$/,
transform: () => createBlock( 'core/code' ),
},
Expand Down
20 changes: 18 additions & 2 deletions blocks/library/embed/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { addQueryArgs } from '../../../editor/utils/url';
* Internal dependencies
*/
import './style.scss';
import { registerBlockType, query } from '../../api';
import { registerBlockType, query, createBlock } from '../../api';
import Editable from '../../editable';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
Expand All @@ -28,7 +28,7 @@ const { attr, children } = query;
// These embeds do not work in sandboxes
const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];

function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
function getEmbedBlockSettings( { title, icon, category = 'embed', transforms } ) {
return {
title: __( title ),

Expand All @@ -41,6 +41,8 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
caption: children( 'figcaption' ),
},

transforms,

getEditWrapperProps( attributes ) {
const { align } = attributes;
if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
Expand Down Expand Up @@ -222,6 +224,20 @@ registerBlockType(
getEmbedBlockSettings( {
title: 'Embed',
icon: 'video-alt3',
transforms: {
from: [
{
type: 'pattern',
trigger: 'paste',
regExp: /^\s*(https?:\/\/\S+)\s*/i,
transform: ( { match } ) => {
return createBlock( 'core/embed', {
url: match[ 1 ],
} );
},
},
],
},
} )
);

Expand Down
1 change: 1 addition & 0 deletions blocks/library/separator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ registerBlockType( 'core/separator', {
from: [
{
type: 'pattern',
trigger: 'enter',
regExp: /^-{3,}$/,
transform: () => createBlock( 'core/separator' ),
},
Expand Down