From b93186194db48304c0d48b8b745cf17eb31dbde9 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 10 Oct 2023 12:40:02 +0300 Subject: [PATCH 1/4] Link format: auto link pasted urls --- packages/format-library/src/link/index.js | 24 +++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js index 9faa90628e3c3b..2dd34efb2caaa1 100644 --- a/packages/format-library/src/link/index.js +++ b/packages/format-library/src/link/index.js @@ -9,6 +9,8 @@ import { removeFormat, slice, isCollapsed, + insert, + create, } from '@wordpress/rich-text'; import { isURL, isEmail } from '@wordpress/url'; import { @@ -135,10 +137,6 @@ export const link = { rel: 'rel', }, __unstablePasteRule( value, { html, plainText } ) { - if ( isCollapsed( value ) ) { - return value; - } - const pastedText = ( html || plainText ) .replace( /<[^>]+>/g, '' ) .trim(); @@ -152,12 +150,26 @@ export const link = { // Allows us to ask for this information when we get a report. window.console.log( 'Created link:\n\n', pastedText ); - return applyFormat( value, { + const format = { type: name, attributes: { url: decodeEntities( pastedText ), }, - } ); + }; + + if ( isCollapsed( value ) ) { + return insert( + value, + applyFormat( + create( { text: plainText } ), + format, + 0, + plainText.length + ) + ); + } + + return applyFormat( value ); }, edit: Edit, }; From e9c36488d73e88ff152e8bc989813646e0ff976f Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 10 Oct 2023 12:48:00 +0300 Subject: [PATCH 2/4] Add e2e test --- .../editor/various/copy-cut-paste.spec.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js index 2a2fd95636e7fa..34f5168f02ddf9 100644 --- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js +++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js @@ -520,6 +520,29 @@ test.describe( 'Copy/cut/paste', () => { ] ); } ); + test( 'should auto-link', async ( { pageUtils, editor } ) => { + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { + content: '', + }, + } ); + pageUtils.setClipboardData( { + plainText: 'https://wordpress.org/gutenberg', + html: 'https://wordpress.org/gutenberg', + } ); + await pageUtils.pressKeys( 'primary+v' ); + expect( await editor.getBlocks() ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { + content: + 'https://wordpress.org/gutenberg', + }, + }, + ] ); + } ); + test( 'should not link selection for non http(s) protocol', async ( { pageUtils, editor, From 870f5948b9b6f6581e801131cdb6ab0e7f0ac7b3 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 10 Oct 2023 14:18:55 +0300 Subject: [PATCH 3/4] Fix paste on embed --- .../components/rich-text/use-paste-handler.js | 45 +++++++++---------- packages/format-library/src/link/index.js | 2 +- .../editor/various/copy-cut-paste.spec.js | 19 +++++--- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/use-paste-handler.js b/packages/block-editor/src/components/rich-text/use-paste-handler.js index 75a58bffd9aee1..3d24906abddd97 100644 --- a/packages/block-editor/src/components/rich-text/use-paste-handler.js +++ b/packages/block-editor/src/components/rich-text/use-paste-handler.js @@ -56,26 +56,6 @@ export function usePasteHandler( props ) { return; } - const transformed = formatTypes.reduce( - ( accumlator, { __unstablePasteRule } ) => { - // Only allow one transform. - if ( __unstablePasteRule && accumlator === value ) { - accumlator = __unstablePasteRule( value, { - html, - plainText, - } ); - } - - return accumlator; - }, - value - ); - - if ( transformed !== value ) { - onChange( transformed ); - return; - } - const isInternal = event.clipboardData.getData( 'rich-text' ) === 'true'; @@ -160,9 +140,28 @@ export function usePasteHandler( props ) { } ); if ( typeof content === 'string' ) { - const valueToInsert = create( { html: content } ); - addActiveFormats( valueToInsert, value.activeFormats ); - onChange( insert( value, valueToInsert ) ); + const transformed = formatTypes.reduce( + ( accumlator, { __unstablePasteRule } ) => { + // Only allow one transform. + if ( __unstablePasteRule && accumlator === value ) { + accumlator = __unstablePasteRule( value, { + html, + plainText, + } ); + } + + return accumlator; + }, + value + ); + + if ( transformed !== value ) { + onChange( transformed ); + } else { + const valueToInsert = create( { html: content } ); + addActiveFormats( valueToInsert, value.activeFormats ); + onChange( insert( value, valueToInsert ) ); + } } else if ( content.length > 0 ) { if ( onReplace && isEmpty( value ) ) { onReplace( content, content.length - 1, -1 ); diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js index 2dd34efb2caaa1..ab287daff19a73 100644 --- a/packages/format-library/src/link/index.js +++ b/packages/format-library/src/link/index.js @@ -169,7 +169,7 @@ export const link = { ); } - return applyFormat( value ); + return applyFormat( value, format ); }, edit: Edit, }; diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js index 34f5168f02ddf9..a9aa252ccef900 100644 --- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js +++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js @@ -521,12 +521,7 @@ test.describe( 'Copy/cut/paste', () => { } ); test( 'should auto-link', async ( { pageUtils, editor } ) => { - await editor.insertBlock( { - name: 'core/paragraph', - attributes: { - content: '', - }, - } ); + await editor.insertBlock( { name: 'core/paragraph' } ); pageUtils.setClipboardData( { plainText: 'https://wordpress.org/gutenberg', html: 'https://wordpress.org/gutenberg', @@ -543,6 +538,18 @@ test.describe( 'Copy/cut/paste', () => { ] ); } ); + test( 'should embed on paste', async ( { pageUtils, editor } ) => { + await editor.insertBlock( { name: 'core/paragraph' } ); + pageUtils.setClipboardData( { + plainText: 'https://www.youtube.com/watch?v=FcTLMTyD2DU', + html: 'https://www.youtube.com/watch?v=FcTLMTyD2DU', + } ); + await pageUtils.pressKeys( 'primary+v' ); + expect( await editor.getBlocks() ).toMatchObject( [ + { name: 'core/embed' }, + ] ); + } ); + test( 'should not link selection for non http(s) protocol', async ( { pageUtils, editor, From 6e75d69168ce24451e0159ac240ad4dede4d6051 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 10 Oct 2023 15:09:33 +0300 Subject: [PATCH 4/4] Adjust test after embed adjustment --- test/e2e/specs/editor/various/copy-cut-paste.spec.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js index a9aa252ccef900..04113e013930b0 100644 --- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js +++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js @@ -500,9 +500,7 @@ test.describe( 'Copy/cut/paste', () => { test( 'should link selection', async ( { pageUtils, editor } ) => { await editor.insertBlock( { name: 'core/paragraph', - attributes: { - content: 'a', - }, + attributes: { content: 'a' }, } ); await pageUtils.pressKeys( 'primary+a' ); pageUtils.setClipboardData( { @@ -521,7 +519,10 @@ test.describe( 'Copy/cut/paste', () => { } ); test( 'should auto-link', async ( { pageUtils, editor } ) => { - await editor.insertBlock( { name: 'core/paragraph' } ); + await editor.insertBlock( { + name: 'core/paragraph', + attributes: { content: 'a' }, + } ); pageUtils.setClipboardData( { plainText: 'https://wordpress.org/gutenberg', html: 'https://wordpress.org/gutenberg', @@ -532,7 +533,7 @@ test.describe( 'Copy/cut/paste', () => { name: 'core/paragraph', attributes: { content: - 'https://wordpress.org/gutenberg', + 'https://wordpress.org/gutenberga', }, }, ] );