Redo link pasting

WordPress · Nov 3, 2017 · abd8156 · abd8156
1 parent be28294
commit abd8156
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 31 deletions.
diff --git a/blocks/api/raw-handling/index.js b/blocks/api/raw-handling/index.js
@@ -124,6 +124,10 @@ export default function rawHandler( { HTML, plainText = '', mode = 'AUTO' } ) {
 					return acc;
 				}
 
+				if ( transform.transform ) {
+					return transform.transform( node );
+				}
+
 				return createBlock(
 					blockType.name,
 					getBlockAttributes(

diff --git a/blocks/api/raw-handling/test/index.js b/blocks/api/raw-handling/test/index.js
@@ -12,7 +12,7 @@ import { createBlock } from '../../factory';
 import { children, prop } from '../../source';
 
 describe( 'rawHandler', () => {
-	beforeAll( () => {
+	it( 'should convert recognised raw content', () => {
 		registerBlockType( 'test/figure', {
 			category: 'common',
 			title: 'test figure',
@@ -33,6 +33,16 @@ describe( 'rawHandler', () => {
 			save: () => {},
 		} );
 
+		const block = rawHandler( { HTML: '<figure>test</figure>' } )[ 0 ];
+		const { name, attributes } = createBlock( 'test/figure', { content: [ 'test' ] } );
+
+		equal( block.name, name );
+		deepEqual( block.attributes, attributes );
+
+		unregisterBlockType( 'test/figure' );
+	} );
+
+	it( 'should handle unknown raw content', () => {
 		registerBlockType( 'test/unknown', {
 			category: 'common',
 			title: 'test unknown',
@@ -44,29 +54,44 @@ describe( 'rawHandler', () => {
 			},
 			save: () => {},
 		} );
-
 		setUnknownTypeHandlerName( 'test/unknown' );
-	} );
 
-	afterAll( () => {
-		unregisterBlockType( 'test/figure' );
+		const block = rawHandler( { HTML: '<figcaption>test</figcaption>' } )[ 0 ];
+
+		equal( block.name, 'test/unknown' );
+		equal( block.attributes.content, '<figcaption>test</figcaption>' );
+
 		unregisterBlockType( 'test/unknown' );
 		setUnknownTypeHandlerName( undefined );
 	} );
 
-	it( 'should convert recognised raw content', () => {
-		const block = rawHandler( { HTML: '<figure>test</figure>' } )[ 0 ];
-		const { name, attributes } = createBlock( 'test/figure', { content: [ 'test' ] } );
+	it( 'should handle raw content with transform', () => {
+		registerBlockType( 'test/transform', {
+			category: 'common',
+			title: 'test figure',
+			attributes: {
+				content: {
+					type: 'array',
+				},
+			},
+			transforms: {
+				from: [
+					{
+						type: 'raw',
+						isMatch: ( node ) => node.nodeName === 'FIGURE',
+						transform: ( node ) => createBlock( 'test/transform', { content: node.nodeName } ),
+					},
+				],
+			},
+			save: () => {},
+		} );
 
-		equal( block.name, name );
-		deepEqual( block.attributes, attributes );
-	} );
+		const block = rawHandler( { HTML: '<figure>test</figure>' } )[ 0 ];
 
-	it( 'should handle unknown raw content', () => {
-		const block = rawHandler( { HTML: '<figcaption>test</figcaption>' } )[ 0 ];
+		equal( block.name, 'test/transform' );
+		equal( block.attributes.content, 'FIGURE' );
 
-		equal( block.name, 'test/unknown' );
-		equal( block.attributes.content, '<figcaption>test</figcaption>' );
+		unregisterBlockType( 'test/transform' );
 	} );
 
 	it( 'should filter inline content', () => {

diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -248,11 +248,42 @@ export default class Editable extends Component {
 		window.console.log( 'Received HTML:\n\n', event.content );
 		window.console.log( 'Received plain text:\n\n', this.pastedPlainText );
 
+		// There is a selection, check if a link is pasted.
+		if ( ! this.editor.selection.isCollapsed() ) {
+			const linkRegExp = /^(?:https?:)?\/\/\S+$/i;
+			const pastedText = event.content.replace( /<[^>]+>/g, '' ).trim();
+			const selectedText = this.editor.selection.getContent().replace( /<[^>]+>/g, '' ).trim();
+
+			// The pasted text is a link, and the selected text is not.
+			if ( linkRegExp.test( pastedText ) && ! linkRegExp.test( selectedText ) ) {
+				this.editor.execCommand( 'mceInsertLink', false, {
+					href: this.editor.dom.decode( pastedText ),
+				} );
+
+				// Allows us to ask for this information when we get a report.
+				window.console.log( 'Created link:\n\n', pastedText );
+
+				event.preventDefault();
+
+				return;
+			}
+		}
+
+		const rootNode = this.editor.getBody();
+		const isEmpty = this.editor.dom.isEmpty( rootNode );
+
+		let mode = 'INLINE';
+
+		if ( isEmpty && this.props.onReplace ) {
+			mode = 'BLOCKS';
+		} else if ( this.props.onSplit ) {
+			mode = 'AUTO';
+		}
+
 		const content = rawHandler( {
 			HTML: event.content,
 			plainText: this.pastedPlainText,
-			// Force inline paste if there's no `onSplit` prop.
-			mode: this.props.onSplit ? 'AUTO' : 'INLINE',
+			mode,
 		} );
 
 		if ( typeof content === 'string' ) {
@@ -266,9 +297,7 @@ export default class Editable extends Component {
 				return;
 			}
 
-			const rootNode = this.editor.getBody();
-
-			if ( this.editor.dom.isEmpty( rootNode ) && this.props.onReplace ) {
+			if ( isEmpty && this.props.onReplace ) {
 				this.props.onReplace( content );
 			} else {
 				this.splitContent( content );

diff --git a/blocks/editable/patterns.js b/blocks/editable/patterns.js
@@ -29,7 +29,6 @@ export default function( editor ) {
 	const settings = editor.settings.wptextpattern || {};
 
 	const {
-		paste: pastePatterns,
 		enter: enterPatterns,
 		undefined: spacePatterns,
 	} = groupBy( getBlockTypes().reduce( ( acc, blockType ) => {
@@ -48,10 +47,6 @@ export default function( editor ) {
 		canUndo = null;
 	} );
 
-	editor.on( 'pastepostprocess', () => {
-		setTimeout( () => searchFirstText( pastePatterns ) );
-	} );
-
 	editor.on( 'keydown', function( event ) {
 		const { keyCode } = event;
 

diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -250,12 +250,11 @@ registerBlockType(
 		transforms: {
 			from: [
 				{
-					type: 'pattern',
-					trigger: 'paste',
-					regExp: /^\s*(https?:\/\/\S+)\s*/i,
-					transform: ( { match } ) => {
+					type: 'raw',
+					isMatch: ( node ) => node.nodeName === 'P' && /^\s*(https?:\/\/\S+)\s*/i.test( node.textContent ),
+					transform: ( node ) => {
 						return createBlock( 'core/embed', {
-							url: match[ 1 ],
+							url: node.textContent.trim(),
 						} );
 					},
 				},

diff --git a/blocks/library/index.js b/blocks/library/index.js
@@ -1,4 +1,3 @@
-import './paragraph';
 import './image';
 import './gallery';
 import './heading';
@@ -22,3 +21,4 @@ import './text-columns';
 import './verse';
 import './video';
 import './audio';
+import './paragraph';